聊聊图标的信息传达

还记得早期的像素图标么….那时候">超级玛丽的像素小人儿还是熟悉温热的童年记忆。早期OS/2-Warp4系统的像素图标也很有趣:

虽然现在看来“回收站”在理解上还有点问题。但在技术还不成熟的时候,仅支持16色,设计还是有很多图像隐喻创意在里面。

图标很重要的作用就是向用户传达出正确的操作信息。很多图标采用好似照片记录的写实性也不失为一种好办法。详细地绘制人们熟悉的对象是有意义的,但是,绘制人们不熟悉的对象或抽象概念(例如网络)又有什么意义呢?有多少用户见过裸露的硬盘驱动器是什么样子?用户最终还是依靠附加的文字来理解。

Scott McCloud在《如何理解动画》( 《Understanding Comics》)一书中对动画形象的分析亦可应用在图形界面设计中,合理地分析图标的写实性。

左侧某个特定男士到右侧的笑脸可以指代任何人。可以说明如果为表达某个通用概念,视觉上的细节一定减少。界面设计本身存在的环境就要求尽量减少文化和习惯的差异性,对图形也力求普遍性,也要减少不必要的细节。
但是细节也不能太少,识别性绝对是第一必要条件,尽可能满足用户短时间理解记住图形的含义。

左面可以清晰认识是人脸,但是简化到右边,就不好识别和理解了。
以电脑上的实际图标为例,“主页(Home)”图标

相较于最左边写实的房子,细节越多越难搞清楚指代的意义,右侧普遍性和可识别性高许多。
当然过少的细节,如果右侧图标去除掉窗户和烟囱,“主页(Home)”图标更像指示向上的方向键。

写实性和可识别性要维持在一种曲线的平衡中。完美的图形界面设计应该出现在曲线的中央。
那么合理恰当的细节应当是什么样子的呢?究竟什么样的细节不会过度分散用户注意力?
同样以两个按键为例:

左侧的按键过于写实,如果放入界面中容易分散用户注意。右侧的静止的边框,无法促应用户进行交互,很容易被忽略。
这里插几句闲话,我觉得GUI设计师和一般10243.html">视觉设计师或平面设计师最大的不同在于设计的图案要有某些交互行为的暗示作用。比如,Ipad上扳动的按钮就要让用户有向哪里扳动的行为暗示。

这种行为心理暗示其实在心理学上有专门的概念叫”affordance“。就是指用户碰到客观现象采取本能的行动。举个最好的例子来说明:

日本的一款发泄游戏叫“putiputi”。是一种塑料气泡玩具。这款产品的创意来自于看见塑料薄膜泡便不知不觉地想去挤压它,这是在心理学上 就被称为“affordance”的现象之一 。如果设计产品时,能够考虑人的本能意识和行为,暗示某些操作,那所设计的交互式产品将具有很大创造力。设计 者创造的外界物与用户的心理映射间插入的是一个的“=”。生活中,一种固化的映象在用户心中落成时,产品才真正具有自己的“语言”,能够“说话”与用户沟通。当然,affordance现象,如果掌握不好,也可能给产品的设计带来负作用。因为人们也可能因为心理认知而对设计不良的产品进行误操作。
对于某些特殊图形符号,用户是可以无障碍的捕捉的。我在欧洲旅行中发现,即使到非英语国家,遇到比如数字、箭头这些图形,即使没有前后语境,任何人都可以快速理解。数字表示顺序;箭头表示方向。这些都可以作为图像的安全使用范围。
总之,图形界面设计中,图形很大程度相当于一种符号,来传递某种功能信息。符号本身就是简洁抽象的,如何应用户更快速准确地理解符号和相关含义才是设计的首要问题。所以合理应用写实手段,处理好细节,达到“增之一分则太长,减之一分则太短”的效果,增加用户交互欲望才是最重要的。

源地址:http://www.zhangyq.com/?paged=3

时间: 2024-11-03 02:56:01

聊聊图标的信息传达的相关文章

Icon设计:成功Icon设计是信息传达的准确度

网页制作Webjx文章简介:来阿里之前主要的工作方向客户端终端的gui设计,在这里聊几句设计icon的想法,有些观点可能有争议,纯属个人经验感受. 来阿里之前主要的工作方向客户端终端的gui设计,在这里聊几句设计icon的想法,有些观点可能有争议,纯属个人经验感受. Icon设计的核心是信息传达的准确度,就是icon所传达的信息让目标用户能马上理解,不看字面上的意思就能知晓icon的功能,那么这个icon50%是成功的,如何做到这一点?  1.要对整个项目足够了解,对这个图标赋予的功能要了解,那

geektool添加天气图标+天气信息教程

geektool 这东西就不多作介绍,直奔主题. 日期日历添加 百度一搜一把代码,今天就给大家讲讲天气的添加,因为名早有课,写得有些混乱..见谅 打开geektool,点选shell拖到桌面,之后点击你拖到桌面的框框,出现右边黑色栏,名称输入weather即可. 再然后添加城市信息:注意command 和白色输入栏后面有三个小点 ,点击出现终端框,粘贴如下条目:(红色部分要自己改动) curl --silent "http://weather.yahoo.com/forecast/CHXX020

网站视觉设计中的信息传达

当代的网页视觉设计由最初的信息堆砌到后来的图形化.抽象化,更到今天的信息视觉化,经历了3个迥然不同而又相互递进的过程.目前,除了一些艺术或个人网站,其他绝大部分的网站都以信息的准确传递为视觉设计的主要目的. 信息以文字.图片.色块为主要的载体,经过编排在浏览器里对用户展示,这要求网站构成的绝大部份必须是能清晰阅读的文字和准确无误的图片. 同其他种类的视觉设计一样,信息为主的网站视觉设计需要遵循一些基本的美术规则,运用一些简单有效的美术手段来达成.下面我们来谈一下这些具体的方法论. 高傲的空间 -

本能的设计:最大化地以用户心智模型出发

文章描述:本能的交互设计. 最近,同事爷爷八十岁高寿,他送了台Ipad.我们都笑他自己太潮,这高科技的玩意爷爷怎么会接受.没想到他说:"爷爷拿起就使,玩愤怒的小鸟.Tom猫.听歌都妥妥的." 这真真是个很奇怪的现象: 为什么ipad无论老人小孩都会用,基本操作甚至很少需要别人的协助和说明书! 究竟是孩子容易接受电子产品?还是电子产品容易让孩子接受? 这不仅让我思考,什么样的设计才能"童叟无欺",老人.孩子都可以流畅使用.那么,交互设计不该是"精英化&quo

本能的交互设计

最近,同事爷爷八十岁高寿,他送了台Ipad.我们都笑他自己太潮,这高科技的玩意爷爷怎么会接受.没想到他说:"爷爷拿起就使,玩愤怒的小鸟.Tom猫.听歌都妥妥的." 这真真是个很奇怪的现象: 为什么ipad无论老人小孩都会用,基本操作甚至很少需要别人的协助和说明书! 究竟是孩子容易接受电子产品?还是电子产品容易让孩子接受? 这不仅让我思考,什么样的设计才能"童叟无欺",老人.孩子都可以流畅使用.那么,交互设计不该是"精英化"的,更该是"傻

网站用户体验设计:视觉表现建立信息层级 将信息有效传达给用户

中介交易 SEO诊断 淘宝客 云主机 技术大厅 作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有哪些视觉方法,这些方法的背后是否有理论依据,是本文的主题. 首先看下面两张图,左图为相机拍摄的效果,右图为人眼不移动时看到的效果,可以发现人眼对信息的获取并不是一次性完成的,它不能同时产生多个焦点从而把视线停留在更多的地方,设计师需要考虑的是让用户通过眼球移动,

网页设计中的图标的使用技巧与资源合集

  提到图标设计,似乎每个设计师都有话说,但是要做好图标设计真的那么容易么?今天这篇文章针对网页设计领域的图标设计进行了相对全面的梳理,从设计技巧到设计资源一应俱全,但愿能帮上你! 图标是每一个现代UI中不可或缺的组成部分,它们不仅能协助UI布局组织内容,而且轻量级的图标融入界面也不会喧宾夺主.不仅手机和平板的APP UI中会大量用到各种图标,而且iPod和智能手表的界面中也是如此,这正是因为图标具备快速直观传达信息的能力. 在网页设计刚刚兴起的时代,小图标就已经被早期的网页设计师和开发者投入使

网页设计技巧:设计精美网页图标技巧

文章描述:满足四大要素!让网页设计中图标更有吸引力. 图标在网页设计中用途广泛,几乎每个网站中都存在着图标.通过这些小小的图标,可以方便的实现视觉引导和功能划分.如果选用恰当,图标能和页面中的图片有机融合,保持视觉上的一致性,同时也能够和整个网站的风格相契合.图标并不是华而不实的小玩意儿,小图标有大用处.在网页设计中,如果设计师并不擅长图标设计,那么就需要在图标选择上下功夫了. 一般来说,根据使用手法.使用场合的不同,一张图像可以有多种解读,图标亦如此.图标不但能够吸引用户的注意力,还能分割页面

信息设计的交流原则和信息设计中的图形设计

文章描述:信息设计中的图形设计原则. 在当今纷繁复杂的世界,设计形式也是百花齐放,什么设计才是最容易被用户接受,并且能很好的给用户带来他们需要的信息,这是值得我们探讨的.  信息设计的定义 信息设计顾名思义就是用于信息交流的设计,如果我们把"信息"这个词语拿出来单独来解释的话,首先"信息"这个词语由来已久,它是人类文明赖以发展的基础,可以说人类所有的知识和故事都是信息,通过信息的传递,人类的文明才得以进步和向前发展.现在人们接收的信息越来越多,所以我们可以根据规律来