行业关键字
UI设计UI理论和资料 → 正文
获得焦点再显示
作者: 第8音 来源: 视觉同盟 时间: 2009年4月29日

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

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

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


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

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

原文链接:http://blog.d8in.com/posts/288.html

(责任编辑: echo

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版