pigtwo's note

不一样的交互组件（下）

pigtwo — Sun, 16 May 2010 17:48:43 +0800

四、翻页的创新【替代法】

传统的翻页方式是“上一页+页码+下一页”，大家最熟悉的设计。

Bing图片搜索

Google reader

看图购

而近年兴起的这种“无尽滚动翻页”的翻页方式，即滚动条拖动到最底部后开始加载后面的内容，而不再有“上一页+页码+下一页”这样的链接。

相对而言twitter、Iphone app store这样的“递进式翻页”则没那么激进，保留了一个翻页按钮，是介于传统翻页与无尽滚动翻页的一种折中方式。

上图是Google book search一个巧妙的翻页设计，鼠标悬停在文档底部一个局部区域（高度约50px）时，出现一个半透明的层，点击这个层开始翻页。这个巨大的辅助翻页按钮，大大提升了翻页的便利性，且对界面影响很小。

这里讲到的翻页组件创新，是用新的翻页方式替代传统翻页组件。从信息的结构来看，传统翻页是将信息分段，而“无尽滚动翻页”属于信息滚动。这两种方式对应现实生活中的原型是：书籍和电影胶片，书籍把信息拆分到每页里去翻动，电影胶片的信息则一帧帧的滚动而过。

从信息流动速度和翻页便利性来看，“信息滚动”远远大于“信息分段”。这两种翻页方式应该如何选择？我想这应该取决于用户对后面内容的需求强度，像google搜索结果页这种越往后信息质量越低的场景，用户对翻页需求并不那么强烈。Google reader这样不是按信息质量排序的场景，提供高速的翻页方式是个相对必要的做法。需要注意的是，滚动翻页不利于内容准确定位和信息回溯。

信息流动速度对信息接受者心态有很大影响，流动速度越快信息吸收量相对越小，所以阅读pdf文档比阅读纸质书籍心情急躁，忍不住去翻页，是在“扫描”而不是“阅读”（个人主观感受，如有雷同纯属必然）

由此也延伸出一点，交互设计师的工作职责除了架构信息，还应该控制信息的流动速度和供给量。

总结

最后，以一张图片总结交互组件创新的四种方式，一家之言希望对大家有所启发。

不一样的交互组件（中）

pigtwo — Sun, 16 May 2010 17:46:12 +0800

二、组合搜索框的创新【组合法】

常见的带条件搜索框是“输入框+下拉菜单+按钮”三个控件组成的，合适的控件组合可以带来更好的效果。

1、【输入框+下拉菜单】组合

新浪微博的搜索框，将下拉选项融合到输入框提示里，选择搜索范围的操作更加便利。

Google reader这样的带输入操作的下拉菜单，让下拉菜单更加易用。（这种控件组合在word、photoshop等软件里很常见，如字体选择控件）

2、【按钮+下拉菜单】组合

豆瓣与Flickr的搜索按钮后面加了一个下拉箭头，按钮与下拉选择操作合二为一（flickr这个设计与它网站主导航条体验一致，豆瓣用这种设计在其整站看来则略显突兀）

三、文件上传组件的创新【瘦身法】

标准的文件上传组件是由“输入框（伪）+浏览按钮+提交按钮”组成。之说以称之为“伪输入框”是因为它主要承担显示文件路径的作用，于是Firefox下点击这个输入框是开始文件选择操作，chrome更是把伪输入框改造成了按钮，还原控件最原始的作用。

使用标准文件上传组件经常会出现两个提交按钮，以上图为例，最经常的误操作就是：选完文件后，直接点击“保存头像设置”，于是杯具了。

Gmail附件上传的设计对文件上传组件做了两次瘦身手术。

过去的gmail附件上传步骤是：1、点击“添加附件”（点击后出现一个不带提交按钮的上传组件），2、选择文件（选完后自动开始上传）。去掉了那个提交按钮。

现在的gmail附件上传步骤是：1、点击“添加附件”（点击后自动开始上传，且有上传进度条）。去掉了输入框和提交按钮，只剩下一个浏览按钮，上传只需要一次点击操作。

不一样的交互组件（上）

pigtwo — Sun, 16 May 2010 17:40:29 +0800

本文是去年在淘宝ued碳酸饮料会上做的一次分享，在此备份。

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

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

我们先来回想一下阅读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音乐专辑列表：加锚点的滚动条，轻触字母，列表滚动到相应位置

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

Twitter — 传播的背后

pigtwo — Sat, 22 Aug 2009 11:05:52 +0800

记得07年twitter第一次玩twitter的时候，当时觉得twitter就是一个以互联网为大背景的开放聊天室，没啥特牛逼的。时下twitter红的发紫，真正改变了国内一部分人的生活方式，大家越墙越勇，乐此不疲。作为一个准活跃用户玩到现在，开始对twitter有了不同的理解：twitter是一套基于用户关系的信息分发系统。

互联网作为新兴信息传播方式大大加快了信息传播的速度，而twitter作为至今传播效率最高的互联网应用，可以称得上“信息加速器”。传播的过程无非是一传十，十传百。但当个人作为传播媒介，做到一传十容易，要做到十传百就很困难了，因为没有工具来解决这个问题。（于是媒体无比强势，因为它直接做到一传万，一传亿）Twitter从信息分发的覆盖面和速度，解决了“一传十易，十传百难”的问题。

Twitter的核心部件：话题（tweet）+分发渠道（follow）+分发路径（@user）+二次分发（retweet）
Follow解决一传十的问题，retweet解决十传百的问题，@user把传播路径记录下来。信息从产生到传播再到演变放大，整个过程在一个系统内高效地完成。

与News feed比
以Facebook为代表的news feed的系统结构与twitter最接近。但是news feed所产生的内容不具有话题性，“xx和xxx成为了好友”这样的信息不具备传播价值；而且news feed是基于好友之间的行为，缺乏外延性，分发路径无法对外发散。

与Blog+RSS+Trackbacks比
这套组合几乎拥有twitter所有关键部件：话题（blog）、分发渠道（RSS）、二次分发（trackbacks）。但这些部件分散在不同系统，话题与分发渠道相互脱离，trackback模式也在spam的攻击下沦陷了。另外一个原因是blog信息产生的门槛比tweet高得多，缺乏即时性，难以在一个时间点形成tweet的规模效应。

与BBS比
BBS信息的话题性不比tweet差，但作为以话题为中心的封闭系统，没有基于用户关系的系统化分发渠道；转帖是BBS传播的一个重要渠道，与retweet相比，这种分发路径不在一个系统内，也没有记录被下来。

(附一张玩聚RT的截图，很形象的信息传播线路，赞一下玩聚。截图的用户名尚未打码，请勿跨省追捕:0 )

选中状态应该高亮还是灰掉？

pigtwo — Fri, 14 Aug 2009 19:19:45 +0800

导航设计中一个基本的任务点是准确标明当前选中项，不当的设计很容易造成用户困惑。尤其是只有两个列表项时，要对用户准确传达当前的选中项，设计上要很谨慎。针对最近项目中遇到的这个问题，记一笔。

用户判断选中状态的心智模型有两种：

一种是指示灯式，如红绿灯、电梯操作面板、各种仪表盘等，指示灯亮起表示选中——即高亮；

另一种是按钮式，按钮陷下去表示选中——即灰掉。明显告诉用户这个正在使用中，不可点。

===========================案例分割线============================

以上两个分别来自淘宝和有啊，都是选中状态高亮。（合理的指示灯式体验）

以上两个设计分别来自google和iTunes，都是选中状态灰掉。相信不管两个列表项还是三个列表项，都可以清楚知道哪个是选中项。（合理的按钮式体验）

上图来自阿里国际站，图标+链接的形式，选中状态图标灰掉。图标和链接都能传达选中状态，当用户对两者认知不一致时，该相信图标还是相信链接？（指示灯式与按钮式混用，且指示灯式反着用）

上图来自alibaba wholesale，选中状态图标灰掉。与有啊一模一样的设计，实际意义竟然完全相反。（可以看成指示灯式反着用，也可以看成按钮式却没设计成按钮）

========================总结分割线============================

综合以上的案例，造成用户困惑的设计，要么是把指示灯式反着用，要么是按钮式没设计成按钮，要么是两者混着用却没统一。

总结：
1、选中状态高亮，代表最广大用户的认知习惯。
2、使用图标表示选中状态时，应该让选中状态的图标高亮。如果非要让选中状态的图标灰掉，图标应该设计成按钮质感，视觉上明确表现出陷下和浮起的状态。
3、利用链接与非链接也可以准确地表示选中状态。图标+链接的形式慎用。