不一样交互组件.pdfVIP

不一样的交互组件 交互设计是一个创造性的工作 ，利用创新的方式漂亮地解决产品问 ，是一个交互设计师价值的 体现。当创新的交互设计被用户认可、被业界同行学习 ，更是一种巨大的职业满足感。这种创新不 一定是惊天地泣鬼神的革命性设计 ，一个小小的交互组件的创新就可以让产品体验增色不少。今天 就通过一些案例聊聊交互组件创新的四种常见方式 ，与大家共勉。 一、滚动条的创新 【重构法】 我们先来回想一下阅读PDF文档的两种滚动方式 ：1、手型工具拖动 2、滚动条。 要翻看后面的信息 ，用手型工具向上拖动 ，用滚动条则是向下拖动 ，两种操作方式的原理是什么呢 ？ 把文档分成可视区域A和整体区域B。滚动条滑块对应的是文档的可视区域A 。因此滚动条拖动的是 可视区域A ，而手型工具拖动的是整体区域B ，两种操作方式拖动的主体不一样 ，所以方向恰好相反 。 滚动条可以理解为文档在垂直方向上的缩略图 ，滑块可以表示可视区域当前位置 ，可视区域占整体 区域的比例。随着文档整体区域不断增高 ，可视区域所占的比例越小 ，因此滑块高度不断变小。统 计过IE、FF、Of f ice等常用软件 ，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时 ，滚动 条的拖动体验就相当的差。 Google wave对滚动条做了大胆的创新。 1、 上下按钮与滑块连在一起 （好处 ：从滑块到上下按钮的鼠标运动距离变短 ；问 ：点击上下 按钮 ，滑块无法跟随运动 ） 2、 滚动条的滑块高度固定不变 （好处 ：解决了滑块极小的问 ；问 ：无法表示可视区域的比例 ） 这两处修改优化了传统滚动条的问 ，却引发滚动条基本属性 （“位置”与“比例” ）问 。为解决引发 的新问 ，google wave的滚动条引入了两个新元素 ： 1、 半透明灰色块 （点击上下按钮 ，滑块无法跟随运动 ，则半透明灰色块运动——解决位置问 ） 2、 终止条 （wave内容不断增多 ，终止条位置不断向下 ，用来表示内容整体高度——解决比例 问 。可惜这个终止条视觉效果让人以为是可拖动的 ，容易引起疑惑。 ） Google Wave花了这么大心思创新滚动条 ，也面临着滚动条复杂化后引发的用户习惯问 。个人认 为这个滚动条创新是因产品需要而做的 ，wave一个页面可能同时存在4个滚动条 ，当4个传统滚动条 同时出现在一个页面上效果可想而知。Wave滚动条无论视觉还是交互上都是很“轻”的设计 ，与产品 整体上还算贴切。 ==================================================== 苹果对滚动条的改进则简单有效 ：加锚点。 ac官网 ： 加锚点横向滚动条 ，点击锚点 ，滑块滚动到相应位置 ipho ne音乐专辑列表 ：加锚点的滚动条 ，轻触字母 ，列表滚动到相应位置 加锚点的方式让滚动条增加了导航和准确定位功能 ，变得更加易用。 二、组合搜索框的创新 【组合法】 常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成的 ，合适的控件组合可以带来更好的 效果。 1、 【输入框+下拉菜单】组合 新浪微博的搜索框 ，将下拉选项融合到输入框提示里 ，选择搜索范围的操作更加便利。 Google reader这样的带输入操作的下拉菜单 ，让下拉菜单更加易用。 （这种控件组合在wo rd、 phot osho p等软件里很常见 ，如字体选择控件 ） 2、 【按钮+下拉菜单】组合 豆瓣与Flickr的搜索按钮后面加了一个下拉箭头 ，按钮与下拉选择操作合二为一 （f lickr这个设计与 它网站主导航条体验一致 ，豆瓣用这种设计在其整站看来则略显突兀 ） 三、文件上 组件的创新 【瘦身法】 标准的文件上传组件是由“输入框 （伪 ）+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为 它主要承担显示文件路径的作用 ，于是Firef ox下点击这个输入框是开始文件选择操作 ，chro e更 是把伪输入框改造成了按钮 ，还原控件最原始的作用。 使用标准文件上传组件经常会出现两个提交按钮 ，以上图为例 ，最经常的误操作就是 ：选完文件后 ，直接点击“保存头像设置” ，于是杯具了。 G ail附件上传的设计对文件上传组件做了两次瘦身手术。 过去的g ail附件上传步骤是 ：1、点击“添加附件” （点击后出现一个不带提交按钮的上传组件 ），2 、选择文件 （选完后自动开始上传 ）。去掉了那个提交按钮。 现在的g ail附件上传步骤是