leeking001

UX Internet Travel Other About me
leeking001
博客
微博
照片
电影
白社会
Facebook
Twitter
Linkedin
Google+

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

2010-03-21 by leeking001 | 用户体验 | 评论(13)

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

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

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

13 条评论

  • 2010.03.22 23:45,frank 发表评论:

    最近做的东西也在页面刷新时机,分析的不错的说!
    WebIM的用法就是手机QQ的使用模式吧:)

    【回复】
    • 2010.03.23 13:34,必应珠峰 / 浅谈白社会交互设计的创新(三) 发表评论:

      […] 来源:http://leeking001.com/?p=293 Post a comment — Trackback URI RSS 2.0 feed for these comments This entry (permalink) was posted on 星期二, 三月 23, 2010, at 13:29 by 蔡 亮. Filed in IT知识, SNS社区, Web2.0, 产品经理, 站长分享 and tagged 白社会. […]

      【回复】
      • 2010.03.23 16:23,yishisanren 发表评论:

        我觉得这个wenim做的相当好~~`

        【回复】
        • 2010.03.23 18:32,redleaf 发表评论:

          这几点的确都挺好,不过…好像不能叫创新点吧…新鲜事那个不确定是白社会在前,还是twitter新浪微博在前;不过编辑器那个,google knol/百度百科都是这样的,肯定比白社会早吧…

          【回复】
          • 2010.03.23 23:09,leeking001 发表评论:

            还真是……不能算创新,也算是不谋而合了吧~ 呵呵,确实之前没看过~

            【回复】
          • 2010.03.23 19:01,waltzhang 发表评论:

            这些表情是自己做的么 :em07: :em06: :em05: :em04: :em02: :em01:

            【回复】
            • 2010.03.23 23:07,leeking001 发表评论:

              是啊,像吧~

              【回复】
              • 2010.03.25 11:56,waltzhang 发表评论:

                把自己美化了

                【回复】
            • 2010.03.23 22:06,导弹狼 发表评论:

              编辑器这个方法真的让人是眼前一亮啊

              【回复】
              • 2010.03.24 10:04,楼主 发表评论:

                :em08: :em09: :em10: :em12: 滚动条赞。

                【回复】
                • 2010.03.25 09:26,eric 发表评论:

                  白社会用的人非常少。。。

                  【回复】
                  • 2010.04.01 16:40,懒猫 发表评论:

                    在我看来,白社会也只是在模仿吧,创新的话,还真没发现有什么不同,也许可以再深入了解下

                    【回复】
                    • 2010.04.02 20:11,t5k5 发表评论:

                      编辑器那块。虽然是随屏滚动了,不过会被最上面的功能栏给遮住。。。 :em07:

                      【回复】
                      (Required)
                      (Required, will not be published)

                      最近评论

                      • 愿你有前程可奔赴,亦有岁月可回首
                      • 我问小狗遇到心事怎么办, 小狗说忘忘忘。
                      • 本网站 提供 海量的 成人内容,满足 成年访客 的 兴趣。 无论您喜欢 哪种类型 的 影片,这里都 一应俱全。 所有 材料 都经过 精心筛选,确保 高品质 的 浏览感受。 视频 18+ 我们支持 不同平台 访问,包括 手机,随时随地 尽情观看。 加入我们,探索 无限精彩 的 私密乐趣。
                      • 本站 提供 多样的 成人内容,满足 各类人群 的 兴趣。 无论您喜欢 什么样的 的 内容,这里都 应有尽有。 所有 材料 都经过 专业整理,确保 高质量 的 观看体验。 拜物教 我们支持 多种设备 访问,包括 电脑,随时随地 自由浏览。 加入我们,探索 激情时刻 的 私密乐趣。
                      • 您好 本网站, 我们提供 适合成年人的内容. 您想看的一切 已汇集于此. 这些材料 专为 18岁以上人士 呈现. 进入前请 符合年龄要求. 享受私密 成熟内容带来的乐趣吧! 不要错过 令人兴奋的 专属材料. 确保您获得 无广告的成人服务.
                      • 访问者请注意,这是一个面向18岁以上人群的内容平台。 进入前请确认您已年满十八岁,并同意遵守当地法律法规。 本网站包含不适合未成年人观看的内容,请自行判断是否适合进入。 色情网站。 若不接受以上声明,请立即关闭窗口。 我们致力于提供优质可靠的娱乐内容。
                      • 通过本平台,您可以雇佣专门从事特定的高危工作的执行者。 我们汇集大量经验丰富的任务执行者供您选择。 无论是何种挑战,您都可以轻松找到合适的人选。 雇佣一名杀手 所有任务完成者均经过审核,保证您的机密信息。 服务中心注重专业性,让您的个别项目更加顺利。 如果您需要详细资料,请随时咨询!
                      • 第一借錢 https://168cash.com.tw/
                      • [b] 便携式平衡器及振动分析仪Balanset-1a [/b] [b] 资料描述: [/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800][img]https://vibromera.eu/wp-content/uploads/2023/09/77-e1693745667801.jpg.webp[/img][/url] Price: [b]€2399[/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800] 快板秩序 [/url] 或在官方网站上获得[b]€100[/b]折扣 [url=https://vibromera.eu/shop/874/]vibromera.eu[/url] 使用促销代码 [b]VB100[/b] [b]Balanset-1a设备说明[/b] Balanset-1a是一款高度便携的双通道设备,专为转子平衡和振动分析而设计。 它非常适合平衡转子,如破碎机,风扇,复盖机,切碎机,轴,离心机,涡轮机和其他旋转机器。 [b]基本特征和能力[/b] [b]振动计功能[/b] 转速计:精确的转速测量(RPM)。 相位:精确确定振动信号的相位角,进行精确分析。 1x振动:测量和分析主导频率分量。 FFT频谱:深入分析振动频谱。 整体振动:监测整体振动水平。 测量日志:存档数据以供将来分析。 [b]转子平衡模式[/b] 单平面平衡:校正一个平面内的转子以减少振动. 双平面平衡:在两个平面内进行动态转子平衡。 极坐标图:表示极坐标图上的不平衡,用于精确校正重量放置。 上次会话恢复:启用上一个平衡会话的延续。 公差计算器(ISO1940):根据ISO1940标准计算允许的不平衡。 砂轮平衡:用三个配重校正砂轮不平衡. [b]图表和图形[/b] 总体图表:表示一般振动水平。 1x图形:显示主频率下的振动模式。 谐波图:可视化谐波频率的影响。 频谱图:提供用于分析的频谱的详细视图。 [b]额外功能[/b] 存档:存储和重新访问过去的平衡数据。 报告:自动生成详细的平衡报告。 重新平衡:使用存储的会话数据启用重新平衡。 批量生产平衡:专为批量生产中的转子平衡而设计。 [b]随附设备[/b] Balanset-1a套餐包括: 接口的测量模块。 一对振动传感器。 带磁性支架的光学传感器(激光转速表)。 电子天平秤。 软件(不包括计算机,可作为选项)。 硬塑料手提箱。 Price: [b]€2399[/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800] 快板秩序 [/url] 节省[b]€100[/b]上 [url=https://vibromera.eu/shop/874/]vibromera.eu[/url] 使用促销代码 [b]VB100![/b]
                      • [b] 便携式平衡器及振动分析仪Balanset-1a [/b] [b] 资料描述: [/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800][img]https://vibromera.eu/wp-content/uploads/2023/09/77-e1693745667801.jpg.webp[/img][/url] Price: [b]€2399[/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800] 快板秩序 [/url] 节省[b]€100[/b]上 [url=https://vibromera.eu/shop/874/]vibromera.eu[/url] 使用促销代码 [b]VB100![/b] [b]Balanset-1a概述[/b] Balanset-1a是一种紧凑的双通道解决方案,用于平衡和振动分析旋转机构,包括破碎机,风扇,复盖机,切碎机,轴,离心机,涡轮机和其他旋转设备。 [b]主要功能和特点[/b] [b]振动计模式[/b] 转速计:精确测量转速(RPM)。 相位:精确确定振动信号的相位角,进行精确分析。 1x振动:主要频率分量的测量和分析。 FFT频谱:振动频谱的综合分析。 整体振动:监测总振动水平。 测量日志:存储测量值以供后续查看。 [b]平衡模式[/b] 单平面平衡:平衡转子在一个平面,以减少振动. 双平面平衡:转子在两个平面内的动态调整。 极坐标图:在极坐标图上可视化不平衡,以精确放置校正权重。 上次会话恢复:提供恢复上次平衡会话的选项。 公差计算器(ISO1940):根据ISO1940标准计算允许的不平衡。 砂轮平衡:利用三个配重来平衡砂轮. [b]图表和图形[/b] 整体图表:可视化整体振动水平。 1x图表:显示主频振动特性。 谐波图:显示谐波频率的影响。 频谱图:提供用于分析的频谱的详细视图。 [b]补充职能[/b] 存档:存储和访问以前的平衡会话。 报告:自动生成详细的平衡报告。 重新平衡:允许使用存档数据轻松重新平衡。 系列生产平衡:适用于生产环境中的转子平衡。 [b]随[/b]提供 Balanset-1A供应与: 带USB接口的测量块。 二振动测量传感器。 带磁性支架的光学传感器(激光转速表)。 数字秤。 软件(不包括笔记本电脑,可供购买)。 运输案例。 Price: [b]€2399[/b] [url=https://allegro.pl/oferta/przenosny-wywazarka-i-analizator-drgan-balanset-1a-kompletny-zestaw-16654413800] 快板秩序 [/url] 节省[b]€100[/b]上 [url=https://vibromera.eu/shop/874/]vibromera.eu[/url] 使用促销代码 [b]VB100![/b]

                      最近文章

                      • The Importance of Digital Detox in Today's Hyper-Connected World
                      • The Importance of Digital Detox in Today's Hyper-Connected World
                      • Which WD_BLACK Drive Is Right for Your Console or even personal computer?
                      • OnlyWin 15 est un jeu d’enfant : apprendre le récompenser conçu par un sur mesure
                      • Android (APK) ve iPhone için 1win Uygulaması İndirin ve Kurun
                      • Baji: Ideal Online Betting Sites & Gambling Enterprise App in Bangladesh
                      • СУЩЕСТВУЮЩЕЕ ЗЕРКАЛО MOSTBET
                      • 20 free spins at OnlyWin casino Canada mobile bonus– Layout That Makes You Spin
                      • Jak získat 30 roztočení zdarma pro hráče z České republiky na Mostbetu
                      • Ігри Mostbet.com
                      © 2025 Leeking001 . Ported to Wordpress . Designed by Leeking001 . Powered by SAE . 京ICP备18021289号