Tomorrow Is Coming

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

leeking001 — Sun, 10 Jan 2010 22:48:25 +0800

　　接上一篇的 浅谈白社会交互设计的创新（一），这次谈谈任务的设计。任务想必大家都接触过，在学习中，在工作中，在游戏中都会有，一般的形式是接到一个任务——努力完成任务——交任务（领奖励）。宏观的看，人的一生就是在完成着一个又一个的任务。回到正题，首先需要说说的是在SNS中设计任务的目的，我们的观点是：

任务是一种运营手段，可以引导用户在特定的时间做特定的事情。
任务可以做新手引导，可以有步骤有奖励的指引用户熟悉系统了解功能。
任务是奖励用户行为的入口，也是虚拟货币（金币）的唯一出口。

　　在明确这几个方面之后，我们很快的设计确定了任务的列表页和任务描述页，十足的任务感和游戏感，毕竟大家都玩过网游的嘛~

　　确定这个之后，另一个关键点是用户如何去领、做、交任务，我们初步想法是向网游学习，做一个任务跟踪层，用户可以随时查看任务说明，并能及时了解任务的进度。这里有一点补充的，我们选择了自动领取任务，原因是领任务的环节让前置操作过于复杂了，这也是我们任务的重量级而决定的。这样重点就放在让用户如何知道新任务——做任务——交任务上了。

　　但恰恰正是因为自动领取任务，让我们碰到新的问题。大部分网游里的任务是在领取之后才开始进行追踪的，并不断判断用户的完成情况，为了不造成太大的服务器压力，一般也会设定可领取任务的最大数量。而使用自动领取任务后，意味着用户的最大任务数量是不可预估的，这样想做到实时的任务追踪就很困难了。既然不能两全，权衡下利弊，我们决定还是保留自动领取任务（降低门槛），不做全局的实时任务追踪，只把任务追踪的步骤放在了Home页和任务列表页，这样在首页的右上角诞生了任务的提示区域：

　　Home页自然是寸土寸金了，如何能把我们和用户都想要的任务及时推给用户呢，我们在这里想了一个策略，现在来看还是比较不错的（点击小图查看大图）：

　　接下来怎么让用户方便的做任务呢？最理想的方式是让任务随时能调出来，以方便用户在做任务的过程中查看。这里想到了 音乐盒 的实现方式，即弹开一个无地址栏的小浏览器窗口，这样不会影响主窗口的正常操作，还能随时激活小窗口来看详细任务，似乎很妙啊~

　　好，就先这么做吧~经过工程师的开发，可以测试了，先使用IE6和Firefox，觉的确实不错，完成任务之后，点击Home页的任务提示，小窗口被激活并刷新，直接领取奖励，跟我们的设想一模一样。但很快问题显现了，在IE7/8、遨游、搜狗浏览器等使用tab分页面的浏览器上，是没有小窗的，只能新开一个tab页，这样详细任务出现在整页里显得非常诡异，另外一点是在点击Home页的任务提示后，不能激活任务的tab页……这点太致命了，想象中很妙的方案由于不具备普适性变得一文不值，于是乎只好放弃了这种方案。

　　有话说的好，退一步海阔天空，我们尝试使用了弹出层的方式，层的方式意味着不能做到用户在做任务时随时调出来查看，只能在Home页和任务列表页才可以打开层，不完美的方案也让我们没有什么底气，只能先做一下用户测试。在对公司内外的一些用户做了用户测试之后，心里的石头放下了，由于SNS任务的复杂程度并不能达到网游的水平，用户并不会出现随时调出来任务来查看的情景，反而是在查看了任务弹出层之后，直接通过“去做任务”的引导直接去做操作，并且能够很好的记住任务开始的地方，回到Home页来交任务领取奖励。产品就是这样，同样的需求，不同的使用情景决定了不同的交互形式。这就是现在任务的形式了：

　　讲了这么多幕后的故事，也许这真算不上是什么创新，但我们很高兴能跟大家分享我们的教训和经验。尤其是看到现在新生的SNS都标配了类似的任务，我们很自豪能够对行业的发展产生一点点小的推进，在这里再次谢谢大家的支持~

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

leeking001 — Wed, 16 Dec 2009 19:01:33 +0800

创新从哲学上说是人的实践行为，是人类对于发现的再创造，是对于物质世界的矛盾再创造。
　　之前有些朋友说：白社会的交互还是有些不错的地方的。本人作为参与者之一，听了也很高兴，被人认可当然是件很幸福的事了～高兴之余，也不能忘了分享快乐，在这里有关于白社会的交互设计也想跟大家聊一聊。一提创新这个词，感觉话题有点大，有点重，我先说说我对创新的看法，就像上面引用含义的一样，创新其实是站在巨人肩膀上的，同时也是面对新问题新矛盾的一种解决方法，所以，哪怕是小小的改进也算是创新，这样再谈创新可能就会轻松一点~

　　我会整理出一个系列，一点一点的跟大家分享，今天先说真心话这个组件吧，真心话早在开心网上就风靡一时，一度是开心上最火的应用，我们在打算做这个组件时，自然也是将开心的真心话作为首要研究对象，大家玩过的都知道，真心话有着广泛的话题，便捷的参与形式，病毒式的传播方法，都是值得津津乐道的。我们这里说下真心话的交互设计，在研究了真心话的信息架构之后，我们自己先拟了一个草稿：

交互真心话之前：

交换真心话之后：

　　因为在玩开心的真心话的时候，每次交换完还需要再点击一次才能查看其他好友的真心话，感觉得很多余，就做了点小改进，直接在交换完就列出来了其他好友的真心话，并且可以评论。

　　但是退回到用户的角度后，觉得这样使用还是不爽，交换的时候只能看到一个好友的入口，而一般大家都是冲着某些好友的答案才去参与的，如果只能看到一个好友入口，还是刺激不起去交换的欲望。我们就想，如果能看到所有参与好友的入口岂不是最好，这样我们就又出了一个原型版本。（很遗憾没存根……）

　　有了这次突破之后，慢慢思路就打开了，我们发现，噢，其实这个真心话就是个群体参与的活动啊，为什幺死守交换的概念呢，反而局限自己的思维了。一番讨论之后，我们把它比喻成一个小黑板，老师在上面出了一道题，同学们在下面答题，只有答过题的同学才可以看其他同学的答案，这就清晰了，在设计的时候呢，我们也还原了这样一种情景：
参与真心话之前：

参与真心话之后：

看，像不像同学们的书桌排排坐着答题呢~

　　再后来，为了鼓励讨论，在每个答案的下面挂上了评论的入口，就这样一个左右不对称的的双排布局（我们内部俗称“双排扣”）就诞生了，后来在实际的使用中，这种双排扣的形式也会把气氛烘托的非常热闹：

后来，这种布局还成功的被“天天向上——每日一测”所复用：

　　但是，凡事有利也有弊，这时出现了点问题，就是在如何在这种不可预期的布局下找到想看的人和自己的信息。我们仔细分析了用户怎样接收到真心话的情景，发现有这几种形式：

收到通知，有人跟自己交换了真心话：这种情况下对于自己关心的是这个好友的真心话答案，自然我们通过通知点过去的链接，应该把该好友放在左上角第一个位置。
收到通知，有人评论了自己的真心话：这种情况下对于自己关心的是自己的真心话答案下面的评论，自然我们通过通知点过去的链接，应该把自己放在左上角第一个位置。
收到通知，有好友也评论了之前自己评论过的其他好友的真心话：这种情况下对于自己关心的是之前自己评论过的好友的答案下的评论，自然我们通过通知点过去的链接，应该把之前好友放在左上角的第一个位置。
看到新鲜事，有好友参与了一个真心话题：这种情况对于自己关心的是该好友的答案，自然我们点击后（如果没参与需要先参与），应该把该好友放在左上角的第一个位置。

在我们梳理清楚了这个之后，就解决了问题，也很感谢我们的工程师，要实现起来还是要花些力气的。

　　这就是现在的白社会的真心话的交互的不同之处，也算是站在巨人肩膀上的一种创新吧。我理解，在用户最需要帮助的时候，想办法去推他一把，往往这就是创新的地方了~

搜狐UED开博——让我们将分享进行到底

leeking001 — Fri, 11 Dec 2009 22:31:58 +0800

作为搜狐UED团队的一员，我很荣幸也很自豪在这里做一个传播者，在经历了搜狐博客、搜狐相册、搜狐视频、搜狐圈子、白社会等项目的洗礼，我们依然在路上，跟大家一起创造中国互联网的未来~

分享——将我们的经验和教训分享给大家，让大家能从中哪怕收获到一点点呢，我们都很高兴~
交流——与天下同行们的一个交流地儿，分享自己的同时也从大家身上学习到更多的东西~
布道——将UCD的观念传播给更多的人，无论是从业者还是非从业者，让我们的行业更加壮大，让我们的互联网更加美好~

转自Todd的《开篇》


我不是一个爱张扬的人，我们的团队也不是。
我一直认为，对于一个年轻的团队来说，最重要的是平稳的心态和不断追究上进的斗志。能够把自己负责的产品做到最好，才是对团队最好的展示。
于是在过去的几年里，我们从未停止过对我们理想的追求，从未停止过对新知识学习和探索的脚步，从未停止过对哪怕一点点小细节的精益求精。
博客热潮中，在诸多行业产品同质化的情况下，我们抓住“个性化”这个诉求，努力将个人装扮和自我表达做到极致，推出了搜狐博客的玩弄版。
SNS的兴起，为我们提供了另一次历练的机会。在短短半年多时间中，倾注心血打造了搜狐白社会，在视觉、交互和前端技术上都寻找创新点并力争突破，提供给用户更好的体验和使用感受。
同时，我们也持续坚持着团队内的知识分享，我们称之为“每周一题”。从视觉设计、交互体验，到前端开发，每周有一位同学（我们内部都称呼彼此为同学）选择一个大家关注的主题，拿出来分享自己的学习经验和成果，到现在已积累主题分享上百篇，参与者范围也扩散到了兄弟部门Chinaren和SAS团队。
大家一直推崇这样一句话：每次与别人的分享中，收获最大的永远是分享者自己。所以，我们愿意把这种分享坚持下去，让更多人获益，让更多的人参与进来。
这也正是我们建立这个博客的原因，希望通过这个博客将我们的工作经验和学习成果分享给所有希望了解的人；通过这个博客让我们可以和更多的人交流，并从大家身上学习到更多东西。
大家在这里将会看到涉及视觉设计、交互设计、用户研究、前端开发等领域的知识分享，也许也能够看到一些我们工作背后的生活、娱乐点滴，甚至是一些有趣的事情：）
感谢百忙的工作之余帮助建立这个博客的：Springwang、Matt、Sophie等同学～
在此开篇，让我们将分享进行到底。
2009年12月11日

好感动~~~~~

交互规范实例——白社会Dialog规范

leeking001 — Mon, 23 Nov 2009 12:39:40 +0800

交互规范是什么：在产品设计初期，在进行了部分功能的交互设计之后，将用户与界面之间的交互行为总结归纳出来，并加以延展，从而形成的设计规范。交互规范可以帮助我们统一现有的交互设计，并可以指导接下来的交互设计。

我们就拿白社会中的Dialog规范举个例子：

以上是目前网站比较常见的提示框，它最初是模拟windows提示框出现的，让用户在使用中更加容易接受。

首先，我们根据用途，将Dialog分为以下5类，并且尽量详细的定义Dialog的使用用途、交互规则、文字和按钮规则：

确认框： 常用于删除或批量操作，再次确认使用。交互规则：直接显示对话框，点击按钮后直接消失。
标题：操作+目标，例如删除日志，删除照片专辑，解除好友关系……
按钮：确定+取消
操作框： 常用于进一步操作，入口较小，但操作步骤较多时，比如加好友，设隐私等。交互规则：直接显示对话框，确认完毕后，变为通知框。
标题：操作+目标，一般为入口的名字，例如新建照片专辑，修改真心话，添加选项……
按钮：保存（行为）+取消，行为例如加为好友，添加，分享……
通知框： 常用于确认框和操作框的确认后，通知用户结果，一般只有一个按钮。交互规则：点击按钮立即消失，如果不点击按钮，1秒后渐隐消失。
标题：沿用之前操作框的标题
按钮：关闭
提示框： 常用于表单提交后的验证，通知用户哪些信息不完整或者操作步骤不对。多条信息提示使用1、2、3……的序号排列
标题：提示
按钮：确定
未保存提示框： 常用于表单未保存就跳转的提示，提示用户未保存信息是否需要保存。
标题：未保存+目标，例如未保存日志，未保存个人档案，未保存隐私设置……
按钮：保存+不保存+取消

由于是模拟windows控件出现，我们也不能忘了快捷键，以方便键盘流的使用~

快捷键： 支持键盘的enter操作框上的主操作，一般为”确定”"保存”等，支持键盘的esc操作框上的取消/关闭操作，一般为”取消”"关闭XX”等。

这样，一个关于Dialog的交互规范就定义完了。

引入情景设计的交互设计实例

leeking001 — Mon, 23 Nov 2009 00:28:07 +0800

上文中谈到了情景设计，可能大家对情景设计如何具体使用还是很迷惑，我们就举个交互设计中的实例来抛砖引玉一下。

我们之前在设计白社会中的个人主页时，经过产品需求分析，我们将个人主页的使用情景分成了4类，并情景的的重要度依次排列，排首位的是情景1：初次看陌生人的个人主页。

这里，我们模拟一下情景，编一个小故事来带出需求和解决问题：

人物：小宝
故事：
1、一天，小宝看到同事李伟的好友里有个叫小美的，特别活跃，看头像貌似还是个美女，于是特想知道小美的更多情况，多大了，有没有男朋友，在哪上班，喜欢什么，有没有更多的照片，想认识认识……
2、小宝收到好友邀请，但是通过看人名和头像，好像不认识这个人，于是他想知道跟自己有什么关系，是不是该接受好友邀请

需求：
1、可以看到对方的详细的档案信息。
2、可以看到对方的照片。
3、可以了解对方的经常干些什么，最近是个什么状态。
4、可以加对方为好友。
5、可以看到对方跟自己的关系。

主要成功场景：
1、很快的找到大头像以及部分照片
2、很快的看到年龄、工作、人生阶段等信息，并可以进一步了解对方的更多兴趣爱好
3、可以看到对方最近喜欢干些什么事，近期的状态更新
4、很方便的点击加她为好友，为了不那么冒昧，可以先打个招呼什么的
5、能通过双方的联系（共同好友），很快猜出对方是什么人

设计：
1、元素：大头像，名字，简略的档案，部分照片，加好友，打招呼，动态，状态，共同好友，更多档案信息
2、排列：大头像显示，简略的档案信息，部分照片的展示都属于人物个人属性，放在一列中体现，动态以及状态属于人物的行为属性，放在另一列中体现，双方的共同好友，属于人物的关系属性，放在第三列中体现，这样个人主页应该具备三列式的排布，依次个人-行为-关系，动态信息量比较大，放在中间列，更宽的位置展示。更多档案信息属于进一步了解对象，可以放到个人主页之外
3、顺序：头像，简略档案，照片符合从浅到深的理解顺序，自上到下排列，加好友、打招呼、状态暂不排列

这样，比较顺理成章的找到了主要需求，解决了主要问题，完成了主要情景下的设计。

然后，我们在按此方法把其他情景依次分析，最后综合一下，就可以完成个人主页的基本设计了。

情景2：看新好友的个人主页
……
情景3：看老好友的个人主页
……
情景4：看自己的个人主页
……

情景设计实践《小亮结婚请客记》

leeking001 — Thu, 19 Nov 2009 18:36:38 +0800

产品设计过程中，我们会经常像编剧一样，尝试模拟用户的各种使用场景，以此来发现需求、验证设计。我们叫这种方法为"情景设计"。 ——UCDChina

前一阵看到UCDChina上讨论情景设计比较有意思，我们组内也做了一个情景模拟实践：

男主人公：小亮，年龄：26岁，出生地：山东，学历：本科，职业：公务员，行业：建筑，公司性质：事业单位，工作地点：北京，爱好：足球、游戏

女主人公：小莉，年龄：25岁，出生地：天津，学历：本科，职业：销售，行业：保险，工作地点：北京，爱好：唠嗑

情景一：
男大当婚，女大当嫁，按惯例，要回男方家里办喜事，趁着十一七天回老家办了喜事。七天后，两人回到了北京，北京还有同学朋友邻居同事呢，不请不行吧，毕竟是喜事嘛，好吧，请！难题就来了～～北京不比老家小地方，这饭店跟繁星一样众多，这地方跟天空一样广阔，这大家也跟民工一样忙碌，这请在哪好呢？先计划计划吧，两人在家里这么一合计，双方的同学在北京的，有20个之多呢～同事呢，那更海了去了，还是挑一挑吧，同学找同一个班的，关系不错的，同事找几个聊得来的，还有些非同学非同事非情不可的朋友，加一起30多个，这得订三备四了（订三桌预备四桌）。再看看地点，这些个人呢，住址分布的挺广泛，北京城从东到西，从南到北，还都不拉下，找个相对密集的吧，因为从事IT的人比较多，那就中关村区域，不说住的近吧，至少路线都熟，呵呵。该选饭店了吧，上次老王家结婚请客在天外天，350一桌，太寒碜了，吃饭时大家都在嘀咕，不能比天外天差，小刘结婚请客在俏江南，1500一桌，奢侈，十足的奢侈，咱不跟他比～

交代背景，提出需求。
抛出问题：他们到底要找的是个什么样的饭店？
答案：地处中关村区域、有大包间能容纳3-4桌、价格适中1000一桌以内、有成套酒席，有品

情景二：
两人对网络还算是熟悉，经常会用到，上班也是常常上网，这次就用网络来帮忙选一选饭店吧。听说过大众点评网，但以前也没用过，先上去看看，打开大众点评网，密密麻麻的一堆字，还没找到怎么入手呢，就看到了热门商圈：中关村，好，点进去看看着，有饭店的列表了，森林雨火锅、烤研院、紫菩提……这都什么啊，按什么排的啊？再找找，找到一行很小很小的字，排序: 默认星级口味环境服务人气人均会员商户，也不知道怎么排序合适了，那挨个点点看吧，点到人均的时候，突然意识到这个指数很重要啊，盘算了下，一桌控制在800-1000块钱比较好，不至于太差，大家给红包也能给的多点，哈哈～这样人均就是80-100，那就先在这个区间里面找吧。找到两家（義和雅苑、美林阁），看评论也说不错的，价位也在这个人均90几。于是按照上面的电话一一打过去咨询，一是问有没有足够大的包间，二是问有没有成套的酒席，价位如何，三是问下周末可否预订。结果很失望啊，義和雅苑没有能坐下3桌的包间，价格也很高啊，远超过点评网上的人均90几……美林阁也是，成套的酒席最少也是1000多一桌。这大众点评网不靠谱，换！听闻口碑网跟雅虎合并了，应该也不错吧，上去看看先。找到餐饮休闲，呵呵，也是第一时间就找到了中关村。这次学聪明了，在上面的筛选上就选择了价位区间，50-100，然后排序也选了价格排序。哇，口碑网收录的饭店可是要多得多得多了，8页慢慢翻吧～最后选中了3家（锦府盐帮酒楼、尚村私家菜、湘临天下中关村店），然后按电话打过去问，经过反复的咨询再咨询，排除掉一些不利因素，最终选定尚村私家菜，定下3桌888元的套席。

具体实践，发现问题。

使用网站过程中，有什么不爽呢？
1、页面信息太多，入口不清晰
2、图片信息不全，不利于判断
3、筛选结果不够精确，筛选条件不够
4、重要的路径被打断
5、引导不够
6、排序跟筛选不分
7、层级、路径较混乱
8、没有婚宴等结婚有关的关键词

那有什么挺爽的呢？
1、地图功能较好，跟餐馆链接较好
2、筛选和排序功能好
3、有照片介绍很好
4、有饭店的评论
5、首页搜索推荐功能较好
6、头部大搜索比较明确
7、返回首页的链接

组内讨论是很热烈的，情景模拟的方式比较生动，也比较容易调动参与者的积极性，相比起枯燥的闷头自己研究，要好了很多~最后，做了一些关于情景设计的总结：

一、情景设计的优点：
1、能帮助我们有效的区分开信息权重，当然这也需要足够多的主要情景样本～
2、能帮助我们进行路径优化，避开我们想当然的一些路障～
3、多进行情景设计或情景模拟，能让我们对主用户群的心态把握的更好～

二、情景设计应该注意的问题：
1、是产品设计及优化的一部分（结构化）
2、要以用户访谈和需求分析为基础
3、需要设计师的设计经验、同理心、还原能力
4、情景优化，反复迭代
5、用户角色设计的实战版，需要几种典型角色
6、不止是设计方法，是一种设计理念

情景设计终归只是设计方法，不会有十全十美的，也不会普遍适用的，更重要的其实是设计者的UCD的设计理念，保持一颗同理心才是最重要的~

上海User Friendly 2009大会归来~

leeking001 — Tue, 17 Nov 2009 15:26:58 +0800

没时间写感受，先上图~

小区足球队招人广告（非诚勿扰版）

leeking001 — Fri, 06 Feb 2009 14:33:08 +0800

您要想找一蹭场子的球队就别见了，正在求学的免谈，未满18岁免谈，没正当工作的免谈，省得咱们互相都会失望。象罗纳尔多那样的非常牛比非常娴熟的职业球员是不会来申请的，当然我们也没做巴萨的梦。您要真是一球星我们也接不住，没期待您踢得跟西甲上那样看着热血沸腾。

自我介绍一下，我们锦城足球队的兄弟，岁数都已经不小了，日子都还小康，刚开盘就驻扎在北苑，三年多没有过冠名，没有广告赞助，没正经赢过谁，蹉跎中练就宽容性格，无数巨变后氛围和谐，实话实说应该定性为一个没有技术没有身体只有热情的“小球队”。大伙性格OPEN，人品五五开，都不算老实人，但天生胆小，杀人放火我们也下不去那手，伤天害理、没事乱扣帽子了我们自己良心也备受摧残，命中注定想学坏都当不了大坏蛋。总体而言基本上还是属于对人群、对社会、对足球有益无害的一类。

有意者申请，非诚勿扰。

“Seven Pounds”的由来

leeking001 — Fri, 16 Jan 2009 12:41:11 +0800

源自莎士比亚《威尼斯商人》，当赌注已下或者借了债务是必须还的，否则必须以割一磅的肉来偿还。此片中的意思就是will之前欠下了7条人命，所以要7 pounds of flesh来偿还，这也是电影的主线，will一直在寻求帮助七个人来自我救赎。

另外还有个说法：3.1磅=454克=0.454公斤。成人的心脏重量是体重的0.5%，估摸“183Club”的Will Smith体重90kg，90kg*0.5%=0.45公斤，正好一磅。主人公捐出的眼睛，肺，肾，心脏，肝，骨髓加起来一共7磅。故名七磅。

Will Smith

Tiida到家～

leeking001 — Thu, 18 Dec 2008 11:30:58 +0800