西湖鱼

图标是一种抽象的、跨语言的符号,随着信息传播速度和载体的快速增长,图标的使用频率也在不断提高,尤其是在终端屏幕尺寸越来越多的情况下,图标代替或辅助文字信息向用户更一致、高效、具象地理解信息。

 

正由于图标设计的重要性,我们应该更系统、合理地一步一步进行推导和设计,而不是单纯为了展现创意或炫技地滥用图标。这篇文章将会结合过往的项目经验和遇到的问题,为大家讲述通过怎样的方法,能更有效地进行图标设计。

 

图标设计要点

01 表意清晰

图标能够清晰地传达信息,帮助用户理解这是什么功能/信息是图标设计的第一要点。如果图标含义无法正确地传达,那么它在界面中只是一个冗余信息。

 

不同的颜色对图标含义的影响

 

在设计图标时,不仅要针对单个图标思考,更要把图标作为界面中的一部分,结合当前场景进行考虑,在当前场景/界面中,图标是否满足清晰表义的要求。

 

并且图标在绝大部分情况下都不是主角,特殊的情景下,图标可能还需要结合文字,作为一种辅助信息,目的都是帮助信息更清晰地传达给用户。

 

02 一致性强

腾讯视频-播放器图标

 

界面中的图标一般是成系列的设计,除了视觉风格和特征保持一致以外,在同一产品内,同样的功能和信息图标应也保持一致的形态,避免用户产生疑惑。

 

03 易于扩展

随着业务和功能的变化,在产品发展过程中很可能需要扩展图标库,这就要求我们在最初设计图标时应定义好视觉特征与延展规则,让图标易于在原有设计上进行扩展,使得设计可延续。

 

腾讯视频-频道管理界面图标

 

04 图形清晰且有吸引力

在图标设计中,我们必须保证图形是简洁、严谨、清晰、边缘干净利落的,这是提升产品界面品质感的一个重要而且基础的部分。

并且除了达到基础水平以外,在图标中我们还可以通过融入品牌信息、有趣的细节使图标更有吸引力,提升用户对产品/品牌的好感度。

图标设计四步法

 

图在了解图标设计要点后,我们可以根据定义(使用什么类型和尺寸的图标)、提炼(关键词与特征)、绘制(草图与矢量稿)、调整(细节与整体平衡)四个步骤进行图标设计。

 

定义样式

1.使用场景

图标是界面中的一部分,所以我们在进行设计的时候,必须先考虑图标的使用场景,根据场景、功能去定义图标的样式、尺寸等,甚至是先挑选界面中几个主要图标进行设计,再进行成系列的扩展。

腾讯视频-全屏播放器界面

我们根据使用场景的关键点进行样式设计的推导,以腾讯视频iOS 5.6.0版本的播放器界面图标为例

 

承载的作用

播放器图标作为功能入口,最重要的目标是能清晰直观地传达功能信息,其它影响因素都要为此让位。

 

重要性

功能图标重要性为播放器界面中的第一优先级,并且依据使用频次区分重要性,如播放/暂停是界面中最高优先级,其次是返回、更多等,不同重要性会导致尺寸或视觉强度设计的区别。

 

所处界面的信息复杂程度

播放器内容背景非常复杂且多变,这个信息决定了播放器图标设计需要尽可能简洁,减少样式和层次。

 

业务对扩展性的要求

腾讯视频播放器会在整体大框架不变的前提下,逐步加入更多小功能来优化用户播放体验,所以可预判随着业务发展播放器图标会不断增加,这要求我们在定义样式时必须制扩展性强的样式。

 

2.图形样式

腾讯同一图标使用图形样式的表现

 

图形样式是图标向用户传达品牌信息及产品调性非常重要的一部分。尽管网上有非常多流行的样式可以参考,并且每年都有新的设计趋势,但在定义图标的图形样式时切忌滥用样式和盲目跟随流行趋势。

 

流行趋势总是不断在变化,产品定位却相对稳定,并且 GUI 设计从最初的纯界面设计(指只为产品业务和功能服务)到品牌+体验设计,保持产品品牌的一致性越来越成为硬性要求。所以我们在定义图标样式时必须结合产品定位,设计出符合品牌调性和产品特性的图形样式。

 

提炼关键词与特征

当我们通过上面的推断得出「图形特征」「图形样式」等整体而系统的信息后,开始针对单个图标进行设计。

1.发散关键词

当我们开始设计一个图标时,除了如搜索、关闭、删除等长期且通用的符号外,尽量避免通过经验或直觉把自己固定在原有的思维上,如「发送」就是纸飞机、「点赞」就是竖起大拇指,发散关键词能帮助我们快速找到多个能表达对应含义的方案。

如我们要设计表示「妈妈」的图标,我们可以通过思维导图进行发散关键词:

 

2.结合使用场景选择核心关键词

同样的符号在不同产品或场景下传达出来的含义可能是不一样的,所以我们在进行发散关键词后,应结合当前使用的产品/场景去分析,选择最合适的关键词。

例如「妈妈」这个图标放在小明家,传达出来的意思是小明的妈妈,而放在小华家,指的更可能是小华的妈妈。

并且图标在很多情况下无法表达复杂的意思,如要在同一界面上表示「小明的妈妈」和「小华的妈妈」,更清晰直观的方法是图标 + 文字,而不是非要把小明和小华的头都画出来。

 

3.提炼特征

由于我们需要保持图标设计的简洁同时易于识别,所以需要对关键词推导出来的形象进行提炼,挖掘出形象最核心且容易识别的特征。

假设我们要画一个 iPhone 来表示「手机」的图标,尝试提炼出形象中最核心的特征:

 

再进一步如果我们要在同一界面上表示 iPhone 8 和 iPhone X 呢?可以尝试去找这两款手机形象中最突出的差别:普通屏幕与齐刘海、圆形 Home 键与底部横条

 

绘制草图

提炼好特征后,非常建议先在纸上画除草图,草图并不需要非常精美,它能帮助我们更快地尝试不同特征和细节组合呈现的效果,并且帮助我们更清晰地知道每一个元素应该落在什么位置。

 

通过草图确定具体方案后,再着手用软件进行设计,单个图标的具体画法网上很多优秀的教程,我们在这略过。其中需要重点注意的是:

 

1. 定义图标输出的尺寸和视觉基准区域;

 

2.同样尺寸但不同形状的图标视觉面积也会有偏差,我们可以根据几种常见的几何形状建立形状基准线;

 

图标设计是GUI设计师必备的基础能力,好的图标设计不仅能帮助用户更高效地解决问题,还能帮助产品和品牌形成差异化。

但这一前提是我们能清楚地认识图标是什么、它在界面中充当的角色和起到的作用,然后在这些背景信息上进行有效的设计,而不是盲目地追求流行的视觉风格和炫技。

本文从图标设计的要点到方法粗略地讲了一遍,目的是帮助新手设计师更清晰地了解如何系统地进行图标设计,避免前期在追求纯视觉表达上走太多弯路。并且图标设计本身是一个比较大的题目,文中难免有很多不深入或细致的内容,如有不当的地方欢迎各位指正交流 :)

 

原文地址:腾讯视频TVDesign(公众号)

作者:KongZhen

 

转载请注明:学UI网 » 如何系统地设计界面图标

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

 
你可能喜欢的:
关于ICON,你知道多少关于ICON,你知道多少
渐变质感技法(四):教你用PS打造炫美风景精致图标渐变质感技法(四):教你用PS打造炫美风景精致图标
设计师进阶笔记:关于图标你了解多少?设计师进阶笔记:关于图标你了解多少?
如何系统学习功能图标?如何系统学习功能图标?
图标设计五维自检法图标设计五维自检法
图标绘制基础指南,一篇就够!图标绘制基础指南,一篇就够!
绘制扁平图标竟然有这么多小秘密?绘制扁平图标竟然有这么多小秘密?
网易严选APP品牌设计流程大全网易严选APP品牌设计流程大全
以用户为中心的图标设计法以用户为中心的图标设计法
布尔运算实战教学(干货篇)布尔运算实战教学(干货篇)