飞特网

  • 飞特网官方微博
  • 飞特网微信公众号
飞特网 顶部通栏广告

设计好小图标六大法则

天堂鸟发布于:2019-10-8 17:05 |原作者: 葫芦兄弟loyal
简介: 1.识别性:表意准确清晰,识别率高,不易造成误解; 2.可视性:保持设计的简单、现代、友好,在特定显示面积和显示环境下清晰可辨; 3.一致性:一套统一的设计语言、一致的细节处理; 4.设计感:造型、比例考究,有对比、有节奏感; 5.品牌感:将品牌基因注入到小图标的设计 ...

优秀的小图标应该满足哪些标准?

1.识别性:表意准确清晰,识别率高,不易造成误解;

2.可视性:保持设计的简单、现代、友好,在特定显示面积和显示环境下清晰可辨;

3.一致性:一套统一的设计语言、一致的细节处理;

4.设计感:造型、比例考究,有对比、有节奏感;

5.品牌感:将品牌基因注入到小图标的设计中,更能加深印象;

6.精确性:对以上各点的精确控制。

设计好小图标六大法则 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

一、小图标首先要确保"易识别"

1.图标的传达含义功能必须放在首位。设计师们有时会过于注重形式,忽略了本身的功能,会导致图标难以识别。如下图,如果没有文字注释,你能看出来这画的是什么吗?


设计好小图标六大法则 飞特网 设计理论

2.从实物中提取造型是我们做小图标的常用手法。但是我们在选取参照物时,要注意选取一个更通用的形象,而不能随意选取参照对象。如下图所示,同样是设计一个闹钟图标,左图是随便拿了一款电子闹钟作为参照,右图则是遵从了辨识度更高的通用型闹钟形象。

设计好小图标六大法则 飞特网 设计理论

3.用户对图标的理解往往基于以前的经验,些图标已经在在用户心中享有普遍共识。在考虑图标形象时,要尊从大家的普遍认知,便于被快速的感知。

很多比较抽象的概念是无法绘制出来的,比如 PC 时代就用软盘来指代"保存",一直延续到现在,尽管很多人没见过软盘,但是都知道这个图标表示保存。如下图所示,左图尝试做了些创新,可能比较有趣,但是引起误读风险也会很大。

设计好小图标六大法则 飞特网 设计理论

4.对于更多复杂或抽象的功能来说,图形化的表达具有局限性,所以他们应该添加文本标签,或只使用文本标签来展示。以Airbnb 的 "故事" icon 来举个例子,他们选用了一个很有意思的小树叶,当没有文案说明的时候,想必一千个用户心里会有一千个哈姆雷特。

设计好小图标六大法则 飞特网 设计理论

UserTesting(一家为开发者提供测试用户的创业公司)进行了一系列关于是否是要标签的测试,结果发现:

•对于带有标签的图标,88% 的情况下,用户轻点图标时可以准确地预测接下来会发生什么。

•对于没有标签的图标,这个数字下降到 60%。对于那些特殊的图标,这个数字只有 34%。

二、小图标造型——"简约而不简单"

小图标显示面积很有限,为了确保在特定的显示环境下依然清晰可辨,需要保持图标造型的简单、现代、友好。

1.保持图标的简约和示意,不多不少刚刚好

图标设计理念的本质是简化形态-简化图标是出于降低学习曲线的需要。在大多数情况中,设计图标无需过度发挥创意,但也不能过于简单而降低识别度。如下图所示,过渡简化的图标如果没有文字标注已经无法判断他究竟是什么了,而过多的细节则会让小图标在实际使用场景中无法辨认。

设计好小图标六大法则 飞特网 设计理论

如下图所示,绘制线性图标时,要保持图标的简洁可识别,千万不要使用双重描边。

设计好小图标六大法则 飞特网 设计理论

2.巧妙地造型往往都是由简单的图形组合而成

在做图标的时候,能用基本图形进行布尔运算的时候,尽量不要使用钢笔。这会让你的图标更加规范,对图形结构理解更加深刻,后期更改形状更加方便。

设计好小图标六大法则 飞特网 设计理论

3.简化的图标依然需要适当保留细节

做图标是在做减法,但是如果你减去的部分影响到了图标的表意,就该思考如何才能保证图标整体简约概括的又能保留这些细节了。如下图,同样是表示 "抓紧扶好",最右简单粗暴的处理已经完全表现不出这一感觉了,反而左边两个方案,简单的形状就很好展现出了"紧握"的细节。

设计好小图标六大法则 飞特网 设计理论

123下一页

好评

差评
天堂鸟
北京市 怀柔区 
+ 关注 私信
  • 完形视觉设计原理介绍
  • 设计好小图标六大法则
  • 网格系统的前世今生

最新评论

我来说两句:
B Color Image Link Quote Code Smilies |上传
您需要登录后才可以评论和提交作业 登录 | 立即注册

上传作业


关于飞特| 广告服务| 付款方式| 友情链接| 网站地图| 联系我们| 加入我们| 举报| 飞特网旧版| 飞特网