美文网首页
我是这样设计icon的

我是这样设计icon的

作者: 产品小新 | 来源:发表于2017-05-17 23:08 被阅读0次

Icon存在的价值

一个icon它的首要的任务就是传达正确的预示,炫酷和个性化的设计确实能让人眼前一亮,但设计如果不能将其预示准确传达给用户,那么icon也就丧失其存在的价值。用户在长期使用智能设备中对某些icon代表的含义达成了共识,用户一眼就能判断这个icon背后的功能和内容。但依然存在设计师经常会出于“不想抄袭”,“个性设计”等理由,设计出一些认知负荷高的icon。如果不顾用户的认知习惯做出个性化设计,将导致用户的学习成本增加,不友好的体验可能导致用户放弃你的产品。

举个栗子:以下三个图标我们一眼就能明白其背后的含义,齿轮代表“设置”;小房子代表“主页”;放大镜代表“收索”,这些都是长期积累下来达成的共识,反人类的设计需要付出极大的成本,尊重用户的使用习惯是对设计师的基本要求。

文字描述是锦上添花

Icon底下带有文字描述是对其背后功能内容的概述,尤其是一些新的功能性icon还没普及的情况下,文字提示给用户更好的预示,有助于用户快速获取信息,降低学习成本。

UserTesting关于“icon带不带文字描述”做了一项调查,发现:

带文字描述的icon,88%的用户能够在点击之前成功的预测到这个icon意味着什么。

不带文字描述的icon,这个数字降到了60%,而对于那些代表着这个app独有功能的icon,也就是说用户可能以前从来没有见过类似的icon,这个数字锐减到34%。

我是这样设计icon的

那么既然要符合用户的使用习惯,又要让设计显得独特,怎么才能让这两者的有效结合呢?除了一些常用的功能性icon已经成为用户的标识外,随着不同行业的出现和发展,越来越多的新功能的出现,对于这种新的功能性icon的设计应该怎么考虑呢?设计来源于生活,对于icon这种有着特殊含义的设计来说,比较有效的方式就是将生活中与其功能相关的元素抽象成我们设计图案,结合以往用户对某些元素的认知,将这些元素有效表现出来。

以下的两套功能性icon(互联网金融和移动医疗两个领域),我以有限的经验和想法结合了各自领域的特点和元素进行的设计,也借鉴以往的一些经验。有哪些不当的地方还请各位前辈批评指出!

移动医疗 互联网金融

另外一套是系统icon,这一套是我借鉴无印良品的一些色彩元素进行设计的,在颜色搭配上采用一种简单素雅的调性,没有拟物化的浮夸,更加轻质扁平。

系统icon

相关文章

  • 我是这样设计icon的

    Icon存在的价值 一个icon它的首要的任务就是传达正确的预示,炫酷和个性化的设计确实能让人眼前一亮,但设计如果...

  • 先锋队-设计组每日设计分享(2016/10/28)

    今天带来的分享是两款icon设计: 第一款是卡通icon,以多啦a梦为主题的icon设计 我非常喜欢这款,我...

  • 用PS绘制超漂亮的相机UI图标

    此教程为相机图标icon设计,非常的不错,是一个经典的icon设计教程,主要使用Photoshop设计灰色渐变风格...

  • 素材网站

    图标设计 图标学习方法 绘制功能性图标 系统学习功能图标 icon尺寸 icon规范 icon画法 金刚区设计规范...

  • ui复习总结-icon设计及banner图设计思路归纳

    (1)icon设计及绘制注意要点:①icon设计的产品背景→目标人群(目标对象,产品差异化)→设计思路(如何吸引用...

  • icon设计

    1. 类型 (1)应用、网站的标识(2)具有明确含义的功能标识 2. 样式 (1)线性图标 ---- 纯色描边、多...

  • ICON设计

  • 作品集

    1、icon图 2、banner设计 3、插画设计 4、界面设计

  • 作品集

    1、icon图 2、banner设计 3、插画设计 4、界面设计

  • 如何设计一套像素完美的icon

    这份指导分为4个部分,包括建立文件,窍门和技巧,icon栅格,导出icon 1. 建立文件 icon设计的起点应该...

网友评论

      本文标题:我是这样设计icon的

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