序一黎万强百度体系下有很多产品,不少产品都已有海量用户,要进行设计,如何保持设计的系统性,又如何在各自应用的领域里出彩,是一件巨难的事情。我相信设计师有时会觉得像是要让大象跳舞。所以作为用户、作为设计的同行,我也会好奇地想看看他们团队在做产品、做设计的思考过程。《体验·度》这是一本百度关于用户体验设计的内部案例书,从Web到移动客户端,从大搜索到地图、贴吧之类的常用工具,还有娱乐类的魔图等各种产品,从概念设计、功能设计、原型设计、用户研究和交互与界面设计的过程与细节,他们团队都全盘托出,都是干货内容,而且排版精美。好的设计都要找到原点,对于百度的产品设计和用户体验设计来说,是“简单可依赖”。在“简单可依赖”的原点上,百度用户体验团队强调“设计是一个整体”从产品到设计到运营全环节,来整体思考设计。设计师和设计团队如何升维?设计是一个整体就是一个典型的升维思考。有效的设计就是好的设计!而是否有效则应放到整体的环境中来看。你为用户设计,让目标用户觉得好看好用,这就是有效。我在招聘设计师时强调过设计师要有深度阅读的习惯,这是设计师升维的一个方法,《体验·度》这本书,可以让你系统性地了解百度的设计。作为一名用户体验设计的老兵,我2000年进入金山从事设计,那时,用户体验设计这个行业在国内算是刚刚起步,就像刘超书中所说,一开始大家对这个岗位的需求和认知仅仅是一个画图标的美工,15年时间过去,现在每个公司都在大谈用户体验,都组建了数十人甚至数百人的专业设计团队,行业已经蓬勃如此,这是设计人之幸事。现在市场上用户体验的专业书很多,但由公司一线用户体验团队写的书,还是少之又少。在公司里的项目团队出书,确实会考虑为了品牌推广,但自己在公司繁杂的设计任务之余,腾出时间真刀真枪来写,把经验都共享出来给同行,这依然是非常了不起的事情,这样的精神是“活雷锋”。对于刘超带领的百度用户体验团队,恭喜他们的《体验·度》这本书的顺利出版,也谢谢他们为中国用户体验这个行业的发展添砖加瓦!序二胡晓中国已经大规模进入体验经济时代,企业在日趋激烈的竞争下,需要提出创新理念或方案跳出“传统”的模式,推动产品创新与提升服务品质,跨入更利于可持续发展的新环境。随着技术、战略和文化的进步,各种新产品的交互方式越来越多,人们也越来越重视用户体验。用户体验是一门学问,需要你深入用户的内心,洞察用户真正的需求,善用各种方式与应用技术,全面提升产品的交互、情感、感官品质。在这个重视用户体验的大环境下,如何诠释用户价值、商业价值、社会价值成为了设计师任重道远的任务。与用户站在一起,了解用户文化,挖掘用户使用习惯,分析用户趋势,不断迭代产品设计和满足用户需求,百度用户体验部设计师一直充满热忱地去完成这个任务。通过百度贴吧、百度视频、百度地图、百度魔图、百度阅读等产品,我们看到百度大UE对用户体验的全面规划以及对产品整体设计的用户视角的依据。我们在做体验设计就是不断基于用户需求的本源的一个推导过程,在这个过程中,每个细化过程都基于上一步的清晰目标开展,环环相扣,任何界面的功能和用户体验必须与总体的品牌和消费体验保持高度一致,与用户文化契合。百度大UE做到把设计基于品牌和消费体验、用户文化,将其产品提升到与设计体验相同的水平,最终解决用户的问题,满足用户的文化需求。《体验·度》透过和用户一起做设计的理念,集合百度用户体验设计部门的智慧结晶,展示设计师的设计思路与方法,由粗到细地推导过程案例,分享可以应用在新产品设计、老产品的优化、设计评估等过程中的理论依据,非常值得大家去认真学习。引言刘超2003年我加入某国际手机巨头负责组建中国区的手机图形用户界面(GUI)设计小团队。那时候UI/UED这个概念是非常新的词汇,行业里普遍称呼我们为美工。当时没有任何一家中国公司有清晰的流程,也没有哪所学校开设相关专业,大多数从业者都是广告或工业造型设计中的转型者,大家从零开始见证了这个行业的诞生。转眼间10多年过去,UI/UED行业辉煌成长,大量的精英人士加入这个行业,UI设计也逐渐成为产品的核心竞争力。中国出现了很多世界级别的手机终端设计制造公司,更诞生了多个互联网巨头,无数充满挑战和激情的岗位出现在这个行业,让我想起10年前我们写的一篇文章《UI大时代》,如今,这个时代真的来了。兴奋之余,作为这个行业的最早一批从业者,我们一直在思考工作中遇到的一些问题:“如何提升UI设计师在项目中的话语权”,“为什么一些产品有很精美的图标和炫酷的动画但产品在市场上却没有用户?”,“为什么大多数设计外包公司提供很好的方案但市场数据很差?”,“UI设计师和产品经理永远无法在一个思维维度沟通”等等,也许我们无法给出完美的解答,但我和同事们认为有必要将这些年的工作经验做一个总结,将一些我们亲身经历的项目的设计思路分享出来,让更多的从业者能够从中看到我们走过的弯路和收获,让更多的人知道一个互联网产品的用户体验设计是什么。因为用户体验是一个整体,它包括:产品方向、产品功能定义、用户研究分析、产品交互逻辑、产品图形设计、产品运营等。如何将这些元素结合在一起进行设计是我们做用户体验设计最核心的能力。本书由刘超、王文韬、路蕾、孟雷、王吉芳、朱瑞辉、薛俊强、罗虹荣、董如雪、郭超、赵慧斌、雷丽、郭芳榕、于洋、李静、曲佳、赵春瑾、赵德鹏、李思雨、许光、徐海波、袁青林、刘灯、李金阳组成的编委会共同撰写完成。将百度用户体验部设计的一些产品案例进行分享,现在就让我们通过百度贴吧、百度视频、百度地图、百度魔图、百度阅读等产品案例进入我们产品背后的故事。Contents目录004公司的优势决定产品方向引子:用户体验设计是004产品方向决定产品功能一个整体003006产品功能和UI设计的关系009产品运营一场与简单赛跑的设计比赛——百度地图010014化繁为简的设计026来一次简单高效的设计038路测丈量出来的简单052了解用户,痛定思痛百度社区:我的贴吧我做主058减法与加法的平衡——百度贴吧046068贴吧文化,形象为尊082总结以精致诠释阅读之美086书——功能与美感的融合——百度阅读084100读——移动阅读引发的一场思考116设计关键词118让迭代速度飞起来122庖丁解牛,勾勒用户画像无所不在的视听盛宴124整体构思,产品统一化设计——百度视频112134少即是多,合理分层,事半功倍136点击,还是点击!138情感表达140去掉干扰,沉浸式浏览体验142功能的差异化设计154以娱乐化为需求的定位156娱乐化的产品形态以娱乐化为主导的设计160拟场景化的设计——百度魔图&百度魔拍150166情感化融入170极简的交互流程174设计思路的延伸178小结体验更有品质的生活184产品分析——百度旅游180192产品视觉分析214背后的故事聊解Hao123219适合的设计——Hao123210225设计法则230写在后面的话编者的话232232编者的话引子:用户体验设计是一个整体一个产品的成功需要每个环节的成功配合,任何一个环节的疏忽都有可能导致产品的失败。很多时候我们在各环节中都投入相当专业的人才,这些人才具有足够的经验和专业知识,但大家却不能向一个方向发力,最终导致产品的失败。那我们究竟该如何将产品各环节紧密配合起来呢?首先产品可以简单分成如下几个设计环节:产品方向、产品功能定义、用户研究分析、产品交互逻辑、产品图形设计、产品运营等。在百度用户体验部内部我们对于这些产品设计环节之间的关系是这样理解的:从图中可以看出:(1)各个环节之间的决定和被决定关系:即靠近金字塔底层作为基石的环节,决定着上层环节的工作。我们这么多年的工作积累告诉我们,例如一个产品的交互、视觉设计如果和产品方向有了偏差,这样的设计是很难成功的。(2)各个环节开展工作的顺序:有了第一点的认知,我们就不难理解工作的顺序,应该是自上而下的,下层的工作需要给上层工作指明方向,上层工作需要对下层工作有效地呼应。因此UE设计师的本质工作虽然只是用户研究、产品交互逻辑、产品图形设计、产品运营这几部分,但好的UE设计师必须理解和参与其他部分的设计,这样才能更好地融入产品、了解产品的真正目的和用意、准确判断产品优先级,最终科学地设计出最适合产品的交互和图形设计。下面就为大家庖丁解牛式地分析这些综合影响用户体验的产品设计环节。A.公司的优势决定产品方向每个产品都有80%的功能趋同,只有20%的功能不同。例如每个新闻APP都有新闻推送和用户阅读等同质化基础功能,但真正决定胜负的是另外20%的不同功能,例如有的新闻APP注重评论、有的注重分享、有的注重某一类垂直领域等。所以任何产品的成功都是需要有自己的独特性,例如微信注重隐私、微博注重开放、陌陌注重陌生人等。产品独特性就是产品方向,但产品的方向不是随意制定的,它一方面要建立在广大用户的钢需上,另一方面是由公司自身的优势决定的。如果我们的独特性做到竞争对手的优势上,成功的可能性就很小。例如春节发红包是支付宝先推出,但微信上线后才火起来,因为这个功能要基于腾讯的熟人关系网才能推广。所以产品最核心的产品方向(产品特色)大多是由公司的优势决定,反过来,这个优势越明显你和竞争对手的差距也就越大,这个优势门槛越高(例如技术积累、用户数据积累、资金投入)竞争对手越难超越,这也证明了为什么很多人说腾讯抄袭创业公司导致创业公司破产,因为这些公司把自己的特色做在腾讯的优势上了。因此作为一名合格的UE设计师,在钻研各种设计技法的同时,要深入了解公司的优势,有效地运用各种设计技法来突出自身的核心优势,从而设计出差别于市场其他产品的、有核心竞争力的产品。B.产品方向决定产品功能产品方向决定后,接下来我们需要把产品方向和产品设计中的其他环节紧密衔接。工作的第一步就是产品方向决定产品功能。我们用百度新闻客户端来举例。我们在做新闻客户端的时候都会思考哪个信息是用户每天都想看到的,调研结果是“天气”(图1),既然是天气我们是否要将天气做得更酷炫呢,甚至点击后显示一周的天气呢,如果你问用户,答案是肯定的(图2);既然是如此绚丽的UI,我们是不是要进行微博分享呢?用户依然认为是的(图3);那么既然分享我们是否要增加查看评论功能呢(图4)?这时候你会发现我们讨论的点已经和新闻客户端完全无关了。这些功能已经一点一点地偏离到和产品方向相反的方向了。所以我们在设定产品功能的时候最难的不是增加功能,而是在功能设计时保证功能和产品方向一致,敢于砍掉不相关或者相关性差的功能,强化和产品方向相关性最高的功能。在我们设计产品功能时的一个常用方法是根据功能与产品方向的契合程度来设计功能,这一点也影响着后面我们马上要讲到的:有了功能设计时,应该用怎样的交互、视觉设计方法来完成?C.产品功能和UI设计的关系我们在做交互设计初稿的时候经常会画很多概念稿用于讨论,我们也经常纠结一些设计方案到底哪个更好,有时候我们做UER测试,有时候是领导拍脑袋。到底哪个是对的呢,我们可以看如下几个交互框架,他们哪个是正确的?作为设计师,我们可以根据很多设计原则(例如交互流程、切换效率、入口视觉强度等多个维度)指出这些交互框架的差异,而这些差异也就孕育了这几个互框架各自的特点、优劣势。换言之如果我们脱离产品方向和功能的验证,下面的三个方向都是对的也都是错的,因为每个方案都是针对不同需求的解决方案,侧边栏适用于导航项多,且不常切换的功能导航,Tab导航适用于经常需要切换的功能导航,宫格的设计适用于每个宫格功能相对独立的工具化产品导航,抛开产品方向和功能单纯谈交互框架是没有意义的。另外一个在百度内部沉淀下来的经典设计就是在各个产品中对于搜索功能的设计。搜索是百度的强项,在许多的百度系产品中都有搜索相关功能。为了使这个百度核心功能为用户便捷使用,并延续用户的使用习惯,这些搜索功能的设计有很多体验一致的地方,比如搜索结果的相关交互、搜索建议的展示设计、搜索历史的出现逻辑等等。(关键词“hi”在不同百度产品的搜索结果如下图所示。)但是细心的用户以及专业的设计师从中又可以看到一些不同的地方,这些不同点并不是为了不同而不同的设计,也不