美文网首页
应用图标设计笔记—原则篇

应用图标设计笔记—原则篇

作者: pennYun | 来源:发表于2016-11-26 15:54 被阅读0次

好像很久没有发言了,咳咳,最近一直在学习应用图标的设计理论和方法。(仍然遵循千字文原则,每篇控制在千字内,长篇大论分成若干主题篇,便于交流和阅读)

首先,应用图标是指那些有明确指代意义的图形表现形式,相对于商标LOGO来讲,应用图标在明确图形符号的同时,有且只指代一种产品的核心意义。

根据这一定义,我们可以粗略地认为:

1、应用图标具有高度浓缩并快捷传播核心意义的能力。

2、可以代替部分文字内容尤其是文字段核心思想的图形表达。

3、相对于文字来说,图形可视化信息传达能力更高,用户获取信息速度更快。

然而不得不说,应用图标对于设计师提出了相对较高的设计能力要求,尤其是在当今设计简洁化趋向下,如何能够用最简单的设计语言准确传达内容核心思想确是难事。

因此应用图标在另一种情况下有可能会由于图不达意,图存歧义等问题导致用户不能及时获取信息或误导用户,从而降低产品使用体验。

目前应用图标形式上大致分为2D图标,2.5D图标和3D图标。

对于应用图标的具体分类不多赘述,但是值得一提的是目前3D拟物化图标已逐渐淡出设计市场,相对扁平化已经流行那么多年,貌似国内外设计师早就厌倦了扁平,长投影,图形化之类的关键词,对于新的形式早已摩拳擦掌,跃跃欲试了。

对于应用图标的设计规格,网上有大量的详细解释(见下图)

图片来自网络(侵删)

其次,应用图标设计在实际设计操作中应尽量遵循以下原则

- 含义明确,识别性强。

- 外框设计统一

- 内部图标大小视觉等差一致。

- 透视角度与光源角度要一致、一套图标的透视角度与光源角度要一致,同时高光反光和阴影一致。

- 质感肌理要一致。

- 颜色质感一致。

- 一个图标颜色控制在三个颜色以内。

- 整套图标的颜色名都保持一致。

- 图标与背景有明显的差别。

(比较重要的一点是,视觉平衡和物理平衡的区别,设计之感性决不能依靠物理世界的约定俗成,而应该根据视觉和感性的角度平衡设计内容。)

根据目前较为流行的iOS10设计规范和material design 5设计规范的趋势来看,进一步扁平化,减少颜色使用对用户干扰,加大视觉要素的大小比例等原则,我们可以认为在应用图标设计中,核心要素的进一步简化,颜色单一化和信息集中化趋势将会更加明显。

(插播一点设计心得,从最开始设计立意到草图设计我都会当成一件作品的很重要的设计步骤,甚至是希望单独拿出来一个步骤都能成为一件独立完整的产品来看待,希望作为一名设计师能够尽可能的体现职业素养和专业能力,各位设计师和未来的设计师共勉!)

相关文章

  • 应用图标设计笔记—原则篇

    好像很久没有发言了,咳咳,最近一直在学习应用图标的设计理论和方法。(仍然遵循千字文原则,每篇控制在千字内,长篇大论...

  • PS图标学习1——图标的分类及设计原则

    什么是图标? 图标通常分为两种:应用图标和功能图标。 应用图标类型 功能图标类型 图标设计原则 应用图标 可识别性...

  • 如何从0到1设计一组图标?

    上一篇,主要介绍了图标的分类,以及设计原则。具体可看《图标设计原则及分类,新人必看[http://mp.weixi...

  • 设计师必看的图标设计指南「中」

    书接前文,这是《设计师必看的图标设计指南》系列之「中」篇 ​ 功能图标的设计规范及应用 除了产品图标,还有一种图标...

  • 超全面讲解应用图标设计九大原则

    超全面讲解应用图标设计九大原则 – 学UI网 1.独特的设计语言 2.简洁的设计形式 3.准确的产品属性传达 应用...

  • 车载UI与手机UI的设计区别总结

    我们通过多篇文章分享了应用图标和系统图标的设计原则和案例分析,得到了很多设计师朋友的认可和好评。你们的好评就是考拉...

  • 国庆作业

    应用文,两篇读书笔记,模板,设计衣服

  • 设计尺寸规范

    Android / iOS应用图标设计尺寸及设计注意事项 一个有吸引力的APP应用图标,可以让用户愿意去了解你,下...

  • 车享运车原型设计

    可交互的原型 可交互的设计原型(建议使用电脑打开) 整体设计需求:1. 应用图标,包括APP图标和网页.ico图标...

  • 如何去设计一个完美的Icon?

    这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础,包括一致性、易识别和清晰。高效图标设计的原则...

网友评论

      本文标题:应用图标设计笔记—原则篇

      本文链接:https://www.haomeiwen.com/subject/ilkgpttx.html