产品设计之交互组件微创新
网络推广 2021-07-09 22:17www.dzhlxh.cn网络推广竞价
纵观发展史，就是创新的交互模式被广为接受后成为标准，旧的交互模式不断被淘汰的历史。所以交互模式发展也是一个“物竞天择，优胜劣汰”的过程。本文是09年在碳酸饮料会上做过的一次分享，当时创新的东西现在已经被广泛应用了。因为主题跟现在UX平台鼓励创新的目标一致，所以再贴一次:)
交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互价值的体现。当创新的交互设计被用户认可、被同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互的创新就可以让产品增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。
我们先来回想一下阅读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下点击这个输入框是开始文件选择操作，chrome更是把伪输入框改造成了按钮，还原控件最原始的作用。
使用标准文件上传组件经常会出现两个提交按钮，以上图为例，最经常的误操作就是：选完文件后，直接点击“保存头像设置”，于是杯具了。
Gmail附件上传的设计对文件上传组件做了两次瘦身手术。
过去的gmail附件上传步骤是：1、点击“添加附件”（点击后出现一个不带提交按钮的上传组件），2、选择文件（选完后自动开始上传）。去掉了那个提交按钮。
现在的gmail附件上传步骤是：1、点击“添加附件”（点击后自动开始上传，且有上传进度条）。去掉了输入框和提交按钮，只剩下一个浏览按钮，上传只需要一次点击操作。
传统的翻页方式是“上一页+页码+下一页”，大家最熟悉的设计。
交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互价值的体现。当创新的交互设计被用户认可、被同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互的创新就可以让产品增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。
我们先来回想一下阅读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下点击这个输入框是开始文件选择操作，chrome更是把伪输入框改造成了按钮，还原控件最原始的作用。
使用标准文件上传组件经常会出现两个提交按钮，以上图为例，最经常的误操作就是：选完文件后，直接点击“保存头像设置”，于是杯具了。
Gmail附件上传的设计对文件上传组件做了两次瘦身手术。
过去的gmail附件上传步骤是：1、点击“添加附件”（点击后出现一个不带提交按钮的上传组件），2、选择文件（选完后自动开始上传）。去掉了那个提交按钮。
现在的gmail附件上传步骤是：1、点击“添加附件”（点击后自动开始上传，且有上传进度条）。去掉了输入框和提交按钮，只剩下一个浏览按钮，上传只需要一次点击操作。
传统的翻页方式是“上一页+页码+下一页”，大家最熟悉的设计。
上一篇：苹果谷歌微软用户体验准则
下一篇：5大诀窍助你打造更加简洁的用户界面