IT技术博客大学习 共学习 共进步

Icon设计要点――信息传达的准确度(一)

阿里巴巴(中文站)用户体验设计部博客 2010-11-14 22:32:08 浏览 2,825 次

    Javascript-Selectors

    来阿里之前主要的工作方向客户端终端的gui设计,在这里聊几句设计icon的想法,有些观点可能有争议,纯属个人经验感受。

    Icon设计的核心是信息传达的准确度,就是icon所传达的信息让目标用户能马上理解,不看字面上的意思就能知晓icon的功能,那么这个icon50%是成功的,如何做到这一点?

     1.要对整个项目足够了解,对这个图标赋予的功能要了解,那么所传达的信息大方向不会有错。

     2.分析icon是名词、 动词还是动名

    名词类的icon取材至生活中的元素特征或者大家熟知的符号,比如“音乐”,那么可以取音符;可以想象用户的共同的行为来取元素“音箱”“耳机”“播放器”,那么他们的主要特征是什么“喇叭”。

     iconnew5

     个人认为,所表达的信息不能太具象,那无所谓icon了,在小尺寸,哪怕稍大的尺寸也太具象的图标表现不了,效果会很糟糕。

    动词类可以用两种方式诠释,具有方位性的icon可以用箭头指示性图标来诠释,比如“导航”“下一步”“返回”,另一种动词类,比如“修改”“搜索”“设置”这种类型的图标最好脑海里先还原一下这个功能点的用户使用场景,再映射到生活中的真实使用场景。

    iconnew4

    建议:方向形很强的icon要用这种指示性的图标,像“导航”有方向的含义,但是也可以用“车”“道路+箭头”来诠释,这个就考虑到小尺寸的icon。

    iconnew1

    动名类,比如“搜索门址”“保存路线”“轨迹管理”如果菜单界面都用一个元素诠释icon信息,那么取名词来做设计,顺带提一下菜单页面本身就是设置类型的,就没必要把诠释“设置”;如果动名都诠释,那么动前名后。

    iconnew2

    3.抓住事物主要特征――Icon大多元素取至生活某一事物,那么想要让用户快速理解,最好抓住事物的主要特征来展现,特征也可以做简单处理也可以做复杂处理,这里所谓的复杂就是关注细节比较多,做的简易程度跟屏幕分辨率大小有关。一般大分辨率取元素的范围会大一点,做的细节会多一点,小分辨率取主要的特征就可,不要过于抽象,用户一眼就能认出这是什么事物是主要目的。

    iconnew3

    诠释简易的感念

    4.传统认知的icon不要颠覆,比如“设置”“主页”“返回”“搜索”“下一页”,我指的是形,效果可以任意发挥

    5.Icon建议尽量用几何图形,好表现。

    iconnew

    做icon需要有耐心,有兴趣。

建议继续学习

  1. APP图标的色彩 (阅读 3,927)
  2. 在iOS中使用icon font (阅读 3,667)
  3. Photoshop图标(icon)设计分享 (阅读 3,062)
  4. “BUSINESS”ICON制作分享 (阅读 2,925)
  5. Icon设计几个关键点 (阅读 2,862)
  6. icon小教程之图标细节的绘制 (阅读 2,762)
  7. 审美、有效与情感——关于icon和Logo设计的一些想法 (阅读 2,721)