来自腾讯网的一手设计经验，以及真实案例的幕后设计故事TP393.092/RJ
编辑推荐总编荐书，经典与你同行
——“你懂不懂技术？！”
——“你懂不懂审美？！”
——“你需求改够了没有？！”
——“你们的工资都还要不要了？！”
……
一阵暴风骤雨后，大家彼此撕得对方衣衫褴褛歪鼻子斜眼儿，然后一人抱住一只桌脚都委屈得不得了：
为什么！别人家的网站越改版越“时尚时尚*时尚”，我们改来改去又发现还不如不改！
为什么！别人家的M端比网页还好玩，我们绞尽脑汁把功能好不容易全搬到移动端上来了，然后真的把产品挤成了一坨……
为什么！别人家做的H5可以刮刮擦擦炫酷闪瞎让用户玩不够，我们做的却让用户大骂：“浪费我流量！这点破玩意儿你单写篇文章不就行了么！”
不如来看看腾讯是怎么做的。《腾讯网UED体验设计之旅》这本近400页的书里，囊括了腾讯网UED团队在过去的十年里用户体验设计的一手经验，比如：
（1）腾讯网首页的布局、排版相比其他门户有何玄机？资讯内容的段落长度以几行为宜？段落区隔多大才能让读者不感到疲劳？这些经验在腾讯网10年来的数次迭代中又是如何体现的？
（2）在“移动优先”的设计原则下，腾讯设计团队如何将网页功能适配到移动端，并保持了产品间一致的用户体验？
（3）当H5页面成为了现在移动媒体产品*重要的形态之一，腾讯UED设计团队是如何设计H5专题，并将其与腾讯的其他产品结合实现“病毒式”传播的？例如，锋菲复合后，腾讯UED设计 团队曾根据腾讯娱乐的需求迅速反应，以“关系树”逻辑设计出的“来翻天后牌子”的明星关系网H5专题在微信朋友圈疯传。
在书中，这些案例以设计师的实际输出过程的角度，配以大量工作图片的方式得以还原，包括了用户研究、交互设计、视觉设计、前端技术以及跨屏设计、迭代设计、信息设计、设计管理等设计的各个环节。
如果你觉得文字加图片的还原还不够生动，或者你还有更多更细节的问题想要直接问腾讯的设计团队，那么别犹豫，腾讯网UED团队的身影活跃于UI中国、IXDC、UPA、产品显示全部信息内容推荐本书是腾讯网UED的十年精华输出，涵盖了丰富的案例、详细的视觉呈现，以及来自腾讯网的一手经验，通过还原一系列真实案例的幕后设计故事，从用户研究、创意剖析、绘制方法、项目管理等实体案例出发，带领读者经历一场体验设计之旅。
全书核心内容涉及网媒用户分析与研究方法、门户网站体验设计剖析、H5技术在移动端的应用、手绘技巧、改版迭代方法、文字及信息图形化设计、媒体产品的交互设计、大项目设计管理方法等。
这是一本“干货”型读物，内容权威而真诚，案例具体而真实，图文并茂、印制精美。作者简介任婕：腾讯网UED设计总监，腾讯网UED团队负责人，亲历腾讯网十年成长历程，见证了网络媒体发展的历史，拥有丰富的产品设计经验和用户体验设计团队管理经验，是业界资深的互联网产品体验设计专家。
腾讯网UED团队（QQ.COM User Experience Design)致力于提升腾讯网UX体验，坚持腾讯互联网产品“以用户为中心”的设计原则，主要负责腾讯网门户产品腾讯新闻、迷你首页、腾讯微博、腾讯视频、新闻百科信息图表及奥运会、世界杯、世博会、NBA官网等在业界影响深远的众多互联网产品。本着“在用户身边，为用户设计”的团队第一准则，用专业的精神、细微的改善，每天给用户带来感动和惊喜。目录别急！让设计飞一会儿
01 我们的用户 3
我们了解用户吗 4
常用的用户研究方法 6
腾讯网用户研究全接触 17
设计目标与设计评估方法 34
02 下一代腾讯网为你而来 45
总要有人做出改变 46
门户网站的个性化时代 47
腾讯网为你而变 51
2015腾讯网新迷你首页诞生记 55
出发！开始你的UED之旅显示全部信息前言推荐语
用户体验是时下设计师和团队的关注热点，良好的用户体验是让用户爱上产品的关键。本书的可贵之处在于，腾讯网UED团队将其设计案例毫无保留地分享给读者，内容全面而具体，是腾讯网UED团队十年实战经验的积累和沉淀。
鲁晓波 清华大学美术学院院长
这是一本内容详实且不失可读性的体验设计佳作。通过还原一系列真实案例的幕后设计故事，作者带我们共同经历了一段风光旖旎且时有惊喜的设计旅程。掩卷之余，心情愉快，收获良多，衷心祝愿每位读者都能从中收获思想、感悟与愉悦！
黄心渊 中国传媒大学动画与数字艺术学院院长
显示全部信息媒体评论腾讯网成立12年以来，UED团队也伴随着它的发展而不断成长，很欣喜看到我们的UED团队能在互联网飞速变化的环境中做出快速、敏捷的反应，并不断地探索尝试，积累了很多用户体验设计、网页视觉设计方面的经验和方法。很高兴他们能以开放的心态，把这些经验和方法分享出来。书中有大量详实的案例，希望能对大家有所启发和帮助。
?——马化腾（腾讯创始人、首席执行官）
好的交互和设计，是互联网媒体产品不可言传的气质。
——陈菊红（腾讯网络媒体总编辑）
用户体验是时下设计师和团队的关注热点，良好的用户体验是让用户爱上产品的关键。本书的可贵之处在于，腾讯网UED团队将其设计案例毫无保留地分享给读者，内容全面而具体，是腾讯网UED团队十年实战经验的积累和沉淀。
——鲁晓波（清华大学美术学院院长）显示全部信息在线试读部分章节灵活的版式造就视觉盛宴
在信息化社会的浪潮中，快节奏的生活让人们开始学会选择性关注。如何在纷繁的信息中引导用户？有没有科学的方法？这是当今设计师所面临的问题。界面版式的构成是信息传播的桥梁，也是视觉传达的重要手段。科学的编排技术，以及实用性与艺术性的合理运用，才能成就更快、更准确的信息传递。时尚频道作为腾讯网中更强调视觉呈现的频道，在运营的过程中通常有非常鲜明的案例。本节我们就从这些案例中剖析一些方式，来感受版面设计中的科学性和趣味性。
图片的排列组合
距离感
“距离”在心理上表示亲近的程度，亲近度减弱则表示变远，亲近度增强则表示变近。在排版设计中，同样也可以用距离的远近表现各部分内容之间的亲密程度。例如，通过调整各部分内容的间距，来表现各部分内容之间的关联性。但需要注意的是，过多不同的距离设定反而会违背区分其关联性的初衷。
接下来我们来看一下时装周秀场专题界面秀场图的展示部分。由于每场大秀为相同的层级关系，所以其图片排布采用了相同的距离来展现。利用距离进行明确的组别划分，将一类的图片进行整合，同时也缓解了图片繁多的压迫感。同时每场秀的权重是平等的，所以运用了相同尺寸的图片平铺设计，利用了组合图片的反复效果，带给用户信息充足而又凝练的印象。
而街拍的部分则运用大小不一的图片排布，通过主次关系的区分，突出独家看点的内容，同时图片的间距相同，代表它们仍然是从属于一个大环境下的平级内容，亲密度是相同的。
这里也运用了数学上的两个理论，对称与等比。
对称构图有左右对称与上下对称等形式。对称的构图方式能够给用户带来一种整齐安定的印象。在基本的对称形式上加入一些微妙的变化，也会给用户带来惊喜，就如同此案例在对称的基础上进行了垂直翻转的处理。在设计此版块的前期，需求方提出此版块的内容为自动调取，均为正方图。因此我们运用了等比缩放的图片处理，减少了后期维护的工作成本，调取一张图片后，简单的＆#106avascript代码即可实现将其运用在任何位置，并保证其达到要求的呈现质量。同时，通过图片大小的不同，明确了图片之间的主次关系。为避免尺寸类型过多带来的杂乱感，我们只设置了大、中、小三个层级的尺寸，并调整了其平衡关系。
由此可以推导更多的呈现形式，把这种等比递进展现的方式运用在单品抠图的排布方式上也会有不错的效果，其对称和缩放的原理是一致的。如同下面两个例子，虽然呈现的形式为抠图的单品，但其尺寸的层级实则仅为两个层级，同时版式的排布也采用了对称的形式，因此还是有规律可循的。
而接下来的两个例子则更加讨巧，图片尺寸虽然只有一个层级，但却因为菱形的分割显得灵动独特。
节奏感
节奏是指在自然、社会和人的活动中，与韵律结伴而行的有规律的突变。如音乐快慢激烈缓柔、美术韵律、文学作品铺垫高潮结尾等。在版式的处理上，节奏也是一个重要的元素。
通过重复有规律的形式，可以让用户感受到某种节奏。就如同下面的例子，图片的排布始终遵循着“上下上下”的摆放原则，灵动且有规律可循。
同时，由于这个例子运用的图片形状为矩形，因此我们又要引申一个数学的规则：黄金比例。黄金比例是一个定义为（ -1）/2的无理数，它被运用的层面相当广阔，例如数学、物理、建筑、美术甚至音乐。这个古老的数学方法所拥有的魔力在实际中屡屡发挥着我们意想不到的作用。按照1∶1.618的黄金比例构成的矩形，也被认为是最理想的矩形比例。一种广为流传的说法是，比黄金比例更细长的矩形是一种端正的、女性的图形；与之相反，随着它逐渐趋向于正方形，这个矩形就会变得更加男性化。这作为一种设计参考，还是值得借鉴和尝试的。
接着来说节奏的应用。除了规则的形式重复以外，如果在一系列节奏中加入某些不同的要素，那么构图就会发生变化，这个与其他部分不同的要素就会成为页面中的重点内容，构图也会变得更加生动灵活。
当然还有一种更为随性的版式节奏，即场景化的排布方式。如同美国20世纪50年代的老海报拼贴，或者散落在桌面的明信片排布，显得更为随意自然。
同时，用颜色来体现节奏则突破了单纯排版的想法，以更加直观的手段带给用户明确的感知，并掌握其中的规则。正如接下来的例子，虽然呈现的内容信息量不小，但6种颜色明确了其中的节奏规律，将内容进行了整合。
引导性
说到引导性，比图片排版更加直观的是时间轴的运用。突出每个节点，结合之前提到过的距离和节奏的方法，呈现更加新颖跃动的排版形式。
图片与文字的相辅相成
在排版的过程中，图片与文本的组合方式也是重要的问题。必须要有意识地避免将图片的美观与文字的易读性相互消解，两者之间的配合非常重要。作为说明图片内容的文字，它与它所说明的部位的对应关系必须是明确的。一方面要避免图片与其文字说明的距离过远，另一方面还应该尽量将某图片的文字说明与容易引起误解的图片拉开距离。
当然，如果所有内容都被过度统一化地进行了处理，则有时会起到相反的作用。在图片的排版过程中，整齐中加入变化是一个不错的选择。
另外，不要用图片将文字切断，这样会损坏文字的可读性。如果在整段的文字中插入图片，那么阅读的视线就会被打断，用户往往不知应该从什么地方继续下去。而对于图片中插入的文字，选用容易辨识的颜色是很重要的。通常最好的选择是白色或黑色。如果选用与图片同色系的颜色，就会不易辨识。同时，应该尽量将文字放置在不影响图片效果的位置上。
文字的组合呈现
文字的目的是使内容能够被读懂。在文字的排版中，易读性是需要重点考虑的问题。为了明确表现出不同内容之间的差别，最基本的处理方式就是改变文字的字号或者颜色。对于需要重点展示的文字，可进行单独的视觉化处理。例如，图片下方的两行文字为正文采访内容的重点导读，不仅变化了颜色，还对其进行了斜体处理，让用户在阅读之前就能预估一下正文是不是自己感兴趣的内容，从而决定是否阅读全文。
问答形式以icon引领，再次遵循之前提到的节奏法则，用户可以直观地了解到要阅读文章的时间成本，层级关系也一目了然。而引号的运用，也达到了突出重点内容的效果，且增强了整体氛围的代入感。
图解的传达
即便是传递相同的信息，单纯的文字表现方式与夹杂了视觉要素的表现方式也会带给用户不同的印象。如果通过单纯的文字表现无法让读者迅速理解信息，则可以通过视觉化的处理使内容变得易于把握。那些用文字方式表现时显得冗长的说明，一旦换成视觉化的表现方式就会马上清晰明了。图解起到了凝缩信息内容、增加图像比重的作用。
将数据分别用不同的颜色以量化形式呈现，能够便于读者直观地理解其中的内容。图中对复杂的内容进行了合理整合，按照大类别逐个进行了分析。并且运用了圆饼图、长条图、曲线图的变形，来实现其视觉传达的目的。对于通过颜色区分各部分的应用，需采用对比鲜明、同色系或对比色系的处理，以颜色的明暗来区分其中的差别。
对黑眼圈的专题描述，如果单纯用文字描述，则用户将很难理解氛围和场景。用熊猫拟人化体现，在增加了趣味性的同时，还让用户在轻松愉快的氛围中了解了所表述的内容。
“DIOR迷醉东京”案例分析：一场樱花飞舞的视觉盛宴
该项目的最初需求是要有日本气息的DIOR潮流感。承载的内容为迪奥精神-2015东京大秀的独家专访，以及现场图片推送，其中包括访谈、点评、图片信息展示的功能。
了解了情境之后，如何用科学的方法进行设计呢？首先就是主题的突出，由于秀场位于日本东京，所以日式的元素必不可少。由此进行发散，提炼出关键词樱花、折扇、禅意。因此封面气氛以大面积樱花铺底营造，主题仅对文字进行排列，以衬线体的英文与中文组合，放大所要重点突出的内容“迷醉东京”及“DIOR”，并在保证英文识别度的基础上，对其进行切割，运用距离与节奏的方法，体现主题的主次关系。线描樱花的处理则是基于禅意对于圆满的追求，运用点、线、面的基本组合原理，搭建视觉中心的完整性。两侧日文“DIOR”的点缀，在细节处强调日式 东方的气息，不抢镜也加分。引导进度条以折扇的形状作为引导，运用之前谈到的时间轴的引导方法，保证用户在浏览的过程中掌握阅读的进度，对自己的浏览有心理预估。
内部内页更多承载的是信息的输出，因此应避免大面积的氛围强调。为保证基调性的统一，我们以禅意的麻布质感铺底，两侧仅放出樱花盛放枝头的延伸，与封面氛围呼应。关于内容信息如何良好输出，这里以专访页面和后台细节为例简单分析一下。首先看专访页面，由于界面中需承载着专访人物、主打妆容作品、好友寄语及专访对话四大内容，因此如何处理它们之间的逻辑关系则是首要问题。首先，抓住核心主体，即为专访人物Peter，而所有的内容承载都以他为中心进行展开，因此在视觉比重上他的图片也被着重强调，其主打的妆容作品围绕在周围但小于主体。这里运用了不同的形状，从而使间隔看上去更大。这里抛弃了方图的处理方式而运用了圆图的处理方式，在信息量大的排版中，巧妙营造了透气效果。好友寄语部分以便签变形的形式体现，区别于主体的功能性，作为辅助性功能点缀。最后则是专访对话内容的呈现，由于权重较高，同样留有较大的布局处理。问答的形式运用了之前提到过的文字排版法则，用不同的颜色区分不同层级的内容，营造阅读的节奏感。后台细节页面同样运用了对称与等比的法则。但在此对称的设计中，运用了不规则的处理方式，以发散的形式呈现图片的排版，营造若有若无的动感。同样，为方便需求方的自动调取，图片仍采取等比的处理方式，降低维护成本。图片的尺寸仅设置了大、中、小三个层级，调解了其平衡关系的同时又有规律可循。
对于整体界面的呈现，设计师进行了有目的性的留白，迎合禅意的主旨。留白的目的是减轻用户浏览的压迫感，赋予界面构成以变化感，让其得到更多的扩展空间，从而达到宁静的氛围营造效果。背景点与线的搭配，在功能上对相似内容进行了分类统一，同时建立界面版式的平衡感。页面的主体内容在1000px之内，保证了宽窄屏用户的无损浏览，但对于大屏用户的浏览体验，就会显得过于寡淡，所以在页面1000px以外，对日文“DIOR”进行了拆分排版，力求该用户人群浏览的视觉美感。
同时，此项目也配以HTML5的响应式设计，保证了移动端用户的浏览需求，其设计氛围与PC端视觉统一，但对复杂元素进行了拆分与删减，更加明确信息的主体，利用移动端自身的优势增加了满屏大图的展示，在强调视觉效果的同时也便于用户细致浏览。通篇界面樱花花瓣缓缓飞舞，所营造的气息自然扑面而来。
总结
总结本小节的内容可以看到，一切的版面设计都是基于内容的存在，体现内容的主题思想，用视觉化的手段增强读者的注意力与理解力，以科学的方式实现层级递进的效果。大视觉、小细节，一个都不能少。
