白社会视觉设计诞生记
说实话，我还真没在公共场合真正好好说说白社会诞生的过程，她的样子是如何被我们一步一步勾勒出来的。这次，借助UED Blog的即将开张，算是正式的公布出来吧。
在接到白社会设计任务的时候，当时的SNS漫天飞舞的设计样式都是facebook、开心、校内的样式，那时，我们就想，如何突破？如何脱离那随处可见的信息架构、页面布局模式以及视觉元素，让人起码在第一感受上不觉得这是一个市面上千篇一律的SNS的皮。
这其中，我们尝试了很多的创新，情境故事般的界面，苹果的Dock似的导航条，很炫很酷的交互方式，看着简直就像电影《钢铁侠》一般高科技的界面。但一段时间的发散后，我们发现，我们走在一条误区上，视觉设计不是那些表面光鲜亮丽为了炫耀技法的工具，视觉设计应该是通过适合的手法，更好的满足用户的需求，传递信息。所谓视觉传达，是在用户和信息之间搭建的一座桥梁，帮助用户快速、高效、愉快的接受信息，而不是独自一个人翩翩起舞，无视其它。
于此同时，白社会的虚拟用户角色设计也在如火如荼的展开之中，作为参与者，我们也想到了既然虚拟用户角色可以帮助产品设计和交互设计更准确的定位用户需求，那么是不是也能帮助视觉设计在茫茫的大海中寻找目标用户的视觉喜好，满足他们的视觉品味，更有针对性的为他们设计呢？没错！随即我们便开始启动了一个叫做“虚拟用户视觉模型”的项目，为的就是通过模拟目标用户的视觉品味和喜好，将设计风格准确定位。无论是对产品的颜色质地风格，还是对其中文字风格，APP小插件的设计，都能具有一定的指导作用。
我们是这样定义一个视觉模型的：
1. 用户角色视觉模型是在虚拟用户角色卡片的基础上建立起来的，是对用户角色的一个视觉填充。
2. 视觉模型只在用一系列图片说话，进一步丰富用户角色，使其更加直观的得到展现。
3. 通过每张图片所包含的颜色信息、质感表达和氛围烘托，逐渐摸索出用户角色在视觉放面的喜好。
4. 视觉模型会随着人物角色信息的不断完善而完善，形成一个持续填充的库。
5. 模型中也会存在一些主观的意识形态，根据一些建议意见，持续进行修订完善。
以下是我们的视觉模型流程图：
在这个视觉模型库中，我们逐渐找到了感觉。我们的全部视觉元素不是来自于设计师的个人偏好，不是老板的喜好，不来自于任何人的个人主义，而是全部来自目标用户的喜好，他们的期望。
在经过了视觉模型的帮助之后，我们逐渐找到了属于白社会目标人群的一套视觉表达方式，并开始了一系列的设计尝试。
首先，我们发现淡雅的色彩能让白领上班族舒张压力、精神放松，既然白社会是一个白领“生活在别处”的地方，那首先在视觉传递上要让人感到轻松愉悦，以及一些贴心的温暖。在第一版草稿设计的时候，我们尝试用一些小清新的颜色来传递这种感觉，甚至视觉设计师提出了一些像是实时天气、简单轻松的小功能的想法丰富在页面的整体调调中，同时对一些页面的布局也有了不小的改变，比如一句话的位置，导航条的位置等。
但由于第一版草稿很多细节具有局限性，传统的页面布局虽常见，但也不失它的道理在，于是我们根据实际情况调整了一版草稿。这一次，我们还提出了添加白天版和夜晚版的小设计，功能虽小，但能让用户感受到一些贴心的温暖嘛～细心的同学会发现，因为开发时间比较紧张，我们都还没有名字呢，logo都是搜狐SNS呵呵。
这里是白天版：
这里是夜晚版噢。
之前的这一版，还是没觉得表达透彻，于是我们决定换换思路，从白领身边的办公文化下手，接下来的这一版是我们改变比较大的一版，也是在内测时候一直持续使用的一版。这一版的视觉风格会比较重，木纹桌面、折纸便签等，使用久了会让人有些压抑，毕竟深色调还是会容易有些憋着的感觉。同时，这版我们也开始加入了IM，左右APP LIST和IM的面板都做成了收缩的方式。虽然这样扩展了中间的内容区，但操作上还是不够直观方便。
我最喜欢的是白天版照在页面上的那道阳光，就像早晨的阳光照在办公桌上的感觉，让人觉得好有生机呀。
夜晚版的射灯感觉也是我很中意的，温暖的咖啡红，在夜里最有味道了。
在连续对着这版设计一个多月之后，连最开始很喜欢这个设计的工程师某某都会跟我说，他天天对着这个页面有些觉得压抑了。从各方面的反馈来看，这版设计虽然在短时间内比较吸引眼球，但长时间的使用下来却不是让人舒心的。于是在离上线还有一个月的时间内，我们一咬牙，改！全站改！
还是回归了，经过了长时间的压抑后，释放的轻松比原来更轻松，也就是现在大家看到的白社会整体设计。我们添加了很多的释放元素，扩大渲染气氛的logo头图，结合实时天气和手绘logo以及一个显著的NO BOSS小标标，充分的渲染了一种简单轻松的氛围。同时，为了能让右侧的IM面板不和浏览器的右侧滚动条混在一起，有一些视觉空间，我们还添加了一个可爱的老板键，小细节的设置也是为了增强气氛渲染。白天和夜晚版的诠释也更加明显了。
整体页面的视觉层次通过一个小折叠的处理将中间的内容区域明显的突出，让用户轻易的将视觉中心放在feed区域。IM的列表因为有很多脑袋，容易让页面变得花和乱，我们也尽量的减弱了其背景颜色，让他不要打扰用户。在除了首页的其它页面将它收了起来。
之后，我们还有一个彩蛋噢，节能版。
白社会的设计诞生过程就说到这里吧，在短短的时间内，我们的视觉设计团队接受了一次不小的挑战，收获也是很多的，无论是设计方法还是设计流程又或是视觉体验设计等等，当然，我们还在继续，继续优化继续修改，继续为用户带来最好的视觉感受。欢迎大家直接去白社会直接体验看看。bai.sohu.com
35 Responses
-
菁菁河边草-Posted on December 10, 2009 at 10:08 am
顶!是需要好好记录并传播这些经验了!
博主的博文字体太小,又模糊.难道是我的视觉出现了问题了嘛…不会散光了吧. -
kEvin-Posted on December 10, 2009 at 10:29 am
coooool..
我觉得我还是最喜欢第二个和第三个版式…
-
蝌蚪-Posted on December 10, 2009 at 10:41 am
订阅了先。。。
白社会挺注重视觉感受，为啥这BLOG看起来咋就这么累呢。
还是用宋体字吧。。。
-
xiaotang-Posted on December 10, 2009 at 11:06 am
感谢分享，白社会的视觉感受真的很赞~
-
yuyu0521-Posted on December 10, 2009 at 3:19 pm
上面各种颜色的也不错。。木有看到过呃。。
-
cnsns-Posted on December 10, 2009 at 4:45 pm
写得很好，但我有一点想提一下：
设计视角距离不对，您的设计或截图是外部的，以此设计非常美观；而且用户使用时的视觉是内部的，所以设计师的感受可能和用户的感受有很大的不同，就我个人的感觉来看，进了白社会虽然用色上不错，但还是很乱。
刚才有一个朋友说的我也同意：这是WEB设计的一个通病，WEB设计不同于传统的视觉设计，你的设计结束的样式就是最终的样式，WEB设计出来一填加内容，图片和文字的多样性上来可能会打乱你最初的设计初衷
当然说得也不一定对，交流而已
-
masonsu-Posted on December 10, 2009 at 5:24 pm
pretty good
-
大萬-Posted on December 10, 2009 at 8:12 pm
有阳光那版不错，如果内容不冲突，可以把这些方案作为模板让用户来选择，不也挺好嘛
-
visc-Posted on December 10, 2009 at 9:32 pm
微软雅黑的字体看着确实累，不过内容很好，一个字一个字看完了～
建议还是换成宋体或者Arial吧，blog毕竟还是以阅读为主 -
yixiao-Posted on December 11, 2009 at 10:05 am
http://www.go2nl.info 川师中荷留学项目官方网站！
-
rainyee-Posted on December 11, 2009 at 10:07 am
QQ群：79693319 只对川师学生！荷兰saxion 大学和fontys 大学留学项目！加入群参与更多讨论！
-
木鱼猫-Posted on December 11, 2009 at 12:24 pm
看完您的设计图我决定去注册白社会瞧瞧:-)
-
juan-Posted on December 11, 2009 at 3:50 pm
所有都蛮漂亮，更喜欢第2版的白天版，更简洁。
-
山顶洞羊-Posted on December 12, 2009 at 10:15 pm
呵，怎么这么多人看不惯雅黑的？
-
瞄准网-Posted on December 14, 2009 at 9:39 am
很认真的看完博主的这篇文章，应该说是有收益的，了解了白社会的构思方法和设计过程，谢过。但我认为白社会的设计仍然跳脱不了国内主流SNS的视觉架构，模仿的痕迹还是比较明显，无论哪个版本都给人很熟悉的感觉(特色亮点不多),估计有不少思路来源于康盛的Ucenter home。另外，作为一款定位于白领的产品，颜色上来说从字体到块背景、页面背景再加上各类图标和banner等加起来色彩实在太过丰富，容易给人杂乱和疲劳感。—一家之言
-
饼饼段-Posted on December 15, 2009 at 10:42 am
不是做设计的，但却为楼主团队的这番精心设计所感染，联想到我所做的产品，从用户体验出发，始终是王道啊~
-
kelly-Posted on December 15, 2009 at 4:43 pm
还是很sns啊，2.3.4.6很QQ。突破不易啊
-
appletxm-Posted on December 16, 2009 at 9:07 am
我觉得第一版比较爽，我一直看一直看，盯着看，看很久都觉得还是喜欢第一版。
-
Chen Fan-Posted on December 17, 2009 at 10:59 pm
很有意思。但是我很好奇，如果你们是基于用户角色抽取出来的视觉用户模型。为什么会最后出来两种截然不同的视觉方案“清淡vs大木桌”。这是否说明了所谓“视觉用户模型”的不实用？
-
xiaobao-Posted on December 23, 2009 at 1:32 am
老实说 不如开心网你耐看 还是太复杂了。中间那块有点故弄玄虚 太浪费地。第一眼 不错 用久了不舒服。
-
小强-Posted on December 23, 2009 at 4:58 pm
当做风格，让用户自己选，不同时期，不同情绪下，用户的喜好都是会随之变化的。不能说上面那个更适合用户，只能说更适合那种状态下的用户
-
无影-Posted on December 26, 2009 at 1:17 pm
使用了一段时间的白社会以后感觉那个红色的字体看起来很累，而且如果上网搜查红色对人的心理影响的话会发现红色容易让人烦躁以及工作效率降低，所以强烈建议换个字体颜色吧！
-
果伦-Posted on January 5, 2010 at 10:10 pm
所谓视觉传达，是在用户和信息之间搭建的一座桥梁，帮助用户快速、高效、愉快的接受信息，而不是独自一个人翩翩起舞，无视其它。
这个观点和我大致相同~
交流几个问题：
1. 你们的视觉是根据视觉模型而来的，为什么你给出的效果图会差异化比较大？视觉模型有多大程度是依据真实用户得来的？视觉模型多大程度上决定了你们的视觉？2. 我对视觉的理解有2个层面：第一是它承载着信息的传达的使命，第二才是表现、才是美观。所谓界面设计就是让用户感觉没有界面又美观大方，而白社会虽然做得比较精致，却给我太过火的感觉，有时视觉符号、元素太多会抢用户的精力，不知你是否同意？
3. 白社会链接颜色有的是青蓝色，有的是红色，而红色文字有的又不是链接。最后我还发现用户姓名链接用的是灰色。很想听听你对链接的视觉表现是怎么思考的？就文字等你们是怎么进行视觉规范的？
-
果伦-Posted on January 7, 2010 at 10:38 am
sophie： 感谢你的回信，很喜欢你的blog。
这2天在用白社会，之前只是观光团。真的感觉你们的交互、细节做得很不错，国内一流的交互体验，我相信白社会一定可以越来越好。再弱弱2个问题：
1. 比如首页信息流中的投票，为什么是4条4条地显示呢？第一条链接用粗体又是为什么呢？粗体给我的直观感受代表着未读。
2. 说道未读，再问问导航“通知”那个地方，点开很难分辨哪条是未读的，为什么在这里没有用粗体或是其它的视觉提示呢？我做facebook上的social game，欢迎到我的blog交流，呵呵~
-
cv-Posted on March 3, 2010 at 4:26 pm
这周才听说，注册后试用了下，视觉上确实花了不少功夫，细节都值得一赞。初步体验感觉，自由度不够，个人其实并不想在自己主页上显示我不需要的信息。如果可以自由控制就完美了。
-
程子-Posted on March 29, 2010 at 3:08 pm
力挺第一版，有天气预报的那版，特别喜欢
-
Lavilla-Posted on April 6, 2010 at 8:38 am
我最爱第一版的设计 感觉好漂漂
-
萨芬撒-Posted on April 20, 2010 at 8:27 pm
test
-
j.k-Posted on May 18, 2010 at 1:49 pm
我去了第一感受就是，清晰度不够，纯度太低，没有视觉中心和抢养眼的地方，看起来太累了，不过布局还是比较不错。
-
晓生-Posted on May 18, 2010 at 6:20 pm
白社会的设计确实比其他的SNS好很多。
- Sophie -
呵呵，其实两种截然不同的方案正式证明了“视觉用户模型”的实用。大木桌方案是我们其中尝试脱离一部分模型来设计的方案，所以也是寿命不长呀。
[回复]