视觉隐喻碎碎念

标签: 产品设计 | 发表时间:2013-02-16 10:36 | 作者:P迪
出处:http://www.alibuybuy.com

什么概念?

在我们做界面设计时,如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素,
用户会比较容易地学会产品的使用,这种手法就是视觉隐喻(metaphoric)。
隐喻范围可以从整个界面到工具栏上的一颗小按钮。
几种类型?

1 整体隐喻
整个界面都用隐喻的设计方法,最典型的例子就是游戏,整个现实的场景搬到游戏里面,用户一看就知道,
自己是在街上还是海上,房子是可以进去的,路人是可以问话的…
另外还有一些工具类、索引类的整体隐喻界面,比如日历、时间显示、播放器、手写板、阅读器、名片夹等。
2 装饰隐喻
在界面局部使用一些拟物的设计手法,增加界面的真实感和美观度。
比如一些机械机理的使用,电影场景的重现,平常小物品的装饰,自然现象借鉴等。
3 功能隐喻
用隐喻的手法暗示某些功能或显示某种状态,让它们更好辨认,降低用户认知成本。
如应用图标、按钮上的图标、按钮本身、拖动滑块凹槽、时间选择器等。
好处是什么?
因为界面元素是用户熟悉的事物(物体或者使用方式),用户的大脑能更轻易地进行推理,在界面元素与功能之间建立直觉联系,而不必了解产品真实的运行机制。简单用图表示如下:
坏处是什么?

任何事情都有利弊,而且可能在某个临界点,利会变弊。
1 挑战用户认知
不是说降低用户的认知成本么?对,前提是用户有相关的经验,而且能够辨认出来产生关联。
所以如果隐喻的对象太小众,可能有人不认识;
如果设计太抽象/难看/复杂/不像…,可能有人不认识。
2 产生噪音
真实世界的东西细节较多,比较复杂。
过多的装饰元素使得界面复杂,过多地抠细节使得图像复杂,可能装饰会变成噪音,
影响用户对有价值内容的阅读和对功能的理解。
3 长远看可能降低降低效率
这是从书上(about face 3)看到的说法,
隐喻能让新手用户更快地接受理解产品,
但太过忠实于现实世界的规矩,可能反而失去了计算机世界的优点,
一旦用户熟悉产品后,难以形成高效率,形成习惯用法(如鼠标右键,现实世界没有,却相当高效)。
应该怎么做?

从坏处出发,再结合计算机世界的特点,就能总结一些做法。
1 尊重文化
不同地区、不同年龄、不同领域的用户有其独特的知识架构和文化认同,
先搞清楚产品是给哪帮人用的,然后才着手设计。
举几个例子:
日本人翻书遵照我们古时候从右到左的习惯(看过漫画的都知道),而我们是从左到右,
如果我们要做翻书的拟物设计,是否遵从相关的习惯?(没验证过啊)。
在印度,摇头表示赞同,点头表示否定。在印度这个表情就悲剧了:
在土耳其,大拇指是一种侮辱性手势。那这些表情也悲剧了:
所以,先研究再动手,
如果懒得去先做研究,那就找最简单的最常见的对象当隐喻原型,不要有侥幸心理。
2 别忘了初衷
如果是为了更好看,赋予产品更多情感的因素,不要过火,好看的目的达到了就好了,别光想着要很像真的。
如果是为了暗示某种状态或操作,不要过火,觉得用户可以理解的时候就好了,别光想着要很像真的。
有时候多个写实图标摆在一起比抽象图标难理解,就值得我们反思。
3 基于现实超越现实
也可以说打着有限的现实的幌子做无限的虚拟的事。
比如文件夹的逻辑,“文件夹里放文件”是现实,
文件夹里放n个文件夹,n个文件夹里还可以放n个文件,这就是超越。
再比如iPhone的timepicker,滚轮是现实,滚轮上的数据可以n多,就是超越。

源地址: http://blog.sina.com.cn/s……01018onm.html

 


© 推荐 for 互联网的那点事, 2013. | Permalink | No comment | Add to del.icio.us
Post tags:

你可能也喜欢:

当音乐和视觉混在一起 (@toodaylab)

魔幻味道的视觉赏 (@toodaylab)

分析:视觉营销的秘密武器

视觉大同—Visual similarity

视觉注意力—解剖设计的根源
无觅

相关 [视觉 隐喻] 推荐:

视觉隐喻碎碎念

- - 互联网的那点事
在我们做界面设计时,如果使用用户熟悉的来自真实世界的物体的图案来作为界面元素,. 用户会比较容易地学会产品的使用,这种手法就是视觉隐喻(metaphoric). 隐喻范围可以从整个界面到工具栏上的一颗小按钮. 整个界面都用隐喻的设计方法,最典型的例子就是游戏,整个现实的场景搬到游戏里面,用户一看就知道,.

地图的隐喻

- hosven - 维舟试望故国
1950年秋,当军队从东面攻入昌都的时候,看到这个布满乞丐和污水坑的狭小城镇,许多年轻的战士颇感意外. 有人事后回忆:“看看周围破烂不堪的矮小的房屋和狭窄的街道,真不敢相信这就是地图上划成一个大圈的昌都. 我们想象中的昌都一定是个像样的中等城市,各种建筑鳞次栉比. 收藏到:Del.icio.us.

快速拨号的隐喻

- Scavin - 可能吧
作者个人观点,与任何公司组织无关. 快速拨号,Opera 首创的浏览器功能,其各种变体已经广泛应用在计算机、手机、平板等各种品牌浏览器上,是现代浏览器的标配功能. 快速拨号原是手机功能,说白了就是快捷键. 老式诺基亚手机上,可以长按一个数字键直接拨号给指定联系人. 自然,在手机浏览器里面长按一个数字键访问一个网址也不是什么了不起的发明.

移动界面隐喻设计

- 星空无语 - 优涩控
是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身. 它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.

强烈抗议香港电影片段隐喻我外交政策!!!

- andy - 天朝娱乐 | 每天开心一下!
2010年10月11日 -- 天朝人民长见识——让你们见识一下什么叫中国第一吉他手. 2010年10月9日 -- 这是天朝昨天最火的新闻和专题,我知道你们肯定懂的. 2010年09月28日 -- Google昨晚的一道笔试题,天朝的粉丝知道答案吗. 2010年09月25日 -- 天朝人民长见识——跟这玩意比起来,你们的都算不了什么.

视觉隐藏内容

- iVane - 进步博客
组内做的一个分享,主题是“视觉隐藏内容”,主要关注隐藏的方式、方法及每种方法对可访问性的影响,并着重分析了a & label元素的可访问性,介绍了使用clip来做视觉隐藏. 内容有点散,但主题明确,其他组的几个同事来要PPT,现在传至slideshare,错误之处,请指正.

“后视觉设计”时代

- - 阿里巴巴(中国站)用户体验设计部博客
一直想透过某种方式,把自己对视觉设计的一些理解和看法梳理一番. 同时目前团队里的视觉设计师,大多有一些共同的苦恼、疑惑和对前景的不明晰. 希望我的这些理解和看法对大家有所启发,能让大家对自己所从事的职业有更深入的思考.  这是我在某设计师群里说的一句话,里面有一个多年从事运营视觉设计的同学,立马跳出来反驳,最后到了只差骂:“你才死了.

人机交互中的设计隐喻-由Mac的文件替换引出来的话题

- armgod - 心弦 | blog
今天晚上Twitter上冒出来个很热闹的话题,是关于OS X的GUI设计理念的,因为我也有大量参与,遂连夜把内容整理至此. 话题的起因,是 @raptorz 抱怨说Mac“复制时碰到同名文件夹时不是合并,而是把目标文件夹删除,再把源文件复制过来的,我丢了好多文件”. “消消气,我得说你这是被Windows错误观念带坏的典型例子:它错误地使用了‘文件夹’的隐喻”.

我眼里的视觉与文字

- Tony - Koubei UED
原来把题目定为“视觉与文字”,但是又觉得这题目似乎有点过大,怕用了专业的标题却写出非专业的文章. 而我无意暂时也没有能力去对视觉一些细节做极为专业的考究,只希望通过自己一些学习和了解来加深自己对美的判断吧. 其实文字本身就是一种视觉语言,它把现实世界的所有事物,都以字的形式来进行了表现. 曾经读过一篇文章,说在传统的版式设计中,设计师们更喜欢做英文的排版,因为从视觉上来看,英文很容易形成线和面的关系,且字母有节奏感,比如aby这三个字母放一起有高矮区别;而中文相对来说,单调、孤立、不流畅.