你不必琢磨这篇日志的标题，也大可不必摸索我的逻辑试图切入第一人称的感官视野，因为我担心你坚韧不拔地停留在标题上所付出的努力到最后达不到你高昂情绪设定好的预期，简而言之，你被标题欺骗了。

–[异次元 Extradimensional]

什么叫异次元？做个通俗的比喻，异次元就像空气，因为它只是一种意念，意念的存在和意念的能量运动让很多喜欢研究未解之谜的数学家不遗余力地付诸于他们特立独行的追求和爱好中，从不后悔，因为他们认为：我们的世界并非纯粹的三维，还存在第四维即所谓的“高维空间”，好吧好吧，稳定一点的说法是在异次元的逻辑里，你不但可以在空间上改变自己的位置，还可以在时间上变化自己的位置，所以这样一来异次元被神话了，一个无所限制超越三维的空间，呵，当然这只是意淫，至少目前是，说了那么多其实我也只不过是想提取出一个关键字而已，意念或者说是信仰，Belief，抱歉又浪费你这么多时间琢磨这玩意儿。

–[广告 Advertising]

Advertising,广告，如标题所见，广告是一种意念和信仰，那些自认为广告无所用处无关痛痒可有可无的行为是不是可以认为是缺乏信仰，当然信仰本身也是一个精神世界观的矛盾主体，不信不在乎只是一种显而易见的行为在否定信仰价值观的同时它本身也无奈地充当起了信仰的角色。撇开上个世纪二三十年代西方传媒对广告的商业化定义，现实意义中的广告更像一种超越商业本身的文化和信仰，它无时不刻坚韧不拔地晕染着亿万受众的眼球侵蚀着日渐浮躁的脑浆，广告是通过媒介达到信息传播，由此划分的广告种类简直是多如乱麻，常见的传统四大媒体广告报纸电视广播杂志，一部分人群接触一部分媒体，比如我们，受精面最广的媒体最有可能是互联网。所以，我们被无穷的富媒体(Rich Media)无条件包围了，本期我要给大家分享的内容并非按媒体种类划分的广告，而是按照广告本身的形式划分的众多类型中的一种：系列广告！

–[系列广告 Series Ads]

系列广告很容易理解，它首先必然是一个广告，其次它不只有一个必然是个系列，当然我这样解释有点太无脑了，系列广告是按照同一主题同一风格发展的超过一种以上的创意表现，伏特加广告是一个很成功很经典的系列案例。 系列广告最重要的传播目的不是买点诉求而是品牌，是品牌的魅力，大卫奥格威说：品牌环境是建立在广告创意和形式基础之上。信仰给人意志力，而广告用它独特的品牌魅力塑造着信仰，系列广告则以更加魅力的手段诠释着广告在现实中传播的意志和信仰。

给大家分享几组来自国内外4A的优秀系列创意广告.  Copyright © Creative Ad Awards

由于篇幅限制，本期的系列广告分享就不长篇放图了，如果大家有兴趣了解系列广告或者任何有关于广告创意的表现无论是创意也好还是营销和策划都可以参与到和大家一起分享的过程当中，我们经常抱怨产品在广告策划上过于直接和暴力，形式过于低俗，文案过于空洞，广告诉求过于苍白，这些问题都有待于设计师本身提高对广告的认知和理解然后才能更好地沟通交流甚至是引导产品对高纯度高品质web广告的从新定义和认知，啰嗦了那么多还是速速收个尾吧，广告可以是咖啡当然也可以是大蒜，不同的意识创造不同风格和不同意义的广告，当然它们的传播效果有良莠之分，但是，广告作为一种文化和信仰这一点是没有区分的…

先让我们来看看一些简单的数据：

据谷歌发布的报告显示，

①    97%的中国城市已拥有手机，其中35%拥有智能手机；

②    在电视与智能手机两者之间，50%的受访者表示宁愿放弃电视而非智能手机；

③    中国城市智能手机用户随时随地都在使用智能手机，其中家里(66%)，旅途中(59%)，乘坐交通工具中(52%)，餐厅(38%)及商场(30%)是使用智能手机最频繁的地方；

（数据来源《中国城市智能手机数据调查报告》；http://www.dianru.com/news-56）

可预知在未来的互联网领域，移动端的平台构建会逐渐成为互联网企业的发展核心。

而随着目前国内外移动设备的越来越多，用户对于移动服务的需求也随之增多，不论在何时何地，用户都乐于通过手机获取互联网信息；

目前，75%中国城市智能手机用户每周会用智能手机进行社交，正接近用传统网络进行社交的比例(84%)，随着移动互联网的发展日趋成熟，通过手持移动设备获取互联网信息有望在不久未来成为主流网络接入口。

在现阶段的网络服务产品中，web端完整展示手机端内容，手机端浓缩web端精华，两者是相辅相成的，在互相影响也互相促进。主流的设计流程是从web端到手机端；而国外已经有部分产品开始尝试倒序设计，优先考虑手机端，而后根据手机端功能进行延伸与扩展到web端，我相信，这同样是未来网络服务产品设计中的一个趋势。

当然，目前web端已有朋友网这个较为成熟的产品，在这个前提下，这次设计我们需要做的是，通过增强web设计来吸引用户下载APP。

1 前期讨论

在接到需求单之后，首先是从自身产品出发，结合国内外优秀的APP下载页进行分析。

而后确定这次朋友网手机客户端下载页面的几个关键点，分别是：轻量轻薄、页面空间感、浏览舒适度。

1.1   轻薄轻量

在字面意思上，轻薄轻量归根到底就是一个字“少”；

在对文案、画面等元素进行精简提炼，保证浏览者对于页面以及客户端有足够的认知，同时在细节上做功夫，才能做到“少即是多”的效果；不失用户认知而完整表达，是我们对于这次页面设计中“轻薄轻量”的定义；

1.2   页面空间感

其实在页面中对于信息的浏览，与在现实图书馆中的浏览状态大同小异；

没有谁会喜欢约束在狭小的空间里浏览信息，而我们尽可能地提供透气舒适的页面空间感给用户，才能保证用户愿意在这个页面停留多一些时间，因为起码这里不算太拥挤。

这一块我们主要是针对页面设计元素的处理，不需要太多的素材堆积，把握住最能表达客户端功能特点的核心内容。

1.3   浏览舒适度

用户在页面中对文字信息的浏览就像使用电脑，而过多的文案信息就像电脑系统中无用的沉积文件，会影响浏览速度与理解的；

关于文案信息的浏览，我们对于舒适度的定义是：快速浏览文案信息，轻易获取文案主旨；所以对于文案反复讨论，一减再简，在保证信息表达完整的情况下，尽可能地用一两句话去描述朋友网手机客户端的功能。

2 设计过程

我们觉得，设计，是要找到一个大多数人认可同时视觉美观的临界点；

而设计的过程则是一个从无到有，从有到优的一个更新迭代的过程。

2.1 这个页面的设计过程是曲折的

这张图的4个方案，代表着设计过程中的四个阶段，从传统的页面设计到打破框架力求简单化，再到生活情感画，以及最后的确认定稿；

这是一个探索与进步的过程，虽然有些曲折，但是通过期间的反复讨论，不断推倒已有的设计并重新构思，最终我们所设想的方向是对的，大家只是想做出更好的页面设计。

针对产品与设计本身，我们最基本的愿望是希望当用户看到这个页面时，不至于说太难看。

当然我们也相信可以做得更好。

2.2 我们在设计中的坚持

前后一共出了4版设计方案。在不断的优化设计中，也在持续优化提炼设计中的元素；但是最基本的坚持底线是保证页面的轻量轻薄、页面空间感与浏览舒适度。

这个是在前期讨论中定下的关键点，在页面设计的整个过程中，每一个版本的设计中心要点都在下一版中得到保留并优化；无论是做了删简还是做了延伸，都将最初的三个关键点定为页面设计中最基本的坚持。

2.3 最后的定稿

在经历长期的工作后，反而是到最后阶段是最要求细心的。

在大的页面风格与画面元素已经定下来的前提下，接下来的工作是对细节的推敲；从按钮的颜色渐变到文案的标点符号都反复推敲。并非说是说盲目的去扣细节，而是不希望在这细节处犯错，所以在文案的调整，怎么做到最精简的文案而又利于用户理解，这是我们最后的设计工作中主要部分

3设计要点回顾

3.1 模拟用户场景

户外餐厅、随走随拍地逛街、结伴同行、咖啡馆、屋顶上的聊天；

这些在日常生活中常见的场景，其实也是我们对朋友网手机客户端用户的情景定位；而用户在相应场的场景中，对客户端的功能使用也被我们涵括到了画面中；

比如和闺蜜在逛街的时候，自拍的照片可以立刻通过朋友网分享给好友；而大家结伴同行，希望你乐于通过朋友网分享你们的快乐；我们希望通过模拟使用场景，对用户进行情感定位。

3.2 情景化物品辅助

打招呼、照相机、纸飞机、咖啡杯、纸杯饮料；

画面代表着客户端使用场景，而画面里的辅助物品则包含了场景寓意与客户端功能的两层含义，烘托场景主题，辅助客户端功能这是我们对加入这些情景化物品的初衷。

就好像“面对面的聊天，或许你们需要两杯饮料解解口渴，因为在朋友网聊天就是这么直接，所以需要聊的太多了。”这是我们想传达给用户的一个信号，想让用户知道，朋友网手机客户端其实真的很有意思。

3.3 文案一减再简

抓住主题，把最想表达的内容最大限度地突出，减少不必要的视觉干扰。文案不需要太多，太多文案反而因为阅读困难而抓不住主旨。所以我们强调浏览舒适度，就是把文案不断地精简提炼。力求让用户在最短时间里听到我们想说的话。

4 总结陈词

初稿和最终稿是不一样的，期间不断调整优化，大到页面风格画面元素，小到标点符号背景透明度。

虽然最后做出了相对满意的设计成果，但是还是有一些问题不能含糊过去的，比如画面多处阴影的整体感觉，辅助物体的处理，背景与主题的融合度等等设计上的问题没有得到完善处理。而在后续我们已经在逐步在调整与优化，虽然只是细微处的调整，但是大家真的有用心在做这个东西。

春夏色彩· 酷炫动画
拍拍3月的大型促销活动《春夏新品，全民换装》，主会场设计上运用明快、鲜艳的春夏色彩块组合，在细节上采用花朵草地蓝天更加突显初春购物的轻松氛围。并在活动头部主画面中采用HTML5+CSS3实现的酷炫动画，为用户带来了全新的页面体验。

粉嫩· 绚丽 
3月促化妆品分会场运用粉红色为主色调，更容易让人联想到粉嫩的肌肤和绚丽的彩妆。大背景使用护肤品和彩妆用品的特写展现美容用品的美感，烘托卖场氛围。

美食· 购买欲
3月促食品分会场运用鲜明的色彩，大背景采用不同食品线稿大小不一、层次分明的组合，渲染出美食热闹的氛围，从而提高消费者的购买欲望。

运动感· 健康· 绿色
3月促运动分会场以健康的绿色为主色调，青葱的草地做大背景，配合鲜艳明快的色彩，更充分的体现了运动感和强烈的参与感。

地铁· 男性· 钢炼
3月促男装男鞋分会场运用地铁线创意贯穿整体页面的设计，地铁站景象为大背景，在细节上类别导航和竖向滚动条运用地铁站的相关元素来点缀。配合上整体的深色调，充分体现出男性钢炼的视觉氛围。

清新雅致· 轻松活跃
3月促家具家装分会场运用清新雅致的色彩搭配，楼层类别采用个性化的商品组合以banner的形式来体现，更体现了整体页面的轻松活跃性。

团队几个月的紧张奋战，QQ网购安卓版在历经几个迭代之后终于灰度发布了。在不断摸索与尝试和架构的不断挑战与革新后，终于展现出了一定的端倪新貌，体验也在不断优化提升。然而这才只是万里长征刚刚迈出的一小步，这里谨将所积甚少的设计心得总结整理如下：

2011年国内电子商务的硝烟可谓是弥漫浓烈，在移动端也毫不例外。项目启动初期，各类型的电商移动端应用早已充斥市场，这些自然就成了一个个竞品分析的对象，但在众多对比和分析后，纵观国内电商应用，并没有特别完美的范例，区别于娱乐或SNS应用，如何更好地把握好并体现出电商应用的运营感与功能性无疑是我们所面临的最大挑战。总结竞品分析后，我得出了国内电商应用的设计风格，特别是闪屏方式和首页结构有如下特征：

但这些并不是所有，更为关键的还是要融汇移动端的交互特点，特别是针对安卓平台，我们又研究了电子商务较为成熟的韩国市场所占主流的电商应用，例如CJmall、11街、EDGEBOOK和daum、naver旗下的应用等等，基于触屏下的操作特点，并以建立起一个电商平台型应用为目标，由此而制定了侧重功能入口型的九宫格首页结构，并以顺畅化购物流程、减少购买中断的体验标准。

再回到QQ网购Web端的设计，我们同样对整体风格样式进行了研究和剖析，在Web端与移动端一致性上的把控，我们考虑并总结出下列四点，做为设计风格上的方向指引：

综上所做竞品分析的横纵研究，我们明确了以下两个方面做为我们在交互和视觉上的方向指引，并在此基础上展开进一步的具体设计和制作。

QQ网购LOGO是平面化、剪影式的红色购物袋，并配有白色QQ企鹅剪影，简洁明了地传递了腾讯电商的品牌特性，并能够很直观地展现在页面和印刷制品当中。现QQ网购安卓版的图标设计是延续这一主体标识的创意，在原Logo的造型和色彩基础之上，本着做为网购LOGO附属图标的目的，进一步细化和渲染而成，简单增强了光影和透视的细节表现，做为移动平台下QQ网购APP的一个专属ICON。

结合ICON进行闪屏的设计，做为启动画面，出现时间很短，故在突出品牌的基础上，不断做减法，以网购ICON为主体，加强光影效果，配合动画展现，利用有限的几秒钟来突出网购的品质感。

首页的设计优化是最为关键，从最初侧重功能入口为主的九宫格结构（如上）以及后期逐步导向以运营为主的方式，首页的展示方式不断在摸索和尝试中前进，尤其在运营侧接入后，确立营销点配合加强运营为关键。

搜索页面所承载的功能是颇为重要的，特别是有众多关键操作，在从界面视觉表现上来讲，操作是密集和繁多的，逻辑性也甚为复杂，总的来分为两类：

一般情况下会以做减法或入口化的方式减少这些操作的同时展现，但实际对于购物搜索环节来讲，以上两类操作都是很关键的，减少也会增加操作的层级成本；在另一方面，偏理性用户（特别是有选品目标的人群）往往侧重2的搜索操作，而偏感性用户（尤其是女性）却更喜欢在1的操作基础上切换不同的排序和展现方式。因此后面的优化也都是在此基础上进行逻辑分类来却别两类操作，并按此进行布局。

时间仓促，整理凌乱，说到这里，发布前的设计过程总结至此，后面我们要对产品的持续优化和改进还有很长的路要走，在此特别感谢整个团队的给力支持和每一位同学为此而付出的辛勤汗水。目前版本灰度发布还存在诸多的不足，但我们会扎实每一步，不断提高和完善每个细节与体验。在此还请每一位同学多提宝贵意见！^_^

随着移动设备的发展,随着信息碎片化时代的到来,越来越多的用户需要依靠移动终端获取互联网信息；而朋友网社区作为实名用户生活交流的平台，更需要与移动终端紧密结合,在用户零散的时间内提供快捷的交流和分享。

前期调研

1.创新的思路

在接到项目后，我们首先针对linkedin、fotopedia等优秀的APP进行了深入分析，尝试找出移动终端上优秀APP都具有哪些特性，移动创新体验的思路在哪里。最终经过分析后我们提炼了四个主要的方向作为设计的借鉴。

1.1拟物化

A.视觉层：界面设计的现实模拟,如flava为了传达出记录生活的语义，使用了日志本式纹理的封面，linkedin为了表达出个人工作信息使用了工牌，友联系将个人资料与信封较好的结合。

B.行为层：功能和操作行为的现实模拟，如阅读体验中的翻页，运动过程中的加速和缓冲，如指南针的模拟。

1.2 图形化

内容布局更强的流动感，更多图片，更少的文字；界面元素图形化，通过图形元素的合理利用提升界面品质感。通常会使用整张的大图烘托氛围。

1.3 轻功能

操作入口随需要呈现，利用手机特点使用多点手势。

如：pinterest头部导航浏览时自动隐藏，需要时点击或手势激活。如pocket check-up非常好的利用手机的特点将功能与手机特性结合。

1.4 直观操作

所见即所得WYSIWYG，一方面可见内容点击可当前编辑操作，如头像的编辑；另一方面操作内容平面化，如导航与内容使用左右屏部分切换，减少大的转场，提升操作的流畅性。

2.需求点的挖掘

对于SNS平台，关系链如同躯干，UGC动态如同血液，一方面我们需要考虑拓展关系链的切入点和独特优势是什么，一方面我们需要深入挖掘信息的流动和呈现的方式是什么。

对于本期的设计我们本质上还是依托于现有朋友网关系链，拓展方式和方法我们考虑了多种被动推送和主动搜索（可能认识的人、附近的人等）。也思考了不同情景下用户加好友时信息的优先级。

相对来说，对于信息的设计反而给了我们更大的空间。

当大量信息涌入用户界面的时候，哪些是优质的内容，哪些表现更容易让用户捕捉到感兴趣的信息。我们需要对所有信息元素、来源、类型、操作做出分析，确定整体信息呈现中最重要的因素。

首先内容元素中，用户生成内容成本最高的是视频和图片，从阅读信息的对象来说，这两类信息包含的信息量也是最直接和最大的，移动终端随时拍照的体验又加强了这两类信息在产品整体设计中的影响。于是在feed和个人主页乃至界面背景中，我们突出强调了照片的信息。

对于内容来源，原创的吸引力占有着绝对的优势，但是对于一个刚起步的平台，很多feed是web端同步的情况下，我们更多需要考虑的是如何对待转发和分享的内容。工程化的思考方式也许是将所有的动作行为进行呈现，而灵活的做法也许只是略微忽略这些信息，因为用户的主要目标还是阅读，就暂且让用户读的时候不过于区分哪些是分享哪些是原创吧，于是我们也只是将原创和转发/分享做出了一些细微形式上的区别。

手机端的内容类型虽然多数是说说，但PC端同步的日志类优质的内容也需要充足曝光，日志中多图的特征被我们扑捉出来进行差异化的表现，让图片成为用户获取优质内容的切入点。

操作是一个平台活跃性的关键，其中用户操作成本最高内容最为优质的是“评论”，最为轻量但又可以传达出用户态度是“赞”，“转发/分享”理由多数为空的尴尬也让我们将feed中的操作锁定到了“评论”和“赞”上。

中期执行

1.我们的计划

接到任务，离2012只有两周了，召集起所有可参与的设计师，进行年前的战役，一方面交互设计师快速完成研究分析和初期的交互原型，同时视觉设计师快速进行风格的预演。

年前的奋力尝试，为年后开始的打下了坚实的基础，不过闭关后时间还是非常的紧急，上线时间对设计的压力非常的大。大家在追完完美的同时，也在极力压缩着睡眠的时间。

经历了各种讨论、PK和反复，我们的产品终于要上线了，但对于各位追求完美的团队成员来说，即使上线前依然还有拼搏的空间，背景图的抉择、透明度的调整、加载页面的调整，大家依然争取着完美的优化。

2. 我们的设计

2.1 在风格预演中，我们最终选择了使用磨砂玻璃的方案。透明质感的磨砂玻璃可以柔和的过渡背景和内容，在背景更换的时候不会显得过于突兀。在整体顶部通栏的情况下，用户可以更加自如的彰显自己的个性。

2.2 将之前的九宫格改为三屏结构，更有利于信息的排布，把更多复杂的操作隐藏起来，而把核心操作外置。

2.3 个性照片墙，通过更大更直观的图片，展示用户个人信息，让用户在第一时间看到朋友的喜怒哀乐，看到朋友的生活。

2.4在需求讨论阶段我们确定了主操作需要呈现在好友动态列表中，但是如何呈现，我们思索并寻找操作的源头，最后我们找了四叶草上的一滴水，在水滴滑落的瞬间也找到了主操作的来源。而后来主操作动画的不断调整也让我们更确定了那滴水展开时的颤抖和怜惜。

2.5 自定义背景图，让个性有更多可能。不必担心设计师没有时间做多一套又一套的皮肤，用户可以自己做主，自己决定自己的个性。

后期展望

虽然完成了第一期的设计，但第二期、第三期的设计已经进入了规划中，向前看，依然有很多不足和惋惜，也有很多问题的存在，向后看，我们依然还有更多想法等待实现。相信很快大家就可以看到我们的新的变化。

(by 田给力 振伟 柱子)

飞车四周年道具唤醒的活动，从文字的赛道感设计开始延伸，整个页面都是以赛
道为主题的铺设.由于小橘子的风吹秀发的动态，jas给她找了个地铁的全景图，
让整个页面的场景感更强，内容的承载则做了幕布结构.

飞车亚洲盛典，设计灵感是来自飞车SSC的logo设计。从logo的未来感衍生出宇宙 背景的页面设计，主标题延伸了logo的未来感，模拟出合金的质感.

飞车极速梦想活动，给主标题用倾斜和小装饰设计出速度感，主标题和页面主 图结合，让观众看上去像是主标题被小橘子飞掷到画面来一样。版面也做了倾斜 切角处理，和标题的趋势相协调.

英雄联盟的活动，最初是从标题文字“战斗吧”开始发散思考，最终我找了一个 手握锤子的角色，比较能体现“战斗”的感觉。文字是从角色本身的动态衍生的 设计，看上去文字像是被角色用锤子“敲”出来的一样.

西游的活动，依旧从标题出发，选了动态比较强的一版修罗作主视觉，主标题 根据修罗身上的盔甲做了金属质感的较硬朗的设计。左右板块的一虚一实区分了 左右两列不同内容.

DNF天王赛的活动，由于标题是天王争霸，找来两位看上去很“能打”的角色 作为主角，中间是天王赛的logo，这里设计成因为两位主角的激烈打斗引发的电 流从天王赛的logo上下来，劈到标题上的态势。和热血的画面相配合，这里设计 了厚重的金属字体，并加上了具场景感的设计装饰.

炫舞的情人节售卖活动，由于炫舞的游戏角色都是犹如洋娃娃一样的绚丽精致， 特别挑选了一对衣装特别华丽精致的情侣作为主视觉。主标题相应的也做了 强调豪华亮丽的水晶和粉银镶嵌在一起的质感.

DNF“321Fight！”的活动，灯箱在这里是主角，所以稍微削弱了标题的存在感.

飞车的SSC活动，根据给大赛“加油”的概念，设计了油箱以及赛道，用户给 油箱加满油之后就可以让车子冲刺并且在终点领奖.

(design by JAS)

by REX(用研)  & KEY(视觉）