不一样的交互组件.pdfVIP

不一样的交互组件 交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互设计师价值的 体现。当创新的交互设计被用户认可、被业界同行学习，更是一种巨大的职业满足感。这种创新不 一定是惊天地泣鬼神的革命性设计，一个小小的交互组件的创新就可以让产品体验增色不少。今天 就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。 一、滚动条的创新【重构法】 我们先来回想一下阅读 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、【输入框 + 下拉菜单】组合 新浪微博的搜索框，将下拉选项融合到输入框提示里，选择搜索范围的操作更加便利。 Google reader 这样的带输入操作的下拉菜单，让下拉菜单更加易用。（这种控件组合在 word 、 photoshop 等软件里很常见，如字体选择控件） 2、【按钮 + 下拉菜单】组合 豆瓣与 Flickr 的搜索按钮后面加了一个下拉箭头，按钮与下拉选择操作合二为一 （flickr 这个设计与 它网站主导航条体验一致，豆瓣用这种设计在其整站看来则略显突兀） 三、文件上传组件的创新 【瘦身法】 标准的文件上传组件是由 输入框（伪）“ + 浏览按钮 + 提交按钮 ”组成。之说以称之为 伪输入框“ ”是因为 它主要承担显示文件路径的作用，于是 Firefox 下点击这个输入框是开始文件选择操作，