浅谈白社会交互设计的创新三

　　今天，3月21日，世界睡眠日，恰巧是个周末，劳累了一周的大家有没有在家里睡懒觉呢提醒大家，关注睡眠质量就是关注生活质量，关注睡眠就是关注健康。
　　好了，回到正题，在前作（一）和（二）中谈到了真心话和任务的设计，这次谈谈白社会中三个较小一点的设计点。
　　一、好友新鲜事新增提醒
　　在白社会的首页中，分量最重的就是这个好友新鲜事了，为了保证信息流的快速直接，我们采用了推的模式，并且直接即时的将信息推到用户的面前，这就是所谓的实时Feed了，这其实是一种非常酷的体验，信息获取快速直接，也省了刷新页面，是不是有种使用聊天室聊天的感觉呢。但是，凡事有利就有弊，在新鲜事的开始阶段，我们发现了实际使用中不爽的地方，在浏览新鲜事的时候（尤其是看分享的视频），或在评论新鲜事的时候，由于新增的新鲜事，会造成整个新鲜事区域在往下滚动，浏览和评论都无法进行了，严重打断了正在进行的行为，所以，我们此时想让信息停下来。但在，什么时候停下来，是需要谨慎考虑的，既不能破坏了信息的实时性，又能不打断用户的浏览操作行为，这时候我们建立一个用户模型，假设了一下用户的行为：
　　【状态1】用户浏览器中首页处于初始位置的时候，即用户没有滚动页面，用户行为是：
　　（1）用户在等待新鲜事
　　（2）用户在发布信息
　　（3）用户在浏览新鲜事评论
　　（4）用户在评论操作新鲜事
　　【状态2】用户向下滚动了页面，用户行为是：
　　（1）用户在浏览新鲜事评论
　　（2）用户在评论操作新鲜事
　　这个时候，我们就能判断出，在【状态2】中，信息必须要停下来，以保证不打断用户行为，而在【状态1】中，由于（1）（2）行为的概率要大于（3）（4），所以我们让信息继续动。转变为可执行的方案，就是这样，我们加了一个判断，页面中的一个分界点如果在浏览器以内，信息动，在浏览器以外，信息停。在进一步精确了分界点之后，我们把分界点定为新鲜事的最上端（见下图）。
　　明确了这个之后，进入下一个关键点，就是如何让在停的状态下知道有新增新鲜事。这就相对容易一些了，只需要在页面上给出标识提醒到用户即可，我们选择在新鲜事区域的最上方，出现一个小的提示层，当有新增新鲜事时，出现并显示数量（见下图）。
　　此时，用户及时了解到了新增新鲜事，当然如果他想看这几条新增新鲜事，也不能太麻烦，最好就是让他直接点击这个东西，所以这个层还有个功能就是滚动回首屏，当到首屏之后，就进入了前面说的【状态1】，新鲜事自然就动了。这里还有个小细节，当提示的新增新鲜事数目过多时，用户在回到首屏后，大量新鲜事在同时加载，可能会严重拖慢或者卡死浏览器，所以我们定义了超过30条时，回到首屏后，就重新刷新一下全部的新鲜事，就避免了这个问题。
　　二、在线聊天的会话
　　白社会页面的右侧，有一个在线聊天，我们管它叫WebIM，就是网页版的即时聊天，可以跟白社会里的好友聊天，是不是很像QQ？向伟大的QQ致敬！好吧，这里我们重点要谈的不是QQ，而是聊天的会话状态，我们用过QQ的都知道，当有新消息来的时候，系统任务栏右下角会有小头像一闪一闪，我们点开就会出现一个新聊天窗口，而在用户的任务栏上，也会新增一个会话，而且在跟多人聊天时会有多个会话，我们只需要点击不同的会话，就可以激活不同的聊天窗口（见下图）。
　　那网页版的会话怎么处理呢？页面里是没有任务栏的。有些WebIM创造了这么一个任务栏，比如Facebook，页面下方多出来一个浮动工具条，当然它还有别的用途，这也是个办法，但有没有别的更好的办法呢？思考过程中，我们重新梳理了会话的作用：
　　1、存储聊天状态
　　2、切换聊天对象
　　3、提醒新信息
　　这样看来，会话需要呈现的信息并不需要太多，只用小头像显示即可，我们把目光放到了聊天面板上在线好友上面（见下图）。
　　在这里依据时间顺序排列会话的小头像，操作上也很顺手，详细定义一下：
　　1、当有新消息来时，出现目标好友的小头像一闪一闪，点击后出现聊天窗口，同时存储聊天状态，会话小头像保留，不再闪动
　　2、最小化聊天窗口后，保留会话小头像，关闭聊天窗口后，去除会话小头像
　　3、点击会话小头像，弹出激活之前的聊天窗口
　　当然，还有一种状态也不能忘，就是在屏幕分辨率在1024或者更低时，我们定义聊天面板是收起来的（见下图）。
　　这时会话的位置同样可以放在收起的小条上，丝毫不影响使用
　　三、编辑器的编辑区域
　　在白社会的日志、转帖、讨论区中，都要发布修改内容，所以要用到编辑器。说到编辑器，不得不说编辑器的鼻祖Office中的Word，作为文字编辑最强者，编辑器的发展也是引领时代的，而在网页端，编辑器的功能受网页端的限制，做不到太强，所以在使用感受上，如何能接近Word的使用感受，自然是最好的。
　　说到这里，需要明确的是，对文字编辑来说，编辑器并不仅仅是上面的一堆工具条，还有个最重要的就是编辑区域，这里其实最影响编辑较多文字时的感受，以往我们使用网页版编辑器时，常常会因为编辑区域太小，而要面对编辑框里和页面的双重滚动条，十分难受（见下图）。
　　回想一下Word里，只有一个滚动条，为什么呢，文档是满了一页又出一页，这就给我们带来了灵感，如果我们的浏览器也是这样呢所以我们定义了编辑器中编辑区域是根据内容自动伸展的，这样就很像Word里的满了一页又出一页，这样就只有一个浏览器的滚动条了，但是当页面长了往下翻时，上面的工具条看不见了，这样我们又定义了工具条跟随页面往下滚，有了上面好友新鲜事新增提醒之后，这个就是一样的定义了，这样编辑时就是这样的状态了（见下图）。
　　这样一个小小的变化，编辑文字过多时就会好用很多。
　　写了三期的交互创新了，也许这些创新点还不成熟，还有很多缺点，不过我们不怕大家笑话，能给大家分享一下我们在探索路上的思路也是好的，同时也欢迎大家能够多多交流自己的思路和想法，让我们共同来推动行业的发展吧！