IT技术博客大学习 共学习 共进步

不一样的交互组件(中)

Taobao.com UED Team 2010-04-14 13:42:57 浏览 3,702 次

二、组合搜索框的创新 【组合法】

    

    常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成的,合适的控件组合可以带来更好的效果。

    1、【输入框+下拉菜单】组合

    

    新浪微博的搜索框,将下拉选项融合到输入框提示里,选择搜索范围的操作更加便利。

    

    Google reader这样的带输入操作的下拉菜单,让下拉菜单更加易用。(这种控件组合在word、photoshop等软件里很常见,如字体选择控件)

    2、【按钮+下拉菜单】组合

    

    豆瓣Flickr的搜索按钮后面加了一个下拉箭头,按钮与下拉选择操作合二为一 (flickr这个设计与它网站主导航条体验一致,豆瓣用这种设计在其整站看来则略显突兀)

三、文件上传组件的创新 【瘦身法】

    

    标准的文件上传组件是由“输入框(伪)+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为它主要承担显示文件路径的作用,于是Firefox下点击这个输入框是开始文件选择操作,chrome更是把伪输入框改造成了按钮,还原控件最原始的作用。

    

    使用标准文件上传组件经常会出现两个提交按钮,以上图为例,最经常的误操作就是:选完文件后,直接点击“保存头像设置”,于是杯具了。

    Gmail附件上传的设计对文件上传组件做了两次瘦身手术。

    

    过去的gmail附件上传步骤是:1、点击“添加附件”(点击后出现一个不带提交按钮的上传组件),2、选择文件(选完后自动开始上传)。去掉了那个提交按钮。

    

    现在的gmail附件上传步骤是:1、点击“添加附件”(点击后自动开始上传,且有上传进度条)。去掉了输入框和提交按钮,只剩下一个浏览按钮,上传只需要一次点击操作。

    不一样的交互组件(上)

    不一样的交互组件(下)

建议继续学习

  1. Twitter/微博客的学习摘要 (阅读 12,081)
  2. 豆瓣的Url结构方式一览 (阅读 7,821)
  3. 别得瑟了,你很可悲! (阅读 7,801)
  4. 微博架构与平台安全演讲稿 (阅读 5,620)
  5. 基于PECL OAuth打造微博应用 (阅读 5,100)
  6. 微博进入肉搏时代 (阅读 5,101)
  7. 深入理解OAuth与豆瓣OAuth test (阅读 4,942)
  8. 豆瓣是啥? (阅读 4,904)
  9. 给微博打上标签 (阅读 4,760)
  10. 在sae中利用SaeFetchurl进行豆瓣的OAuth授权 (阅读 4,522)