UI图标手绘88例
上QQ阅读APP看书,第一时间看更新

写在前面

图标手绘是UI设计师必备的基础素质,是UI设计师应该了解和掌握的基本技能。在UI设计师的工作中,不论是针对App界面,还是Web页,都需要进行相关的图标设计。用手绘的方式表现图标,既方便后续进一步设计,也方便工作讨论和头脑风暴,在提升手绘设计能力的同时提高工作效率。

图标绘制原则

可识别性

这是图标设计的首要原则。在制作图标时,要确保用户能将此图标与其他图标区分开来,并能准确读懂它的功能语义并快速完成操作,避免让用户产生迷惑或误解,从而出现反复操作甚至放弃使用的情况,影响用户的体验,进而让用户产生负面情绪,降低用户黏度。

统一性

虽然图标表达的含义各不相同,但同一组图标需要有统一的风格或调性。这里所说的“同一组”包括但不限于同一个界面、同一个App,以及同一组创作设计;这里所说的“风格统一”包括但不限于线条的使用规律统一、形态处理方式统一、圆角或曲线弧度大小统一、图标设计复杂程度统一,以及黑白灰表现方式统一。

54601-00-5-1

差异性

同一组图标之间需要在风格统一的基础上又能表现出差异。图标设计的差异性不仅受到表达含义和功能区分的影响,还受到使用方式或使用位置的影响。例如,“界面返回”箭头、“图片切换”箭头、“下一页”箭头及“跳到下一页再输入”箭头由于功能语义不同和用户使用习惯不同,其设计方式并不相同。

美观性

所有的图标在设计时都需要保证足够的美观性。对于什么是美观,没有一个统一的定位和标准。在图标设计中,美观性主要还是根据用户需求、使用方式、甲方要求、创意输出者的个人风格、大众喜好或流行趋势等来确定。

整体独立性

同一组图标一定有其整体独立性,这也是此图标组与其他图标组得以区分的保障。例如,同样是视频类App,直播App的图标设计和在线电影App的图标设计在整体上就有很大的不同。又如,同样是音乐类App,面向网络用户的图标设计和面向品质音乐用户的图标设计在整体上会有很大的不同。

友好的体验感

UI图标设计离不开对友好的体验感的把控。无论是针对App界面,还是Web页,二次登录率和保留率较高的操作体验感是友好的。这里的友好并不单指软件界面好看,还指用户操作时的流畅度、界面跳转时的自然感、符合逻辑和使用习惯的界面布局、完整信息和信息展示梯度合理的结构的提供,以及良好的用户反馈等。在用户使用App时,好的UI图标能够起到很好的视觉引导作用。UI图标大到用户对App的整体感知,小到细节上的呈现,都能体现软件的整体制作水平和设计师的设计态度;同时,好的UI图标也能对App的界面布局和信息呈现起到很好的衬托和辅助作用。

手绘图标前要做的准备工作

认识到美学基础的重要性

对于UI设计师来说,美学基础相当于武术练家的扎马步、歌唱者的音准,以及钢琴师的五线谱。没有经过专业的美术训练的设计师更需要在工作和学习中不断积累美学的基础知识。

设计从分析开始

在设计图标时,需要先了解这个图标的功能语义、使用场景和功能位置、用户的使用习惯,以及图标形态的历史演变等内容,以此反推图标会对用户的心理和行为方式产生的影响。同时,要了解不同的图标设计风格对用户的情感映射,从而反推选择哪种设计风格进行设计更能吸引用户。做完以上分析之后,要先在网络或生活中寻找相关的素材,然后分析出这些素材的共同点和差异点,接着将这些共同点和大众认知相结合,规划出图标需要展示的各个部位,最后在草图上进行前期设计。与此同时,要学会分析好的图标作品为何优秀,通过吸取优秀设计师绘制图标的经验,反思自己绘制图标时的思路和设计过程。

适当了解图标的演变史

要设计出好的图标,就要对一些图标演变的历史过程有所了解。1989年出现NEXTSTEP 1.0操作系统之后,图标界面的雏形开始形成。和计算机系统一样,通过几十年的演变和发展,手机系统中一开始的黑白线条且带阴影的图标逐渐发展成彩色立体的拟物图标,并一度出现了很多拟物图标的巅峰之作。之后一路转折,开始流行去除冗杂的扁平化设计,图标设计的重点从增加细节转移到了优化用户体验上。也就是说,目前很多图标的形态都是从几十年前不断演化发展而来的。同时,目前很多设计风格也是现代人为适应新技术和满足更多需求而不断创新、总结而来的。例如,日历应用App的界面设计一直离不开传统日历的形式,时间图标的设计大多还保留着表盘和指针元素,邮件图标的设计依然是在信封图形上做文章……在此过程中,一些优秀的设计师发现有些图标设计能提高用户的使用效率,于是去粗取精,将好的部分保留了下来,形成了一定的设计规律和规则,并且不断地传承下去。同时,人们的使用经验也让这些规则不断地得到深化和巩固。

掌握素描基础

对于手绘图标来说,素描基础是必须掌握的内容。素描基础包括点线面知识、透视和比例、构图方式、结构和三大面、光源和空间知识、质感表现知识,以及立体和平面知识等。

不断练习与积累

除了对基础知识的掌握,图标手绘也需要不断练习和积累。图标手绘只要一开始,就不能放弃练习。一旦有一段时间不练习,即使是基础非常好的设计师也需要通过一段时间的练习才能恢复到原有的水平。