UED团队设计分享 - UCD大社区

工具型网站的体验设计——从广告平台出发

CDCer — 2012-12-01 14:26:06

题记：从2010年进入公司至今2年半的时间，我一直负责广告平台部门的产品设计。从陌生到熟悉，不知不觉间我竟已对这些产品倾注进了感情……

工具型网站的特点剖析

工具型网站万变而不离其宗地围绕两个关键词在展开属于它们各自的情节，那便是：功能与数据。所以谈至“体验”，其实设计目标也就更加清晰和明确——

１.在保证功能流程顺利走完的基础上，让用户的感觉更加舒适；

２.在面对大量数据时，让用户轻松找到自己所需要的而不被满屏幕的字符折腾地焦躁不安。

工具型产品普遍业务逻辑复杂且迥异，数据量大，往往还涉及不同角色的场景分类……套用一句老话：水很深。设计目标则成为了一盏心中的明灯，时刻提点自己要留神脚下的四伏的暗礁。

功能设计之我见

一级准备

在处理功能设计之时，我奉行一句话：先弄明白了再下手。因为个体功能的修改牵涉到整个流程的走向，往往会在原有的基础上增加操作分流；而平台中的功能增加更会和其他的功能模块发生交互行为或产生影响。在设计师自己还不能对该功能的设计了如指掌的时候就匆忙动手，其结果就是设计进行到一半，问题暴露然后返工，更悲剧的是全套设计稿看似高效地做完，之后却面对全盘洗稿的惨剧。

“脑图”在这个阶段的作用就变得至关重要。用什么工具出脑图？专业软件Mindmanager、Xmind、FreeMind也好，最原始的笔和纸也罢，只要能全面清晰地表现“关系”和“影响”就已经完成了使命。

上个月正值“广告经理”在原有的支持PC端用户建立广告位并制作广告，查看效果的基础上，增加支持移动平台业务的功能。牵一发动全身，移动平台业务的功能加入使得整个“广告经理”众多模块都受到影响。下图便是在与产品经理召开需求会议的同时诞生的关联模块草图。这张草图既能在设计开展前期就相对准确的估计新版本的设计方向与工作量，又能在设计过程中保证设计侧重点与功能设计的完整性，作用不可小觑。

“脑图”不仅仅有宏观把控的全局意义，而且也同样可以具备指导设计工作细节的现实价值。

同样以此次“广告经理-移动平台版”为例，加入了移动业务，必然导致各原有主功能的走向出现分流，而基于广告的业务逻辑，不同平台上的广告大到展现形式，小到允许输入的字符数等等都会出现不同的变化。静下心来通过“脑图”梳理分流时的各种情况，然后淡定的打开设计工具开始工作，这肯定是比自以为很清楚，做到哪算哪来的科学和高效的，不是么？

功能的平台表现形式

功能模块具体落实到网站中，其表现形式大体包括：表单及其对应控件、按钮、信息反馈及提示，相互之间的关系便如下图所示。

如此一来体验设计也便有了出发点和依托。举几个在广平系统中用到的设计案例吧。

在智胜广告平台（AdWIN）的设计中，用户登录后便直接进入“个人首页”，在这里我们需要放置本平台最基础同时也是用户所有活动的出发点：创建广告。因此我们有理由在这个页面强调该入口，使它即能对新用户起到传达本平台的最大功能同时引导操作的作用，又能让老用户在登录之后直奔工作主题。

广告系统的设计特殊性还表现在页面的操作流程很大程度要参考广告业内既有的规范，这样便于用户理解流程的同时也能更高效的帮助用户完成目标工作。因此在设计过程中也会诞生很多“为广告而生”的表单与控件。根据实际业务的不同，对待某些重要的业务流程，设计师在理解业务的基础上，完全有必要跳出以往常规控件的束缚，为产品专门定制设计方案。比如为排期与资源专门设计的特别定制、视频广告的关联设置等。

业务性较强的功能，用户所需要填写的表单项势必远远超过单屏，应此将用户表单输入做到恰到好处地贴心，也是工具型网站的一个细节设计点。

在聚赢广告平台（MobWIN）的设计中，遇到过广告推广语的输入字数限制十分苛刻的业务要求：“推广语1”字数不得超过10个汉字，同时不得少于9个汉字；“推广语2”字数不得超过12个汉字，同时不得少于11个汉字。这是由WAP1.0和WAP2.0或触摸屏广告位可显示的字数决定的。如果直接用文本告知用户：“您只能输入9或10个汉字”，首先文本信息很可能会被用户忽视，其次如果不做任何即时判断，在用户完成漫长的表单填写后，点击提交却因此受挫，那必然是十分苦恼的。因此针对这个文本输入框给出了如下设计方案：

功能的增值设计

功能模块在完成它自身价值的同时能不能产生额外的价值？这貌似应该是产品经理在策划这个功能之初就要想到的问题。而设计方能为功能增值做些什么呢？我们完全可以通过对页面结构的设计和流程的微调让它更好的达到增值的效果。

再用广告经理这次的移动平台新功能的设计做案例。新建广告位的流程是用户建立广告的必经之路，我调整了本该放在基本表单中的“平台选择”RadioButton，把该属性提取出来，作为信息传达重点，加入了设计元素。想必这种形式更能使“广告经理已经支持到移动平台”的信息深入人心，其价值也超过了功能本身。

数据的处理

在实用型工具类网站中，用户均被打上了“业内人士”的标签。他们大多出于工作或商业等目的希望获得对自己有用的专业数据。在广告平台的这些项目中，我们使用了如下几种信息处理方法：

分角色显示数据

从最外层就先为不同角色的人匹配了他们各自需要的数据，进行了第一步数据去噪。当然能够使用这种处理方法必须是建立在角色与诉求够清晰分明的前提下。

数据搜索与过滤

无法按角色或已经按角色去噪之后还留有海量数据之时，数据的搜索与过滤就提到了体验设计的第一位。搜索项是否符合用户实际操作逻辑？搜索中用到的控件是否合理与便利？搜索条件何时取交集，何时又呈现并集，又该如何清晰传达给用户？哪些项可以放入高级搜索？……随着设计的深入这些问题便会应运而生，而它们确实值得设计师深思熟虑。

业务上需要的搜索项过多，而选项全部罗列会导致搜索模块过于庞大时，可以类似Google Adwords采用点击激活浮层来进行单项设置，用户在操作时也相对专注。收起检索条件模块，不让复杂的搜索条件干扰用户对结果列表的阅读。甚至可以基于业务特点为用户提供保存查询条件的个性化服务。

数据本身的展现形式

这里我们不谈视觉效果令人为之惊叹的信息可视化处理。传统数据的展现形式不外乎：列表、饼图、柱状图、趋势图等以及它们之间的组合。设计师在运用时，不但要了解页面中不同数据所对应的展现形式，还要将它们有机的结合排布以达到良好的阅读体验，必要时可以对传统的展现形式做一些设计上的处理。

用户自定义

上面就说道过，工具型网站的用户普遍定义为专业用户，他们对数据获取要求也是严格的。在对重要数据的展现中会出现更高级的操控功能，以满足用户对数据的自由获取。

写在最后： “还可以更灵活，还可以更好用”，再回头看这2年来的设计稿，我常常会有这样的想法。工具型网站的体验设计的确还有很多值得深入挖掘研究的地方，业务逻辑和需求的不同更会延伸出多样化的设计解决方案。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=6528)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=6528

淘宝彩票移动项目开发实践

hangu — 2012-10-11 20:52:43

作者按：如今越来越多的互联网产品开始在移动终端发力，终端产品越来越丰富。但是，平台差异带来的开发成本浪费很让人头疼。一段时间以来，淘宝彩票前端组也在努力寻求移动终端项目开发最佳实践，尽管诸多方面不甚成熟，但抛砖引玉，希望我们的总结整理会对大家有所启发。

淘宝彩票客户端产品目前有两条体系：

1、原生应用：包括iPhone和Andoird上原生的客户端应用
2、嵌入式应用：作为子应用的软件包形式提供，嵌入到第三方的客户端软件中，比如淘宝主站客户端以及支付宝客户端等

由于产品的共通性，这两类应用都是需要考虑较多复用性和开发成本的。在原生App中，有不少内容是可以用简单的HTML5来实现的，比如iPhone客户端中的“订单页”：

而在子应用的软件包里，则有更多的地方可以运用HTML5来实现，包括一些复杂的富交互。例如支付宝客户端中各彩种的实现：

App的形式

目前移动终端上的应用主要以Native App为主，这种应用的优势是：

1，性能快，体验好；
2，可访问本地资源，更有效的利用设备，节省流量；
3，并且已有一定规模（App Store）,付费模式明朗。

缺点是：

1，开发成本高，移植性差；
2，所有发布需要经过App Store的审核。

当然，目前还存在一些Web App，用户可以直接通过浏览器来访问，例如Gmail。这类App的开发和维护的成本低，可以天然的在各种终端上执行，并且容易迭代更新，无需用户进行安装。不过就现阶段而言，无论从速度上还是交互上，用户体验与Native App的差距还是比较大的。既然两种App都各有利弊，那么我们就干脆将二者相结合：用原生控件做外壳和交互，保证流畅的用户体验和完整的推广渠道；使用HTML5来展示内容，保证内容的迅速迭代更新，即时响应用户需求。于是就诞生了Hybrid App，这也是目前最流行最合适的一种App形式。

对于前端工程师而言，在移动平台上没有了IE系列的困扰，HTML5的很多特性都可以大胆的运用。不同的是，我们需要设置一些针对移动终端的Meta属性，以及更合理的利用Media Query（主流移动设备的分辨率信息）。

JS框架的选择

找到适合使用HTML5的场景，这时就需要考虑JS框架的选择。首先需要明确的是，类似jQuery和YUI这种“重型”的库，由于包含了很多处理兼容性方面的代码，且API设计过于细致而显得太过庞大，并不适合移动端。我们可以选取一些专业的用于Mobile开发的JS类库，例如jQuery Mobile，Sencha Touch等。jQuery Mobile是目前最流行的一个移动开发的框架，文档丰富，社区活跃，有很多的UI控件供我们使用，并且提供对多页面的支持（通过Ajax方式读取内容，并提供页面切换的过渡动画）。我认为jQuery Mobile的最强大之处就在于其UI方面的支持，但这一部分恰恰不是我所需要的。Sencha Touch是ExtJs的移动版，对于不熟悉ExtJs的人来说有一定的学习成本。

我们选择了zepto.js作为底层库，使用sea.js进行模块的管理和发布，原因是基于CMD规范的模块文件最终需要打包入应用的软件包里，或是打包后发布到线上；此外，我们使用backbone.js为基础的MVC架构，用来剥离应用的数据部分；使用underscore.js做为前端模板引擎（backbone重度依赖）；使用iScroll.js为我们提供模拟滚动的功能。这些都是一些专业的“小库”，很适合移动端的开发。当然，具体情况需要具体分析，没有万能的框架，只有万能的开发者。如果时间允许，也可以自己来定制一套满足自身需求的基础库。毕竟在移动端，一切以 “精简”为主。

应用架构的选择

首先抛出两个小问题：

1, OPOA近两年来在互联网得到了广泛应用，相比于之前的多页面切换和跳转的方式，这个方法也更优雅，用户体验更好。那么在移动端，OPOA是否依旧适用呢？
2, HTML5最大的优势就是跨平台，只需要开发一套代码，就可以完全通用于不同的终端。但是，真的一套代码就能“吃”尽所有移动终端么？

先解答第一个问题。其实我们在开始尝试的时候，完全是参照PC端的OPOA来进行的，把很多的内容都放在一个Page里面，通过URL或Hash的方式来管理页面的显示。但实践表明，在移动端这样做是有很大弊端的。首先，在PC上显示区域比较大，我们可以先给用户展示一个框架，然后在分块的去显示内容，但是移动终端由于屏幕变小，往往同时只能展示一个区域，那么我们首先要根据URL判断显示哪个区域，然后再去加载这个区域的内容，这样一来，让本来在移动端就变慢了许多的页面更加的雪上加霜。其次，为了减少请求，我们通常会把大量的前端模板都塞到这个仅有的Page中，不仅导致页面体积变大，性能降低，而且维护困难。因此，我认为，在移动端最好的方式还是传统的多页面开发。

那么肯定有人会问，这样子的话岂不是会损失页面切换的流畅性，让用户不爽么。这个问题我们是可以解决的。第一就是采用jQuery Mobile的方式（Web App中非常适用），切换时用Ajax去请求新的内容，然后再渲染到页面中。这种方法在某些特定条件下会有问题：我们仍然需要使用URL来进行历史的管理，如果将这些页面作为静态文件打包在客户端中的话，在一些Android系统的手机中，硬件会将这些带后缀的文件当成一个完整的文件去查找（例如 index.html?page=XXX），然后发生错误。第二个方法就是在Hybrid App中，我们可以借助客户端来帮助我们进行页面的切换。你只需要告诉客户端即将要跳转的URL路径（可以是网络请求，也可以是本地静态文件），然后由客户端进行跳转。这样就可以在客户端代码里面设置Webview切换的动画效果，使客户端的整体风格更加的统一。

针对第二个问题，我们刚开始的目标就是用一套代码来自适应所有的客户端。结果发现，在iPhone和Android上，尽管风格差别较大，但是整体的结构和布局是很相似的，那么只需要设置两份CSS文件，再提供一份API，分别在两个平台上做实现就可以了，维护起来很方便；但是在iPad 上，由于布局和交互变化比较大，为了复用，不得不在原代码上增加分支，不但破环了原代码的完整性，而且维护时会产生一些意想不到的错误。这样就得不偿失了。因此，如果手机客户端和平板电脑客户端差异很大的话，最好还是分开单独进行处理，而不是为了“复用”而复用，大家可以根据具体的情况制定自己的策略。例如彩票的iPad客户端，我们就是纯粹基于HTML5为pad量身定做的：

Webview及其与HTML5的通信

Webview是手机中内置的一个基于webkit内核的SDK，是搭载Web页面的容器，也是负责Web页面和Native App之间相互通信的桥梁。在不同平台上Webview的实现是有较大差异的。

在Android平台中是支持JS方法和Java方法的直接调用的，我们通过下面的代码即可实现互相调用。

//将JAVA对象绑定到JavaScript中

mWebView.addJavascriptInterface(new JsToJava(), 'stub');

//在JavaScript中调用Java方法

window.stub();

function invokedByJava(data){

      //do something

}

//在Java中调用JavaScript方法

public void onClick(View v) {

      mWebView.loadUrl("javascript:invokedByJava('java_data')");

}

//打开webview，调用页面

mWebView.loadUrl("file:///xxx.html");

但在iOS平台上，SDK没有原生提供JavaScript调用Native代码的API，只有反向调用的方法。要想在JavaScript中调用Native，一般有两种方法：一种是Phonegap采用的iframe方法，也是比较推荐的，如下所示；另一种是直接修改页面的location，在大部分情况是可用的，但是有时候会产生一些莫名其妙的错误。这两种方法的原理都是相同的：利用Webview去截获JS发起的特殊的网络请求，然后对其进行处理。

//Objective-C
- (BOOL)webView:(UIWebView *)webView
    shouldStartLoadWithRequest:(NSURLRequest *)request
    navigationType:(UIWebViewNavigationType)navigationType {
        NSURL * url = [request URL];
        if ([[url scheme] isEqualToString:@"gap"]) {
            //在这里做js调用native的事情
            //...
            //完成之后回调js
            //[webView stringByEvaluatingJavaScriptFromString:
                       @"alert('done')"];
            return NO;
        }
        return YES;
}

//通知iPhone UIWebView加载url对应的资源，url格式为: gap:something
function loadURL(url) {
    var iFrame;
    iFrame = document.createElement('iframe');
    iFrame.setAttribute('src', url);
    iFrame.setAttribute('style', 'display:none;');
    iFrame.setAttribute('height', '0px');
    iFrame.setAttribute('width', '0px');
    iFrame.setAttribute('frameborder', '0');
    document.body.appendChild(iFrame);
    //发起请求后将其从DOM上移除
    iFrame.parentNode.removeChild(iFrame);
    iFrame = null;
};

除此之外，不同平台的Webview还需要进行一些特殊的设置，才能让其和原生的浏览器的行为表现相一致。例如：在Android Webview中，JavaScript和localStrorage都是默认禁止的，需要提前启用；Android的物理后退键默认是会关闭当前的 Bebview的，而不是执行history.back()；在iOS5.0以下的系统中，设置格式检查的Meta属性会偶尔失效，需要在 Webview中直接关闭其格式检查等等。在D2沙龙的PPT中有详细的描述，大家有感兴趣的可以看下。

速度/性能

对于一个互联网产品的用户体验来说，速度和性能几乎是最重要的因素。但令人遗憾的是，这也是目前阻碍Web App发展的最大的障碍。原因主要有以下几个方面：

１　低端设备多，受硬件的限制。根据木桶原理，一个木桶的水量是受最短的板的限制的。与之类似，我们在衡量页面性能的时候，也需要看其在中低端机型上的表现，尤其是广大的Android千元智能机。如果Android所有的机型都能有Samsung Galaxy的表现，我们也就不用愁眉苦脸了，但是在更多时候，我们不得不为了在HTC野火上能够正常的展示而放弃在Samsung上看起来非常帅气的效果。

２　简化的浏览器实现。本来相比桌面版的浏览器，移动版的浏览器已经在功能上做了一些简化，性能上有些差距。但是，与原生的移动浏览器相比，Webview会更慢。下图为一个页面分别在Mobile Safari和Facebook的iPhone客户端中的运行结果，我们可以发现，UIWebView中的JS运行时间大概是Mobile Safari的３－４倍，这恐怕也是Facebook放弃HTML5转向原生应用的一个原因之一。

针对上述原因，我们总结出一些性能优化的小Tip：

１　用HTML5的离线存储和本地存储进行缓存，或者将页面直接打包到客户端中，减少在网络下载中的耗时。
２　减少DOM数量，尽可能少的使用position:relative，减少对DOM的操作
３　用CSS动画代替JS动画，在Android平台上可以平稳退化，放弃动画效果（包括CSS3动画）
４　避免GIF图片的使用（消耗内存）
５　如果只是在移动端使用的话，请使用iScroll-lite来代替iScroll（iScroll里面增加了很多额外的功能，比如在PC上模拟滚动），在允许的情况下，可以关闭滚动条（滚动条也是创建的DOM元素）

关于滚动，还有一些其他的想法，大家有兴趣可以一试：

１　将页面拆分成多个Webview，这样子在每个Webview中就都是原生的实现了，但会增加一些页面间互相通信的代价。
２　用Canvas来代替Scroll，但是文字的渲染可能会有些问题。

由于篇幅原因，这里就不赘述更详细的性能问题了～

移动终端的网络环境

移动应用最大的特点就是方便、随处可用。但无论是2G还是3G，我国目前的网络状况都难以满足移动应用的要求。相比于Native App，Web App除了要下载数据和图片外，还需要下载一些额外的js/css文件，这些动辄上百K的静态文件对于平均速度还不到10K的2G网络来说实在是太庞大了。因此，目前最好的应用场景还是将页面打包到客户端中，版本变化时提醒用户让其主动进行更新。尽管这样会损失一部分web页面的灵活性。

调试

开发时的调试相对方便，可以基于浏览器进行。但开发环境和最终的执行环境还是有一些差异的，需要对终端的View中的“页面”进行调试，现在我们的做法是 “打点”，即使用一个Log代理控件给代码埋点，输出log，以此来辅助我们的调试。目前常用的工具有Weinre和JSconsole等。这些工具的原理是比较类似的：通过网络在其他机器上连接了一个调试的GUI，捕获待调试网页的JavaScript运行环境来查看代码输出或者对代码求值，并可以监控和修改调试目标的DOM和CSS样式。但是由于调试不是真正的发生在移动设备上，所以无法设置和捕捉断点进行debug。

在最新的iOS6中，Safari（仅限Mac桌面版）中自带了web检查器工具，可以让我们更方便的对iPhone/iPad上的Safari进行远程调试。

更多内容可以点击下载我在7月28日D2沙龙（北京场）的分享。

《百万微爱——全球暖化》——视觉形象设计

CDCer — 2012-09-12 16:08:27

当提起全球暖化时，人们仅联想到的也许只有冰川融化，温度比往年高了少许如此简单，气候变化影响全球的水文和生物状况，或者说它影响着一切，包括风、雨和温度，它们都是相互联系的。

我们试图先去了解相关的信息。

图1 热浪
2008年受热浪侵袭的纽约街头，一个人试图把瓶中的水倒在身上降温。在最近的50到100年中，酷热热浪的发生频率比往常高出了两到四倍。

图2 干旱
当世界上的一些地方被风暴和泛滥的洪水袭击时，另一些地方却遭受着干旱的威胁。随着气候变暖，专家估计旱情可能至少增加66%，旱情的增加使供水量萎缩，并且导致农作物生产的质量下降。这使得全球的粮食生产和供给处于危险之中，人们面临饥饿威胁的危险越来越高。

图3 冲突和战争
气候变化的影响，优质粮食、水源和土地的减少，会使威胁全球安全的隐患增多，从而引起冲突和战争。

图4 北极熊自相残杀求生
但是由于全球气温升高，海洋冰层融化，使得北极熊很难在海洋上捕食，这种大型食肉动物开始寻求其他的食物来源，包括自己的同类。

前期构思
全球暖化带来的危机还有很多，作为公益的项目这便是我们第一次做展览思考最重要的问题。强烈的视觉风格，良好的识别性是展览视觉设计必要达到的，但通过怎样的传达才能让更多的人明白全球暖化与自身生存环境有哪些相关的影响，不只是一次好看，好玩的概念活动，全球暖化导致气候恶劣带来的后果，将会摧毁人类生存的家园。
形象设计与标准色系的灵感来原于图片中元素提炼，工厂排放着废气，正在融化的冰川，被淹没的屋顶。在后期，希望LOGO融合暖化的概念，特意设计片头动画表达这样的寓意。

明信片–让互动传递信息
过程中设计师一直在想有没有更好的方式，明信片通过粘土场景故事形式表达也成为视觉表现上一次新的尝试与亮点不仅告知活动信息，更重要能告诉人们全球暖化为我们生活带来的影响，希望大家看到这些信息时候不只是枯燥的文字解说，所以采用了拟人化粘土制作如此亲和力的场景来描述会发生的危害。

最后特别感谢富侨传播公司对地铁广告的赞助；
热心的fido对粘土制作的帮助指导；
在最后的日子里加班到深夜的工作人员；
所有相关人员的配合支持与推广才让活动圆满完成。

附：限量版全球暖化体验杯仅剩少量在形象店官网售卖http://qqimage.paipai.com/

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5982)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=5982

我们是怎么重新设计豌豆荚的

Junyu — 2012-08-26 17:26:08

二月份做完这个项目后，在公司里面写了一篇总结，后来在爱范儿和 3W Coffee 合办的一个活动上也分享过。黄龙中鼓励我要「笔耕不缀」，所以还是整理出来，发表在了爱范儿上，这里再自转一下。

豌豆荚还有很多不足，也还远没有到「State of the art」的理想境地，但看着往这个方向一点点前进，还是一件值得开心的事情。记录下设计过程，也是供同行们参考。

一

今年 2 月份的时候，我们发布了豌豆荚 Windows 版 2.0。这个项目的设计和开发时间有 10 个月之久，这对很多公司来说可能并不算长。但考虑到这 10 个月占据豌豆实验室当时两年历史的接近一半，豌豆荚 2.0 对于我们来说就显得很重要了。

2009 年年底，我们开始豌豆实验室的时候，就希望做不一样的公司、开发不一样的产品。用我们的产品和技术，来帮用户解决问题。而不是像很多同行一样，用其它的更捷径的方式。两年的时间里我们做了很多尝试。有些尝试失败了，也有些尝试成功了。

「成功」有一个简单的标准，即被「借鉴」。2010 年，我们刚刚推出第一代产品的时候，用了和过去的类似软件很不一样的产品设计，特别是功能大为减少。有些朋友忧心我们的产品过于简洁，也有人警告我们说，这种「阳春白雪」的产品在中国是走不通的。但时至今日，我们已经拥有了超过 5000 万的安装量，而今天市面上所有有点影响力的桌面手机管理软件，基本上也并没有脱离开豌豆荚定义下来的框架。可以说，我们在过去两年的时间里重新定义了桌面手机管理软件。

我们不介意别人对我们的跟随，因为当别人还在跟随我们的时候，我们其实已经给明天做好了准备。

这就是豌豆荚 2.0 的设计背景。

二

为什么要动手做豌豆荚 2.0？要回答这个问题，就得知道豌豆荚 1.0 是在什么样的环境下出炉的。

豌豆荚 1.0 开始开发于 2009 年 12 月，当时市面上最为流行的 Android 手机是 HTC Hero，Motorola Milestone 刚刚推出，Nexus One 还不见踪影，Android 手机在国内的数量，应该仅在百万级别。这种情况下我们将豌豆荚专注在 Android 上，其实上是一种冒险。实话实说，我们自己也并不清楚用户需求到底是什么样的。

因此，对于豌豆实验室来说，最重要的任务就是尽快推出最小可用的原型产品（Minimum viable product, MVP），验证用户需求。

说到这里稍微绕远一点——为什么这些年来很少创业公司会选择 Windows 客户端这个领域？原因很简单：开发成本太高。要做一个非常好的 Windows 客户端实在太难了，要比做 Web 服务、iOS、Android 应用都要难得多。这也是为什么我们现在想把我们创造的这种 Web 客户端的框架开放出来的原因，因为实在太难了。

因此，可以理解为什么豌豆荚最早选择了用 .NET framework 来开发——在开发效率还是用户体验这个问题上，我们选择了开发效率。尽管这个决定后来被屡屡诟病，但即使再来一次，我们也一定会做同样的选择——因为这可以确保我们能用最快的速度将产品推向市场，迅速摸清用户需求。快速迭代。

所以你可以想像，那时候我们的心态是：尽快用积木搭个能走的小车，别的再说。即使很小车不牢靠，但至少能走。而能走了以后，我们应该有时间重新做个好点的车。

一晃一年过去了。2011 年 2 月份，我们迎来了第 100 万个用户。如我们所料，用户需求变化很快，一年的时间里面产品进行了多次大幅改动，但基础仍然是那个用积木搭成的小车。

积木小车已经不堪重负了，已经有太多的新功能、太多的缺陷，不推倒重来无法解决。

三

我们最终下定决定要推倒重来，重新设计和开发豌豆荚。这是在 2011 年的 2 月份。扔掉 .NET framework 的架构，重新用 C++ 开发——我们知道这是一件很难的事情。但，实际情况比我们想象的还难。

无知者无畏。

我们最初的计划是在2011 年 6 月发布豌豆荚 2.0。不过，到 5 月份的时候，我们估计新产品在 7 月份发布的话，可以比较安全。到 6 月份的时候，我们再次估计在 9 月应该能发布，这样我们能过个美好的国庆长假。可是到了 9 月份的时候，估计的时间点变成了新年前后。董事会上冯锋承诺，如果新年前还无法发布，就要服毒自尽（幸好后来没有人提起过这件事情）。最后，我们是在 2012 年 2 月 22 日发布的。

这个日子其实也不是刻意挑的，而是因为豌豆荚 2.0 各项指标终于在一周前都基本达标了。

回头一看，我们当时随意用积木搭成的小车，居然在这整整 10 个月的时间里一路高歌猛进，安装量从 100 万变成了 2500 万。这真是一件让人吃惊的事情。

不管怎么样，总算是发布了。

四

2011 年 3 月，我们开始进行豌豆荚 2.0 的设计工作。豌豆荚 2.0 要解决什么问题？

传统的理解需求的过程，有许多不同的方式。例如，直接进行用户访谈，发放调查问卷，购买市场研究报告，或者听听意见领袖们怎么说。

我们的方式，就是依赖直觉和经验。

这有两个前提条件，一是豌豆荚已经运营了一年，我们自信对用户需求的理解已经有了一定的积累；二是实际上在当时来看，已经不是不清楚用户需求的问题，而是用户的大量需求我们原有的产品和技术架构无法满足的问题。因此我们做的第一件事情，就是把我们脑海里面堆积如山的想做的事情整理出来。

第二件事情，豌豆荚的愿景在一年多的时间里也慢慢变得清晰。将这个愿景整理成思维导图，我们就拥有了一个几年内的路线图。豌豆荚 2.0 如何和这一愿景相匹配，也就是一件自然而然的事情了。

和各种各样的头脑风暴的过程一样，需求的收集是一个开放的过程。这里面会有各种各样的声音，但需要产品设计师来归纳和整理。

与此同时，工程师们也在做早期技术方案的探索。早期的探索过程就像上图所示意的一样。你需要不断地发散，又需要不断地拒绝掉不那么靠谱的想法，留下那些靠谱的，并且进行下一个阶段的发散。如此反复，你就在这发散与收敛的过程中取得了进展。

五

豌豆实验室使用 Google Docs 办公。在初步的想法确定下来以后，我们就开始使用 Google Docs 协作，不断把我们对产品的想法积累下来。在纸面上推演的时间花了一两个月的时间，我们维护了一个文档，一直在更新。这种时候，是不需要关心能不能做出来，也不需要赶时间的。

不是所有的沟通工作都适合用开会这种形式来解决。尤其是对产品的想法，很多时候可能就是躺在床上睡着之前的灵光一现，如何更有效地捕捉到这种灵光，比何高效地沟通更重要。

所以那段时间我们在 Google Docs 上维护了两个文档，一个是基础框架的需求，只要想到什么东西，我们就会添加进去。可能其它的同学过了几天甚至是几周的时间突然在这个基础上想到了什么新的想法，才会上去回复进去。Google Docs 的评论功能非常适合于进行这种异步的讨论。

另外一个是所有功能的列表。这个文档叫 One-Pager，本意是在一页内将所有的功能写进去，结果最后发现打印出来有 10 页长。

灵感一发不可收拾，我们写了很多文档，放在同一个目录里面。和一部分设计项目的过程不同，到这里为止，我们还没有动手画任何东西。不是不想画，而是强忍住了画出来的冲动。我们觉得，应该先从比较抽象和逻辑的层次，把产品的思路整理清楚。

这张图是我用来做规划的工作，在这里面列出了豌豆荚所有的页面和功能，确保不会出现大的遗漏。这同时也做为工作规模和进度的估计，看这张图，我们就能知道有多少工作已经完成，有多少工作还没有做。

设计工作往往是发散的，但经过之前的铺垫，我们已经整理出“再设计工作”的几条主线。其中之一，就是对信息架构的改善。类似这样的主题，我们在 Basecamp 中创建了不同的 To-Do 列表，方便头脑风暴要解决的问题，同时也一个个划掉，确保项目始终围绕着重设计要解决的问题来进行，不过分发散。

我们有时候引入大量的讨论，但又注意不和所有的人讨论。在豌豆实验室这种开放透明的工作环境中，如何「管理」好其他人的脑力是一个挑战。你希望其他人的观点、知识、经验是能对你的项目带来帮助，又不希望会对你的决策带来干扰，避免「集体决策」的结果。

六

Jesse James Garrett 在《用户体验的要素》 [PDF] 这张著名的图表中，将用户体验划分为几个不同的层次。随着设计的过程从抽象到具象，产品也一步步走向完整。

接下来的设计过程就是一个从抽象到具象的过程。

我们开始有手绘的线框图。

为了探索更好的信息架构，尝试了各种各样的方案。基本上是按照排列组合的方式，把各种可能的情况都试了一遍。

就和之前那张示意图一样，设计的过程就是不断发散尝试，同时也不断抛弃自己的尝试，挑选胜出者，再进行下一轮的发散和抛弃。

这种不断发散地尝试在什么时候可以停止呢？一直到出现一些自己满意的方案为止。什么叫一些？什么叫做自己满意呢？就是觉得没有什么可以改了。高质量的设计一定是有满墙的迭代草稿做为基础。第一稿就非常完美，有可能性，但非常罕见。

同时我们也开始了视觉设计的工作。这是不符合一般设计项目的流程的，但我们的时间不允许做完所有的交互设计，再进入视觉设计这一流程。

七

前文再续，说到我们一边画线框图，一边就请我们远在纽约的视觉设计师开始开展了视觉设计的工作。一方面是因为这样比较节省时间，另外一方面也和项目参与者的技能比较有关。我和刘亚平（豌豆荚的产品设计师）都不擅长视觉设计，但自认还是有能力将一个比较完善的视觉设计语言应用到已有的产品上的。

因此，在视觉设计的基本样式出现后，我们整个设计的过程基本上就是直接输出高保真的设计稿的过程。从没有草图到线框图到视觉设计稿的过程后，效率提高了很多，依赖已经确定的视觉风格，也可以保证不出现冲突，还有高度的一致性。

借助这个风格的工作模式，我们往往在一张图上会同时标注产品逻辑和呈现大量细节的视觉实现指南。通过这种方式，我们可以一步到位地和开发人员讲清楚我们需要的是什么。这是非常重要的，很多复杂的交互中，有一点点不清楚，要返工的成本可能就会非常高。这张图展示的是对通用搜索功能的设计，设计师需要考虑到拼音首字母、标点符号全角还是半角等等的细节。然而，即使做到这个程度，仍然出现了很多因沟通不清而出现返工的情况。

这是豌豆荚 2.0 左侧导航的部分设计稿，我们遍历了所有的状态，力图在产品定义中将所有情况都考虑到。

我们的经验是，不要拘泥于教科书上的流程——当然，你需要了解。在这个阶段，也要和所有人讨论，让他们告诉你各种各样的边缘情况。

八

整个设计过程我们进行了数百次尝试。实际数字应该要比这个多，因为我们都没有每做一次，就保存一次版本的习惯。

在确定了欢迎页面的主要任务是加强用户和自己手机之间的情感联系后，我们首先是收集了一些图片，来沟通我们希望这个页面传达什么情感。

然后在这个基础上进行了各种概念的探索。

比如，是不是在欢迎页面上显示通知、手机里面的图片、推荐应用等等：

只显示图片：

显示应用：

将手机的墙纸取出来，和欢迎页面结合到一起去？我们收集了一些常见的壁纸，进行了效果模拟：

在确定了几个比较明确的方向后——使用我们向用户推荐的应用，要结合用户在手机上设置的墙纸——我们进行了更多的探索：

这是最后的样子：

这期间，为了探索交互的效果，我们还开发了几个可交互的动画原型，供设计师们实际评估。豌豆荚 2.0 的 Web 框架也会这些效果的实现带来了便利。

前面说到，如果没有数量众多的迭代，不大可能有一个好的设计。豌豆荚 2.0 就是其中一个案例。

九

然后就是漫长的设计、开发、返工、再设计、再开发的过程。我们一直看着那张大图。

2011 年 8 月，我们发了第一个公测的版本，发电邮邀请了几万位热心用户参与测试。从这时候开始，我们用尽了各种定量和定性的办法来不断邀请用户参与，不断评估效果。从传统的可用性测试、到性能数据评估、到定量的问卷调查等等。到 2012 年 2 月我们的各项指标终于都满足条件，准备正式发布时，豌豆荚 2.0 已经积累了超过 100 万的测试用户。

回头来看，豌豆荚的愿景仍然有大部分没有实现。上面的这些设计，在发布后的半年多时间里也在不断进行调整，有不少设计已经又被我们认为更好的设计取代了。而且，我们的路线图里面还有更多我们认为可以再次改变整个产品体验的想法。我们现在有一个五位产品设计师组成的产品设计团队，但我们要做的事情还有很多。现在豌豆荚总安装量超过 6000 万，豌豆荚 2.0 的安装量超过 5000 万，但远远不是我们理想的全部。

如果你觉得我们的工作方式还合你的胃口，不妨考虑一下加入我们。有兴趣，可直接联系 junyu@wandoujia.com 或 yaping@wandoujia.com。

I SEE YOU– AVATAR TALK设计分享

CDCer — 2012-08-02 11:07:41

随着移动通信互联网的逐渐成熟，通过文字、语音、图片、视频交流的通信应用（QQ、微信、Whatsapp、LINE…）一应俱全。我们在思考，如果有一种新的形式给即时通信带来突破，会不会成就一个与众不同的App呢？　　我们希望它十分有趣、新颖、能给好友间带来新的互动、解决尴尬环境下产生的问题并带来新的交友机会，同时还需要符合移动设备轻量、省电又省流量的诉求。于是，我们开始着手设计一款趣味化的视频IM——AVATAR TALK。

下面跟大家简单的聊聊设计AVATAR TALK的整个流程，以及过程中遇到的问题和处理方案。

前期预研

AVATAR TALK到底是什么呢？

它是一款新型的视频通讯工具，其主要是利用人脸识别技术以虚拟形象与好友进行实时视频通话及互动。它包括AVARTAR(角色装扮系统)+TALK（视频通话）功能。

App Store和GooglePlay里面暂时都还没有发现虚拟互动聊天的应用。于是预研阶段我们尝试使用虚拟形象并提供了3种AVATAR模型进行测试。评估各种模型的视觉效果、设计成本及性能效率（如下图），并快速敲定了位图方案。

交互设计

整个软件由三大模块组成（AVATAR TALK、联系人、会话），自然造就了功能强大的入口。为了加强它与用户之间的亲切感，通过大范围的调整信息比例，让用户能马上被虚拟形象所吸引，同时也要便于后期的信息扩展。

在这个过程中，我们遭遇了2大难题。

1.个人主页

如何设计个人主页是其中遇到的一大难点。在最初提出的快速通讯列表（以文字信息为主的主页）与个人动态墙（显示静态虚拟形象及浮动消息的主页）的基础上，最终优化成为动态主页。即让用户可以通过人脸识别，操作虚拟卡通形象，自己跟自己玩，以增加产品趣味，提升用户体验（如下图）。

2.聊天界面

在聊天界面布局安排上也产生过分歧，一度成为设计的瓶颈。

传统聊天的大小窗口模式并不能适用于AVATAR的互动视频聊天。你对好友夸张互动时（比如揍他一拳、扔个鸡蛋、对TA无语飞个乌鸦神马的）也希望双方的反应大家能够及时感知，进而产生下一步的互动。

又因为受硬件的制约，各种手机摄像头的位置不一，拍摄角度可视角度受限，还要顾及界面设计的合理布局等因素，两人并排在同一场景中的布局也无法实现。

环境和技术的限制，再加上AVATAR是由表情控制，进过小组内多轮脑暴，最后一致认为采用1:1分割的方式能更充分的展示双方的面部表情以及互动。（如下图）

动画开发

开发动画对团队来说是一次全新的尝试。为了保证应用的轻量性，最大发挥互动动画的灵活性，采用了程序完成全程动画的方法（如下图）。

由于互动动画是无规律运动，因此由交互先给出动画Demo，评审通过后再输出各个部件的动画规则。先使用临时素材制作Demo，当最终动画完成视觉才优化相应的部件，提高效率。

视觉展示

在Android系统里，为了AVATAR TALK能够更加轻量化，将程序入口拆分为3个模块。分别是：“AVATAR TALK”、“联系人”与“会话”。

入口的设计为配合整体的风格最终选择了平面化的视觉表达方式。从立体的ICON优化成轻量的纸片化效果，更好的配合界面的整体风格。

设计心得

设计要推动产品，既需要设计师的直觉，也需要对产品有多维度的充分考虑，才能快速有效的集中。如何抓住核心的思考成为一个重要的挑战。

在视觉设计方面，原型的结构骨骼设计（角色的身体结构，简单的说就是AVATAR赤果果的样子）在后期动画实现环节中有很大的影响。只有将每个活动的关节合理拆分才能配合好动画的制作，展示出理想的动态效果，更能无缝的衔接产品后期换装的功能；只有固定好骨骼的活动范围，才可以使原型在任何一个装扮下都活动自如，精准适配。

结语

AVATAR TALK就像电影阿凡达中的分身一样，用新的聊天模式让用户感受到“眼相见，心相连”的视频通讯体验！

I See You！

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5875)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=5875

寻找微吧品牌设计思路和方向

于朝蓬 — 2012-07-27 21:42:26

如果说形式和风格只是设计的一件外衣，那么解决问题的理念才是支撑它的灵魂！

什么是微吧

7月24号微吧产品正式上线。
作为微博今年推出的一个重要产品，在起初接到这个品牌项目时，一连串的问题浮现在脑海里：什么是微吧？它的特点是什么？设计出来的形象如何准确清晰的传达微吧产品概念？如何能让用户记住并且接受你的设计？……还是回到原点思考，微吧的定位就是：基于网友各种兴趣话题聚合、主题深度讨论的空间。

来次“脑暴”，思维发散

一个人的想法终究有限，这需要集体的智慧。带着这些问题，我们把微吧的产品定位和特征认真的理了一遍，列在题板上，开始进入最重要的草图和“脑暴”环节。我们将只要能想到与之相关的元素符号通通列到题板上。过程中，大家把想得到的元素都瞬间呈现在面前。最后，“尾巴”“冒泡”“对话框”的概念得到大家一致认可。

找准定位

单只有这些单纯的元素还不够，还需要准确的概念把他串联起来。仔细分析一下， “吧”到底是什么意思？它可以理解为一个大家聚集一起讨论、交流的地方。如果把这个代表话题、对话讨论含义的“气泡”图形设计成一个甩着小尾巴的笑脸，会不会很有意思？而这个想法恰恰又和汉字“吧”的结构又有可结合之处，左边一个“口”字，右边一个尾巴的“巴”，这个“巴”就可以是那张笑脸，左边“口”字就是那个表达说话的气泡。当然标志图形不能太复杂，做了几个图形尝试后，定下这款logo方案以及延展和主题吧icon设计。

使品牌延伸下去

在接下来的品牌延伸上，进一步拓展思路，讨论是需要一个广阔、自由的空间去让大家冒泡，于是，海洋、蓝天、白云就再适合不过了，经过几轮的讨论和不停的方向修改，这个气泡元素可以演变成各种插画、图标和微吧小形象。

核心理念才是关键

总结下来，当接到项目入手，先要在脑中建立起大概的思维框架，然后对项目进行分析，把要表达的内容一项项罗列出来，划分他们各自的重要性，那么接下来的工作计划该怎么实施就很清晰了。其实，设计的核心理念才是关键，这对设计工作才能始终保持一个准确清晰的思路。

最后，感谢品牌组、视觉组设计高手们给与的指点和想法，以及所有参与微吧项目童鞋们的辛苦努力……大家的智慧和能量是无限的，真心祝愿微吧产品越做越好！

（微博UDC原创博文，欢迎转载并注明出处，欢迎订阅）

浅谈如何留住用户

CDCer — 2012-07-27 21:38:47

应用中心，顾名思义就是应用的集合，是承载各种应用的平台。其主要特点是娱乐性强、沉浸感强。它像是一个商店，里面有供人们随意挑选产品的货架，更像是一个游乐场，里面有各种各样让人眼花缭乱、流连忘返的产品。因此，如何吸引用户到我们的产品来，如何让他们在我们的产品上停留更多的时间，这些都是设计师们的必研课题。笔者经过一段时间对应用中心类产品的研究和设计积累，总结了一些设计思考，在此与大家分享。

如何设计应用中心类产品？

首先，告诉用户这里有他们需要的东西。

用户需要什么？有人说，这还不简单，不就是玩吗，让用户玩的开心，自然而然就留下来了。回答地没错，用户的需求就是娱乐，那他为什么不在搜索网站上搜游戏玩，搜电影看，搜歌听，而要在我们的应用中心玩呢？因为应用中心聚集了海量的应用，用户不必再受辗转于各个网站之苦，另外，应用中心能给予专业的分类和精品的推荐，用户不必再受大海捞针之苦。这样想来，不难得出结论，用户需要的是全和专业。

全，不仅指数量全，也包括类型全，数量越多，选择的余地就越大，类型越多，就越能满足用户不同纬度的娱乐需求。全是应用中心的硬实力，而专业就是应用中心的软实力。专业意味着能获取信任，让用户觉得这里的分类最全最专业，特别推荐的应用最好玩，推出的合集最有意思，那就离成功不远了。

如何打造全而专业的形象?以下总结了三条：

1、扁平化的导航

由于应用中心的产品种类数量都较多，如果在首页导航设计地过于简洁，那势必会造成二级页面中还会有导航，页面切换变多，造成操作上的麻烦。不少国外游戏中心采用的都是首页双层导航的设计，一来减少页面跳转，二来用户对本站的内容一目了然，不必一一点进去看。双层导航的网站给人的感觉内容也会比单层的详实一些。

2、清晰的布局

用研同事曾对应用中心首页进行眼动测试，用户心中的应用中心是：顶部有个广告、左边导航、右边排行榜、中间一大片应用，对其它区域印象不深。

应用图标的本身大多比较花哨，比较能吸引眼球，试想页面上到处平铺应用图标，势必会没有视觉重心，造成视觉疲劳。考虑到大多数用户在浏览页面都采用的是扫描式，而不是阅读式的浏览方式，因此网页的布局就显得十分重要，清晰的布局可以帮助用户有效的归纳信息，快速定位自己感兴趣的模块。

3、顺畅的路径

用户来到应用中心的目的很明确，就是找好玩应用。类似进入tab页查找—没有—返回—重新选择tab等这样繁琐的操作非常多。专业的网站就是让用户在这一过程中，很顺畅地完成这一系列动作，让用户在每个页面跳转返回过程中都很自信，很有把握。

其次，帮助用户快速找到他们想要的东西。

用户不会浪费太多的时间在阅读网页上，他们只想快速搜寻想要的信息和答案，如果花了一些时候还找不到，他们只会果断地关闭页面。对于那些有明确目标的用户而言，可以通过搜索或导航精准寻找，但实际情况中，大多数用户都是对目标很模糊的。这些用户很乐意去尝试一款新的应用，一旦平台给予的推荐理由正好符合他的某种诉求需求，他会很随机地点进去看看。因此，在这里做好推荐，就成功了一半。

下面我们通过三个实例来看探讨下，如何做好推荐。

实例一：同样都是热门推荐，你会认为下图中，哪个选择起来更容易一些？

从数量上来说，B推荐的应用更多，给用户选择的范围更大，假设这些应用对用户的吸引力是一样的，那么从选择成本的角度来说，十选一的成本就要比三选一的成本要高的多。而大多数用户在应用中心都属于懵懂状，对应用的好玩程度不了解，只能通过图标和名字做简单估量。因此，在精品推荐时，可以考虑通过减少推荐的数量，以减少用户迟疑的时间，降低选择成本。

实例二：同样是分类应用推荐，你认为下图中，哪种推荐方式更好？

A中应用分类虽然有条理，但从视觉上看却没有重点，选择太多而没有了点击的欲望。B将四个小图标换成一个大图标，加强了分类效果，让页面有了层次感，视觉上更清晰。所以，并不是推荐的链接数越多越好，而是要把用户从繁复的信息中拯救出来，给他一个理由，让他更容易做选择。

实例三：下面两个计算器应用推荐中，假如你没有涂鸦的偏好，只要有计算的基本功能就行，你会更容易选择哪一个？

当看到两个应用是同一个类型时，如A图中，卡片中的下载数量多少会影响你的选择。虽然也有涂鸦计算器上线时间比较久的潜在可能，但你潜意识还是会认为前者的受欢迎程度要大于后者。如果相邻的两个应用不是一个类型的，如B图，那么这个下载数据对选择的参考价值就会下降一些。

综上，基于推荐目的的不同，可以选择不同的推荐方式。当用户有明确的类型需求时，通过某种数据的比较，可以更容易下决定选择哪一个，当进行综合推荐时，则要避免同类应用的出现，除非你希望其中一个应用的数据悲剧。

最后，适当的时候提供用户可能需要的东西。

还记得每次在超市等待付款时，被附近货架上的口香糖、巧克力等小东西吸引吗？由于在购物过程中，东西实在小件，常常忘记或懒得去找了，而在这等待无聊的时间里，它们很容易就勾起了用户的潜在需求。在适当的时候，向用户推荐适当的东西，也是留住用户体验的一个手段。

目前，常见的方式有以下三种：

1、猜你喜欢

　　当用户在玩社交性游戏时，向他推荐好友们在玩的社交性游戏，他更容易投身于这款的社交游戏。平台常常会根据用户常玩的一些应用类型，向用户推送猜他喜欢的应用。但有一点要注意，当用户在玩农场型游戏时，向他推荐牧场游戏，他也许会觉得很有意思，但是如果推荐的还是农场型的类似游戏，用户可能就觉得重复的游戏没有必要玩了。因此，根据不用的用户，应该设计不同的推荐逻辑，向用户精准地推荐，才能有效地提高转化率。

2、运营手段

有一些常用的运营手段可以增强网站的用户粘度。例如荣誉类成长系统，通过升级的荣誉感来吸引用户停留更长的时间。定期的专题活动，通过运营的主题来吸引用户，通过应用礼包奖励来拉动用户的活跃度等。

3、多种应用类型交叉推荐

应用中心的特点就是一站式的娱乐体验，玩游戏的时候可以看电影，或者看小说的时候可以听音乐。多重任务并行，娱乐的纬度可以多元化。

既然是提供用户可能需要的东西，那么就可以从用户个体之间存在的差异性和共性入手，挖掘更多用户潜在需求，以提高用户粘度。

以上是笔者对如何留住应用中心类产品用户的一些拙见，总结起来如下：

１、告诉用户这里有他们需要的东西。
２、帮助用户快速找到他们想要的东西。
３、适当的时候提供用户可能需要的东西。
第一步是目标层面的，让用户对我们的产品感兴趣，第二步是交互层面的，让用户有很顺畅的体验，第三步是情感层面的，让用户沉浸于应用中心这个大游乐场。前两步是基本需求，做好了，就是一个很好的工具性产品，第三步是最难的，因为这一步要想做好，我们必须做到比用户自己更了解他们。这一块将是我们产品未来探讨的主要方向。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5864)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=5864

发现闪屏之美

yanerli — 2012-07-18 17:11:56

每逢节日到来，当你打开QQ浏览器，发现有什么不同吗？QQ浏览器已经悄悄的送出了节日的关怀，呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口，也是传递节日祝福的桥梁。在不同的节日传达不同的人文关怀，变换不同的表现形式，无论是为你带来一秒静静的感动，或是纯净的莞尔一笑，我们都希望闪屏的氛围能给用户带来一个美好的心情，一段温暖的时光。

节日闪屏的构成要素

品牌logo+口号Slogan+闪屏图案Graph

在这里，节日闪屏有两种构成方式：

1、以手机屏幕的最小边为边长的正方形非全屏的闪屏，其余部分靠色彩来填充，节省空间，突出代表性事物，表达简单明了；

第二种：以屏幕的最长边为边长的正方形全屏的闪屏，全屏让视觉效果更鲜明，色彩和氛围更具感染力。

了解节日文化背景，重视情感共鸣

节日文化是一种历史沉淀，是一个国家或民族在漫长的历史过程中形成的民族文化、风俗和习惯。我们不仅要关注节日文化，更应该关注的是用户对节日文化的理解。相同的成长经历，相同的背景，对节日的看法和理解相同，站在用户的视角，说用户想说的话，创造用户的故事，让用户受到感染，达到和用户的情感共鸣。

了解用户群

不同年龄层对文化的理解不同，感受也不同，那我们浏览器的用户是哪些人群呢？

上图所示，浏览器的用户群是一个非常年轻的群体，关键词总结如下：

故事情节和节日氛围

故事情节是支撑画面的灵魂，趣味性固然能引起注意，但是我们还是要根据节日氛围来打造合理的故事情节：愚人节可以是诙谐的生动有趣的；情人节自然是浪漫的爱意弥漫的；清明节应该是肃穆的充满怀念的。浓郁的节日氛围将会拉近和用户的距离，此时需注意节日的季节和画面的时节相对应，这样更容易产生共鸣。

清明节的印象大概已经定格在“清明时节雨纷纷，路上行人欲断魂”，看看网上的图片，清明节都是千篇一律的水墨来表现“牧童遥指杏花村”，对于我们年轻的用户群，究竟什么样的氛围和情节能打动用户呢？

正值这个清明时节，刚好是草长莺飞，春寒料峭，春雨纷飞，这样一个诗一样的季节，我们打造的氛围也偏向了这样一个文艺的路线，于是想到的关键词是春雨、怀念、伤感。

雨的氛围确定了，故事情节我们还是确定为“雨中的思念”，远远的雨巷中，陈旧的石板路被雨冲洗着，两旁的年代久远的院墙诉说着古老，屋檐上滴滴答答的雨声似乎传递着遥远的思念。

首先汇出我们绘制想象中的场景，还是先用简化素描的形式勾勒出场景的大体轮廓；

然后晕染出淡淡的丁香色，此时再填上画面的主角：丁香一样的少女、淅淅沥沥的春雨……

最终效果如下：

盛夏炙热的阳光下，画面定格在高考倒计时紧张的氛围中。阳光、黑板、课本、空无一人的教室，把你拉回到那段回忆中。

还记得圣诞时期待收到礼物的心情吗？大雪纷飞，冰天雪地，但心里却暖暖的。

由代表性事物入手，从主题中提炼色彩

如果想要主题鲜明，最好的方法莫过于直接列举关键要素，由关键要素提炼色彩：

表现设计闪屏的视觉风格的技巧

1. 首先用简化素描来表达

用简化素描来表达基本的故事情节，设计思想简单明了，更能提高效率；在设定视觉风格之前，都使用简化素描将故事情节描绘数张，以备挑选。简化素描可在纸上进行，也可直接临摹照片形象，只要略勾勒出轮廓、神态即可。

2. 用简单的方法模拟不同流派的视觉风格

从美术巨匠的作品得到灵感，模拟不同流派的视觉风格，这样不仅能提升艺术品质，更让我们追随历史的足迹感受艺术的熏陶，让工作也变得更加有乐趣；

下图是超现实主义代表胡安.米罗的《哈里昆的狂欢》：单纯朴素被简化的形体、轻松明亮的色彩，童心、古怪、具有幽默感，经过简化而得出抽象的形体。

值得学习的还有历史上的很多名家巨匠：

比如立体主义的创始人毕加索，将对象的分割与重组，表达真实感受；追随感觉的浪漫主义画家约翰.康斯特布尔；简化事物，强调个性化色彩的马蒂斯，模仿这些名家的作品，更会一步步接近经典的秘密。

现在，让我们来模拟野兽派画家马蒂斯的《红色中的和谐》，注意模拟风格的特点是简化对象并强调个性化色彩，原作如下：

具体步骤如下：

节日闪屏的发展方向

闪屏不应该仅仅只作为单方面传递信息给用户，还需要得到用户的反馈，和用户互动，才能实现与用户更深层次的交流，增加用户对产品的情感依赖。

浅谈极简风格在设计中的运用

格格山木 — 2012-06-19 22:40:09

Hi 大家好，我是阿木，今天我结合我在微博的实际项目跟大家分享一下极简风格的一点设计心得。现代城市生活中我们每天要面对嘈杂拥堵的街道和地铁，各式各样的广告，处理各种邮件和信息。于是我们内心追求一种体验那就是—极简，像大家家喻户晓的品牌如：MUJI无印良品、苹果、宜家家居，都是这一风格的发扬者，他们的产品也获得了巨大成功。

极简在摄影中是一种突出主体取简去繁的摄影手法，在生活中是一种放松的生活态度，在设计中是一种简洁的设计手法。

微博的设计体验也是如此，我们去掉了复杂的视觉干扰，力求给用户带来愉悦轻松的视觉体验。

1. 微博同城项目

说起微博同城项目在设计的时候，我不得不感谢一个摄影师给我带来的一些灵感。

德国摄影师JosefSchulz（1966生于荷兰）

同城项目要求根据用户登录ip来判断登录地点。这就需要一张能体现当地风土人情的头图来营造氛围。怎么做呢？怎样才能让用户有家的感觉？

正当我在想用美食、风景、建筑为题材切入的时候，无意中发现了这组摄影作品。它没有多余的光效，画面干净，看着很舒服。但是看似简单的东西却在角度和构图上要比普通照片讲究的多，比如下面这组摄影就是追求的平面构成和透视原则，内容看似很单调，但构成感很强。

然后我确定了用城市建筑来表现，我开始在网络上搜索几个主要城市的地标性建筑，然后进行简化和提炼，把建筑的主要特点进行勾勒.以香港为例：

先找了一张有代表性的香港夜景

然后画出简单的建筑骨骼后开始上色，说到这我插一个有意思的事情。宫崎骏的工作室中“小男孩”组负责草图和结构稿的绘制，然后由 “小女孩”组完成上色。

[最终效果图]

其它城市的设计过程也是如此，我就不再一一赘述了：）

遗憾的是这个项目由于种种原因上线后很快就下了，所以大家可能没能看到。呵呵~

我小结一下这一过程我学到的一点小经验吧，在处理类似的产品页面的时候可以考虑用平面化的剪影图形，设计加上一点画面节奏处理，再用颜色一点颜色进行画面烘托，能起到不错的视觉效果希望大家能可能用的上。

下面这个项目大家每天都在用，虽然它小的让人很难察觉，但是给用户减少了很多认知负担。图标能让我们很快速的找到需要的东西，能在给用户清晰的指引。

2. 微博图标设计

这个图标是去年年底的时候画的，当时需要对微博进行改版（V4），之前的图标存在很多问题，比如风格不统一，大小也五花八门。

这是整理后的图标，图标没有水晶质感，没有过多的质感塑造。以极简的设计风格为主线进行，这也跟微博整体体验的“轻”“薄”精神相一致。

我们来看看新版微博和旧版微博的发布框的对比，比较明显能看出来图标的清晰度和运用极简设计风格的视觉效果。旧版的图标有很多没必要的高光和立体感，但是这些效果反而没起到理想的效果，反而识别性大大减弱。

3. 图表设计

先定义图表的色调，以为图表跟以上两个设计不同的地方是在于，它是靠颜色来识别。所以颜色选用尤为重要。图表有的时候是比较枯燥的，所以颜色我选择冷色系，这样比较耐看，相对于暖色系而言，能降低用户厌倦反感的情绪。

我会加入一些微弱的光和投影，但是总的方向还是以极简的风格为主。

[饼形图表]

在增加选项的时候，其它选项的颜色需要根据主色调来进行扩展，但是有个小小注意事项：因为近似色的关系，为保证颜色左右能区分开，我们需要规定每个颜色出现的位置，所以我给开发人员做了一个颜规范。

[曲线图表]

曲线图表也是如此，细节上有一些弱弱的投影和高光变化。

最后总结一下：极简不等于简单，但极简拒绝多余。

谢谢阅读：）

最后推荐几个网址：

http://www.josefschulz.de/（文章第一个提到的摄影师的网址）

https://www.mint.com/t/012-c/（图表做的不错哦）

http://www.icoeye.com/（图标很牛x，还带设计过程）

（微博UDC原创博文，欢迎转载并注明出处，欢迎订阅）

浅谈印像派首页改版之视觉篇

LOT — 2012-06-06 08:56:38

前段时间在做印像派的全站改版，其中包括首页、列表页、详情页、主题页等页面，整个项目历时较久。前段时间新版印像派上线了，首页初稿由葱头同学设计定稿的，后期由我跟进优化，现在正好以印像派首页为切入点做个设计回顾。

网易印像派(yxp.163.com)是网易公司推出的个性产品服务平台，在网易印像派可以网上冲印各类数码产品。随着印像派业务不断扩展，几年前设计的首页无论是在交互还是视觉上都已经无法满足现有的业务需求，所以首页的改版是一件迟早要提上议程的事情。

首页改版是一项历时较久、参与人员较多的工程，所以必须有一个清晰有效的项目流程。

项目流程：

1.项目立项

产品负责人写产品计划书，确定产品的市场需求点和功能需求点，和相关业务部门负责人开会讨论确认需求，随后召集交互、视觉、前端、开发等项目相关人员确定各自的任务时间点。

2.用研、交互

用户研究员根据近一两年的数据走向，重新定义目标用户群，进而细化产品概念。交互根据需求绘制产品原型。

3.视觉设计

视觉设计师前期参与项目会议了解需求后，根据产品原型和产品功能策划书进行视觉设计。视觉设计在整个项目中起到承上启下的作用，既要和产品负责人沟通产品需求又要和前后端工程师沟通页面细节。

4.开发

视觉评审会上确认视觉稿后，接下来到开发阶段。在整个项目中此环节耗时最长，因此视觉稿在交付开发前要做好标注和切图，以免延误开发。

5.测试

前端测试环节也是非常重要的一环，如果你认为视觉设计师的工作止于视觉稿定稿那就错了，不到上线绝不能松懈，测试阶段经常出现的问题有“浅灰色底怎么变成白色了”、“这里怎么偏移了2像素”“图片和文字不对齐”，所以想要做到线上效果和视觉稿100%吻合，经常跑到技术GG那边校稿是必不可少的。

6.上线

刚上线后要密切关注数据变化，根据数据分析、用户反馈做出调整。

7.跟进优化

成功的产品是在优化迭代中产生的，这是一个从设计到用户数据反馈再回到设计的验证过程。

1.老版首页的视觉风格过时，需要重新全面包装，提升品牌认知度。

2.版块过多，产品区得不到更好的展示。

3.老版的导航条为二级全展开导航，这种全展开导航的弊端是导航会随着内容的增加而变长，会导致导航条过长，不利于浏览。

4.三栏的页面布局导致信息拥挤。

5.轮播的交互操作不够便捷，视觉样式不够简洁。

1.形象色的重新提炼

用户打开一个页面，首先映入眼帘的是色彩，网站形象色的重要性犹如企业的LOGO，一个成功的网站形象色应该能使用户一看到该颜色就联想到该网站。因此视觉改版首先要做的是主色调的提取，只有确定了主色调才能往下展开其他设计。

产品设计应该是先理性后感性的。先理性的分析一下用户属性，再感性把握主色调的走向，下面来看看印像派的用户数据分析：

经过上面的用户数据分析，我们可以看出印像派的主要用户为25-31岁的年轻女性，大学本科的学历，收入为3K-5K。这类年轻女性用户的消费能力属于中上水平，有一定的审美能力，因此主色调的重新提炼的关键词应是：女人、清新、时尚、小资、活力。

老版的红色饱和度太高，这种大红色辨识度太低，品质感也不够。最终选了饱和度稍低，色相偏粉红的红色，搭配大片留白的页面，新的红色看起来既女人又清新，到达了上文数据分析的颜色需求。

2.重新规划版块

摒弃官方动态、微博、买家热评等鸡肋版块，加强力度突出焦点轮播banner、产品促销区等重要版块，让产品区得到更好的展示。

3.导航栏

原导航栏信息混乱、图标简陋。新版导航条以文字信息为主体进行设计，并重新设计ICON，看起来简洁清爽，而且一级导航比原来的二级导航更利于后期维护。

4.页面布局

三栏布局能在一屏内容纳较多的信息量，常见于大型门户网站。印像派本身B2C的定位不同于门户网站，没有浩瀚如海的信息量，因此应在有限的首页空间里将产品更好的展示出来。

旧版印像派的三栏布局从视觉上看起来拥挤混乱，在短时间内难以将注意力集中在重点区域，用户无法清晰地跟随页面节奏进行有效浏览。因此我们需要量体裁衣，针对网站的定位和容量进行重新梳理，选择适合的页面布局。

5.banner轮播

通过下图可以看出老版的banner轮播样式的操作不够人性化，当前帧和其他帧距离太远，来回点击成本略高。

以上是前端工程师GG给我看chrome/IE6浏览器下的轮播样式测试效果，发现这2个浏览器都无法完全支持视觉稿的轮播效果，而且高级浏览器和IE6下的样式差异很大，这确实是一件让人郁闷的事情。头疼之余，先让我们看看其他网站的轮播是怎么兼容多种浏览器的：

最后，欢迎大家访问印像派：yxp.163.com

相关话题：UED团队设计分享源地址：http://uedc.163.com/9320.html

可视化的快乐 – 百度统计流量研究院设计小结

joey — 2012-03-26 22:55:05

百度统计流量研究院为了将数据更好的传达给用户，我们采用了动态数据可视化的方式（Interactive Infographic）。希望我们的设计能将用户带入到新鲜、愉悦的氛围之中。当然，我们在设计的过程中也体会到了可视化的快乐，并且希望与大家一同分享。

好的流程是成功的一半

预估难度、多部门协作：好的沟通流程是成功的一半。在设计最初，首先应当评估的就是项目开发难度。若开发难度较大，或者说开发人员对于可视化产品的制作经验较少，则最好引入多部门协作的工作方式，尽量避免设计与实现脱节的情况出现。

统筹设计、纸上文章：统筹设计是十分重要的，因为它可以保证你的设计思路是连贯的、有脉络的。以我们的经验来见，从最初的设计想法到低保真的原型都可以通过手绘+贴纸的方式来实现。“纸上文章”最大的好处就是极大的缩短了迭代所学的时间，并且给予了各部门同学更加直观、简洁的印象，对于多部门协作十分有利。

积极参与：UE的工作不仅是把完整的设计方案呈现出来，还应该保证最终产品高品质的上线。举个例子，在开发人员开发操作系统报告时，采取了真实自然光的渲染方式。而实际上在背景色较深的页面上采用这种渲染方式会使得图表主体的立体感变差，并且失去质感。对于这种情况， UE迅速与开发人员沟通，由UE来负责flash图片的绘制工作，实现了高质感、立体感强的效果。

设计详解

在设计之初，我们的主要思想确定为用多图表联动交互的方式多维度的展示数据，并且确定了在图表中突出展现给用户最需要的信息，即信噪比原则。在这个过程中，我们利用了改变图形指标，引入具象元素，以及将生活情感化总结等方式，将数据可视化展现。同时我们也仔细的研究了数据的规律与趋势，选择了合理的展示策略。下面结合一些图片来向大家详细叙说大体的设计思路：

多图表联动交互：多图表联动交互本身就是一种很有视觉冲击力的交互方式，也可以让我们从不同纬度来查看数据。用户的一次操作就可以带动多图表的更新，其中的趣味性大家可以去体验。

信噪比原则：用户关注的信息是主流的数据的占比与趋势等信息，而不是末尾的非主流数据的信息。因此在设计过程中尽量的剔除无参考意义的信息是十分重要的，例如在分辨率使用情况报告中的占比很小非标准分辨率就是无参考意义的信息。同时对于数据量较多的，比较繁琐的数据，把最重要的数据突出展示，同时也提供用户全集数据以供查看。

上图是我们在设计过程中的一个被否决的方案，这个方案没有很好的突出重点的信息，也不方便用户查看全集的信息。而最终我们希望传达给用户的信息应该是第一印象即可大致的了解数据的分布，随后也可对更多的数据进行更加详细的查看分析。

改变图形指标：仔细探究数据与图形之间的逻辑关系，找出可以代表数据分布的图形指标（颜色、形状、面积等）。采用较为新颖的图形指标，会给用户带来新鲜的感受，这里采用了面积指标。

引入具象元素：在设计中融入具象元素，能够将用户快速的带入到产品之中，让用户更直观的了解内容。

将生活情感化总结：对数据的规律进行总结，将生活的类似经验进行总结，运用到设计之中，赋予设计以情感。在操作系统市场份额报告中，用星系的概念来表现微软在操作系统这一领域的统治地位。

将生活情感化总结：同样的，越来越多浏览器厂家就像切吐司面包一样在瓜分市场份额，百花齐放。

合理的展示策略：例如在对网民地域分布报告的数据进行分析后，我们发现除广东省外，其他省的数据基本呈线性排列的一个趋势，并且网民地域分布数据波动较小。在各省数据差异较小情况下，我们放弃了普遍被采用的固定数据对应固定图形的策略，而是采用了指定数据最大值与最小值对应的图形范围，期间数据按照比例展示图形的方式。通过这种方式，各省之间的数据差异一目了然。除此之外，在设计的过程中，我们导入了真实的数据作为依据，藉此保证视觉效果的和谐统一。

更多设计中的细节与思考，欢迎大家移步百度统计流量研究院细细品味，享受可视化的快乐。

相关话题：UED团队设计分享源地址：http://ued.baidu.com/?p=2276

一站式创新设计：天气应用惊艳登场

CDCer — 2012-03-22 17:17:06

前言

如何使一个应用在众多同类竞品中脱颖而出？作为全球最普遍的应用之一：天气，是为大家所再熟悉不过的了，今天和大家一起聊聊我们如何设计并完成这个与众不同的天气应用。

不久前，我们（腾讯用户研究与体验设计部，简称CDC）接到并开始筹划启动这样一个全新的天气类设计项目，此前我们曾不止一次的进行过天气类的设计，其中也包括现在广为流传的QQ上的天气类图标。而今次的整个过程因采用了一站式的设计流程（既体验设计阶段集成高保真原型/前端实现输出），使得我们拥有了更自由的创新与细节实现的机会，对于我们这样一个以创新与设计见长的团队来讲，这样的机会更能够几乎完美的将设计与体验实现至极致。

于是在过去的六周时间里，整个团队通过非常高效的沟通与迭代使得设计不断与原型进行着融合，最终成为成品。

设计目标

设计实现

天气的设计

SKYBOX天穹系统

OpenGL+XPlayer引擎与设计的融合

设计目标：创造体验峰值

人们是感性的，我们对一项事物的体验之后，所能记住的就只是在高峰时与结束时的体验（峰终理论）。而在过程中好与不好体验的比重、好与不好体验的时间长短，对记忆差不多没有影响。

想要让用户对小Q天气产生深刻的记忆，就要在主要任务中打造一个正面情感的峰值。看天气预报核心目的就是看天气状态和温度。所以，我们决定在天气状态上，模拟真实的大自然场景，做动态天气，来为用户营造愉悦的产品体验。其他基本任务，达到使用方便舒适就好，在界面排布上也为突出动态天气信息。

如下图所示，我们预设了重中之重的峰值点——动态天气：

【图1】体验峰值

设计实现：透过窗户看真实世界

基于创造体验峰值的设计目标，在明确气象信息的前提下设计动态天气给予用户更强的视觉冲击，从而更真实的还原当前的气候环境，而在用户虚拟环境的因素考虑中，我们希望传达给用户的隐喻信息并非在烈日当空的骄阳或大雨滂沱的雨地里，而是在室内，透过桌前或天花板的玻璃窗观看到外界的气象变化；在这个环境的基础上，配合设计目标，我们确定了将明确的展示信息打在玻璃上使之成为整个环境的第一层、而玻璃介质的设计为第二层，考虑到玻璃为透明介质，因此设计中增加了一部分光线的漫反射，目前的漫反射考虑了一些美观因素取消了一些不必要的物体投影，否则用3D软件模拟出的漫反射效果将会较大的扰乱玻璃窗后的主体世界过于喧宾夺主；玻璃窗的背后，则是一个真实的气象环境模拟，也是最花费设计的一项工作。

【图2】天气应用的设计实现，上图中的环境为第一版的晴天，但因颜色与动画效果等原因未能收录至第一版的天气包中，我们也逐渐意识到设计是一个实践与动态呈现的过程，静态的画面再优雅但呈现出来就可能完全不是那么一回事，下面我们来回顾一下几个最折腾的天气设计的过程。

天气的设计

【图3】构图上，我们慢慢明确了从散点式，水平式到焦点式的过度，这个有助于平衡左边的文字区域，也使焦点集中在某一个物体中。从而有机会可以虚化画面其他部分，使画面的变化更多。画面更加平衡。

【图4】色彩上，整个小Q天气使用的颜色会偏冷色调。除沙尘暴天气以外，基本上都在蓝灰色调上，原因在于取景主要以天空为主，以自然景色为主。虽然都是在蓝色调上徘徊，但也少范围地在冷色调的基础上增加了一些暖色作为点缀，如在蓝色的阴天里加入暖黄的光，以减弱冷色系给人带来的冰冷感。

【图5】雾天是我们第一个尝试的天气，也是探索性最强的一个。取景造型上，可以看到从早期设计的乡村街道到高楼大厦，从铺满霞光的马路到弥漫着中国风的河道。设计过程中，我们都做了多番的对比和校正。最后使用了灯塔这个比较有代表性的元素。一来方便于聚焦视觉焦点。另外在冷色系里面添加黄色的暖光旨在增加温暖感。如大雾天的季节，总是接二连三的湿气弥漫，温度虽可能不低，但给人的感觉是阴冷的。在这个时候的场景取色上增加暖光，感觉将是较舒适的。

【图6】上半图为晴天的向光的天气展示，下半图为背光的天气。虽然有太阳的图片更加直观地感受到天晴的氛围。但是由于一般情况，人眼被太阳直射都会感觉到不适。而背向阳光观察事物的时候却是清晰、舒适，因此下半图的设计我们强调的是给人愉悦的感觉，在一轮反复验证之后，下图的方案被采用，并且也很快在用户的反馈中得到了肯定的声音。

【图7】在运动之中取巧，虽然动画引擎非常强大，提供了包括skybox等多种的运动模式，但是我们运用得最多的仍是平移。许多设计都是基于平移的基础上进行的。原因在于一个图片在X和Y轴上的平移，占用的机器性能是最少的。

SKYBOX天穹

这个设计的灵感来源于广角的镜头拍摄效果以及当前非常流行的FPS(First Person Shooting）第一人称视角射击游戏，其技术也借鉴了FPS的核心实现，从而创造出更真实流动的天空效果，配合不同的气象现象以及时间变化，我们希望这是整个设计中最流光溢彩的亮点。

　　【图8】SKYBOX天穹的设计有很强的应用场景，甚至我们可以将SOSO全景的资源从网络上调用进来呈现该城市的地标建筑，这个疯狂的想法还在实现中；上图取自正在设计中的第二版高清皮肤。

OpenGL+XPlayer引擎与设计的融合

“最逼真的效果应是拍摄一段视频并将之剪辑播放“，设计之初大家都如是认为，但与逼真的效果同样需要考量的是用户的机器硬件配置：任何一台PC设备，在播放视频时的消耗都是非常大的，我们并不希望摧毁用户的主机；同时，与iPhone等智能终端不同，Window基于其多进程的理念，因此其上的产品体验大都为非独占式的(大型游戏除外)，也就是您几乎不可能只在WINDOWS下只运行天气这一个程序；除此以外，如果大量引入视频，软件的尺寸则会变得异常庞大，而产品在1M左右的预想也变为不可能，最终我们坚决的放弃了这个念头。

OpenGL作为当今主流的图形API之一，成为我们所采用的3D部分引擎展现接口，不仅仅因为其高性能的视觉图形渲染特性，还有其非常好的跨平台特点；而自行研发XPlayer的框架则是为了适应Windows系统上进行更加平滑的视觉渲染所构建的动画引擎，通过这套引擎规则，我们可以让设计师更加自由的创建并模拟天气世界的各种物体，比如不断升腾的雾气。

【图9】雾是在中国大多数城市比较罕见的天气现象，而对于雾的效果模拟也是设计团队最早进行的尝试，我们通过对大量真实雾天的图片与视频的观察最终完成了雾的模拟；

雨雪天气在众多自然界气候现象里非常普遍，但因其随机性较难模拟，通过对随机粒子的贴图与视角转换，我们分别实现了从天窗降落的雨滴以及平铺的雪花效果的模拟，当然，我们也在脚本过程中加入了风的随机因素来更好的展现该粒子自然的效果；

结语
最后，贴上本文的作者们，他们也是天气APP的设计与开发与用户研究人员，感谢你们在这6周里的创造！
接下来我们希望会有更多的机会为未来的创新做筹划，请大家给与我们您的宝贵意见，我们将尽可能的纳入未来的产品体验中去。

　　内含小Q天气的小Q书桌2.4Beta2版下载地址：http://dl_dir2.qq.com/invc/xfspeed/qdesk/versetup/QDeskSetup_24_1246.exe

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=5380)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=5380

新版百度地图界面背后的故事

tenmonkey — 2012-02-08 15:25:23

在2009年8月，Web版百度地图进行过一次大的改版，当时凭借着百度得天独厚的搜索优势，和地图简单易用的亲和力，在一个合适的时机，Web版地图市场占有率升至60%~70%，一直处于国内市场份额第一的位置。除了一些当时的环境因素外，产品本身的设计细节也决定了百度地图最后的成功与否。

交互与视觉设计探索

在设计的过程中尝试了多套方案，每个小的细节的改变都有可能产生更大的进步。以公交方案结果页为例，主要目的就是要让用户第一时间，快速的获取最主要的路线信息，但也有很多辅助信息（如时间、距离、价格等）来更好的给用户以参考，为了便于人们在第一时间了解到不同方案路线，整体采用区块化的视觉展现形式，并将关键性的站点名称和车次名称突出显示，辅助性的参考信息居右弱化显示。通过颜色和图形形成一定的视觉层次，引导用户方便快速的提取各类信息。

问题

在使用百度地图的过程中，也会存在着一定的问题，通过多次的用户调研分析，调查问卷、眼动实验和沟通访谈等等，了解用户在使用过程中存在的真实问题。

新版界面改版的目标和结果

2010年末，决定重新设计百度地图界面。一是要解决现有存在的问题，二是要增强百度地图的功能和美化界面，进一步的提升用户体验，并为今后的发展打下一个良好的基础。

在交互设计上：通过简单易用的操作界面，让人们更加便捷的获取路线信息和地点信息，同时提供强大丰富的功能来满足人们日常生活中衣食住行的各种需求。

在视觉设计上：通过视觉语言，给人们营造出一种美观和简单可依赖的视觉感受，让人们在使用的过程中感到舒适和放松，努力使用户觉得是一种享受。

2011年7月，百度地图做了一次较大的变化，侧边栏从之前的右边移到了左边，同时将搜索标签移到了下方。经过2周的小流量测试，通过后台的数据分析、用户调研分析，很可惜最终得到的结果不完全是正面的。在收益并不明显，流量略有下降的情况下，还是决定保留已有的交互框架结构。

新的交互设计、视觉风格探索

在经过之前的一次改版尝试后，决定在现有大的结构基础上，进行新的交互和视觉设计。

灵感

在夏天的时候，有机会去参观了原研哉的设计展，对下面这幅无印良品宽广的广告留下了很深的印象，感觉非常的大气、清新和简单，后来在想是否能够把这样的感觉也融入到百度地图的界面当中。

新的交互设计

整合梳理工具栏，同时便于扩展
增加地图百宝箱（地图应用）
首页增加分类信息
收藏夹位置变化

新的视觉设计

文化习惯——秉承百度简单可依赖的文化理念，传达给人简单的感觉。
自身特点——作为工具性产品，给人以舒适放松的感觉。同时百度作为国内知名企业，要给人以专业、权威的感觉。
产品定位——传达给用户简洁、清新、现代、精致的感觉。

规范的制定

这次在设计的过程中，制定出了一套有效完善的设计规范，与开发人员密切配合，形成控件库，并最终做成网页版。不但缩短了开发时间，便于今后的查找使用，还使地图更加的规范和体系化。

结语

因为篇幅原因，只是大致的描述一下整个的过程，其中还有很多的故事和细节。这次改版的过程也有些曲折，但恰恰是这些大胆的试错，才能证明所做的决策是否正确，而不是对一些问题总是心存纠结，仅仅停留在主观判断的阶段，just do it。此外，这次整个的设计流程非常值得学习。

百度地图2009~2012

相关话题：UED团队设计分享源地址：http://xdc.baidu.com/?p=1144

阿里巴巴中国站手机客户端项目总结

liuchenhuan — 2012-01-18 14:59:41

从无到有的阿里巴巴无线端设计，经历了由前期的产品定位、产品形态探索、无线需求场景脑暴、产品拆解、分合的产品思路讨论、版本规划到手机行为、手机平台特性分析乃至信息架构的确定、细节的推敲…

无线端敏捷开发节奏快，如何低成本、有条不紊的迭代更新，版本规划以及产品的拓展性考虑尤为关键。九宫格聚合的工具平台形态和运营形态在我们客户端的定位中必然共存，但一期内容不足功能较少，过渡期既要保证目前版本的充实和架构合理，又要考虑用户习惯的延续和activity等的代码模块可复用。

在已有13年历史的网站（培养了稳定的用户群以及培养了一定的用户习惯）基础上，实际上我们并非从零开始。B2B的业务属性决定了无线场景的设计与网站的关联性，而用户使用时必然伴随部分网站习惯的迁移，因此在基于无线场景和手机端特性设计的同时，我们也同时考虑用户在网站端的认知映射。

作为项目owner，跟进后续流程的过程中有几点经验值得highlight：

1. 关于视觉适配难

相比于iOS平台, android硬件厂商众多，屏幕分辨率五花八门，且dpi不同，我们这样做：
(1) 进行目标用户群使用手机比例调研(可通过问卷投放等方式)，选取一个主流分辨率和目标机(本项目中目标机为htc G7，分辨率480*800) ；
(2) 视觉设计过程中，实时在目标机并定期在其他分辨率手机上查看实际效果，并调整方案；
(3) 规范点九图(九宫格)的切片尤为重要。.9.png不但能最大程度低成本、高还原度的适配到android的各个屏幕，更是设计师和开发同学之间的沟通工具，避免在视觉－前端这一环节的设计走样。

2. 关于视觉切片资源文件大

由于功能模块相对独立的迭代开发，造成不同开发同学对于切片管理不统一，以至app文件大且运行过程中占用内存大，操作流畅度不佳的情况。在UI Check过程中，优化切片资源包，替换掉不规则渐变和纹理，尽可能复用样式，统一.9.png格式。

3. 关于UI Check

UI Check的目标不但是保证UI在开发环节的设计还原度，更是对设计方案的重要review。尤其手机操作流程性强，过程更为动态，转场动画、hover效果、gesture这些内容都需要高保真demo在真实的测试下确认调整和再优化。

最后，产品更新和体验优化是一个永无止境的过程。之后我们除了拓展更多无线平台(windows phone/iPad/…)以及新产品新功能追加，也会根据埋点数据和一手用研不断在迭代过程中同步优化体验设计。敬请期待！

下面为项目总结ppt中的部分内容，方便大家有个更加直观的了解：

感谢各位看官的时间，欢迎亲们更多的专业交流~~

如何做首页改版（阿里巴巴中国站首页改版经验谈）

robert.think — 2012-01-18 14:58:38

同任何网站一样，阿里巴巴首页的每次改版也都是一次纠结和挣扎的洗礼。设计的过程总是痛苦的，因为判断和选择总是艰难的，这里我们并不想叙述改版的整个流程——尽管不同团队的架构和设计团队的职责有所差异，但除了决策过程不同外，大公司抑或小公司在流程上并无本质区别。我们在此是想通过总结我们在改版过程中经验和教训，以及对于首页甚或产品redesign的思考。

以下是我们觉得必要的思考流程以及一些方法和关键点：

一、关于定位的思考

在首页改版之前，结合网站整体的策略变化我们首先思考以下三个问题：

1、改版的目的/目标是什么？

是配合网站整体战略的调整，还是用户体验的改善和提升，是自上而下的网站转型升级，还是自下而上的流量再分配？…
这些因素也决定了首页的设计思路是宏观还是微观，是信息层面的梳理还是视觉表达的优化。

2、首页的用户是谁？

用户是谁，用户特征是什么，用户的需求和价值在哪里？
考虑这个问题时，需要对于用户类型做相应的区分，不同的网站可能根据网站服务的特征来区分不同的用户群，比如：

时间：新用户与老用户
来源：自有用户、SEO用户、BD用户
关注行业：原材料用户、工业品用户、…
……

3、现状

目前的内容运营规则是怎样的
当前的界面是否存在可用性或易用性的问题
基本数据是怎样的：PV、UV、回访率、流量转化率，各产品的流量分布、各类型用户的访问基础数据是怎样的。这些数据本身是否能暴露当前的问题，或者能用以评估预期目标的效果

二、做好设计管理

1、找准关键角色

在这个过程中能否找准关键角色非常重要：谁是真正对首页负责的人，谁是对具体业务负责的人，相关的合作方的决策者是谁？只有明确关键角色，问题才能高效的决策和推进，而不是互相推诿和拖延，这将是考验改版项目团队工作技巧的重要一步。

2、提早沟通设计思路，而不是直接进入设计

不同工作风格会产生不同的工作流程，以首页改版为例，我曾经见过给出十多个首页设计稿给老大选择的壮观场面，这未必是不好的工作方法，但却显然是低效的。

建议在改版之前，能够和相关方（尤其是对于首页有决策权的leader）建立起充分沟通，将改版的整体目标建立共识，而不要一开始就沟通具体的设计细节——这很容易就陷入对于细节的争议当中。

当然为了避免“空谈”，做好相应的准备还是必要的，有可能的话提供数据依据和现状分析，并给出鲜明的观点。当然您也可以通过低保真的页面结构图，以便各方对于首页有概念上的理解。

3、项目管理

a) 资源保障

首页改版对于投入精力的需求长期而稳定，能否争取到相关资源，并且在项目过程中获得高优先级的支持将非常重要。

b) 时间计划：定期与追踪

首页改版是一个耗费较多资源，牵涉业务众多的项目，强烈建议按照项目流程来执行，但与一般项目不同的是首页改版的进度往往并不完全受控，相关影响因素较多，并不完全能由技术评估方案的工作量，因此建议在项目前期编制较为粗线条的项目时间表，主要用以对执行过程进行分解，而在方案基本成型后再建立精确的上线时间计划。

三、把握设计细节

1、设计即运营: 设计的过程也是运营策划的过程，尤其是以运营为主的首页，设计师不仅要关注用户如何浏览和阅读，也需要考虑首页内容如何产生，因此首页的设计过程也是和相关业务方订立运营规则和运营方式的过程。
2、追求细节，但别害怕不完美: 就像产品设计中常说的，产品的成功往往是通过快速迭代而造就的，如果追求完美的产品，则时机早已错过。首页的设计和改进也会是一个不断经受用户检验和快速迭代的过程。因此在设计上线先后不断通过用户的反馈和行为数据验证和确认，而无需去追求完美的方案——因为完美是不会存在的。

四、善用数据与用户

1、数据是了解用户的重要途径

a) 在设计前要对要验证的目标设定可衡量的指标

首页改版效果的指标与首页的定位关系密切，如何设置用户体验指标，建议参考Google的用户体验衡量指标体系(HEART)。

b) 是否有足够的数据来支持分析结论

一旦明确首页改版效果的指标，就要通过各种方式来收集指标的相应的数据，网站的基础访问数据、tracelog、点击分布等。如有必要应当对当前首页的数据指标进行收集，以便用以对首页改版后的效果进行对照。

我们的经验：我们在首页改版时主要采用的是（结合采购商身份的）页面CTR和Bounce Rate，以此来评估新老版本与用户需求的匹配度和吸引力。当然在不同的目标驱动下可能会采用完全不同的数据指标，比如在分析局部板块时可能会关注诸如广告效果、专场转化率、登录行为数等。

2、用数据来做决策和验证

a) 关键指标的定义及描述应该达成一致

在我们改版的过程中遇到一系列数据上问题，包括监测数据的不稳定、数据前后矛盾等，而在总结原因时发现问题出于不同的部门对于数据的定义和观测都有所差异，并且在AB Test过程中由于选取的样本数量和类型上的差异，也会使得观测的结果不具可比性。这也促使我们在后续的测试过程中建立统一的数据收集通道，并且在后续的AB Test中和BI部门进行充分的沟通来确保测试样本的可比性。

b) 不要迷信数据，要寻找数据背后的意义

3、意见反馈，有时候并不重要

这取决于你是否有足够的判断力和敢于say no。请考虑接收到的问题——

表达的是感受，还是使用的实际问题
是否是目标用户的问题
是普遍性的问题，还是个体问题
……

在从而做出自己的判断，要记得一点——聆听少数人的声音，但为大多数人设计。

五、“习惯”与重建习惯

一般情况下，首页改版总是会原有用户的使用习惯，因此在首页的测试过程和上线都需要慎重考虑用户习惯的延续和给予一定的指导。请考虑——

在测试版本上给予用户返回默认首页的入口，允许用户退出测试
在新首页上线后，在一段时期内保留旧版首页的入口，让那些尚未适应新首页的用户能够有缓冲期来完成原来习以为常的任务
如果有必要，提供一个what’s new页面，帮助用户快速了解新首页

我们经验：在新版正式上线后，在首屏为用户提供了新首页指南，在页面底部提供了回顾旧首页的入口，给用户留有充足的时间进行过渡，通过监控旧版本的流量也可以判断用户对于新版本的接受度，从而逐渐降低新版本的帮助的权重，并且在此过程中基本上未产生用户的主动投诉。

以上是我们本次阿里巴巴中国站首页改版的经验总结，在这里分享给有相关困惑或遇到同样问题的同学们，欢迎大家在专业上更深入的探讨。

惊艳呈现-百度搜索手机客户端-设计项目分享

blueui — 2012-01-07 21:22:50

2011年10月8日，百度搜索手机客户端正式登陆Apple Store。

2011年12月12日，百度搜索手机客户端荣获APP Store 2011年度工具类最受欢迎第一名。

这个轻量化的搜索应用倾注了产品设计团队很多心血。全新的视觉和交互体验、更优的搜索体验、全新的Ding功能……它的发布是我们在搜索客户端领域迈出的一小步，MUX的设计师全程参加了这款应用设计与决策，这背后有好多同学在辛苦的努力着。今天让我们揭开它面纱，看看它的小故事。

要惊艳地呈现

一年多来，我们在手机端推出过掌上百度和百度快搜两款与搜索相关的应用，将搜索业务以客户端的形态延伸到手机端，在这期间，积累了大量搜索客户端化的设计研发经验。随着移动互联网这些年的发展，我们的团队日渐成熟，借助iPhone平台做百度搜索框的机会，决定把资源重新整合起来，全面定义手机搜索客户端，带给用户一个最好用、最爱用的搜索客户端产品。

首先，我们定义了新的百度搜索客户端的产品体验目标——最好用的搜索客户端工具。什么样的搜索客户端才好用呢？通过设计师与产品经理的大量交流，我们确定了产品的体验目标：

1. 可控感：操作简单、容易理解、意料之中、误操作少、无距离感……目标降低认知成本

2. 速度感：界面切换、响应、操作反馈、信息加载、误操作回馈、等待感……效率是工具类应用的核心基因

3. 好感化：形象、氛围、文案、私人化、疏密程度、动效……差异化粘性化的关键

其次，结合产品的各个模块贯彻体验目标，获得统一的体验设计方案。在这个过程中我们找到了多个突破维度，并将这些维度纳入到该搜索客户端的发展升级规划中。已经发布的产品设计中包括了：按键输入体验、语音搜索体验、常用信息搜索体验、结果浏览体验、情感化体验、界面品质感等等解决方案。

在产品设计过程中，逐步明细体验设计的目标，并将目标贯穿到产品的每个模块中，才能获得统一的体验设计方案。

更快的输入搜索体验

百度搜索交互体验设计的首要环节是输入。从输入的方式来说，目前有按键输入、语音输入、拍照输入。大多数用户还在使用按键输入，我们着重进行体验分析。

现状：在iPhone手机中，内置的输入法在输入中文多个字的关键词时效率不高，输入法联想词无法满足用户输入精准联想的需求。字母键盘中国人还是不大习惯。iOS5之前的自带输入法，联想词跟随光标。用户在点击联想词的时候容易触碰到附近的控件。

通过分析研究现状，我们在三个方面给出了解综合解决方案

更快的输入搜索体验百度搜索交互体验设计的首要环节是输入。从输入的方式来说，目前有按键输入、语音输入、拍照输入。大多数用户还在使用按键输入，我们着重进行体验分析。现状：在iPhone手机中，内置的输入法在输入中文多个字的关键词时效率不高，输入法联想词无法满足用户输入精准联想的需求。字母键盘中国人还是不大习惯。iOS5之前的自带输入法，联想词跟随光标。

用户在点击联想词的时候容易触碰到附近的控件。通过分析研究现状，我们在三个方面给出了解综合解决方案。

每个方面都需要开展具体而详细的设计工作，目前公布的版本中已经大大提升了输入搜索的效率。也请大家多多提供反馈。

1. 即时显示搜索建议

2. 增加搜索历史呈现，当然配套的搜索历史可以清空，因为很多用户搜索**

3. 搜索建议词可以上框，方便你搜索“跨年演唱会2012****”。搜索建议词比输入法联想还智能，知道你想搜什么，知道大多数人在搜什么。

4. 一步清除输入。

5. 加强语音输入识别能力。（后面会详细介绍）

6. 内置百度手机输入法。内置百度手机输入法可以说是人心所向，我们通过与输入法团队沟通，引入了百度手机输入法。请允许我再次细数内置百度手机输入法的优势：符合中国人的输入习惯，更权威的联想词，……

语音搜索-让技术更懂用户

手机硬件有这得天独厚的机会。比如麦克风、摄像头、陀螺仪、光线感应、距离感应、重力感应……使用这些硬件条件，加强搜索体验是我们尝试的方向之一。其中语音搜索是我们相对成熟的技术。

早在去年，我们发布的掌上百度就整合了语音搜索技术。而今百度的语音搜索技术识别准确达到了前所未有的高度，让整个搜索体验获得巨大的提升。设计团队的任务就是让这个先进的技术，通过交互和视觉的设计，变得更加容易理解和操作，让人文和技术完美结合：

（我们尝试了许多在语音层面的反馈设计方案）

1. 及时地给用户反馈——及时地给用户反馈，是产品体验设计最重要的设计法则之一。老版本的设计方案无法让用户感知机器在进行运行，例如：如果正在录音的界面，如果没有动画效果，用户会以为死机。我们引入了麦克风向外发出声波的简单动效，告诉用户机器正在运行。我们后续还会根据用户发音的大小和有无来进行更加真实的动画设计。

2. 给用户选择权——增加录入完毕和取消按钮。即便我们在云端技术层面上努力识别用户是否说话完毕，但是由于目前手机硬件还未能很好的去除环境音，所以依赖机器来判断用户是否录音完毕还是存在失误的情况。所以此时将选择权交给用户是一个最佳选择。此外在正在识别界面也考虑到网络环境的情况，给用户一个取消进程的设计。

随着技术的提高和硬件水平的提高，我们还将继续探索各种传感器与搜索体验的结合，调动手机的全身力量来加强我们的搜索体验！

向用户靠近，Ding在首页吧

百度数据开放平台具有专业而值得信赖的众多数据，其中有很多与网民的生活息息相关。比如搜索天气、搜索北京时间、搜索股票……。它们将结果更加快捷生动的展现在搜索结果页面，让网民获得信息的效率更高。这在网民心目中形成了巨大的影响力——百度的数据已经等同于权威发布。我们期待这种信任能够在移动端延续。

为了找到适应在移动端的阿拉丁形态。我们对常用阿拉丁进行了筛选，将最常用的阿拉丁信息进行拆解研究。

我们发现这类信息最多不会超过四个主要维度来完成信息传达，事实上最核心的信息维度不超过3层。所以我们大胆的将信息进行了提炼，在呈现上通过字号大小、位置关系来协调一级信息、信息标签、详细信息、辅助信息的传达效果。

对一个信息的阐述除了文字还有图片，我们也为此进行了设计上的规划。还有更多Ding的产品形态将出现在后续的产品中。

Ding展开后，详细的信息立刻呈现。在UI方面我们尝试更加拟物化的设计，以便能够让用户在使用中体验到极致的品质感。

Ding将会出现在许多地方，将用户常搜的信息动态的展现在主屏或者应用首页上。经过极简的设计后，信息不仅具备了快速传达的能力，同时还具备了适应各种环境的能力。敬请关注我们后续推出的版本吧~精彩的Ding~精彩的百度搜索客户端！

你的搜索、我的搜索

搜索引擎是二十世纪最伟大的发明之一。2011年9月2日，百度CEO李彦宏正式向外界发布了全新百度首页，提出“百度新首页一人一世界”口号。智能化、私人化、个性化的百度新首页，让人们开始重新认识百度搜索。百度搜索手机客户端，作为百度搜索业务在手机上的延伸，我们希望它借助手机，成为人们生活中必不可少的一员，让每位用户享受属于自己的搜索引擎。

针对此方向设计研发团队做了丰富的探讨，找到了若干可行的方向：

1. 搜索历史的私人化

2. 搜索热榜与热词推荐

3. 客户端换肤

4. 自定义Ding服务

5. ……

其中整个客户端的壁纸换肤是产品发版中用户反响最多的。

为搜索客户端定制了一套壁纸解决方案，用以配合客户端的整体品牌气氛，符合私人化、个性化的产品方向。虽然这是一个很简单的决策，但是在设计的时候并没有那么容易。通过对系统级别的近品进行调研，我们初步掌握了主流产品在默认壁纸层面的策略——大草原法则会被在这里用到极致，崇尚自然与生命，热爱宇宙与探索……。

我们默认提供的9张壁纸，主基调是自然、生活、星辰。当你看到这些景象的时候，心情是否变得舒畅呢？

这些壁纸的原生摄影作品大都来自设计师的旅游和生活中的作品，青岛海边沙滩脚印；九寨沟原始森林松针；成都锦里酒吧区；郁金香……

壁纸效应在产品中的成功也为我们带来了更多的设计动力。在新版本中壁纸策略将有所更新，随着圣诞节和元旦到来，我们提供了精美的节日壁纸，一定要看看哦~~

惊艳呈现的百度搜索客户端，刚刚迈出了一小步，我们的设计和研发团队还将带给各位更优质的移动搜索服务，还将带给用户更多惊喜，让搜索真正成为您快速平等获取信息的好帮手。你对此有什么好的建议和想法呢？欢迎留言交流，让我们做得更好！

相关话题：UED团队设计分享源地址：http://mux.baidu.com/?p=2682

腾讯视频品牌形象设计

CDCer — 2012-01-04 13:02:22

腾讯视频是一个综合视频门户，旨在打造中国最大的云视频服务平台，此前QQLive投射到的路径不多，在用户规模上与竞争对手相比不具备优势，难以打造在业界视频类产品影响力，2011年4月，腾讯视频使用域名为原腾讯播客V.QQ.COM将QQ LIVE网站与客户端归入其中同步运作，统一腾讯视频平台域名及对外接口，形成独立品牌，内容以电影、电视剧、综艺、音乐、新闻、时尚、科技多纬度运营,支持内容丰富的在线点播及电视台直播，降低了用户门槛并希望提高用户的覆盖率，通过客户端，网站，移动终端多种产品形态，满足不同用户的需求，以实现更好的广告商业模式。
在以上资源整合后，我们了解腾讯视频迫切的需要一个全新的品牌形象，来提升品牌影响力，扩大用户认知度及对品牌的忠诚度。

前期调研我们归纳出目前市面上视频产品所强调的定位，及人们对此类产品提出的感受在功能上主要强调的特点：高清、正版、品质、直播。

我们更希望产品定位强调的不只是普通功能，更多的去体现人文关怀和情感的传达，真正的品牌是源自消费者的生活形态，甚至是高于他们生活的，是一种对于生活的期待，如果品牌领先其对手的原因是产品属性，那么这个品牌有可能在将来被其他产品所代替，腾讯视频期望给予用户的是自由生活的一种精神感受，而不仅仅是一种工具和产品。

接下来通过与感性的关键词出发从生活场景中去寻找相关的图片，代表丰富，轻松，娱乐。漂浮的五彩气球，自由的鱼群，天空草地，盛放的花朵，从这些自然的生命中找到了相应的契合点，通过收集的图片，品牌组同学进行了一次头脑风暴，大家随心所欲的画下心中想象的元素和图形，一次轻松有趣的散发过程结束后再进行统一的整理和分析。

在大家的手稿中，我们排除了过于写实的胶片，摄影机等元素，从品牌的角度上来说，这一类图形过于写实了，使产品含义受到局限，没有一种更深的内涵,很容易停留在只是工具的概念上,不够神秘太过直白，与我们前期的定位不相符合。我们发现鱼的造型和三角形的播放键造型非常吻合，也代表了自由快乐，娱悦的精神感受，希望通过这个抽象的造型进一步延伸。

在方向上进行定位后，进入上机实现阶段，参考之前搜集的素材和确定的手稿，去表现轻松自由，轻质感，动态、丰富多彩又属于视频类产品的图形。

在后期的推广中，更希望能延续这种轻松活跃丰富的印象，辅助图形组合多变，能更适用于视频制作推广时使用，有效地辅助视觉识别系统的应用。

新品牌形象发布后，通过悉心运营推广，腾讯视频用户倍增，未来将希望通过更多的推广来提升品牌的影响力。
品牌形象是用户认知产品的重要途径，是一种被人管理和传承的气质，我们所需做的设计不仅是一个LOGO而是去注意设计用户能接触的每一样细节，意识周边物料的重要性和统一的感官，品牌建设并非一朝一夕，还有许多的不完善需要努力，希望与大家有更多的摸索和探讨，给予我们更多的建议。

腾讯视频官方网站http://v.qq.com/
腾讯视频IPAD　http://itunes.apple.com/cn/app/id407925512?mt=8

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=5012

QQ空间V6设计的继承与颠覆

celiazheng — 2011-12-27 18:29:10

空间诞生6年了，终于再一次升级，迎来了革新的V6.0版，它是近年来最重要的版本升级，肩负着空间的战略转型，促进平台开放，提升营收与活跃用户的重任。所以这一版本的升级，我们改变从前自细节入手，直接优化流程与表现的设计思路。而是从全局的角度切入，重新思考平台的定位策略，进一步整合信息架构，颠覆表现层的交互体验，提升用户对QQ空间的品牌认知与情感认同。改变过去每一次升级后，新增加的特性与功能为空间造成的臃肿复杂的现状
所以引入了Jesse Garrett的互联网产品设计层次模型，从头夯实基础，从而打造一个体验全面升级的空间新版。

一起来看看设计推导的过程吧：
根据Jesse Garrett的产品设计层次模型，重新梳理QQ空间的产品定位，探索在新的视觉形式框架下形成清晰的可供性感知。

重点在战略层

通过平衡产品的成熟度与，项目时间与内部数据指标，我们选择了“数据挖掘，用户反馈，用户访谈，问卷调查，市场调研，竞品分析与战略决策”这几种研究方式来快速定位产品目标与用户需求，确定升级策略。

定位产品目标

方法：数据挖掘，竞品分析，战略决策

数据整理：收入组成（上）与用户活跃度（中、下）对比。

分析：增值收入上升趋缓，广告收入潜力大，应用类型匮乏，用户互动少，活跃度低，内容质量差

产品目标与解决方案：

拓展新收入渠道－拓宽页面至960px，增加二三级页面的广告投放，提高曝光量;完善in-app purchase渠道

增加平台可玩性，提高用户活跃度－开放平台，上线应用中心，视频中心与读书中心

增加用户的互动－整合消息推送体系，完善隐私权限体系，重塑关系链

定位用户需求

方法：用户行为挖掘，用户反馈，用户访谈，问卷调查

数据整理：用户的反馈与建议集中在以下几点。

分析：空间界面乱，加载速度慢，装扮效果差，内容质量低，功能选项杂

用户需求与解决方案：

提升装扮丰度与质量－优化装扮流程与框架，升级装扮样式

提升响应速度与浏览体验－服务器性能优化，底层框架重构，浏览器表现差异化

提升内容质量－进一步扩展认证空间，feed接入标准化

功能去耦，表现做减法－拆分统一设置入口，强化隐私权限，全局设置与个人资料，装扮模板46套减为优化后的20套，5类版式减为优化后的3种。

风险控制

风险：6年的产品，老用户使用习惯；忠实用户对小窝版的偏爱，死不透的ie6

控制思路：

老用户使用习惯－完善升级策略，提供老版的过渡期，提前内测

忠实用户小窝版－提升版本兼容性，提供小窝版的替代方案及更丰富的场景版

ie6的拖累－浏览器效果差异化，引导升级浏览器

重构结构层

对混乱的信息架构重新进行了整理与归纳，并通过与框架层与表现层的结合，将结构的改进体现在导航与应用界面设计中，提供用户一个可学习的体系。

表现层界面分层

空间平台的结构经过几次扩容，产品体系混乱，用户对个人中心，主页及应用关系的认知存在障碍，使用QQ空间类似盲人摸象，用户只能复述进入农牧场或访问主页的操作路径。顶部的工具条没有起到很好的导航作用是其中一个原因，设计方案是将工具条替换为全局情境导航，使用户不论身处哪个页面，都能快速的跳转平台的主干节点，将应用中心与空间装扮两个未来的营收增值点通过导航进一步提升强化。

界面元素分层特性的研究，便于对不同层次的行为表达进行管理与创新。

风格重定位

最终展现

个人中心－通过不断迭代优化与信息架构的梳理，大大降低了做为首页的信息负载。

场景主页－重构底层框架，使新主页的设计自由度更大，效果上流。

应用中心－丰富内容，通过信息设计对内容维度进行了缩减合并，从而降低了界面复杂度的展现。

总结

通过至顶而下的设计思路，从产品定位开始一直到界面的视觉实现，能够从根源上梳理清楚积弊多年的成熟产品，从新的产品战略提供看一个容宽性更大的产品架构。但这种设计方法也有明显的不足，如在细节的进化不够充分，对市场需求与用户的反馈不够及时，市场定位存在偏离风险等。需要多种设计方法结合起来迭代校正设计过程，同时做好风险预案，以保证设计不会偏离市场目标，最终获得用户的认可！

(作者：布林)

Q+ Web 改版设计小结

CDCer — 2011-12-07 23:39:04

WebQQ1.0最初以IM工具进入用户的视野，2.0标志着WebQQ华丽转身为平台型产品，3.0是我们在深化应用平台概念的定型，纵观webQQ的演化，其独特的产品形态一直被业内各竞争对手所仿效。 Q+Web的到来，我们将以更成熟的姿态拥抱变化，更强调平台体验的优化。我们总结了中间的各种反复和挑战，并希望以此积蓄经验和力量。

在问题诊断阶段，与产品方反复讨论，形成基础性结论，目标推动goal-oriented的方式能保证双方后续的讨论在彼此认同的预期范围内。
1.根据现状与目标的偏差，清晰的描述问题，与合作方形成基础共识。
2.与合作方确定了目标和调整范围，确立共同的立场。

我们确定了开放平台的抽象化框架，明确用户在使用平台型产品的重要接触体验点，以此切入，详细分析和明确每一个基本体验点存在的问题。

定位问题后，我们开始剖析问题探求解决方案。此次改版我们面临最大的挑战是桌面和任务栏的改造，也是整个项目过程中反复pk耗时最长的一个环节。

如何帮助用户有效的管理他们自己添加的App应用，我们解决的思路从一开始就抛开目前已有的交互元素，反复思考一个根本问题，什么是帮助用户组织和管理数据最有效的方式？从 Windows 和 Mac OS 我们学到两种不同的实践方式，Windows强调资源管理器和多视图的方式，Mac OS 更强调数据信息展示的有序性和可控性，我们对比了Web OS和PC OS，我们吸取两者的优点，再根据Web OS产品功能的特点，提出了优化桌面管理，全局视图为辅的优化策略。

(本文出自腾讯CDC博客: http://cdc.tencent.com/?p=4740)

相关话题：UED团队设计分享源地址：http://cdc.tencent.com/?p=4740

IPAD女人杂志项目总结

zhangle2010 — 2011-11-27 21:53:26

前言

IPAD女人杂志，得到这个项目需求的时候，说实话整个项目团队对这个产品都还不是特别的了解。那时IPAD才刚刚上市，而且大家对于专门针对于ipad这样尺寸的无线终端所开发的新一批APP应用也还都是刚刚开始接触。提到“电子杂志”首先想到的更多是一些以FLASH动画作为主要媒介的视觉杂志。所以对于这样一个技术上要抛开FLASH，设计上要从纸媒到新的传播媒介的转换，我们都是“摸着石头过河”。
项目关键词：时间紧迫从新开始

时间紧迫：当时几大门户都还在摸索阶段，需求方希望走在其他门户前列，最先抢在这个市场。

从新开始：技术和视觉设计这边都需要创新，没有先例可以参照。

接下来长话短说，从视觉设计方面对这个项目做一个简短的总结。

整体构架——经过项目组成员的集体讨论结果，确定了以下的杂志构架

下面从几个方面着重分析一下:

色彩，修图，版式，字体，流程

———————————————————————————————————————————————————————————————–

色彩

杂志整体色彩以女人频道的品牌紫色为主线。

总结了下色彩库如下：

色彩设定主要是在频道需求的基础上，在紫色同色系上的一些变化，并针对与传播媒介的特点。由于IPAD的本身分辨率很高颜色锐度很强。并且屏幕显示的亮度很大，所以在有些设计上可以好好利用这一优势。比如下面的将要提到的再是进场和末页。

另外还有特别要注意的是，IPAD显示颜色与你自己的电脑颜色显示是有差距的，一般电脑的颜色显示会“暗”一些。所以在具体执行设计时要参照而来。

进场和封底—–

创意点：T台，幕布色彩：品牌紫色利用传播媒介的特殊属性进行执行，特意找到了有钻石闪烁效果的T台素材，并且用比较深邃的主题颜色，利用显示的优势，使整体画面更有层次感

——————————————————————————————————————————————————————————————————————————–

修图

封面 —–

下面是头7期的封面

以上是最近7期的杂志封面，很容易看出，前七期在色彩和版式上都保持着统一的风格。没有做太多的新的尝试，这也是考虑到杂志创刊初期，要树立统一的品牌传播形象，更容易在目标受众群中，建立品牌符号。

————————————————————————————————————————————————————————————————————-

下面着重讲一下封面设计和执行:

先是最重搞和原图的对比

除了版式上在原有基础上根据每期的人物图片进行有规律的调整外，作为视觉的中心点——人物来说，我们邀着重的加以雕琢，因为一般情况下我们从编辑那里所得到的图片都很不尽如人意。主要问题有：精度低，不是棚拍，光影没有层次，妆面和服装不够精致。所以这些都需要我们这边来进一步优化。

下面主要讲讲杂志制作中的修图环节。这里的修图不仅仅是色阶和对比度，色相的调整，更多的可能更像是变魔术，把本身没有的变出来。

封面修图：上面已经讲过，不再过多讲

时尚图集的修图：这部分可以说是整个杂志工作量最大的地方，先举例说明：

–

这样的工作要再64张图片上一一调试，然后将64张图整理成大中小3中尺寸。

另外，在花窝部分的修图出了以下常规的化妆步骤图片的尺寸的色调色阶的修正外，里面着重要说的是化妆品图片的修图

常规修图 —–

编辑提供的化妆品素材一般都要抠图，另外在整个页面上体现的时候要根据设计在加以修饰，要如同修饰大视觉里的元素一样来修饰这些化妆品素材，使其融入环境，不要像是“纸片图”。题外话：其实一般像这种化妆品专题在大型的媒体（例：ELLE.COSMO.MARICLARE)一般他们都是有专门的摄影师进行场景拍摄的，咱们这边是暂时没有条件提供这样的图片的。

—————————————————————————————————————————————————————————————————————————-

字体

IPAD杂志的字体，在项目开始初期我们也做了相关的竞品调查，大多数互动终端产品用的是苹果黑体，但是当时没有太多的纸媒类电子杂志可以作为参考，所以只有经过亲身的验证，所以在杂志的第一期上线之前，我们都属于实验阶段。

最终确定了主题字体（中英），正文字体（中英）

版式

说到版式，应该是对杂志设计来说最为重要的一点了，但是在版式上，IPAD上的电子杂志还是会和纸媒的杂志有所区别的。相比之下，IPAD电子杂志有自己的优势，也有自己的局限性。

弊端：由于IPAD本身的尺寸原因，多数需要竖屏观看而且是单页翻转，所以一些像这样在纸媒上应用的通篇两P排版是不能运用在IPAD上的（本产品技术暂时没有开发横版阅读）

优势：这种特殊的媒介平台，可以提供纸媒所不能有互动功能。

所以介于上面的分析，我们把正文的文字版式做了一下两种可能的排列：

由于IPAD尺寸的缘故，考虑到用户体验，三栏的文字排版方式更容易会带来视觉疲劳。所以选用了两栏式排版。

在主要展示图片的版面，版式张主要遵循黄金分割的原则，分类为一下排版

同样以黄金分割为基础的小封面版式

另外针对于花窝这一部分的特殊性，在版式上也做了特殊的处理。根据每期的内容做了比较多变化。

图集部分的一些散点排版

接着是一些和页面排版一致的活动页面：

———————————————————————————————————————————————————————————————————————————–

流程

提需求—-见面会议—–排期——给内容——设计—–叫给技术和前段—–测试—-上线

上面这个排列应该是整个项目基本的，正确的，有序的一个流程。但是在这里要重点说的是，在真正的项目实施过程中，有几个环节是一直都有问题的，最大的问题应该是在排期和内容上，经常是在没有任何内容的情况下就要我们设计这边给出一个设计排期，所以这个基本是不可能完成的任务，所以最终还都是边给内容边设计制作。所以时间上设计这边没有任何主动性，完全都是被动的要跟这需求方得内容走。边制作边看时间。所以这样一来，咱们的设计时间一直都是相当饱和的。这样一个工作量，一般都是都要在15天之内全部完成。不过现在这个问题应该已经慢慢协调了。

自己的一点建议

最后说说我自己的感受，做了这么久了也，开始对这个项目是充满好奇和憧憬的。执行起来后觉得这个项目是充满压力的一个“体力活”。现在做了7期了，提出几点对这个项目的建议：

图片：希望需求方能投入更多的精力来找到一个咱们自己的摄影师。拥有咱们自己的网易出品大片。而不是再去提心吊胆的GOOGLE上下图。

互动：向往项目组一起来多多从内容上考虑互动内容的添加，而不仅仅是设计师这边自己提出建议

文字校对：希望能有专门的同事来做文字校对这一环节，这样能避免很多反复的工作。

差不多了，基本就这些，简短总结，自己当然还有很多不足，希望接下来接手的同事能把这个项目做的更好！

相关话题：UED团队设计分享源地址：http://uedc.163.com/8201.html