网页设计技巧:Twitter改版后的界面

Twitter大规模改版已经过去一段时间，但自己早已习惯使用第三方客户端，几乎没有认真的使用和思考过它的重设计，直到前两天客户端遇阻，不得不爬上Twitter，才注意到一点点细节。先让我们看看一切平静时的顶部页面：

。是我设置的背景一部分？我没有啊；仙女？哪跟哪啊？美剧看太多，脑子进水...展开新消息，亮点消失，找回理智的我也终于跟上你的思路，意识到这亮点的作用。

那么为什么Home下面也要用visual cue来提示新信息的“到达”呢？有这个必要吗？比起直白、明显而毫无歧义的“7 new tweets”，这亮点不是很莫名吗？我当即非常自大的将其解释为Twitter的设计人员滥用视觉提示，然而不到半个小时，我就彻底推翻了自己的推断。

为什么我要否定自己呢？因为一个人想要伟大，就必须学会否定自己？这是屁话，用来哄粉丝用的，如果你有的话。真正原因是我很快进入这样一个场景：

图3：下拉的界面

当我下拉页面到图3所示时，“7 new tweets”的“主显区”早已被抛在了“此时”，而我则随着鼠标回到了12分钟前（Twitter果然是“时间机器”）。那么要怎样才能知道自从离开消息提示的“主显区”后，新信息的到来呢？上翻到主显区？抬头看看导航栏的“Home”。

突然之间我认为多余的设计元素向我无情的嘶吼起它的意义。因为Twitter的重设计将导航栏fixed在了viewport的顶端，于是这么一个“附着”在“Home”下的亮点成就了新信息提示的“次显区”，跟随我们的时间轴，随时提示新信息的等待，这很重要，因为它是实时性产品，就需要以某种方式表达这一特性。

但这并不是没有问题，我们要如何查看新信息？点击Home？翻回主显区？我们是否考虑过，点击Home与点击主显区的意义本是不同的，点击Home是重新请求整个页面，那么页面上其它实时元素也会发生改变，例如趋势、推荐用户等；而点击主显区，则仅仅是请求新信息，而不影响页面的其它实时元素。

于是，我的些许疑问：

开关与数字

这样说是否很莫名？我们把亮点的呈现与否作为逻辑的开与关：开灯，有新消息等待；关灯：无新信息到来。这是Twitter的“次显区”采取的策略。

那么如果用数字呢？这应该很容易，只要和主显区的数字使用同一变量，没有新消息就直接显示0，或者“关灯”。问题在于：为什么？为什么要用数字换开关？“次显区”的作用是什么？它与“主显区”有什么不同？提示用户有信息 等待，还是提示用户有多少信息 等待？这两者有区别吗？如果有，会影响用户的认知负担和行为吗？更有趣的是，因为次显区是与“Home”导航条目“合并”的，如前面提到的，这会影响到用户对“Home”的理解，甚至整个导航条的理解吗？

次显区的作用是什么？当主显区离开Viewport，而有新消息到来时，给予我们提示，我们可以由此决定是上翻到主显区，还是直接按下Home。如果我们用数字呢？那么当主显区与次显区共存时，就会有同一数字两次提示。这一点或许有点奇怪，我们可以接受不同形式的冗余视觉提示，例如我们将标题加粗的同时还要改变字体，但如果是具体文字与数字的提示重复，却会引起我们的反感。而当仅有次显区存在的情况下，它提示新消息的到来同时，也暗示了Twitter本身的“实时”属性，如果再考虑界面整体的清晰、功能主次，在这一点的设计上选择“开关”从我的使用角度来说是更适合的决策。

你或许会想，一旦点击 Home，我们在不知有多少新消息的情况下更新会跟用户带来困难。一方面，下面一点说到，精确的数字在这样的情况下给予我们的是无法言状的心理作用，很大程度上需要的还是我们的记忆来辅助；另一方面，文章后段提到视觉提示时，一种思路或许能够解决这个问题，还请耐心。

那么主显区的数字有意义吗？为什么不简单说声：嘿，你有几条新消息了，或者，你有好多新消息了...这个我真没读到过相关研究，不过一种常见的心理或许能够给出一些答案。数字的“精确”表象能够给人确定感，把握、控制感。虽然我们不会数着1、2、3来读条目，但知道将要面对一个精确数目，比起心里没底的读到某条旧信息而止，让用户拥有更多确定感：一切尽在掌握！哪怕两种情况下我们都是靠着记忆告诉我们新旧的界限。当然，如果出现GReader里很多人遇到的“1000+”的情况， “精确感”恐怕只能转化为“无力感”甚至“恐惧感”了。

说来说去，设计在每个层次都要确定主次，决策需要取舍。实时应用所要考虑的一大维度就是时效性，大多数用户来到Twitter主页恐怕不是为了寻找上个星期咱在厕所里发了一条什么推，而是每隔一段时间点击“主显区”，了解最新发生的事情，这也是为什么我要把“7 new tweets”占据的位置称为主显区。当然，咱们也可以从位置关系，从Fitts's Law的来解释，这就不提了，既然它是主，而“灯”是次，不能说狠狠地来句deal with it，而是design with it。

逻辑适用局限性

“次显区”的提示仅仅在主页有效，而当我们离开主页，例如去“Profile”，或“People”页面，即使你有信息更新，次显区也不再有效，准确的说，50%有效。即你是“开灯”状态离开，那么Home下面的灯永远是开的，无论此时信息是否更新，“开灯”状态都是“正确”的，而如果我们是“关灯”状态离开，那么此时所有信息的更新都无法在“次显区”得到展现。

于是在这时，这盏灯的意义就不完全如前所述了，它并不完全代表你上次查看信息后的更新状态，而只在你停留在主页面的状况。如果是这样一个逻辑，那么或许就需要质疑将其与“Home” 合并是否是一个合理的决策了。如果我们将Home增加了这么一个更新提示功能，那么其它导航条目呢？我都知道这样的顶级导航条目是全局性，即全站内有效的，这也算是互联网用户的一种隐形常识。那么顶级导航的功能是否也该全站内有效呢？至少Twitter的这盏灯不是。

虽然Twitter将导航栏设置为Fixed，从页面呈现（CSS）属性上给了“次显区”一个视觉上合乎逻辑的栖身之地，但从更大范围的流程逻辑来说，这是有很大“瑕疵”的。

更多的视觉辅助

如果单从Twitter的Home页面来说，我简单把它分为三个维度：时效 、话题 、人 。这三者是相互交织的，每一条推的三个核心属性即话题（内容主旨），时效（发表时间，更重要的，与其他推在时间轴上的关系），以及人（发表人，人的属性自然更多）。每个维度我们当然也可以细分下去，但这不是我要在此探究的。

仅仅针对Home页面，时效上，每条推按时间轴线性队列排列（当然，这与Twitter回复等机制在联系结构上的极简有关，相比之下新浪微博倒是可以在时间轴上有很多探索，这个有机会再讨论）。然而，既然已经提供了“时间锚点”——OK，稍微解释一下，我所谓时间锚点，即主显区“堆积”的推在时间轴上的起始与终止时间点——那么当用户在点击主显区后，这些“新信息”为什么不能用高亮方法（前景，背景，或图形）辅助用户呢？

也正是因为时效性，采用高亮就自然需要考虑从“褪色”到“常态”，告诉用户“信息已老”。我们可以选择计时结束时，也可以是计时结束前用户点击下一批新信息时。不过，怎么计时？如果规定每条推有一个阅读时间常量，然后乘以新信息数目，可行吗？一种情况是，我点击一条链接走了，读完了相关资料才回来，这有常量可循吗？

事实上，上面这个“阅读时间常量“的想法是混淆视听，我们说的时效性，不是相对于用户花费时间，而是相对信息本身。哪怕一条昨天的信息存在“主显区”里，被用户作为“新”信息点击出来，它仍然是“老”了而不该被加亮，因为作为Twitter这样的实时应用来说，它的核心价值就在于信息的时效性。

没错，用户的确会有不同需求，例如某一话题中RT次数最多的条目，某人言论中RT次数最多的条目（这可以叫做“名人名言”条目？），或者某一特定时间段的话题、人等，这些都可以提供相关功能与对应界面。如果确有人把Twitter当作Google Reader里的文章一篇篇阅读，那么也可以信任诸如TweetDeck这样的第三方提供“已读/未读”标签。但作为Home页面，时效永远是主题与重点。

所以，如果有时间常量，那么这个常量是根据当前时间与信息发布时间的差别而定：5分钟，从高亮过渡回“平淡”

图4：页面的时间过渡

从CSS实现来说如图4所示的gradient也不复杂，无论是用图片还是CSS3的gradient属性：将新信息中5分钟内以及第一个超过5分钟的信息（如果有的话）“包裹”在一个div内实现背景的gradient。（如果新信息的历史均超过5分钟自然更省事，什么也不用干。）

图4的Gradient效果只是一个示例，它用色彩渐变来提示时间流逝，如果考虑使用texture呢？

信息的时效性最好的对比或许就是报纸了。如果我们想想一张报纸从刚刚印刷出厂，到最后散落在街角风吹雨淋到渐渐消逝，那么Twitter新信息可以展现在类似一张油墨印迹浓重的崭新纸张这样的背景质感上，而随着时间轴的回溯，逐渐变成发黄褪色的旧报纸的质感...

岔开一点，如果我们从“报纸”这个metaphor延伸下去，Twitter提供的“favorite”或者说“收藏”功能，就好像一位报纸读者每天剪下特定的故事、新闻，收集在一起，甚至制作成scratch book，分享给到访的朋友，或者辅助他的写作（如果我们制作一个persona，将他定位作家的话）。由此我们可以得到怎样类似的Twitter读者故事？而由此展开怎样的设计概念呢？我想你已经有所想法了，至少在我脑海里已经有了不少。

另一个视觉提示区域是Trend。Trend直接与话题相关：

图5：Twitter趋势

Twitter的Home页面所提供的Trend是自动定时更新的，然而我的问题有三点：

• 趋势是何时更新的？WHY？1，Twitter服务不稳定，如果数据请求失败，用户面对界面是很难察觉的。时间上的提示可以让用户意识到趋势的 “时效”；2，A Sense of Control；3，提示Twitter对时效特性的强调，every minute counts！
• 什么话题是刚刚挤进页面的？WHY？特别是对于刚刚进入页面而没有“跟踪”趋势的用户。类比一下，就好像一旦出现“突发性”新闻，电视台会特别加上标签：Breaking NEWS 一样。吸引眼球，聚集人气，引发关注，刺激参与。越多用户在第一时间传播突发性事件，那么类Twitter服务的“时效性”就能在更大的范围内被认可，这是它们的核心价值。
• 每个话题的趋势？WHY？类似上面的逻辑。提示用户话题的上升下降趋势，引发“好奇心理”。对于我们这些翻过大火墙的人，经历过众人将火墙推上 Trend的心理，当用户预期某一话题“需要”上升，参与度也会随之上升。提示每个话题的上升、下降趋势，不过是“诱发”罢了。（很自私的说，其实是因为我喜欢看着数字的实时变化发呆...）

于是得来这么一个版面：

图6：被我山寨后的Twitter趋势

当然，我也实验过更疯狂的变化：将话题的前景色与趋势上下的色彩一致，将字体加粗与上升、下降趋势联系，不过似乎过于突出而显得界面混乱，没有主次。不打扰正常浏览的一点微小提示似乎更好。另外，“New”会随着下一次Trend自动更新而消逝，或自动易主。

写到这里，我该结束这一由小小图表引发的惨烈思考了。在这个过程中我突然想到这么一点：设计的simplicity不是追求的界面简单，而是追求的逻辑简炼；不是看起来简单，而是用起来简炼。这个确实需要与用户的共鸣，对产品核心与扩展之间关系的不断思考，以及勇气去不断尝试与修正。关于Simplicity的思考或许能在下一篇文章用一点例子谈到，好奇的话，剧透一点：我在Nokia N78上使用国内四个微博客户端的一点感受。