中国传媒大学-用户体验与UI交互设计-课件-知识点5.6 界面中的图标设计技巧.pptxVIP

交互式界面设计 西安邮电大学 数字艺术学院 知识点5.6 界面中的图标设计技巧 PART 01 引言 目录 CONTENTS PART 02 使用图标的 优势 PART 03 启动图标 设计技巧 PART 04 工具栏图标 设计技巧 01 03 04 引言 01 引言 随着科技的发展与网络的普及，人们的生活重心开始转向网络电子平台，平台上有众多程序等待我们开启与体验。 网络电子平台 科技 网络 引言 图标是我们开启一个程序的第一步，因此图标设计的好坏直接影响到我们是否有兴趣打开这个程序。 图标的概念 图标，英文译作 Icon，起源于希腊语“eikon”，原意为图像，字典中称为宗教图腾，源自古代宗教，希腊语中也常常被翻译成简笔画、绘画和图形符号。 Icon eikon 原意 字典 希腊语 翻译 广义：图标是用来表达意义的图形符号。 图标的概念 狭义：指显示在移动设备屏幕上表示命令、程序的符号。 图标的概念 使用图标的优势 02 使用图标的优势 启动图标设计技巧 03 启动图标设计流程 启动图标可以是夸张的，可以是可爱的，也可以是神秘的，总之，设计师有责任让它变得充满魅力。如果启动图标的视觉效果不够美观，可能就会错过很多只看“颜值”的用户。 要设计好的图标，首先要了解图标设计流程等。 启动图标设计的三个技巧 准确的隐喻 使用元素少胜于多 巧用文字 技巧 准确的隐喻 启动图标元素的选择要做到准确隐喻，符合大多数人认知的元素才是最佳选择。构成元素的选择，它是启动图标设计成败的关键环节，它肩负着图标表意性作用的主要责任，元素选择不准确，就会造成理解障碍。 正确的选择元素 准确的隐喻 举例 应用商店中会看到几十种不同特色的相机类应用，其中80%以上都采用相机镜头为元素进行再设计，这就是非常恰当的设计元素，以至于众多设计师宁愿在历任经典的夹缝中寻求生路，也不愿意另避蹊径。 使用元素少胜于多 设计者应当在数量上有所控制，一般使用元素不要超过三个，越少越明确，元素罗列过多会让图标变成小幅图画，杂乱不堪。另外如果选择两种或两种以上的元素，一定要有主次之分，不可平均分配，主要元素要通过体积、色彩、位置的因素凸显出来，次要元素为辅助表意，切不可喧宾夺主。 使用元素过多杂乱 元素的主次 使用元素少胜于多 下图中两款地方性医疗应用软件的启动图标。左图使用元素较多：文字、十字、楼房、手臂；右图只使用了十字和地名首字母两种元素，从视觉上使用了较少元素的图标更为醒目，且方便记忆。 文字 十字 楼房 手臂 地名 十字 巧用文字 在图标设计中能用图形说明的不用文字，尤其是那些只起辅助作用的说明性文字，因为图标面积很小，字符多字号就小，影响辨识度，无法看清就毫无显示的意义。所以，如果文字短小则可以考虑作为主要设计元素，如果太过繁杂还是放弃使用文字，寻求简单有效的图形来帮忙吧！同时，英文的首字母、中文的首字也成为目前的热门设计元素。 手机淘宝 返利 大码美衣 美图秀秀 工具栏图标设计技巧 04 工具栏图标 工具栏图标是用户进入APP应用程序后进行各种交互时使用的小图标。 针对不同的应用常常还是会找不到合适的工具栏图标，这时就需要我们重新设计。 工具栏图标 工具栏图标相对于启动图标的设计，需要更加简洁的图形语言表述。因为工具栏图标有很多个，有层级的概念，而且只能占据更小的面积。不像启动图标只有一个，可以相对丰富，工具栏的图标不是为了装饰界面，而是引导用户完成操作，所以必须体现非常严谨的对应关系。 简洁的图形语言 引导用户完成操作 工具栏图标设计技巧 用线条勾勒 用剪影诠释 技巧 用线条勾勒 线条是表现造型最常用的元素，它可以刚劲有力，也可以婉转温柔。用单线勾勒就是先将图形元素简化，再用线条勾勒其轮廓，闭合或不闭合的用线条围绕就形成了简化后的图形。 线条的粗细与图标和背景的对比度有一定关系，线条越细，图标和背景的对比度就应该越大。这样才能让图标在界面中显得醒目。 用剪影诠释 用“面”的形式来表现工具栏图标更为常见。剪影是图形平面化的主要形式，也是一种高度概括的表现方式，是在保留表达目标的基础上合理删减，简单的说就是简化图形。