IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

不一样的交互组件(中)

Taobao.com UED Team 2010-04-14 13:42:57 累计浏览 3,854 次
本机暂存

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

    原图已失效

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

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

    原图已失效

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

    原图已失效

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

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

    原图已失效

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

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

    原图已失效

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

    原图已失效

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

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

    原图已失效

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

    原图已失效

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

    不一样的交互组件(上)

    不一样的交互组件(下)

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,499)
  2. 流程管理与用户研究 (累计阅读 17,053)
  3. 网站导航设计的6大分类 (累计阅读 9,298)
  4. 给想转行做产品经理的同学 (累计阅读 6,927)
  5. 互联网产品经理必读书目 (累计阅读 5,840)
  6. “预注册”是一把金钥匙 (累计阅读 5,676)
  7. 忘记技术原理,关注用户心智 (累计阅读 5,598)
  8. 界面设计速成 (累计阅读 5,428)
  9. 网页表单设计摘要 (累计阅读 5,416)
  10. Axure之变量的使用 (累计阅读 5,135)