今天又针对校内手机客户端的照片上传功能作了一下测试。发现上回遇到的问题不是bug，程序没有错误，完全是交互设计的问题。上次的详情见这篇文章 。
之所以上传照片的操作变成了设置头像，是因为我自以为选中了“上传”，实际上是选中了“设为头像”。
看此图：
如果你看到了左下角的菜单，你认为我当前选中的是什么？你还是犹豫了一会对吧？最终大多数人，包括当时的我在内，还是认为当前选中的是设为头像吧。因为在我们对于导航栏的心智模型中，选项被选中或是被鼠标划过时才应该呈现高亮状态，而其他选项是比较暗的颜色。这也符合人的正常视觉特征，需要重点突出的东西要明亮一些。可校内的这个设计确正好相反，图中当前被选中的竟然是“上传”！
这样的设计贯穿校内手机版的始终，但在某些情况下问题不太明显，如下图：
看到上面的导航，虽然有些别扭，但不会导致过多的犹豫，因为不可能一次选中3个。但对于开始那种情景，选项只有两个，这时候就会产生较大的歧义。虽然用户之前使用其他页面导航的时候没有出现问题，但这只是由于某些限制因素（比如上图）限制了用户的其他猜疑，而一旦这种限制因素不存在了，歧义便会接踵而至，变成了坏设计。
而且导航菜单对于按键的响应也存在问题：
选项多于两个的时候，可以看到：选项上下跳跃与手机按键上下操作是匹配的。据此也可以找到当前所在的选项。
而只有两个选项时，你知道我按的是上还是下呢？一阵乱按？此时来自按键的辅助判定也没有了。于是orz了……
具体看我录制的视频：
对于这种情况应该怎么做？
一种方法是统一修改导航设计。
很纳闷为什么网页版校内没有这类问题，而手机校内会出现？
上图是网页校内的导航，光标当前指示的选项被高亮了，没有任何歧义。
但也不排除某些特殊情况，还是被弄的楞晕…如下：
VS 
选项设计得真像太极阴阳鱼。当你看到太极阴阳鱼的时候，你觉得哪个是被选中的呢，或者说哪边应该是重点呢？
统一导航设计就是要统一风格和视觉元素，该深蓝的都深蓝，该浅蓝的都浅蓝，不要一会这一会那，搞得用户头晕。当然前提是这种设计是显式的，是不需要用户思考的，校内手机版的统一设计就是个反例。
另一种办法就是有针对性的调整，这与视觉风格统一并不矛盾，只要不搞成阴阳鱼这种两难的选择就行。针对两个选项的，可以添加部分视觉元素给予区分，不要只通过颜色。既然手机版的选色不太符合用户心智模型，但在大多情况下也可以区分，那就在出现阴阳鱼或只有两个选项时，添加点小附件来区分一下。
修改后如下图：
由于加入了指示性的元素，理论上此处可以不再引入颜色差异，但因为手机屏幕比较小，单用小箭头区别看起来会比较累，所以颜色差异还是有必要保留的。这样虽然可能会引入视觉噪音，但至少可以避免歧义。
总之呢，做交互设计即要有全局观念，又要对细节给予足够的关注。而往往正是这些细枝末节，决定了用户如何使用你的产品，进而影响了产品的成败。
手机人人客户端的设计，包括新出的人人小拍，在很多细节上都推敲得不够好. 特别是手机人人客户端，易用性上还有很大的改进空间. 至少向腾讯的无线产品学习下~
@Liuyaping, 刘老师您观察得真仔细呀，我刚刚注意到，果真是每边小一个像素。但实际情况往往总是用户这边问题已经出现了，经过设计师提醒，才发现原来是自己没有注意到这些细微的差别，这会让用户觉得自己很愚蠢的。为什么不设计得更明显呢？为什么要让用户犯错呢？而且这里还有一个问题：手机显示屏的像素粒度比pc上小很多的，这也是为什么手机上几乎看不出来的差别，截图上传到pc上会比较明显，会被您洞察到。手机上是很难发现一个像素的差别的，而且用户也没有像设计师一样的洞察力。如果设计师是通过pc开发手机软件的话，这仍然是所面临的一个重要的问题。
其实选中的菜单项的mouse over 颜色不是全部变化的，是要略小2px的，仔细观察下：）