隔与不隔——爽快传达信息

标签: CDC上海 交互设计 交互 体验 信息 | 发表时间:2011-11-02 10:02 | 作者:CDCer bingo
出处:http://cdc.tencent.com

  你是否曾经被迫背了一首晦涩高深的诗词,却一头雾水呢?国学大师王国维在《人间词话》中曾用“隔与不隔”来区分诗词的高下:
  “数峰清苦,商略黄昏雨”,虽格韵高绝,然如雾里看花,终隔一层。
  “生年不满百,常怀千岁忧。昼短苦夜长,何不秉烛游”,写情如此,方为不隔。
  “采菊东篱下,悠然见南山。山气日夕佳,飞鸟相与还”,写景如此,方为不隔。

  遣词做作,多用代字(如用“桂华”代“月”),便是隔;语语都在目前,感受真切,便是不隔,才能“境界全出”,更好的传达作者想要表达的信息。
  那么,我们又是如何区分网站或软件的高下的呢?关键就在于信息的传达有没有很好很爽快的传达给用户。“隔”着的网站是这样的:

  

  失败的用户体验会挫伤产品价值,而顺畅的用户体验却能更优的展现产品价值,避免用户去猜、去想、去等待、去迷茫。所以我们需要:

 

先想明白用户要干嘛

  除非是专业人员,没有人会为了研究你的网站或软件做的有多“好”而来使用你的产品。用户最在乎的是产品有多效率、服务有多周到、能帮助他们获取多少信息。
  如果你提供的价值无法回报他们投入的精力或金钱,那就会杯具了呀 ( ⊙ o ⊙ )!
  炫、酷的交互体验或是视觉效果虽然可以吸引眼球,但在最常用的功能中,如果信息的呈现过于迂回,不够爽快,就会降低用户的使用效率。大多数情况下,我们最好不要为了设计而“设计”,保证交互过程简洁流畅、符合用户的习惯。

 

第一时间让用户察觉

  想明白了用户究竟要干嘛,我们就应该爽快些,避免“隔”着呈现信息。
  这里会有许多设计技巧,以下取其中几个略作介绍:

1. 只在必要时使用动画
  过多的粉饰不仅会降低响应速度,更会破坏信息的呈现并干扰用户。
  在页面布局发生变化时,使用恰当的动画可以使变化显得不那么唐突,向用户解释刚才到底发生了什么以及所处状态的变化。例如苹果的Time Machine在切换不同时间的文档预览时,会有前后堆叠的动画效果,以更好的呈现先后逻辑关系。

 

2. 有轻重的呈现信息
  让产品的特点和用户的操作流程一目了然。
  信息的主次轻重,可以通过比例、颜色、声音等来对比呈现,以保证用户不会被杂乱无章的信息分散了注意力。例如苹果MobileMe的大器设计,巨大的icon占据了大半个屏幕、制造最强的品牌感染同时明确用户身处何方,登录框、产品介绍链接按钮占其次,登录方式说明、相关页面链接最弱,主次关系随着用户来到页面→最常用操作(登录与查看功能)→获取补充信息的顺序递减。

 

3. 即时的操作反馈
  没有什么比用手拿起东西放到桌子上来的更直接的了——前提是你必须知道桌子有足够的空间。
  在模仿桌面交互的网页中,特定模块或内容的拖放需要通过趣味瞬间反馈:鼠标悬停态、放置被接受态、放置被拒绝态、拖动态等等,借此让用户知道那是一张“可以放东西的桌子”。例如Google的图片搜索里,当你把图片拖到页面时,搜索框会向你招手。

 

4. 在哪里输出就在哪里输入
  原地修改是为了不折腾用户。
  对于某些常用编辑功能,无需开启多余的页面,而可以进行直接的原地修改。例如QQ的签名状态、在线状态这些帮助用户更好展示自己的功能,允许在主面板上直接、方便实时地进行修改。

 

5. 见人说人话
  不要试图告诉用户你有多专业,他们只是单纯需要用你提供的功能完成他想做的事。
  过多的术语、晦涩难懂的词容易引起焦虑。尤其是出错提示时,一长串劈头盖脸、无关紧要的技术解释会让观者鸭梨很大。因此在设计的同时我们也需要做更多的用户调研,更了解他们的真实需求,怎么清楚怎么说,避免“语言不通”。例如Chrome浏览器在崩溃时,明确传达3项信息:告知崩溃、说明原因(简洁,而不是噼里啪啦一堆术语)、给出解决方案。

 

参考资料:
1.《人间词话》王国维
2.《Designing Web Interfaces》Bill Scott & Theresa Neil
3.《GUI Bloopers》Jeff Johnson
4.《The Information Design Handbook》Jenn+Ken Visocky O’Grady

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=4457)

相关 [信息] 推荐:

信息架构

- Michael - Tony-懒得设计
写几篇关于信息架构的文章,系统地输出我理解的信息架构. 发了一篇关于招信息架构实习生的博客,收到不少简历. 但谈起信息架构,多数不了解,稍微了解的扯了很多很偏的东西. 随手搜索了一下,我发现了原因:. 1 《web信息架构》这本书太概念,太学术. 2 有人绑架了“信息架构”这个词,拿出去唬人,内容都是皮毛或者是根本和信息架构不沾边的东西.

信息茧房

- - 云风的 BLOG
最近一个月,无论我打开推特,还是微博豆瓣,每天都被“徐州八孩母亲事件”刷屏. 在公司吃工作餐的时候,也和同事聊过这个事件. 从我的角度看,此事的热度之高,持续时间之久,近年罕见. 能读到我的 blog 这一篇的同学,相信都对这件事的来龙去脉不会太陌生. 如果你不了解,那么 google 一下“徐州八娃女”或是“丰县铁链女” 就能找到很多信息.

免费VPN信息

- 勇 - iGFW
免费试用2天的pptp pn和openvpn. 免费美国pptp vpn帐号. 服务器 199.119.203.166 用户名 vpn 密码 1q2w3e. PageRank为 1及以上的网站,发文介绍此VPN即可得到免费一年的pptp vpn服务,如果再完成其指定的五步操作可获终身免费帐号. Trial accounts have some limitations like you can only use our single demo server, 200mb of bandwidth usage everyday(6GB/Month), some websites are blocked.

Oracle 统计信息

- - 数据库 - ITeye博客
--Oracle 优化器统计信息 Oracle优化器统计信息描述了关于数据库和相关对象的统计信息,当执行SQL查询时,优化器会使用这些统计信息估算出各种不同的执行计划的资源消耗, ,从而选择最高效的执行计划. 当统计信息缺失或者陈旧时,Oracle可能会选择错误的执行计划,导致SQL执行效率低下.

Java 类型信息

- - CSDN博客移动开发推荐文章
*  为什么需要运行时识别对象和类的信息. 多态 - 实例都被向上转型为父类引用,实例调用相应方法时,需要知道当前父类型引用的具体类型,并从中查找相应方法. IDE - 获取任意类的所有字段和方法.  跨网络的远程平台上创建和运行对象的能力. 从磁盘文件,或者网络连接中获取一串字节(表示类). * 运行时识别对象和类的信息的两种方式:.

微博信息的劣势

- 番茄汁 - 互联网的那点事
之前,阿缪老师在微博上说,某位名人话太多了,有点想取消关注. 周末,又听我男人抱怨,奇艺完全是在刷屏,对奇艺长久以来的良好印象一下就没了. 微博井喷式发展,人人都想搭上顺风车. 明星们不再高高在上,商家勤劳地发着团购和优惠信息,劲爆新闻几乎天天都有. 许多人稍有空闲就会上去看看,更多的人,因为上微博把完整的时间分割得七零八落.

[信息图]Google+.vs Facebook

- Bomberman - SocialBeta
自Google+上线以来,一直占据者很多科技频道的头条,很多人甚至到处的问人要Google+的邀请,甚至在ebay上有人还出售邀请码的,价格不菲. 而今天的一直报道则称Google+首战告捷 谷歌市值增加200亿美元,那到底google+和facdebook的一些功能相比,各自优劣在哪里呢. 下面有一张来自 Technobombs.com的信息图也许能让你了解更多.

iCloud Beta 信息汇总

- Donson - 爱范儿 · Beats of Bits
苹果已于周一开放 Beta 版的 iCloud 访问,地址为 iCloud.com ,目前仅面向 iOS 5 或 Mac Lion 用户. 注意,部分 Beta 功能仅面向 开发者. iCloud.com 提供了中文登陆界面,使用 Apple ID 进入后要求你提交更多信息. 我们可以看到几个主要的服务:邮件、联系人、日历、找手机、办公套件.