交互设计原理与方法23图标的分裂.pptxVIP

3.从原型到页面视觉设计

3.1情绪板

3.1.1情绪板的概念与作用

3.1.2情绪版的制作

3.2界面版式设计

3.2.1信息层级设计

3.2.2界面信息规划

3.2.3界面色彩运用

3.3图标设计

3.3.1什么是图标设计

3.3.2图标的作用

3.3.3图标的分类

3.3.4图标设计的原则;

在交互设计中，理解图标的角度不同，其也具有相应不同的归类方法。如果我们从象征意义的角度来看

可以将其分为具象型图标和抽象形图标（右图）。如果我们从功能使用的角度分类，那么图标可以分为，说明性图标（左图），交互性图标（中图）。如果从视觉设计的角度切入，我们则可以将其分为线形图标，面型图标，线面结合型图标。;

(阿里巴巴官方图库)

线型图标通过简化的线性图形将含义准确，直接的传递给使用者。此类图标更重视功能的强调，例如常

见的“返回”以及“添加”按钮。由于图标采用纯线型的设计，导致视觉重量相比较而言偏轻，因此线型图标不会抢走视觉中心的位置，可以很好的融入页面的整体设计中。;

(豆瓣APP)

相较线型图标而言，面型的图标在简洁的基础上则拥有较大的视觉重量感，因此而具有更强的视觉冲击

力。这类图标起到了突出其重要性的作用，因此常用于展现较高信息层级的内容。例如部分产品会使用线型作为未选中状态而面型作为选中状态从而产生强有力的视觉对比，使得用户明确了解自