必威体育Betway必威体育官网
当前位置:首页 > 运营推广

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

时间:2019-10-28 02:13:18来源:运营推广作者:seo实验室小编阅读:78次「手机版」
 

白社会首页

今天,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里的满了一页又出一页,这样就只有一个浏览器的滚动条了,但是当页面长了往下翻时,上面的工具条看不见了,这样我们又定义了工具条跟随页面往下滚,有了上面“好友新鲜事新增提醒”之后,这个就是一样的定义了,这样编辑时就是这样的状态了(见下图)。

这样一个小小的变化,编辑文字过多时就会好用很多。

写了三期的交互创新了,也许这些创新点还不成熟,还有很多缺点,不过我们不怕大家笑话,能给大家分享一下我们在探索路上的思路也是好的,同时也欢迎大家能够多多交流自己的思路和想法,让我们共同来推动行业的发展吧!

相关阅读

思辨与创新 第二章 展开论证:如何让自己的想法被证明?

文章目录第二章 展开论证:如何让自己的想法被证明?2.1 区分一些事2.1.1 论证需要明确的议题2.1.2 论证要有立场(态度)2.1.3 推测性的

互联网金融科技融合发展 龙驹财行积极创新优化服务

2019年互金行业迅猛发展,一场由大数据及云计算、人工智能、区块链等前沿科技引发的金融服务大爆发的时代,已然启程。随着这些新一

未来集市以创新社交电商突围,成第六届中国电博会黑马

2019中国(杭州)国际电子商务博览会(简称:电博会)于10月18至20日将在杭州国际博览中心举行。据悉,北京大学著名经济学家、商务部中国

浅谈setInterval(aa,1000)与setInterval(aa(),1000)的

一直有个疑惑,在定时器上调用某个方法时,加括号和不加括号有什么区别。今天做了个实验,发现,不加括号定时器会每秒执行一次,加了括号只

三维空间下的交互设计

二维平面的交互是人为设定的,情景几乎是不会发生变化的;而人所在的三维空间很复杂,情景也会随着人与任意对象之间的任务而发生变化,同

分享到:

栏目导航

推荐阅读

热门阅读