交互组件微创新让网站用户体验增色的方法

2024-07-11 08:25:51

字体：大中小

来源：转载

供稿：网友

纵观交互设计发展史，就是创新的交互模式被广为接受后成为标准，旧的交互模式不断被淘汰的历史。所以交互模式发展也是一个“物竞天择，优胜劣汰”的过程。本文是09年在碳酸饮料会上做过的一次分享，当时创新的东西现在已经被广泛应用了。因为主题跟现在UX平台鼓励创新的目标一致，所以再贴一次:)
　　交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。
　　一、滚动条的创新【重构法】
交互组件微创新如何让网站用户体验增色错新站长站

　　我们先来回想一下阅读PDF文档的两种滚动方式：1、手型工具拖动 2、滚动条。
　　要翻看后面的信息，用手型工具向上拖动，用滚动条则是向下拖动，两种操作方式的原理是什么呢?

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

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

　　1、上下按钮与滑块连在一起(好处：从滑块到上下按钮的鼠标运动距离变短;问题：点击上下按钮，滑块无法跟随运动)
　　2、滚动条的滑块高度固定不变(好处：解决了滑块极小的问题;问题：无法表示可视区域的比例)
　　这两处修改优化了传统滚动条的问题，却引发滚动条基本属性(“位置”与“比例”)问题。为解决引发的新问题，google wave的滚动条引入了两个新元素：

上一篇：网页设计基础教程(二)：主题篇

下一篇：网页制作经验分享:干净简洁的网页列表代码