技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 视觉设计 --> Icon设计要点――信息传达的准确度(一)

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

浏览:1828次  出处信息

    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. 在iOS中使用icon font    (阅读:2332)
  2. Photoshop图标(icon)设计分享    (阅读:2124)
  3. icon小教程之图标细节的绘制    (阅读:2101)
  4. APP图标的色彩    (阅读:2397)
  5. Icon设计几个关键点    (阅读:2007)
  6. “BUSINESS”ICON制作分享    (阅读:1919)
  7. 审美、有效与情感——关于icon和Logo设计的一些想法    (阅读:1723)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1