本文主要想表达的内容是：如果某个组件具有某个属性，那就把这个属性发挥到极致；如果某个组件不具备某个属性，那么就不要把它伪装成具备这个属性，并用这个属性来诱奸用户。 简单说，设计就是要解决问题，这是设计的本质与落脚点。 电子商务网站的主导航设计是整个网站最最最核心的模块之一。导航需要解决的问题就是，告诉用户如何快速准确的到达他想要去的任何地方。 在所有电子商务网站中，Amazon（注意，不是卓越亚马逊）的导航设计向来是所有电子商务网站学习与仰慕的对象。Amazon的导航在经过数次变迁之后被从顶部挪到了左侧，从横向Tab变成了纵向Tab。Amazon的这种Tab页签式导航，相对与卓越亚马逊的标签列表式导航而言缩短了主导航的高度，在第一屏的时候就能把所有商品大类全部暴露出来，降低了用户的寻找成本。因此，这种模式的导航被越来越多的电子商务网站所接受。 大约在1年前，QQ商城改版，借鉴了Amazon的这种导航模式，同时做了创新式的扩展。QQ商城在每个Tab页签里不仅展示了二级类目，同时还展示了品牌，这使得整个主导航从纵向上进一步缩短同时往横向上扩张。 随后而来的京东商城和淘宝商城（扩展有分类推荐与品牌推荐）以及淘宝电器城纷纷相仿并采用了这种扩展式的Tab导航模式。 不过，我觉得这种创新在某些交互细节上有待改进，我们先来看一下QQ商城的主导航截图：QQ商城的这个主导航在Tab页签的标题上显示的形式是“一级分类标题+二级分类推荐”的形式。 从这个表现形式上看，“运动鞋”、“棒球帽”是2个标签，我这么认为是没问题的吧？ 我们假设这样的一个场景：你来到QQ商城，很明确的就是想购买“棒球帽”，你肯定是会直接奔去点击“棒球帽”（注意，是点击）。因为这个“棒球帽”长的跟一个标签一模一样，我们之前的Web使用经验告诉我们，标签就意味着是带超链接的，是可以点击的。可是，当你把鼠标移到“棒球帽”这个标签上的时候，你发现，他是个伪娘！ 你点击了半天，发现没有反应，你再仔细一看，他引导你打开了整个“运动户外”下的二级分类….这个时候，你的鼠标需要在做一次长途奔袭，去弹出来的弹层里寻找“棒球帽”，当然，你还得小心点别奔袭到界外，不然整个弹层就关闭了，你需要再来一次（图中虚线）。 这个场景里，我们经过几个动作：1、准备点击；2、无数次点击后觉醒；3、鼠标小心翼翼的滑过弹层去寻找；4、点击。 P.s:其实，图中这个例子我们在弹层里也找不到“棒球帽”，因为它被变异成了“运动帽”？ 我们再来看京东商城和淘宝电器城（注意，不是淘宝商城）。其实跟QQ商城差不多，只不过样式上做的难看点….当我目标明确的奔着“洗衣机”去的时候，鼠标所到之处弹层出现了一级分类“大家电”下的所有二级类。同时，“洗衣机”、“平板电视”这2个处在Tab页签标题上的推荐二级类被覆盖了。 这个场景里我们经过的动作：1、准备点击；2、发现要点的家伙没了，开始寻找；3、点击 从这个意义上讲，我认为，京东商城和淘宝电器城的这种处理方式要比QQ商城在体验上更好。QQ商城在鼠标Mouse on之后给了我2个道路：点击，拼命的点击、鼠标奔袭到弹层；而京东商城和淘宝商城直接覆盖了之前那2个长的像标签的家伙，我只有一个道路：鼠标奔袭。 有的时候，给用户越少的选择更能让用户集中起来完成目标任务。 OK，案例观摩完毕，分析一下为什么会出现上面的问题？ 很简单，我觉得就是没有把一个东西做到极致，随心所欲的使用表现层的东西去覆盖了框架层与结构层的事情。展示在Tab页签标题上的那些（洗衣机、平板电视）其实并不是标签，但是，他们在展现上跟标签一模一样（京东使用了灰色字体，说明他们意识到了这不是标签，但是我觉得还不够）。 解决方案？ 请参见Amazon的做法。 把那些长得像标签的家伙砍掉，使之不具备标签的属性，换成文字描述就OK了。 最后，几句题外话： 1）不知道京东商城暴露在每个Tab页签标题栏里的那2个二级分类是怎么来的？我仔细看了一下，似乎是程序直接调用而不是经过人工编辑的？如果是让程序来调用这个黄金地段的内容，那就真太可惜了。 2）京东商城在首页左侧主导航里的一级分类都是可以点击的（如数码手机），但是在全部分类页面却变成了不可点击的，Why？ 3）QQ商城暴露在每个Tab页签标题栏里的那2个二级分类似乎是经过编辑的，但是这种标签式的展示让我很挫败，比如我想买个棒球帽，结果找了半天只发现个类似的运动帽…. 4）最后， 大熊哥主导的淘宝商城在此次主导航比拼中最终胜出！
交互设计应该看人下菜碟
本文，我主要想表达的意思是：交互设计师一多半的时间其实是在做逻辑分析，从业务逻辑到产品逻辑的迁移；然后另一部分时间是在做按钮的摆放。（注意，我说的是部分，不是全部！）在这两个过程里需要注意的最重要的问题就是不能懒！ 让我们再来重复一下那句关于交互与用户体验之间的关系的论断： 优秀的交互设计应该是用最低成本的交互，最愉悦的满足用户的需求。 那么，什么是最低成本的交互？我的理解，用户需要的时候才出现交互，用户用不到或者不能使用的时候就不出现交互；当用户需要交互的时候如果能二步完成就坚决不搞成三步。用一句通俗的话说就是：看人下菜碟。 在大的层面上，在对产品进行需求分析的时候我们会考虑不同的用户群，他们对一个产品的使用需求和使用方式都是不同的，在这里我们对用户进行了划分。我们把这个思想坚持到交互分析里来，对于不同的用户在不同的使用环境下需要的交互方式也是不一样的。 之前，顺网UED的同学们对用户交互行为的分析提出了“交互表格”的方法：划分2个纬度，页面元素和用户行为。最左边一列是页面可见元素（包括光标）；最上面一行，是用户的行为（尽量按操作流程）。中间交叉的为场 景描述。通过这种枚举的方式可以详尽的列出所有可能存在的交互行为，然后我们对每个交互行为再划分出不同的交互方式。 比如：我们要做一个积分商城的积分兑换交互。经过分析、合并，我们知道可能存在这么几个场景：①用户未登录（注册）；②用户已经登录，但是积分不足；③用户已登录且积分足够。 下面，我们选2个电子商务方面的代表网站（京东商城VS支付宝）来看一看他们怎么处理的： 京东商城的积分商城页面里，不论你是否登录（注册）、积分是否足够，积分兑换详情页的内容永远保持“一致性”。当未登录点击兑换的时候会跳转到登录页面；当登录后积分不足点击兑换的时候会弹出窗口提示积分不足； 当登录且积分足够的时候，会显示兑换成功。 支付宝的积分商城里对上述问题做了改进，我们看到支付宝的设计师对业务逻辑做了足够的分析：先对用户登录行为做判断；把用户所持有的积分放在了所需积分的下面；积分不足的时候给出提示。 那么，这些足够了吗？不，我觉得还应该有改进空间（京东商城的设计完全不具备交互性，不做分析）。对照“看人下菜碟”的说法，我们来看看哪些是可以改进的。 1、如果用户没有登录（注册），用户是否需要去点击“兑换”OR“评论”按钮？答案是否定的。这个时候用户最需要什么交互？是登录！ 当然，这里会存在一个用户是否需要注册的行为？我个人认为，在积分商城这个产品场景里，注册是存在几率很小的行为，完全可以放到登录的引导页面里去。（积分兑换的前提是注册用户，且在网站上发生了用户行为产生过积分才能兑换，就算是注册送积分也是需要先完成整个注册过程的 吧） 2、如果用户登录但积分不足，用户最需要什么交互？了解积分还差多少，如何获得更多的积分。其他的交互行为对这类用户来说都是多余的。 3、 如果用户登录且积分足够，用户最需要什么交互？兑换。这个时候用户是否需要“点评”交互？我觉得不需要，还没有兑换使用，怎么点评？“点评”这个交互行为 应该出现在用户兑换之后再次浏览到这个物品的时候。 下面，是我对积分兑换这个交互模块做的改进。 1、如用用户没有登录（注册）：不做用户持有积分判定（当然，也没法判定）；不出现“兑换”按钮，他的位置由登录提示取代。 2、如果用户登录但积分不足：做用户持有积分判定，同时提示积分差额；不出现“兑换”按钮，他的位置由积分不足提示取代，可夹塞广告，如何获取积分。 3、如果用户登录且积分充足：做用户积分判定；出现兑换按钮。 （左：支付宝的积分兑换交互；右：我的修改版本） 当然，这里只是一个简单的交互条件限定，还可能会有更多兑换限制，从而出现更多的交互行为，比如：注册多久的用户对可兑换、实物兑换 的时候填写收货地址，发货时间段（这个很重要！）、可兑换的数量、等等。 对于任何一个Web页面而言，都必须承担着2个功能：顺利的完成本页面的任务、流畅无误的进入下一个任务。对于如何实现这2个功能，我的土方法就是：有的时候我需要强制你专一的完成本页面的任务，不给你回路；如果这个页面上你要完成的任务太多，我可以考虑帮你拆解。 比如，在注册页面除了注册表单什么都不放，什么面包屑导航全部去掉，甚至LOGO也要搞成不可点击的，这些都是为了“强迫”用户完成本页的任务；用户在后台录入产品的时候，可以考虑对产品的属性进行分块，然后把录入页面拆开（当然，你不能无限制的拆分！）…. 我个人的感觉是，之所以交互过程被搞的很笼统，大部分原因在于交互设计师很懒。懒的做分析，认为只有流程能走通就OK了，不愿意继续细分；懒的做交互Demo，认为这些给技术说明白就可以了。前几天做某个模块的时候我偷了个小懒，在DEMO里把工商银行写成“工行”，然后在PRD文档里做了详细说明。今天再看测试，好家伙，还是“工行”！搞的我羞愧难当，这个问题的责任完全在设计师本身，设计师懒就不能指望技术勤快！当然，这里还存在一个原型图的制作问题，改日再谈。 [...]
