4.1-图标设计技巧.pptxVIP

HSUCLEAR

UI设计

主讲人：石美娟老师

图标设计技巧

1

2

整理图标创意

图标的含义

3

图标设计的要点

PART01

图标的含义

图标的含义

不同的人对图标的定义是有不同的，司机眼中的图标可能是交通指示牌上的指示图形；机械操作员眼中的图标可能是操作面板中按钮上的图案；计算机开发员眼中的图标可能是电脑中的桌面图标，文件图标；而对于使用移动设备的用户，图标就是手机中的应用程序。

图标是标志、符号、艺术、照片的结合体，是图形信息的结晶。而我们今天所要说的图标则是我们在生活中接触越来越多的手机应用图标。

图像类图标

内容类图标

比喻类图标

标志类图标

图像类

利用实体物品说明用途。如：保卫萝卜游戏、计算器、日历、电池医生等。

这类中多为书籍、现实生活中常见的物品，这种表现方法能够直观地展现应用程序的使用方式和操作方式，让用户能直接清楚地了解这些。

内容类

将应用或游戏的操作方式或是出现的代表性的图形展现出来，如水果忍者等游戏图标

使用展示的内容多为游戏应用，这类应用更需要给用户展示尽可能多的游戏玩法和内容。

比喻类

用其他物体让人们产生对应用的联想方式，如：影片播放器、QQ等。

这类图标往往会在效率类、聊天类、健康类的应用中使用，因为这些类型的图标往往都比较抽象，所以需要利用更多人们熟知的形象和物品来为应用内容做隐喻，让用户能够联想到其里面的内容，而不是去看简介。

标志类

利用本身已有产品或已经深入人心的标识来展现，如：火车购票、新浪、京东等

严格意义上来讲，这种类型并不属于图标的范畴，但是由于人们对其已经印象深刻，所以在应用图标中可以借助这种“印象”来阐述应用内容。对于一些已经有一定用户基础的应用使用这种方式更加合适。

PART02

整理图标创意

整理图标创意

图标最关键的点在于“隐喻”，这是图标的灵魂。当你设计应用程序图标时，第一件事就要考虑什么样的图标能够说明你的应用程序，能够吸引你的目标用户。这也就需要我们去认真地分析和提炼，让这枚图标更有生命力。

2、定位图标的风格，清楚你的用户

1、以“水果忍者”实例分析图标创意过程

1、以“水果忍者”实例分析图标创意过程

（1）分析应用程序的性质

这款程序是游戏？还是书籍？还是应用软件？是否使用一个词或是一个句子就能说清楚？这是设计一枚图标最根本是事情，也是隐喻的开始。

这款游戏是一款第一人称视角的游戏，你将扮演忍者，而你的手指便是忍者刀，尽力切开屏幕中出现的所有水果，同时避开与水果一起弹出的手雷。

这一介绍很清晰地说明了游戏的性质和规则，这是一款容易上手、规则简单的切水果游戏。

1、以“水果忍者”实例分析图标创意过程

（2）根据内容进行关键词提炼重组

如果应用程序是一款游戏，我们需要尽量用一个词语，或一个动词+名词的形式将游戏内容展现出来。提炼关键词和关键点是非常重要的，尽可能去掉副词和形容词以及描述性的语言。

你将扮演忍者，而你的手指便是忍者刀，

尽力切开屏幕中出现的所有水果，同时避开与水果一起弹出的手雷。

1、以“水果忍者”实例分析图标创意过程

最终得到关键词：

重组这些关键词：

用户自己

不用展现

需要展现的内容

需要展现的内容

切水果

要将词语尽可能名词化，由“切”这个动词，我们可以联想到“刀”、“刀痕”等

1、以“水果忍者”实例分析图标创意过程

（3）将词语具象化，语言图形化

这个过程是确定图标的一个很重要的部分，也是将语言图形化的第一步。

名词需要更具体，并选择有代表性、更饱满的形态。“水果”容易图形化，但需要进一步具象化，给用户更直观的感受，所以，选择具有强烈视觉冲击力的色彩和形象饱满的水果——西瓜，容易让人产生好奇心和破坏的欲望。

1、以“水果忍者”实例分析图标创意过程

1、以“水果忍者”实例分析图标创意过程

2、定位图标的风格,清楚你的用户

确定这款应用的终极用户是哪种类型，图标的风格要倾向于这类用户的喜好。

目前，图标大致可以分为商务类型、卡通类型两种。

商务类：“冷色”为主，纯度低，能使人冷静，心情平缓

卡通类：“暖色”为主，颜色鲜艳绚丽，对比强烈，用于调动人的情绪，更快进入角色。

“水果忍者”这有些倾向于卡通类型，这个类型比较易于上手的游戏。确定这些，我们可以进行草图的绘制。

2、定位图标的风格，清楚你的用户

1、以“水果忍者”实例分析图标创意过程

整理图标创意

PART03

图标设计的要点

1、设计技巧及需要注意的地方

2、建议大家做好的几点

图标设计的要点

1、避免图标中过多元素的堆积

图标内容越简单、表意越清楚越好。只要