以用户为中心的设计

获得焦点再显示

作者:xw  |   发布: (网友)Tony   |   时间:2009-04-21 03:58:55 文字大小:- +

在facebook最近一次改版中,明显的增加了在feed本身上的交互操作,而最值得借鉴的就是feed上回复框的处理方式。

默认只有一条回复框,回复框中用灰色字体显示”留下评论….”,当单击以后,回复获得焦点的同时整个区域变大,显示出完整的回复框。

之所以说这个设计非常赞就是因为解决了两个问题:
1、降低了输入框对feed的干扰:如果要在feed中增加一个完整的输入框,因为feed的特殊性,这个输入框+评论按钮会重复很多次,势必会干扰到用户正常的阅读feed信息。而facebook的现在处理可以在放下输入框的同时把对feed的数据的干扰减小到最小。
2、巧妙的隐喻:其实从表面的上看是一个小输入框点击以后变大,实际上这里用到的是一个隐喻手法,就是默认用一个输入框代替原有的内容告诉用户这里是可以评论的,用户要评论的话本能反应就是点击输入框,这个时候一个包含真正输入框的评论区域就显示出来了。

用途以及问题:
这种设计方式可见可以用于很多输入的地方。虽然这样的设计方式可以在页面上有效的减小默认输入区域的显示。但是也不是什么场合都适合的。譬如搜索引擎的输入框就很不适合。

上图是百度的首页,我们看看在输入框里面的是什么,没错是焦点,搜索引擎的输入框默认是有焦点的。而我们看到上面的设计方式只有点击以后,真实的输入框才获得了焦点。
那么到底有什么区别应该是什么时候用呢?关键点就是在于用户的目的性,譬如用户在登录facebook的后目的性很复杂,可能去上传照片,也可能只浏览feed,而至于评论,一般是要先浏览内容以后才能评论的。所以可以看出这个时候对于输入框的操作应该是一些动作之后的操作。而登录baidu的用户目的性相对单一很多,就是搜索,打开页面以后大多数的操作就是要输入内容搜索,可见这个时候让用户点击一次就很不合适了。

 

更多
打印  |  相关话题:交互设计中的视觉结构   |  类别:信息和交互   |  源地址

UCDChina的书

《UCD火花集2》封面
UCDChina编著,定价35元
从卓越网购买 从当当网购买

《UCD火花集》封面
UCDChina编著,定价25元
从卓越网购买 从当当网购买

《应需而变——设计的力量》封面
UCDChina团队成员JunChen译,定价29元
从卓越网购买 从当当网购买

《网页设计解析》封面
UCDChina团队成员周陟著,定价62元
从卓越网购买 从当当网购买

《赢在用户》封面
UCDChina团队成员Angela译,定价29元
从卓越网购买 从当当网购买

《用户体验的要素》封面
UCDChina团队成员Angela译,定价25元
从卓越网购买 从当当网购买