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

不一样的交互组件(上)

Taobao.com UED Team 2010-04-14 13:41:56 累计浏览 3,556 次
本机暂存

    交互设计是一个创造性的工作,利用创新的方式漂亮地解决产品问题,是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习,更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计,一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式,与大家共勉。

一、滚动条的创新【重构法】

    原图已失效

    我们先来回想一下阅读PDF文档的两种滚动方式:1、手型工具拖动 2、滚动条。

    要翻看后面的信息,用手型工具向上拖动,用滚动条则是向下拖动,两种操作方式的原理是什么呢?

    原图已失效

    把文档分成可视区域A和整体区域B。滚动条滑块对应的是文档的可视区域A。因此滚动条拖动的是可视区域A,而手型工具拖动的是整体区域B,两种操作方式拖动的主体不一样,所以方向恰好相反。

    原图已失效

    滚动条可以理解为文档在垂直方向上的缩略图,滑块可以表示可视区域当前位置,可视区域占整体区域的比例。随着文档整体区域不断增高,可视区域所占的比例越小,因此滑块高度不断变小。统计过IE、FF、Office等常用软件,一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时,滚动条的拖动体验就相当的差。

    Google wave对滚动条做了大胆的创新。

    原图已失效

    1、 上下按钮与滑块连在一起(好处:从滑块到上下按钮的鼠标运动距离变短;问题:点击上下按钮,滑块无法跟随运动)

    2、 滚动条的滑块高度固定不变(好处:解决了滑块极小的问题;问题:无法表示可视区域的比例)

    这两处修改优化了传统滚动条的问题,却引发滚动条基本属性(“位置”与“比例”)问题。为解决引发的新问题,google wave的滚动条引入了两个新元素:

    1、 半透明灰色块 (点击上下按钮,滑块无法跟随运动,则半透明灰色块运动――解决位置问题)

    2、 终止条 (wave内容不断增多,终止条位置不断向下,用来表示内容整体高度――解决比例问题。可惜这个终止条视觉效果让人以为是可拖动的,容易引起疑惑。)

    Google Wave花了这么大心思创新滚动条,也面临着滚动条复杂化后引发的用户习惯问题。个人认为这个滚动条创新是因产品需要而做的,wave一个页面可能同时存在4个滚动条,当4个传统滚动条同时出现在一个页面上效果可想而知。Wave滚动条无论视觉还是交互上都是很“轻”的设计,与产品整体上还算贴切。

    ====================================================

    苹果对滚动条的改进则简单有效:加锚点。

    原图已失效

    mac官网: 加锚点横向滚动条,点击锚点,滑块滚动到相应位置

    原图已失效

    iphone音乐专辑列表:加锚点的滚动条,轻触字母,列表滚动到相应位置

    加锚点的方式让滚动条增加了导航和准确定位功能,变得更加易用。

    不一样的交互组件(中)

    不一样的交互组件(下)

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,498)
  2. 120个优秀的水平导航设计 (累计阅读 75,624)
  3. 流程管理与用户研究 (累计阅读 17,052)
  4. 我的 Sublime Text 2 笔记 (累计阅读 16,728)
  5. 越简单越丰富――极简网页设计视觉呈现技巧 (累计阅读 11,599)
  6. 看看各个网站的404错误处理 (累计阅读 10,208)
  7. 网站导航设计的6大分类 (累计阅读 9,297)
  8. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,197)
  9. 视觉注意力―解剖设计的根源 (累计阅读 6,969)
  10. 给想转行做产品经理的同学 (累计阅读 6,927)