作为一名新时代女性，自认为永无止尽追求外表女人，内心爷们的独立境界是一件很酷的事情。为了达到这个目的，淘宝没少逛书也是没少念啊。虽然离标杆还存在遥远的一段距离，可在这个过程中，从默默无闻的小买家摇身一变为双金砖且略有经验的淘宝买家，来谈谈消费分享社区的那些事儿应该略懂个一二滴。

　　请问如今网上购物，有多少童鞋还那么傻那么天真到淘宝上直接搜索，然后点击销量排行再逐个查看对比最后下订单的？如果电脑前可爱的你还遵循着这套老方法，那就凹凸了哈。互联网信息万变，最近行业内最暗潮涌起的领域莫过于“推荐购物、购物搜索、购物社区”等导购方向的产品。当然这消息我也是看白鸦兄的博客里（http://uicom.net/blog/）说的，白鸦兄对电子商务导购领域的真知灼见还是挺深刻的，推荐拜读。

　　今天笔者充当一名典型的爱美女性用户，还有之前对消费分享社区产品的体验与研究，和大家浅谈一下这块新兴领域的事儿。也给男同胞们普及一下这方面的讯息，因为最为热门的几个消费分享社区产品是拒绝男性用户的喔！

什么是消费分享社区？

　　美丽说、蘑菇街、爱物网、美丽街，甚至是人人网刚新推出的实名制时尚分享SNS“逛街”都属于是消费分享社区，但关于“消费分享社区”的名词定义在维基和百度都没有资料（麻烦更新一下）。对这类产品的归类还存在其他说法，如垂直类社交网站、垂直电子商务新模式、社会化（社区）电子商务等等，较为接近的说法则是社会化电子商务。

社会化电子商务

　　社会化电子商务，social commerce，是电子商务的一种新的衍生模式。它借助社交媒介、网络媒介的传播途径，通过社交互动、用户自生内容等手段来辅助商品的购买和销售行为。在Web2.0时代，越来越多的内容和行为是由终端用户来产生和主导的。社会化电子商务市场规模到2015年将达到300亿美元，是仅指通过社会化媒体的销售收入。整个市场规模应该更为巨大。 

　　上述几个产品在初期被定义为是基于社区模式发展的，但现今已逐渐媒体化，或者说本质更像是媒体而不是社区。因为用户与用户之间基本不产生互动，他们只是因为相同的喜好和品味而互相关注。

产品定位与用户群体

富有代表性的一些国内外消费分享社区网站。

美丽说
http://www.meilishuo.com/

蘑菇街
http://www.mogujie.com/

爱物网
http://www.hers.com.cn/

Thisnext
http://www.thisnext.com/

Kaboodle
http://www.kaboodle.com/

 　　提到产品定位与用户群体，极具代表性的则是消费分享社区领头羊美丽说和蘑菇街，很多人对两者进行了各方面的比较与分析。有兴趣的童鞋可以阅读一下这篇文章，swot分析得挺到位的。http://liao.it/archives/172.html 

　　笔者就不就这个话题再长篇大论了，总结了一些有参考价值的资料和图表和大家分享一下，以美丽说，蘑菇街为例。

让1%用户制造内容

　　“让1%的用户来制作网站上绝大部分内容，而其他99%的用户，就是让她们来逛，为她们提供各种各样的推荐。”这是美丽街提出的一个观念并只专注的一个点。对于消费分享社区来说，内容制作是不容忽视，特别是一些网络红人所带来的连锁口碑反应。美丽街CEO宁晓彤表示，这1%用户的来源主要分为三个阶段：

　　换汤不换药，美丽说的杂志和蘑菇街的专辑也同样是用户制作内容的主要途径之一。

“走质”还是“走量”

　　又想做得精致有力，又想做大做强，这一直是很多产品面临的必选题。在一个点上做得过于专注又怕赶不上用户需求的变更，想扩大市场份额，团队的规模又不能兼顾产品的质量，这其中的取舍还是包含这很多故事的。

　　就像美丽说和蘑菇街的内容策划上，导购的性质会将80%的流量引到淘宝上，那商家们为了增加曝光率便会以作为用户的身份去推自己的商品。庆幸的是，商家“捣乱”的行为在现在还属于能控制的范围内，比想象中的要和谐一些。但内容的质量问题多多少少会受到影响，这往后的筛选规则会作怎样的调整，让我们拭目以待吧。

Pinterest画报流模式

　　Pinterest最近是打得火红火热，它是一个自称“个人版猎酷工具”的视觉分享社区，在这里内容以图片瀑布流的形式出现，用户可以关注人，也可以分享、收藏自己感兴趣的内容。

　　2010年Pinterest已经开始受到国内创业者的追捧，美丽说、蘑菇街等网站的上线其实都是在Pinterest微创新下的改良版，所不同的是他们更聚焦在女性产品上，而且与电子商务的合作更加紧密，也更加商业化。而新近上线的知美网与花瓣刚则更像是Pinterest的中文版，注重感兴趣内容的各种采集分享。

　　Pinterest画报流模式以图片为中心建立人和信息的关系，而图片正是兴趣的载体。

　　Pin模式在美丽说、蘑菇街等网站上的运用主要是两类：

 　　这种画报流布局，更直观的用户体验界面，独具风格的内容展示，再加上从色彩和构图角度吸引女生，容易引起女性用户的共鸣。

　　同时围绕兴趣这类模式采用了瀑布流的图片展示方式，形象直观，恰恰符合快捷购物需求，其实这也为图片背后的商业意图打下了基础。此类网站聚集了大量来自用户的有价值信息，经过优化排序、分类处理，将内容变得更为有价值。

　　拓展阅读：http://www.dorightdream.com/news/latest/2011-12-03/43.html

客户端，决一高下吧

　　女性消费分享类社区在移动互联网方面有两大潮流，第一个是女性用户的手持设备大量转向Iphone和Android，在休闲的时间里开始被移动设备应用占据，第二个是手机购物开始兴起，支付宝这几年的移动交易额成倍增长。这两大原因让消费分类社区在移动设备上的竞争将很可能是在无线领域。

　　目前这类手机应用做得比较好的还是美丽说和蘑菇街，美丽说的IOS客户端推出得比较早，蘑菇街紧随其后。

　　相比之下，美丽说更倾向于社区，用户自己关注的用户中获取信息。蘑菇街的想法更倾向于媒体，输出内容。应用在版面上也基本采用pin模式，继续读图。在这两款应用的竞争中，产品体验与主推的相机功能将会成为竞争热点。

总结

　　我们可以在众多女性消费分享社区观察出一点很有趣的现象，那就是它们都拒绝男性用户哟，不过现在已经慢慢向男性用户开放了。

　　现在在市场上核心用户为女性的产品还是挺多的，但仅仅只为女性服务的产品却少之又少，更不要提客户端的应用了。我们就回过头来谈谈一下题目里提及到“谁能抓住女用户”吧。

　　美丽说CEO徐易容认为，未来的五到十年，有一件事是可以预测的，就是女性会变得越来越美。而什么是时尚的，怎样变得更时尚，是急待解决的问题。根据统计，在使用护肤品上，中外女性用户有一点很大的区别是，对品牌的坚持度。徐易容认为，中国女性用户很容易更换品牌的原因，是对如何变美的概念很模糊。因此，帮助女性完善这个概念的“美丽说”本身就是个巨大的产业，有着丰富的想象空间。

　　其实除了时尚、护肤品，像瘦身、美体、健康（月经治疗），甚至是到内在休养，如如何充实生活、扩展眼界和升华自身等等，均是可以做到Design for ladies的。我们还可以拓展出去，就拿QQ做案例吧。是不是也能出一个QQ  for ladies版本呢？这个版本的内容均是针对或根据女性需求而策划的。像每天的新闻弹框，里面可以全是女性感兴趣的内容或应用，毕竟有多少女性用户对奥迪A6感兴趣呢？在这个版本中，还有一个一键切换回正常模式的入口，于是一切又可以回复正常，想想挺有意思的。

　　好了，就此打住，只能说 Design for ladies 的产品在现今还是一片让人值得遐想的领域，以后还能延伸出什么模式，都是一个未知数呢。

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

　　3月份，Photoshop CS6 Beta版(下文简称PS CS6)发布公测，有着多项惊艳的新特性，工作中整天和像素打交道，感触比较深的特性就是PS CS6支持矢量对象绘制、变换时像素自动对齐网格。

　　当然，对象绘制、变换时像素对齐网格并不是PS CS6独有的功能，只是更智能更好用了，PS CS6的像素自动对齐网格功能在绘图过程中，无疑方便了很多，不必再担心图形边缘会出现模糊，但是我们在实际的图形设计过程中会发现，还是会经常需要调整一些路径没有完全对齐到网格产生的半透明的过渡像素，用来平滑图形边缘减少锯齿感，或让图形看上去更饱满、更细腻，我们称其为次像素 (或亚像素，Sub-pixel，一般用于屏幕显示技术等领域)，如下图所示。 

图1-消除锯齿的次像素

　　趁着 PS CS6正式版还未普及，以PS CS5为例，和大家探讨矢量路径图形绘制时如何让像素对齐网格，如何利用路径调整次像素改善图形的饱满度的一些经验，希望对大家有所启发和帮助。

一、像素对齐网格

1.    对象绘制时像素对齐网格

　　像素对齐网格最大的作用就是避免绘制图形时出现虚边，解决图形模糊的问题，尤其是将画布放大数倍去抠界面、图标细节时，精度可以达到像素级，让设计师将精力更多的集中在创意表达层面，不必因为担心模糊而谨慎的去操作，从而提高工作效率。

　　在PS CS5初始状态时，只有当画布在100%比例下，也就是实际像素比例时，画出来的图形才不会模糊，放大或缩小画布到其他比例下，即使打开网格进行辅助，画出来的图形也会模糊，如图2所示，蓝色图形与紫色图形分别为100%画布下不打开网格，和非100%比例画布下打开网格随意绘制的相同大小的矩形，我们能明显的看到紫色图形边缘非常的模糊。

图2-对齐像素图形和未对齐像素图形的对比

 　　这时的网格没有起到作用，是因为在PS CS5初始状态时，网格的参数不是以像素为单位，而是毫米，如图-3，首选项窗口可以通过主菜单中“编辑>首选项>常规”或快捷键Ctrl+K来打开。

图3-初始状态下的网格参数

　　想要在常规图形 (矩形、圆角矩形、圆形) 绘制过程中，使像素在任何情况下都对齐网格，在PS CS5的首选项窗口中，对“参考线、网格和切片”选项卡的网格参数进行简单的设置，并配合快捷键就可以做到。

　　图3中可以看到网格线间隔的默认值是25毫米，将单位改为像素，这时单位前面的数值会自动变为1，这时的网格线并未与画布上的像素格对齐，需要手动重新输入数值，且网格线间隔数值与子网格数值必须相等，图4展示的是在3200%比例下，两种不同数值网格所呈现出的效果，可根据自己的喜好进行调整。网格可通过主菜单“视图>显示>网格“来显示或隐藏，快捷键为Ctrl+’(回车左侧的引号键)。 

图4-不同网格参数呈现的效果

　　完成了如上设置，最后确保”主菜单>视图>对齐”及“对齐到>网格“两个选项已勾选，“对齐到>网格“选项在打开显示网格的情况下才可编辑。

图5-对齐功能及相关选项

　　像素对齐网格设置完成，以后在非100%视图下绘制常规图形，只要打开网格辅助，就不会出现模糊情况。像素对齐网格在PS CS5中还是存在一定的局限性，受到图形形状的约束，当使用线条工具、多边形工具、自定义形状工具绘制一些带有倾斜边缘或非直角的图形时，还是无法保证所有角点和边缘对齐网格，当然这里的模糊更多的是防锯齿效果，可以利用网格手动调整。

2.    对象变换时像素对齐网格

　　PS CS5中，长宽都是奇数或都是偶数时，进行90°变换时都可以对齐像素，当长宽数值分别是奇数和偶数时，再进行顺时针或逆时针90°变换就会使图形模糊，无法对齐到像素，这时可以先旋转，然后打开网格进行辅助，不要退出自由变换模式，拖动对象，这时边缘就会自动吸附对齐网格，如下图：

图6-变换图形时对齐网格

二、利用次像素让图形更饱满

　　举个小例子，看看次像素在图形设计中的作用，抛砖引玉。

　　在界面设计中，经常会绘制下拉菜单等控件上的三角形箭头形状，最常见的做法就是用铅笔工具点象素画出来，如图7-a所示，看上去很清晰，但在分辨率较小的屏幕上看，会稍显生硬、有锯齿感，影响界面的细腻度；用路径对齐网格绘制箭头，如图7-b所示，解决了锯齿问题，但看上去体量感被削弱了，不够饱满；图7-c中所示的效果，是对次像素微调后的效果，既消除了锯齿，而且在体量感上不输第一种方案的效果。

图7-三种不同方法绘制的箭头

　　没看出差别？我们将三种方案放在一起对比下，见图8，从左至右依次为图7中的a、b、c方案，我们看到中间的b方案虽然没有了锯齿，但体量上明显小于a、c方案，而c方案同时具备无锯齿、相等的体量感两个优点。

图8-下拉箭头效果对比

　　通过放大图片我们可以看到在次像素上的差别，要达到方案c的方法其实很简单，看看下图放大的效果和路径你就明白了。

图9-使用路径改善后的次像素

　　只要将角点上的路径锚点分别向外移动一点，让原本颜色比较淡的次像素稍微加深就可以了，操作时，放大画布让调节更细微和精确，选中锚点，轻点多次键盘上的方向键来移动即可，这个方法不局限于箭头形状，大家可以开启像素眼去发现更多的应用场景。

总结

　　啰嗦了这么多，希望这些小的点能对大家工作有所帮助和启发。我们总是希望利用现有的资源做更多的事，不断的探索设计中的更多可能性，关注设计细节的展现，无论是PS CS5还是即将发布的 CS6，每一项功能改进都激动人心，使操作更加得心应手，也帮助设计师能够在更智能的环境中专注于创意表达，提高输出效率，相信Adobe CS6设计套装在各个方面都不会让人失望，让我们一起期待。

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

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

　　在我们的生活，工作，学习过程中，社交网络已经逐渐成为未来互联网发展的趋势。今年，Facebook,Twitter,Google+都是时下社交网络的热门产品，每月的用户使用量都在逐渐增多。

　　然后，今天我要谈的并不是这些我们耳熟能详的热门互联网产品。

　　而是现如今，随着社交网络的日新月异的变化着，我们越来越多的年轻人都在使用手持无线设备上网，进行他们的交际圈子，这也是图片社交新兴的一个时代。图片分享的社交形式越来越普及，许多的年轻人喜欢用图片的形式去分享自己身边发生的人与事，去show自己的生活，idea和圈子。随着Iphone,Andirod等智能手机的普及，人们可以随时随地的分享图片来丰富自己的社交网络，这就是我今天要谈的关于PIC那些事儿。

　　在社交网络市场上，热门的Facebook、Google+、Twitter、校内网等为用户提供的是综合性的社交服务，而现在人们更专注于图片的存储和分享。随着网络上用户图片数量的与日俱增，现在还缺乏专业化的服务来满足人们在图片分享方面相应的需求。图片中所蕴含的“人”的信息，没能得到充分的重视；这使得现有的图片分享服务，大多数成为在线的图片储存工具，而没有将图片背后的社交、娱乐等价值充分发挥出来。致力于为用户提供独特的服务，帮助它们在图片和个体之间建立联系，让人们能够更加得心应手地分享和使用图片。

　　现在在市面上，出现了很多款满足这类需求的APPS，我在这里做一些说明和分析，帮助大家更好的认识图片社交网络的魅力。有2011年接近风靡instagram，照片编辑为主的camera360，私密社交分享的PATH，趣味性十足的picplz等等，这些都是国外做的比较不错几个APPS。

　　下面我来分享下这些图片类社交应用。主要讲instagram和path这两款，因为它们改版后的经验度尤为震撼到了我，尤其是path改版后的界面风格整个提升不少，给我们国内UI界带来了新启迪，希望能给关注这类产品的同学们有一些帮助。

Instagram：

　　是一个免费，有趣，简单的方法制作和分享你的iPhone华丽的照片，也可以即时分享到Facebook，Twitter的，Flickr等社交平台上，与你和你的朋友产生互动的的应用程序。

　　它是一个只有6个人的创作小团队组成，然后在2011年只花了一年的时间，将使用的用户突破1400万，发布图片4亿多张，用户量遍布全球。目前只有IOS平台的介入，Android版应用希望早日开发出来，方便大家使用。我们来看下它的成功之处和吸引人的魅力所在之处究竟何在？

　　从图片显示：

　　Instagram从1.0到如今的2.0的蜕变，界面和LOGO都发生了很多质的飞跃。LOGO调整的更加精细写实了。从之前的扁平质感的彩带LOMO照相机演变成了现在新版的浓质感立体化的镜头，使得整个APPS更显高贵和升级之感。界面功能增加了很多滤镜效果。图片质量也提高了不少，最主要的是服务器容量做了比较大的改善，速度加快了很多。

　　我们来看下它的一路蜕变史。

　　2.0的这次的升级改版使Instagram的全球用户量又一次攀升，将它推向了顶点。

　　1.100％免费的自定义设计的滤镜器；滤镜微创新，比过去处理照片快200倍。
　　2.镜深和移轴效果的加入；
　　3.即时分享到Facebook，Twitter，Flick与朋友互动，迈入了独立社交产品的地位。
　　4.技术上工程师的精挑细选，可以支持无线的海量上传，服务器更加稳定。
　　5.朋友的喜欢和意见，评论；
　　6.删去了一些不必要的功能，进行了界面简化；
　　7.并且还推出了系列周边延展应用；（Insta Rader它可以找到方圆5英里用instagarm分享的照片并标记处地理位置；Insta Rgam是一款增强现实的应用，可以将附近的社区分享的热门优秀照片推送出来。Insta Deck可以将Instagarm的体验迁移到Mac电脑的桌面上。

　　这就是Instagram的web版体验，方便大家参与和体验。http://statigr.am/

　　UI界面做的也是非常的精致，非常符合时下文艺小青年的审美调子，欢迎大家在上面分享各种有意思的图片哇！

　　Instagram 在移动端融入了很多社会化元素，包括好友关系的建立、回复、分享和收藏等，这是Instagram 作为服务存在而非应用存在最大的价值。

　　但非所有的图片分享工具都赞同开放的社交图片与路线，另外一家图片拍摄与分享服务商Path就坚持“私密分享”的另一种选择。

　　Path:这个APPS是非常值得一提的一款应用程序，这是由两个前 Facebook 员工精心打造出来的“密友社交平台”已经突破了 100 万的用户数量，它在这次2.0改版之后，做了一个华丽光鲜的转身，把许多同类产品都遥遥的甩在了身后。直接领跑整个图片类社交分享圈子，无论是在功能和界面设计上都做的相当的精致出位，很受大家的喜爱追捧。

　　Path其实是一个私人图片社交圈子，它只能够添加你最亲密的50人作为好友，它让你不能不想部分受众SAY NO。这样也同时很好的建立起互联网上第三种社交网络类别。2.0的path是模拟了一本智能杂志的形式，可以帮助您分享生活，爱人，你的想法，你听的好听的歌曲，视频。新版更增加了时间轴排列的信息，让你更加清晰的看来一路走来的时间、地点、人物和事件，更加好的帮助回忆过往发生的事情。新版还添加了有意思的唤醒功能，当你睡觉和醒来的瞬间，只要玩过Path，就可以轻松识别您的地理位置和睡觉的时间，让你最私密的好友们最清晰的第一时间了解你的动态。还可以让你的朋友知道你在哪里共享路径上的地方。同时也可以看到你好友添加了哪些朋友，从而加密关系链。

　　最惊艳的是其主页的版式，很大气简洁的排版，也充分的展示了所需的基本信息。新增的一些功能也开始彰显出设计团队对于私密朋友间社交模式的新思考。

　　令人耳目一新的华丽界面，当用户登录新版本的Path时，将可以按照自己的喜好更换自己主页的背景图片，用户可以通过自定义这张“背景图片”，来向好友们展现自己的审美观念，有点个人博客的感觉。这里处理头像的手法也是相当的精致，很巧妙的和主页背景COVER所结合，配以醒目的英文名字和基本信息作为主页标题，整款APPS在首页进入就带给人们不一样的精致度，再加上IOS显示的精细度，将这款转型后的Path展现的凌厉尽致。可以用几个关键词来形容：革命突破性的颠覆；最具独特的创新转型；与同类产品的竞争潜力提升百倍。

　　UI的设计非常精细考究，简洁明了的表达了他们的功能含义。

　　进入应用程序本身，许多细节的精巧构思也令人在使用过程中心生爱意。

　　用户在轮动浏览的过程中，屏幕右侧会自动出现一个时间轴指示器，指针的动态滚动，帮你记录了所有的动态信息。

　　用户的操作形式也非常的新颖，都是基于屏幕左下方的那个“+”号图标——点击它，6 个扩展选项按钮随即弹出，此时的红色“+”号已经变成了红色“X”号，提醒用户再次点击将会把扩展出来的选项按钮一并收回。Flash动作的缓动实现带给用户轻松活泼的感觉。

　　菜单的三屏模式左右滚动切换，界面的关联展示，强化了操作过程的连续性，使得信息展示更加直观，这也是2.0非常独出心裁的设计制作，使用户在交互和视觉的体验上都相当的完美。

　　手机底部左下角区域，在人机交互的逻辑下，更适合右手操作，“X”按钮包含多个常用功能，展示节省空间，直观引导。

　　还有一个很值得一提的新鲜玩意，记录下每天睡觉苏醒的时间和地点，让最亲密的人感受到彼此的存在。

　　Path带给我与众不同的感觉，很多精心完美的贴心服务让用户倍感有趣和温馨。做产品做到这个程度，真的可以给到用户一种宾至如归的感觉。

　　Feed的时间轴情感化展示，穿插着这些可爱且识别率高的ICON，让人特别喜欢！留下深刻影响，为这款APPS增添了不少趣味性。

　　这是我觉得时下图片社交网络，做的相当成功的两款应用程序。同样是涉及图片分享来传达信息的APPS。但是他们完全在两个维度都满足了大家渴望了解彼此动态的需求，而且图文并茂，惟妙惟肖。将整个社交网络推向了图片share的一个巅峰时刻。

　　当然，最后再推荐几款本人用的比较不错的同类产品，希望喜欢share图片的爱好者们多多尝试体验哟！

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

http://book.douban.com/subject/7060185/

　　CDC百字评： 熟悉，是能让人忘记生活中曾经拥有的美好的。当我们疯狂追逐着摩登时代的璀璨时，一位外来的访客如获至宝地摩挲着那些被我们遗弃的往事。追随着老外去看看自己曾经的生活，心里该是种怎样的滋味呢？

http://book.douban.com/subject/6792322/

　　CDC百字评： UI设计的本质是利用有限的视觉资源向用户传达尽可能多的信息。挥毫泼墨随意乱来肯定不行，你得先懂得用户的脑瓜儿是怎么工作的。这本科普书就在尝试解读各种设计准则如何帮你与用户的大脑沟通。

http://book.douban.com/subject/3682204/

　　CDC百字评： 设计的第一步其实是整理，从一堆乱麻中摒弃干扰，寻找本质。佐藤可士和把设计的整理学问延伸到了生活中，努力排除一切无关信息，享受此中的宁静。这份宁静你也值得拥有。

http://book.douban.com/subject/1504957/

　　CDC百字评：对于“权威”给予的指示，国人最擅长的，似乎是依赖和盲从。我们不想一味的接受，也不想鲁莽地地一味拒绝。《学会提问》就在教你如果理性地分析别人（更重的是自己）嘴巴里冒出的想法有何漏洞。

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

　　随着国际市场上Google TV的发布和国内电视厂商纷纷推出定制Android TV的脚步，一时间智能电视平台成为了众多高科技企业争相抢占的新市场。较早的智能电视平台探索者有Google TV、Apple TV和Samsung Smart TV，还有传说中将要上市的iTV。 国外一些知名服务，如Youtube、Twitter、Netflix等，均在这些平台上发布了应用。国内电视厂商多使用Android平台，我们就来谈谈在Android TV上设计app的那些事儿。

智能电视的使用特点——距离远、光线暗、操作心态较被动

【图1】电视使用环境

　　TV的使用环境较为特殊。智能电视尺寸大都大于42寸，其使用环境应该在2.7-3.5米之间。所以虽然TV的显示屏面积远大于多数PC，但因其操作距离远，导致单屏展示的信息量比PC要少。

【图2】客厅灯光环境
　　如【图2】所示有很多用户在使用TV时身体后仰、灯光昏暗、有可能一手吃着零食一手拿着遥控器操作电视。这种”后仰“状态决定了 ：

　　TV用户较为被动，与TV交互更多是作为信息的接受者，无法达到一种沉浸式的状态。

　　因此在TV的界面设计上最好让用户通过方向键和OK能够进行操作，并提供返回键，避免用户低头看遥控器寻找按键而打断操作的任务流。

【图3】TV平台上的app应用

　　通常用户对TV发出的声音并不会感到反感或干扰，因为TV上的频道和app多为“消费性”内容，且TV标配音响系统（音量是默认开启的）。所以在app设计中，可以使用声音作为帮助提示和操作反馈提示。

导航设计——遥控器和导航结构

　　说到TV的UI设计，就不得不从导航开始。如上文所述，TV用户较为被动，所以需要清晰高效的导航系统来帮助用户快速定位到想要看的内容。

　　导航方式与输入设备息息相关，智能电视最主要的输入设备还是遥控器，有时还辅以鼠标和键盘。下面的图例是Google TV和Apple TV的输入设备。

【图4】Google TV和apple TV的输入设备
 
　　从图中我们可以看出新的智能电视输入设备以十字方向键和OK键为核心，所以TV app的导航要基于上述方向键和OK键进行设计。

【图5】Xbox和PS3的导航界面

　　由于智能电视平台app较新，这里我们参考较为成熟的电视平台游戏系统来进行讨论，上图分别是XBOX和PS3的操作界面，这两款产品能被借鉴因为它们的操作方式和使用环境和智能电视系统较为一致。它们都用了十字导航的结构。这种结构的优点在于主导航和二级导航同时展开，并且与十字方向键完美契合，可以通过方向键在主导航和二级导航间快速切换。使用这种结构时，二级导航中的item只能进行单一操作，因为方向键受到了主导航占用。如果对二级导航中item进行多维操作，则需要确认展开下一级列表.

【图6】Google TV的导航界面

　　上图为Google TV的操作界面，它采用了左右分栏的模式，左边是导航，右边是一个二级内容的容器。这种结构的逻辑其实和前面所述的十字导航区别并不是很大，不同的是容器里面的信息更加扁平、直观和可视化，容器里面item操作的方向不会受到限制。但相应地，如果想把焦点从容器中移回到左侧导航需要更高的操作成本。

【图7】Samnsung SmartTV的导航界面
　　上图为最近发布的Samsung Smart TV，它采用了区块式的导航结构。这种结构中每个区块独立操作，信息组织更加扁平化，有的模块和widget概念比较相似，既是信息的呈现也可以作为操作的入口。不足之处是，各个模块中item的方向操作会有一定限制，不然会导致各个模块切换的操作成本增加。

【图8】Cover flow和list信息组织方式
　　另外还想介绍的两种信息展示方式，就是左图中的Cover Flow和右图中的List，这两种方式都采用了单方向导航。Cover Flow这种方式视觉冲击力较强，单屏信息承载有限，焦点的移动两种方式将在后文陈述； 右边这种列表方式视觉冲击力较弱，单屏信息量较大，但在TV平台处理List时候和PC上有所区别：TV app不需要滚动条，而且要控制List的长度，因为尽管遥控器方向键可以启用长按加速，不过始终无法达到像PC端鼠标拖拽滚动滑块控制浏览速度和定位的表现。

【图9】导航项的三种状态
　　在基于十字方向键上设计导航时，导航项一般存在三种状态，即“selected”，“focused”和“selected and focused“。导航上如果有类别项（category）和动作项（action）那么导航获得焦点时，焦点移动不会切换右边容器中内容。当导航上全部为类别项时，焦点可以和选中态一起移动，右边容器随焦点移动切换内容。

　　总而言之，导航设计原则如下：

　　导航设计的目标，是让用户快速定位，并且能够预测出操作结果。
                                                                                                                                 

焦点控制

　　导航架构完后，就是焦点移动的问题，下面几个图例简单介绍了一下在TV平台上焦点移动的问题。

【图10】导航焦点态响应面积
　　遥控器是所有电视标配，而智能电视一般还都支持鼠标和键盘操作，所以控件的状态和PC上有些类似。使用遥控器操作的时候，控件的状态相当于用TAB键浏览网页或者操作桌面软件即控件选中态切换，而使用鼠标操作的时候和PC端一样控件要有hover的状态。因为TV的操作距离非常远，而且TV的外接鼠标可能是空鼠等（其操作不像PC上鼠标一样容易），所以在设计TV控件时针对鼠标hover状态要增加其响应面积，方便用户操作。

【图11】焦点在列表中移动
　　上图左边示例是一个典型的Cover Flow式的导航，这种情况下页卡滚动，焦点却一直固定在中央。在单向列表或者导航时候，这种焦点固定的方式可以很好的避免当列表中项目较多时，导航焦点一直停留在列表底部也就是屏幕边角（用户视线长时间停留边角）而造成的疲劳。

　　上图右示例相反，页卡不动，焦点移动选择。在这种方式下，当焦点移动到列表最右端继续滚动时，最好采用翻页效果。这种效果一是解决了上述视线停留边角问题，二是可以和page controller控件结合在一起，让用户知道在列表中所处位置。

【图12】焦点移动路径
　　上图是从Google TV设计指南中截出来的一张图，提倡使用图中绿色的路径，避免使用红色的对角线方向路径：

　　1.  纯焦点移动路径最好平直且区域对齐，上图所示，如果从A沿绿线移动到B可以较好的被用户感知和理解；如果沿红线移动则不符合用户预期；
　　2.  高焦点移动要避免大范围转移，大范围转移的焦点会让用户感到焦点丢失；

　　最后，就是焦点和控件的关系。PC和移动设备上很多控件都具有很强的点击感，因此用户可以较清楚的区分控件和非控件元素。在TV平台上因为输入设备是基于遥控器设计，失去了控件常见的点击感觉，用户区分哪些元素是说明性的和哪些是控件会产生困难。 因此在TV平台上控件设计尽量可以达到

　　可视元素可获得焦点，提示和说明性元素，要在视觉上和空间位置上与控件做出明显的区分。
                                                                                                                  　　　　　　　　　　　　　　　　　　

颜色和分辨率

【图13】颜色错误使用
　　针对TV显示器的本身特性，在进行UI的视觉层面的设计中需要注意以下几点：

　　1.   纯白（#FFFFFF）在电视会产生图像拖影，如需使用白色，可以用#F1F1F1(hex) 或者240/240/240(RGB)进行代替；
　　2.   高饱和度颜色会导致显示失真，并且在高饱和度颜色向低饱和度颜色过渡时会产生边缘模糊；
　　3.   大范围渐变会导致带状显示，无法平滑过渡；
　　4.   在界面边缘最好留出10%空隙，避免发生电视显示屏独有的“过扫描（踩边）”现象。

【图14】分辨率和色彩模式
　　现阶段智能电视有两种分辨率模式1920×1080和1280×720，也就是我们常说的1080p和720p，在进行UI设计时候应该：

　　1.   高分辨率设计，可以使用android 9-patch切图进行低分辨率适配，在测试的时候选择用低分辨率测试可以更好的发现问题；
　　2.   确保在TV所有显示模式下经过测试，都不会产生问题。

新的交互方式
　　最后想介绍一些TV平台上最近出现的交互方式：

【图15】TV平台新颖的交互方式
 　　XBOX上已经出现了利用手势进行控制和语音控制导航。手势控制在XBOX的Kinect上已经取得了成功，但问题在于需要依赖三维摄像头这个目前还比较昂贵的设备，而二维摄像头所用手势操作，用户体验并未达到理想的效果。至于语音控制，现有设备基本上可以完全支持，在《乔布斯传》中乔布斯声称已经破解了智能电视密码，其核心就是语音控制。

　　另一个新颖的交互点则是Samsung Smart TV的密码输入模块。众所周知，文本输入一直是遥控器的一个梦靥。在PC和移动设备上所有的输入都是一步，及所选即所得。在TV上的输入总是“选择—确认”，打断了用户连续输入的“任务流“。而上图电视上的软键盘则建立了和遥控器九宫数字键的映射，按遥控器上的数字键就会把电视上的软件盘的字母输入到输入框中，这种做法在“独占性”的任务流中可以增加文本输入效率。

　　文章部分图文参考了Google TV 和Samsung Smart TV的设计指引，感兴趣的话可以点击以下链接进行扩展阅读。
Google TV Design Pattern

Samsung Smart TV User Experience Guidelines

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

写在前面
　　早在2011年7月，QQ音乐2011beta版的发布便确立了用品牌色–绿色，做为QQ音乐客户端的默认颜色，绿色代表和平、希望、生长和环保，对QQ音乐的品牌形象有积极的正面意义，此外，纵观竞品，常见的客户端配色多为黑和蓝，用绿色也较利于提高产品的识别度。QQ音乐2012贺岁版的视觉，也是围绕绿色和细节进行全面的体验优化。项目从去年12月31号开始，进行了为期15天的高效设计和快速迭代。

改变工作流程
　　整个项目时间非常紧张，由产品发起需求–交互–视觉–开发的传统流程无法适应项目进度，而由设计师发挥最大主观能动性，与产品、开发无缝对接，减少沟通成本，并驱动实现更适合的体验。

设计理念
　　从对用户听歌时的心情和感觉的研究结果来看，发放的2000多份问卷中，有41.6%的用户选择“清新”，排第一位，其次是“阳光白云飞翔”和“忧伤”。因此，整体的视觉风格的关键词定义为：清新、精致、绿色，希望给用户营造一种自然纯粹、融入万物的感官体验。

绿色的重新提炼
　　绿色是一种非常灵活的色彩，在色盘上偏向黄色部分的绿色感觉比较温暖，而偏向蓝色部分的绿则显得比较冷。在项目初期，针对不同感觉的绿，做了几稿视觉输出尝试，邀请了周围的人来选择，从中也有一些有趣的发现，比如男性比较喜欢明度低的深绿色，女性则偏爱明度高的嫩绿，另外，性格内向的人喜欢饱和度偏低比较灰的绿，而性格外向的人则喜欢饱和度高更纯正的绿色。
　　

　　经过反复比较，结合界面和图标的配色，以及希望传达给用户清新自然的感觉，最后选择了用最接近春天，偏暖的绿色，作为客户端的基准色调。

图标的优化
　　重新绘制的图标，更强调造型的饱满和所有图标的均衡。在质感上打造单色、轻薄、边缘清晰而不锐利的视觉体验以适配换肤。光源统一为90度向下。

界面的优化
　　1.质感的打磨：调整质感的轻重，对线条进行弱化处理，让面板更加透气和细腻。
　　2.头部布局：优化业务入口，对负载的功能做减法。

　　3.文字和图标的排版：寻找四个方向对齐点，使之平衡、整洁。

最终效果：

后记
　　距离发版已经过去2个月了，从收到的反馈数据看来，效果还是比较理想的，日听歌用户数和安装覆盖率较之上个版本都有显著增长。最后感谢开发同学在视觉还原上的耐心配合，感谢产品经理的理解和支持。
　　自然赋予万物声响，音乐是人类献给世间的第二自然，QQ音乐做为感情和思想的传递者，希望能将最完美的音乐体验带给大家，这次改版，是一轮经验和力量的蓄积，在用户体验的道路上未来我们会做到更好。

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

　　不做大项目，很难理解多人合作有多么艰难。真正参与到项目中，才发现责任分配模糊、懒于沟通、越俎代庖干涉他人决策等都会让项目进展陷入僵局。虽然合作中常能感受到别人给自己带来的麻烦，但我们却很难发觉自己也在给别人带去痛苦。越是自信，越难发现自己的失误。

　　花了些时间，总结了下自己的经验教训，又访谈了不同职位的合作伙伴和好朋友，总结了一些各个职位与其他职位合作时最头疼的事。兴许可以帮大家看一下别人眼中的自己。

产品经理

面对交互设计师的痛苦：
　　1. 不主动帮忙提供解决方案，而是先PK需求。
　　怎么办好呢：交互认清自己和岗位定义，采取积极配合的态度，多提建设性的意见；同时在需求构思阶段产品最好能拉上交互一起讨论，同时为需求寻求客观的用户数据支持。

　　2. 闷头画稿不沟通，画出一套自己满意的稿，却和自己预期相差很大。
　　怎么办好呢：建议交互画粗糙纸面稿，经频繁沟通讨论，再绘制精细纸面稿。再次确认沟通后，才用软件绘制精细线框图。逐渐细化，把矛盾逐批解决，不至于积累到最后爆发。

针对交付衔接：
　　1. 各个角色在交付文档后，承接人的理解会走形。
　　怎么办好呢：各种交付物在交接时要由负责人在交付评审会上逐条讲解，以实现充分理解。交付物只是用来备案的，不是用来沟通的。

　　2. 对上游的交付物和交付时间有疑问，不直接询问相关责任人，而是先来询问产品，再由产品转告。
　　怎么办好呢：对特定角色的工作有疑问，要直接咨询此人，同时确保产品被知会到。

交互设计师

面对产品经理的痛苦：
　　1. 功能点照抄竞争对手，以至于界面无需思考，照抄即可。
　　怎么办好呢：请产品经理讲清楚每个功能点背后的用户需求和真实的生活场景，描绘该产品对用户的生活会带来怎样的帮助。

　　2. 需求思考不清楚，经常变更。
　　怎么办好呢：争取参与前期的需求制定阶段，辅助产品经理讨论清楚用户使用场景和功能点，然后再列述下来。各合作方在需求评审会上公开确认需求。

　　3. 过度干涉控件布局等细节。
　　怎么办好呢：产品经理应首先专注于挖掘靠谱的用户需求，并清晰地列述功能点和帮助用户实现的目标。这些用户目标就是用来衡量交互方案是否有效的客观目标。切忌用主观标准否定设计方案。

面对视觉设计师的痛苦：
　　1. 以美观之名更换控件，扰乱任务流，忽视对相关页面的影响。　
　　怎么办好呢：交互应该设计中期就拉入视觉一起讨论，让视觉知道每个控件的用意，同时坦然接受视觉对交互方式提出的合理建议。

　　2. 调整控件布局，扰乱元素的主次关系
　　怎么办好呢：同上。

视觉设计师

面对产品经理的痛苦：
　　1. 用主观的“我不喜欢、我觉得不好看”来否定设计稿，无法用客观的词汇描述预期效果。
　　怎么办好呢：产品经理应该将对视觉方案的要求书面留档，并以此为作为评估设计方案的客观标准。

　　2. 经常变更需求，并且天真地认为所需要做的调整超级简单，一秒搞定
　　怎么办好呢：产品不要低估调整视觉方案的工作量。视觉也可以在初稿阶段试试产品经理的口味，多倾听一下彼此的意见。

　　3. 对自己的审美能力很自信，对设计稿指指点点说“要这样移、那样调”
　　怎么办好呢：视觉风格方面产品经理应充分信任视觉设计师的审美能力，给建议时也要态度诚恳，淡化盛气凌人的感觉。

 面对交互设计师的痛苦：
　　1. 布局控件时不与视觉沟通，直接丢一套线框过来。
　　怎么办好呢：交互邀请视觉参与线框图的设计阶段。

　　2. 设计的交互稿没新意，太老套死板，了无趣味。
　　怎么办好呢：交互要多玩多看多体验，丰富自己的设计储备库，以便厚积薄发提出让人眼前一亮的设计。

面对开发工程师的痛苦：
　　1. 改参数，并坚称自己做的更美观。
　　怎么办好呢：视觉对于自己责任范围内的设计稿参数标注要尽量详尽，给出完备的视觉设计稿作为客观的衡量标准。在开发完成后要及时走查，并跟进问题的解决。

　　2. 不用切图素材，用代码来实现效果。
　　怎么办好呢：视觉首先要确保给出的切图素材十分完备；开发也要克服惰性，将视觉素材充分利用起来。

　　3. 对像素、肌理、阴影不敏感，看设计稿不仔细，实现效果与视觉稿差异很大。
　　怎么办好呢：对开发容易忽略的视觉细节，视觉设计师要与面向开发讲述。交付的设计稿只是备案，不是高效的沟通方式。开发同志们是没有视觉那样的像素眼的。

 开发工程师

面对产品经理的痛苦：
　　1. 对产品前景没有充足考虑，每次发新版本代码都需要推到重来。
　　怎么办好呢：产品经理要明确产品发展的大方向，并将远景清晰地阐述给合作伙伴，以便开发在搭建程序时为未来留好空间。

面对交互设计师的痛苦：
　　1. 设计稿缺少细节：每个页面可响应事件的区域，响应的动作，操作成功和失败的反馈。
　　怎么办好呢：交互设计师除了描绘页面之间的跳转关系，还应该将页面内部所有的事件响应文档化，减少开发的误解。不要怕麻烦。

面对视觉设计师的痛苦：
　　1. 没有定量标注设计稿的每一个细节。
　　怎么办好呢：请视觉认识到定量标注细节对于开发无损地实现视觉稿的重要性。开发是没有精力去猜或者量一个特定参数的。

　　2. 切图不完备，遗漏细节，需要开发自己用代码补。
　　怎么办好呢：每一个细节的素材都切图切出来，并系统地使用文件名命名方法，帮助开发理解。

　　一遍看下来，有没有觉得背上冒冷汗呢？一切依着自己的性子往前走，真的很难发现自己有哪些地方做的不对，不知不觉就给别人留下了心灵的创伤。其实合作也很简单，多积极参与一下上游的决策，知根知底；多耐心向下游讲解一下那些只存在于自己脑子中的主观想法，倾听一下他们的建议和疑惑。多往彼此那边靠一靠，心就能挨得近一点。

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

　　开篇~ 小谈品牌识别与多终端产品的统一及差异性，抛砖，求玉~
　　最近在多个平台试用了好些apps，从华丽丽的Mac到质朴的Windows，从灵动的iOS到多样的Android，各有各无法取代的特性。纠结且令人抓狂不已的思考是：设计一个产品的多终端时，应该如何统一？

多终端统一性，从视觉说起
　　对于多终端的产品而言，好的UI设计，不仅需要给与用户最基本的视觉舒适感，更应让界面在不同的平台，承担品牌形象识别的作用。

　　我们先看个例子，MIT media lab的视觉识别，被誉为flexibility和innovation的识别系统。

详情请点击查看 http://www.thegreeneyl.com/node/294&i=9

　　麻省理工学院媒体实验室一直以来给我们的独特感，在logo的设计上同样也体现了出来。logo由三个不同的形状和色块组成，每个logo代表一个人的贡献，由此产生的形状代表了一个对于今天而言，什么是媒体和技术的不断重新定义。

　　在MIT media lab里，每个教职工和学生都有一个属于自己的logo. 个人专属的logo，有了这三个犹如DNA基因的基本元素，无论怎样拼接排放，视觉上都归属于同一个系列。既协调统一，又不失个体的差异性。

　　品牌识别应用在名片上时是品牌logo+品牌字体+个人信息，在文件上是品牌logo+品牌字体+文件标准样式+小色块装饰，在室内使用则是logo颜色+logo的空间延伸感。整个品牌识别系统的应用，是保持核心内容一致，各司其职，而又互相补充的关系。

　　好啦，关于MIT media lab品牌识别系统的内容已简单描述完毕，那么，这个品牌识别跟多终端app，又有什么关系呢？继续继续往下看吧。

多终端app的品牌延续

　　小至名片，大至建筑，在不同的媒介上使用品牌识别元素，一是保证让用户产生明确的视觉延续和统一的识别效应；二是在相应媒介上使用时，要符合该媒介的特性，并根据特性定设计内容。

　　那～～app的界面元素，在不同的终端上，是不是也应该有着与品牌识别相同的效应呢？app的交互方式，在不同的终端上，是不是需要根据终端特性定交互呢？很明显，答案是肯定的。

　　请看以下案例。

Facebook
　　Facebook在iPhone和Android平台上的界面设计。有着相同的品牌元素，且符合各自平台的用户操作体验。详细看图中标红的部分。其中展示了在两个平台上，用户是如何返回主界面，如何刷新，如何发起信息的富操作任务的。显然，Facebook在设计不同平台上的app时，并没有简单粗暴的把iPhone上的体验照搬到Android上，而是进行了平台针对性设计。

详情请点击查看 http://johnnyholland.org/2010/09/android-iphone-app-design-is-it-twice-the-work/

Spotify
　　继续看看另一个案例，Spotify，一款免费的在线音乐播放软件，看看spotify在多终端上是如何设计的。

　　从上面Spotify多移动终端的缩略图中可以看出，spotify有着属于自己的app品牌元素。

　　　　　　　　iPhone            Android        Symbian(触摸屏)  Symbian(非触摸屏)    Windows Phone 7

详情点击查看 http://www.spotify.com/

　　从上面Spotify在四大移动终端的图中可以看出，spotify在设计中尊重原生系统的交互、运用系统本身的设计语言、满足用户的使用习惯。对iOS, Android和Symbian的触摸屏手机，保持上方为title，中间为列表形式，下方放内容模块tab的结构；对Symbian的非触摸屏手机，由于用户主要是通过上下左右和确定等物理键来操作app的，整个内容模块是设计成列表模式而非tab结构，以适应用户的操作；在Windows Phone这种具有独特的Metro设计风格和操作习惯的平台，spotify选择融入WP7的设计语言，满足用户体验的做法。

　　这点，跟品牌识别的协调统一且不失个体的差异的特性相同。

　　在保持统一的同时，我们需要最大限度地融入设备的原生用户体验，让用户感受到我们的app是为他们的设备而设计的，而不是简单的去适应设备的屏幕或粗暴的统一各平台，让用户来适应我们的app。

　　在此，举个反例。

　　Mac系统下app主窗口关闭后，默认后台挂起，点击dock中的icon可重新打开该app的主窗口，点击dock中icon右键菜单里的退出或menu bar上的退出项可退出程序。但某某咪咕音乐for mac版本，虽然试图往Mac系统的操作习惯上靠拢，如把关闭和最小化等按钮放在了窗口的左上侧，但把Windows下点击关闭按钮，询问用户需要最小化还是退出程序的提示放到Mac下，显然与Mac的体验不相符，让用户不知所措，破坏了用户习以为常的认知和操作，使app变得不伦不类。

内容需要适应使用场景

　　讲完界面UI和系统原生态操作的体验问题，我们再讨论下，如何在不同终端定义内容结构。

　　我们先看下，一天中，用户是怎么使用各种设备的。

详情点击查看http://uxmag.com/articles/framework-for-designing-for-multiple-devices

　　简单描述上图，早晨，用户从起床开始就通过智能手机或电脑快速浏览信息；在去公司和回家的路途中，会使用到智能手机和平板电脑，其使用取决于出行的方式和方便程度；在工作中主要使用电脑，偶尔会使用手机；下班到家后，处于相对放松的状态，会同时使用台式电脑、平板电脑和智能手机。简而言之，用户的一天中，会接触到多种终端设备，包括电脑和移动设备。

　　了解用户使用设备的场景很重要，这有助于我们设计除符合用户使用场景的内容。对于设计师而言，我们要根据用户的使用场景和设备，在适当的时候给出恰当的内容。

　　我们看个案例。

Evernote
　　Evernote是一个用于记录笔记的产品，在移动设备上，适用于iOS, Android, Blackberry, Windows Phone 7和WebOS via AppCatalog；在电脑上，适用于Mac OS X, Windows, Safari, Chrome和Firefox。

详情点击查看https://www.evernote.com/

　　我们来看看，在不同的平台上，Evernote的内容结构有什么不同。

　　Evernote在PC和Tablet上，属于精细化编辑和内容型消费的app. 在智能手机上时，对app内容进行了优化，一是抓住用户在移动场景下使用evernote的核心功能－－创建新笔记和查看旧笔记；二是根据智能手机的特点和移动设备上文字输入不便等情况，增加了拍照、音频输入和标记地理位置的功能；三是根据屏幕尺寸优化信息展示的层级结构，保持evernote一贯以来的简单易用，如下图，展示方式从大界面的并排结构到小界面层级递进。

多终端app承担纽带及互补关系

　　回到MIT media lab的品牌识别，我们可以看出，在不同的媒介上，品牌识别的核心不变，但具体展示的方式和内容会有所不同，是各司其职，互相补充的关系。

　　同样，一个产品，在不同的终端，核心功能不变，但展示方式和架构会有差异。我们需要了解每种设备的优势和弱势。如，使用性能和便携性等。不是所有的功能都会适用于所有的设备。台式电脑用户和移动设备用户对同一个产品的期望会有不同。

　　举个例子，思考一个关于正在上映电影的影院网站。在台式电脑中使用，用户会期待一种身临其境的感觉，包括可以看到预告片和影片相关的细节描述等。在移动端，用户更关注的是影片列表，离自己最近的影院地址和放映时间等。

　　从用户对多终端产品交叠使用的情况看，我们可以认为，同一个产品的多终端app之间，应该是互相补充和完善的关系。

集众家之智慧，小结多终端设计方法

　　1. 如果有可能，从移动端开始设计，因为在移动的场景下有诸多屏幕和功能的约束。这意味着，移动设备上的功能是最核心的。　　

　　2. 确保在每种独立的设备上（包括智能手机，平板电脑和台式电脑）都能支持到用户的目标。用户的首要和次要的目标取决于使用每一种设备的场景，因此用户的使用目标需要根据每种不同的设备来定义。在这里，提供一份nielsen所做的关于多终端产品使用情况的调研数据http://blog.nielsen.com/nielsenwire/?p=27702

　　3. 在一篇讲解跨平台设计的文章中描述了一种交互设计方法。简而言之，就是，一、先根据原生态系统的交互，设计简单的线框图；二、用缩放到适应每种屏幕大小的视觉元素，以及所对应平台本身的常用基本元素控件等去设计精细的线框界面。这样有助于在设计的早期，创建跨平台的统一。而不是设计完交互后，坐等着视觉设计师去定界面元素和风格。

　　4. 创建和归档设计风格规范以及模版，以便在出现设计不统一时，给出设计样式的详细说明。

　　5. 以上设计方法来自于平时的收集和累积，把方法运用到实战项目中，是个艰巨而漫长的过程，D3多媒体的设计师们努力进行中。

文章小结：

　　1. 多终端产品，犹如品牌识别，需要协调统一又不失差异；

　　2. 多终端apps之间的关系是各司其职，互相补充。

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

　　前段时间笔者参与一款IOS游戏的开发，体验了不少游戏。鉴于本人天性爱好萌物（注：“萌物”指令人热血沸腾、心生怜惜的可爱事物），为大家推荐几款设计得颇有特色的萌系游戏，看看他们如何抓住用户的心。

迷你农场 TinyFarm

　　这是一款饲养动物为主的农场经营类游戏，此类游戏同质化还挺严重的，比起那些动不动就像素堆叠的牧场，TinyFarm淡雅的水彩画面好似清风拂面，洗涤心灵。

　　游戏里的动物都圆滚滚的，在成长的不同阶段配置了萌萌的叫声。戳一下游戏里的小羊，它们就发出懒洋洋软绵绵的咩叫，笔者瞬间得到了治愈。所谓绵羊有三好，音轻体柔易推倒。

　　游戏中所营造的清新柔软的氛围，在界面上一脉相承：

Nanna’s Cat

　　IOS平台上最受欢迎的游戏类型或许就是塔防了。说起塔防，大家脑海里最先出现的就是《field runner》或《植物大战僵尸》吧。除了炮台与僵尸，有谁想过萌猫能蹦跶在如此硬派的世界中呢？Ninna’s cat就是这么一款另类的塔防游戏。主角是一群天然可爱小猫，为报答饲主的养育之恩看守宅院，与恶魔作战。

　　诚然，游戏icon及片头介绍那浓墨重彩的绘本风格深深欺骗了笔者，直到瞅见似曾相识的炮台卡牌，才从梦中惊醒：没错！这货真的是塔防！而且难度还不低。

　　复古味儿的小猫插画，配上一些斗篷，头带类的小饰物，每只的性格或沉静或热血，也算有模有样。所有的小猫都和人类一样，用双腿直立行走的哟；如果挑战失败，他们还会垂头丧气。游戏的3D建模基本还原了设定，看猫猫们迈着萌腿跌跌撞撞去造炮台，哪怕对这类游戏不感兴趣，笔者还是沉浸其中。

和风物语

　　有一款萌系的社区类游戏最近很红，身边几个三十岁以上的男性同胞都在玩，笔者询问原因，答曰：“因为可以造很多好玩又可爱的房子。”凑近一看原来是“和风物语”，有报道称这个模拟经营类游戏的每日在线人数已经突破1000万了。
 
　　如此受追捧，原因何在？抛开游戏性不谈，单从设计角度，这也是一款成功的作品。既然称之为“和风”物语，游戏中随处可见浓浓的日式风情：作为体力值的饭团、经验值的樱花，出没的忍者npc……甚至连假面超人战队也能找到。建造物更是异想天开：日料店顶上是巨大的天妇罗，电影院顶着爆米花和胶片……这种实物与房屋混搭的超现实主义风格是该游戏的惊艳之处；随着升级，房顶元素还会变得精致丰盛，无怪乎朋友爱不释手，总是催促笔者上线一起升级房屋。有了优秀的美术资源，用户粘性就是这么培养起来的。

　　同类型游戏多受CityVille影响，建造物绘制得中规中矩，“和风物语”的美术设计则摆脱了框架束缚，有了更多发挥空间。

叠叠猫 mewmew tower

　　叠叠猫的玩法就如字面意思：把猫尽可能地叠高，不倒下就可以了。虽然是个迷你游戏，但紧跟着推出的扭蛋、仿真玩偶、包袋等一波接一波，这在IOS游戏中较为罕见，可见该游戏魅力之大。

　　笔者觉得叠叠猫的成功之处有二，一是玩法足够简单，连5岁小孩都能上手，玩家容易获得满足感；二是设计师描绘的猫咪有着日系四格漫画的韵味，寥寥几笔，抓住了神采。最爱揪起大肥猫的感觉，把它叠上猫背就会表演一秒钟变猫叔——肥脸变成（-“-）的淡定表情，与其庞大身躯形成鲜明对比。如果叠的是线条粗犷的大叔，应该又是另一番风景吧……（题外话：还真的有这款恶搞app）

　　该作还有漫画小剧场，延续了质朴温馨的单线条画风。

PandaDog Gameparty

　　作为一个人气卡通品牌的小游戏集合，几位卡通主人公的耍宝甚是抢眼，但笔者觉得Pandadog最大的萌点是……提示信息！在这套游戏里几乎没有文字，一切靠充满原始想象力的提示图来展开。拿游戏解锁条件来说。每个小游戏有2种难度，普通难度需要花500游戏币解锁；困难模式需要在解锁普通难度的基础上，再花500游戏币解锁。如果换成文本框，可想而知会是这种情况：

　　上图逻辑清晰，很多游戏也是这样设计付费对话的。但对于一款卡通特色游戏来说，未免太没亲和力。看看PandaDog的设计师如何用萌系武器融化这些生硬的描述：
把游戏币的概念包装为“核桃”——小动物们都喜爱的食物，同时核桃有着坚硬外壳，可以砸碎物体（比如鸡蛋什么的……）

　　把游戏解锁的过程包装为：小鸡破壳而出。每个未解锁的游戏都是一个孕育生命的蛋，只要玩家的“核桃”足够多，就能把蛋击裂，帮助新生命出生。多么有活力的想法！而要砸开一个困难难度的深色鸡蛋，玩家必须先使普通难度的小鸡破壳。

　　于是下图就是游戏中的实际效果：

　　游戏氛围保住了，付费隔阂消失了，复杂说明简化了，玩家还会为诙谐的设计会心一笑；这就是设计的魔力，看似轻松的界面，细细品味才知设计师用心良苦。

　　其实无论是用何种方法，保持一颗温暖的心灵才能激发萌意灵感， 只有先把自己萌杀，才能萌倒别人，每个萌系游戏的背后说不定都有一位可爱的设计师哟。那这期节目就到这里，我们下期再见~

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