图标设计高保真交互界面设计65课件.pptxVIP

图标设计高保真交互界面设计上海工艺美术职业学院沈瑞月

CONTENTS目录图标设计流程DesignFlow图标分类Iconclassification图标设计原则DesignPrinciples图标设计规范SpecificatioPARTONE设计流程

设计流程

PARTTWO图标分类应用图标交互图标解释图标装饰图标

应用图标应用图标是移动APP产品的标志，是产品的代表符号。用在各个操作系统平台的应用市场，是用户下载时候识别产品的符号，也是产品宣传的主要视觉象征，在使用过程中位于移动端的主界面，用户点击即可进入对应的产品。

交互图标交互图标在界面设计中不仅是某个对象和概念的视觉符号，还是交互操作的关键部件，是导航系统不可或缺的组成部分。这类图标可以被点击，并随之响应，帮助用户执行特定的操作，触发相应的功能。因此这类图标在移动端一般具有正常、点击、不可用三种状态。

解释图标解释图标主要是为了表达所代表功能、内容和信息的含义，点击不会有反馈，但是可以帮助用户快速理解信息，同时也可以提高界面的美观、可用性和用户体验，如设置界面每行list前面的小图标。

装饰图标通常是用来提升整个界面的美感和视觉体验，并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备特定风格的外观，并且提升了整个设计的可靠性和可信度。更准确地说，这些装饰图标不仅可以吸引并留住用户，并且可以让整个用户体验更加积极。装饰图标

PARTTHREE图标设计原则可用性原则统一性原则差异性原则间接性原则

可用性原则图标的可用性是指能够被用户轻松识别并完成点击、导航等功能。图标在界面设计中为用户搭建了从真实世界到虚拟世界的映射关系，所以满足图标的可用性是最基本的原则。

同一款产品的图标设计要做到风格统一，包括图标的造型、线条、角度、投影、配色等都要做好统一，这样界面会比较整齐，易于识别，也让界面整体效果统一规范。统一性原则统一性原则

界面设计中有大量的图标，根据功能模块和导航模块的不同，在同一个模块中会出现相同规格的图标，这时候既要保证同一个模块图标设计的统一性，也要保证差异性，以保证图标的识别性。差异性原则

图标是某个对象的视觉符号，而且要指引用户操作，所以图标的意义一定要清晰明了，便于理解，图标要采用简单的造型表达清晰的概念，界面设计需要适配不同操作系统、不同尺寸设备等多种规格，因此图标设计应该尽量做到简单，便于用户认知的同时还要方便多尺寸的适配设计。简洁性原则

PARTFOUR图标设计规范图标精确到像素图标尺寸规范视觉大小统一

图标设计是界面设计的组件，也是以像素为单位的位图，而且图标的尺寸一般都比较小，在设计的时候一定要精确到每一个像素，如果直线的边缘没有处理好就会出现半个像素的情况，用户看起来图标就是模糊的，这个在图标设计的时候一定要避免，设计完了以后要在Photoshop里面放大进行像素微调，保证图标边缘设计的精确度，避免模糊，影响界面效果。图标精确到像素

界面设计需要适配不同的系统平台和不同的屏幕尺寸，所以在设计的过程中图标的尺寸有一定的规范，iOS和Android两个操作系统的图标尺寸都具有明确的设计规范，归纳起来图标的尺寸主要有16×16、24×24、32×32、48×48、64×64、96×96、128×128、144×144、256×256、512×512。图标尺寸规范

视觉大小统一同一个功能模块的图标要保持设计的统一性，尤其是图标的大小，如果不统会让界面看起来比较混乱，缺乏规则和识别性，而且界面当中图标的大小也往往具有一定的功能含义。具体设计过程中图标的统一性要以眼睛看到的为准，例如相同尺寸的图标大小，方形图标会比圆形图标看起来更大一些，这个时候就要根据眼睛实际看到的效果进行微调。

谢谢观看高保真交互界面设计上海工艺美术职业学院沈瑞月