del

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/19 | 精通产品体验设计：获得润物细无声的力量.md

@@ -0,0 +1,155 @@
+<audio id="audio" title="19 |  精通产品体验设计：获得润物细无声的力量" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/83/a9/8363d7b528df8469e5be413d335090a9.mp3"></audio>
+
+你好，我是相辉。
+
+上个模块，我们串讲了场景服务设计的定义与主要工具，你现在应该了解了场景服务设计的基本搭建方法。
+
+**而如果说场景服务体验是用户与产品发生协作的立体感受总和，那么互联网产品体验就是场景服务的数字部分。**
+
+为什么这么说呢？因为互联网产品的体验设计是人们在线下使用产品的数字映射，我们要通过互联网产品的体验搭建，让人们从现实生活中延伸出更高效的体验连接，从而达到信息、服务、决策的高效同步。
+
+所以在这个模块当中，我想带你探讨的，就是互联网产品体验设计的原理与实操方法。
+
+那么，作为模块的第一讲，今天我会带你一起讨论产品体验设计的整体概念，让你能从搭建架构的角度，对互联网产品体验的设计策略有一个整体的感知。
+
+<img src="https://static001.geekbang.org/resource/image/cc/f3/ccb5453bfa6b043516a49694c9a858f3.jpg" alt="">
+
+## 平衡商业价值与用户价值是做好产品体验设计的第一步
+
+早在2005年，我在Yahoo做GUI的时候，和美国总部的UX设计主管Chris交流，他的一句话令我印象深刻：“**界面设计就是为解决问题而生，而最好的功能界面体验是让用户意识不到它的存在。**”
+
+这句话我当时听起来，会感觉有点和设计的直觉相悖。因为那个时候，中国的产品对体验设计的看法还是要炫、亮眼，让人有点击的欲望，等等，所有的GUI设计师都在埋头研究各种质感的Icon和界面，看谁画得更真实。而对于交互设计却完全不重视，只是由产品经理把功能堆上去，流程跑通就OK了。所以我那个时候只是记下了这句话，并没有真正地理解它。
+
+但是，让今天的我再去思考这句话，我就慢慢地明白其中的含义了。我的理解是它可以划分成几个角度来看：
+
+1. **明确刚需**，界面交互体验设计是为了解决场景下的用户需求。
+1. **准确传递**，交互设计应当正确地表达业务本身的功能、氛围，并确保信息的正确传递。
+1. **快捷效率**，尽量减少不必要的干扰信息，让用户行使完产品价值即可离开。
+1. **舒适易用**，保证使用的整体过程平顺、愉悦、易学习，且让用户下意识即可操作。
+1. **明确价值**，时刻搞明白产品要带给用户什么价值。
+
+以上这五个要素也成为了我做产品体验设计时的指导原则。
+
+所以你看，相比于场景服务体验，对于互联网产品的体验设计，更像是一种润物细无声地还原业务的赋能设计，因为它的目标就是保证用户在完成任务时会更加顺滑且高效。
+
+不过，要想真正做到这五点其实并不容易，因为现在大多数产品，在资本裹挟和市场竞争下，很难真正做到以产品体验为绝对核心的设计。也就是说，上面这五个要素，在实际的设计流程当中或多或少地都要被改变。比如，很多产品为了让用户能够更长时间地留在自己的App里，并不是根据实际的用户价值去设计产品，从而产生了很多非必要的功能和利用人性弱点的功能，这其实都不是正确的。
+
+这就意味着，**我们在设计产品体验时，既要深刻洞察用户需求，还要能在商业增长的要求下做到用户价值与商业价值之间的平衡。**
+
+这其实是产品体验设计里的一个关键思考起点，即我们要如何为体验和商业去搭建一个产品交互的模型。所以，在这个模块当中，我们还会一起探讨一下从最开始到最终，互联网产品的交互体验是如何交付的。
+
+那下面，我就来给你介绍下产品体验设计的几个关键步骤。如果你正要开始设计一个互联网产品的体验流程，你不妨去按照这个步骤来进行产品的体验设计。
+
+<img src="https://static001.geekbang.org/resource/image/00/c5/006de59b39f5233736d3d2f1bd6450c5.jpg" alt="">
+
+## 从商业规律和用户场景出发
+
+就像我在课程[第1讲](https://time.geekbang.org/column/article/280322)中所说的，任何产品与服务，都是从用户场景的商业规律里生长而来的。所以，做好产品体验设计，我们首先要从商业规律和用户场景出发，去构建产品体验的基础策略和模型。
+
+这也是在课程的前两个模块，我在开始讲具体的体验设计方法之前，先花了12讲的时间，给你讲解了商业的基本考量规律和对用户的理解方式的原因，因为这是我们做任何体验设计的基础。
+
+打一个比方，我们产品的发心就像种子，应该种进用户场景的土壤里，而商业规律就像天气的变化规律，我们只有遵循它，种子才能破土。于是，种子、土壤、环境三者的共同作用，就是我们现在生长出的多种多样的商业森林。
+
+前几天，有个靠产品研发和渠道起家的汽车行业供应商来问我新的2C增长产品该如何做。背景是他们为厂商做汽车周边已经很多年了，今年也开始陆续有C端车主用户找到他们。他们想直接为C端提供服务，但对于B端的业务该怎么结合却不太清楚（现在完全混在一起，C、B不分）。他们想知道，应该设计一个什么样的App来实现这个目标，这个App的架构应该是什么样子的，以及应该做一个品牌还是两个品牌？
+
+后来我们探讨的过程是这样的：
+
+- B端汽车周边的市场增长模式现状如何，以及这块市场的前景如何？
+- C端汽车周边的增长现状以及市场预判的前景如何？
+- 这两块市场的核心增长撬动是什么，以及企业目前的能力是否满足这个撬动点？
+- B端和C端的用户产品场景和增长模式有什么共性吗？有什么不同吗？
+- 用户产品场景中的ToB和ToC是不是一波人？还是几群人？以及哪个市场是我们1年、3年、5年等不同发展阶段中最需要做的人群？
+- 如果我们确定了这群人，那么给他们讲什么场景服务故事是最重要的？以及要投什么规模的资源，给App做场景服务设计和确定增长模式？
+
+最后，我们得出了如下几个关键答案。
+
+**第一，ToB市场要重新梳理。**通过市场和用户分析，我们得出的结论是未来的增长点在于消费电动汽车的高品质人群，所以公司整体的业务要转向高端业务，并且要服务好从油车转向电动车的产品布局，简化B端客户在App上的下单流程，并建立企业信用体系，让交易的信任成本更低。
+
+**第二，做好用户需求分析。**因为通过研究近十年的汽车和周边产品发展的脉络，我们判断出了用户对汽车周边产品的品质需求变高，而且热点车型仍然会有很多，并且整个行业都在去中间化和产品服务化，所以该公司打算单独设计一款汽车周边的DTC的服务+周边的产品矩阵，从汽车香水开始切入市场，做按季度订阅的车型+人群的定制型香水服务。另外，还会单独做一个小程序来快速启动，让车主可以按照自己的喜好和车型，生成不同的香水配置方案，形成订阅机制。
+
+**第三，针对ToB和ToC不同人群，重新设计各自的产品体验流程及风格。**包括重新梳理两个品牌的定位、语言、设计、性格、传播等策略，重新设计界面的风格以及传播品牌的物料风格，重新设计互联网产品体验设计的流程，迭代服务。
+
+其实，这只是一个很简单的汽车周边产品体验设计案例。不过，看似简单的一个ToB的交易产品和ToC的订阅产品，背后却是对市场和场景人群的基本判断。
+
+所以，互联网产品的体验设计不光是要始于对用户需求的了解，还要有对市场的判断，以及要知道这个市场是如何与用户场景进行链接的、我们要采用什么样的产品交付和商业增长策略，这样我们最终才会知道如何制定产品体验设计的策略以及品牌的话语体系。
+
+## 结合场景服务的功能、交互与界面
+
+那么，从商业规律和用户场景策略出发，现在我们就能得出产品的体验设计策略和架构了。也是在这个时候，才是我们开始思考在用户场景下，产品中应该有什么样的功能、使用流程和交互界面的设计。
+
+基于第三个模块，我给你讲解了场景服务设计的流程，你现在应该知道体验地图和数据结合的场景服务设计方法。而**对于互联网产品来说，你应当把场景服务的功能、交互与界面设计看成是用户整体服务流程中的一部分，也就是在[构建体验地图](https://time.geekbang.org/column/article/293498)的过程中，寻找数字触点的那一根线**。我们要考虑如何润物细无声地把数字触点无缝设计在用户服务场景里去。
+
+> 
+内容提示：在现阶段的用户服务体验当中，线上线下的结合已经成为了主流。以打车为例，用户在打车的过程里，通过App操作的部分就属于数字触点。
+
+
+那么通常在这个时候，我们会进行三个关键动作。
+
+**第一，基于用户场景和商业发展的产品功能设计。**
+
+在这部分工作中，我们需要根据商业发展的路径，像是搭建积木一样，按照步骤将产品的功能一步一步搭建起来。
+
+我们要知道，没有什么产品的功能设计是可以一步到位的，它们都是一步一步迭代出来的。所以我们要按照自己对商业规律和用户场景的理解，先做一个基础的功能设计，然后再根据用户的场景反馈不断调整。所以这里体现的**关键功力，就是选择第一个体验增长引擎的能力**。
+
+还是拿前面汽车周边的那个例子来说明一下，其互联网产品最核心的功能设计，就是要把面向C端的汽车香水订阅功能做到极致。
+
+这里有三个关键：
+
+- 让用户感觉这个汽车香水订阅品牌懂TA，在选择信息的过程中，TA会充分感觉到品牌给予的尊重。
+- 有足够多的用户场景可以涵盖，让目标用户群感觉到自己的个性化需求都能够被满足。
+- 用户订阅到的产品确实在体验上值得，并且有惊喜感，有话题感，有品牌特性，值得传播给别人。
+
+所以围绕汽车香水订阅体验的功能设计，就是这个ToC产品的起点，之后才是社群、电商、内容、直播等等产品功能的交付。这个路径的选择和产品交付的能力，才是其真正的产品体验设计的获得感所在。
+
+**第二，基于产品功能和用户场景的交互流程设计。**
+
+当我们确认了产品功能发展路径之后，就需要根据用户的使用流程进行交互流程的设计，以此构建产品体验系统。其中，要考虑到产品功能的输入、输出、通知、信息交付等各个功能的应用，以及产品与用户交互的使用体验和流程。
+
+依然以前面讲到的订阅型汽车周边产品为例，它的核心使用流程分别是：
+
+- 用户选择香水信息的流程；
+- 用户订阅付款以及选择服务品类的流程；
+- 电商配送流程和货物状态流程。
+
+那么围绕这三个使用流程，我们就要搭建其相应的设计系统。在后面的章节中，我将会重点给你介绍。
+
+**第三，基于用户场景、功能使用和交互流程的界面设计。**
+
+有了功能、有了交互以后，我们就要开始进行界面的设计了。
+
+现在有一种声音会认为，界面设计好像越来越不重要，重要的是内容本身，其实这是大错特错的。界面设计有三种至关重要的价值，我作为一个15年的老GUI，给你强调一下：
+
+- 界面设计时，要把各类信息模块进行合并同类项，用尽量少的形式，通过组合，自由表达出不同的产品形态，提升用户认知的效率。
+- 界面设计时，要利用视觉风格设计，最快速地让用户感受到产品的情绪、气氛、风格，识别出产品的特点，进入产品创造的故事场景当中。
+- 界面设计时，要和工程紧密贴近，提升产品迭代的效率，通过模块化的设计，让界面既统一又高效。
+
+那么到这里，我们就从商业规律和用户场景的分析，再到服务体验地图的绘制，得到了产品功能迭代的路径，以及产品交互流程和界面设计的模型，并最终得到了实际产品的体验设计的方法模型。
+
+所以说，如果一个界面设计师想做好的产品，真的要学习非常多的知识和进行更多的综合判断。所以设计不是个青春饭，设计是需要多年打磨不断提升自己的工作。
+
+## 课程小结
+
+好了，我来总结一下本节课的要点：
+
+- 我们要明确互联网产品体验设计的五个关键要点，分别是明确刚需、准确传递、快捷效率、舒适易用、明确价值。
+- 我们要了解互联网产品体验设计的两步关键思考方法：商业规律和用户场景、功能设计和交互界面。
+
+其实写到这里，我还是挺感慨的。无论我现在操盘过多么复杂的商业模型，我仍然会认为自己是一个用户体验界面设计师，是一个十五年的老GUI，因为这是我互联网职业生涯的开始。
+
+但今天提到的所有内容，却也是我从一个设计师成长为一个商业体验咨询人的思考，是我在产品体验设计的困惑中逐渐求解的过程；是我从设计一个产品体验开始，不断跟随着疑问，拓宽眼界的过程。到今天，我终于敢说，嗯，我现在做产品体验决策，比以前应该是好了那么一点点了，因为我知道了各种问题作用的机制，从而就能发现设计决策的根源应该是什么。
+
+所以，这段话我也想写给每个PM、运营、体验设计师以及做市场的同学，在互联网和传统行业不断结合的今天，我们仍然还有很多知识可以学习，仍然可以不断成长成完全不同的人才。互联网这个行业不是青春饭，不断思考和精进，仍然是我们的法宝与使命。
+
+山本耀司说过：“我不相信有什么有才华的年轻设计师，因为每一个设计师都是千锤百炼出来的，都是在不断地错误中，逐渐成熟找到自我。”
+
+同样，我们面对挑战也不应气馁，更不应把自己关进理念的笼子，而是要不断挑战那些疑问的边界，去做每一代人的“年轻人”。
+
+好了，在接下来的五讲当中呢，我还将和你分享产品体验设计的具体方法与落地经验，我们到时候见。
+
+<img src="https://static001.geekbang.org/resource/image/41/17/4153149b45946d67a4d1ff64017c2117.jpg" alt="">
+
+## 一课一思
+
+你能否分析一下，你所在公司的商业发展战略和产品发展战略？我相信你在拿到这两样东西后，在日常的工作中就会产生全新的视角来进行体验设计的思考和决策。
+
+欢迎在留言区分享你对产品体验设计的见解，也非常欢迎你把今天的内容分享给更多的朋友。感谢你的阅读，我们下一讲再见。

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/20 | 依靠设计系统，提升体验品质.md

@@ -0,0 +1,162 @@
+<audio id="audio" title="20 |  依靠设计系统，提升体验品质" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/3d/09/3d2c87074f80abe9d860b92976333309.mp3"></audio>
+
+你好，我是相辉。
+
+上一节课，我们从全局性的视角出发，一起了解了互联网产品体验设计的基本思考流程。那么从今天开始，我们就来学习搭建产品体验系统的具体方法。
+
+是的，**我们要把设计体验理解为搭建系统**。因为毋庸置疑的是，当我们想实现一个简单易用的产品时，我们首先会统一产品的主题，梳理出顺畅的使用流程、符合逻辑的交互设计与恰到好处的功能安排，这些都是一个产品形成好的体验的前提。
+
+其次，我们知道，一个产品并不是一个人做出来的，而是由诸多团队的诸多PM以及设计人员共同搭建的，那么团队中人与人的协作就成了体验设计的关键。
+
+第三，设计都是需要不断迭代的，所以我们不能容许一个产品迭代得没有章法，使得每个界面都按照自己的意愿生长，而是要梳理出一个迭代的整体逻辑。
+
+**所以，我们需要构建体验设计的系统，让产品的风格统一，让团队协作的效率变高，让产品稳健迭代。**
+
+这就好像我们旁观iPhone从第一代发展到今天，虽然其UI的视觉风格已经有了几次重大的迭代，但iPhone核心的操作方式、系统关键界面的布局和主交互流程，以及核心控件的组库，包括各类系统自带的App，都还是保持了一以贯之的灵魂和规则。这个体验设计的系统在产品层面，就像是一个简单但是蕴含了设计思想的种子，逐渐随着技术的进步、市场的扩展、需求的延伸逐渐长大。
+
+我清晰地记得，在我2007年买入第一个iPhone的时候，一个圆圆的HomeKey给了我足够的安全感；横向滑动的解锁，让我体验到了电容触屏的触感惊喜；主屏幕的icon整齐地排列在HomeScreen上，每点击一个就进入一个App场景；而每个App虽然功能各不相同，但又都是通过一套控件搭建实现的，通过点击、滑动为主的交互，让我能实现各种操作。
+
+而当我们今天使用最新版的iPhone时，虽然其交互功能变得更丰富，系统能力变得更强，各类视觉变得更加时尚，但其实整体的产品交互设计的灵魂仍然没有变，仍然是那个熟悉的触摸手感，仍然是清晰排列的HomeScreen，仍然是点击一个icon进入一个App场景，仍然是以点击和滑动为主的交互方式。我总在惊叹苹果在2007年时，对产品体验设计的架构就已经如此地精确、清晰且具有扩展性了。
+
+我想你看完这个例子，也一定会有这个感受。优秀的体验设计架构几乎是做好产品体验设计的关键，一旦一套关键的体验设计架构搭建完成，未来很多年的产品进化，就是一个在其基础上逐渐丰富和延展的过程。
+
+而那些不断改变风格和交互架构的产品，多半就是用户场景、商业逻辑和产品架构没想清楚，找不到那条从小到大逐渐养成的体验设计系统是什么，这就是巨大的商业成本。
+
+那现在，我们就来聊聊如何搭建一个产品体验设计系统，一起来看看它应该包含哪几个元素、它的工作流程是什么样子的。
+
+总体来说，其搭建过程可以分成五个步骤：
+
+- 核心场景的功能映射；
+- 体验定义；
+- 关键任务流程的设计；
+- 通用功能、流程模块设计；
+- 视觉组件库搭建与规则设立。
+
+<img src="https://static001.geekbang.org/resource/image/63/2d/63c43d60efeff130bbddd8ec3c14242d.jpg" alt="">
+
+在完成这一系列的工作后，我们就会拥有一个基本的产品体验系统，基于这个系统，我们再去迭代产品，才会有结构化能力的成长。
+
+下面我就以蔚来的App为例子，来做一个具体的分析。
+
+## 1.核心场景的功能映射
+
+搭建系统的第一步就是要找到核心场景的功能映射。
+
+产品核心功能场景的架构关系到我们要怎么理解商业与用户。当我们观察一个产品的架构时，就能看出这家公司是怎么理解他们的商业、流量以及用户场景的。
+
+就好像淘宝App的首页，在最近的更新中去掉了顶部的banner和各类活动的入口，直接把可横滑的N个金刚位置的入口提到了上面，分别代表了用户打开淘宝的N个高频分支的刚需场景，并按照重要度排序。
+
+<img src="https://static001.geekbang.org/resource/image/92/91/92f8fcd15aa27095c13abc5150655291.jpg" alt="">
+
+同样，淘宝App还用相同的视觉模块把Feeds流与聚划算、直播入口融合在一起，形成了一个完整的阅读Feeds流，这就说明了淘宝的千人千面的流量产品分发模式，是他们效率最高的模式，淘宝用算法的分发代替了人工的活动组织。
+
+而除了首页的页面功能划分，底部的几个Tab分别是微淘、消息、购物车和我的淘宝，这也就是淘宝面对大多数用户最重要的几个场景。
+
+所以，产品核心功能场景的架构是至关重要的，因为它反映了产品的设计团队此刻对用户的认知和了解。
+
+通常我在给客户设计App界面的时候，更多讨论的是用户场景与流量分发。我会思考，当用户在TA需要的生活场景里打开App的时候，什么样的产品架构设计，可以跟用户更好地配合起来，使其能进入使用状态。
+
+那么，我们接下来就一起看看，蔚来汽车的Nio App的体验设计系统是如何搭建的。
+
+Nio  App底部的五个Tab分别是：发现、朋友、爱车、惊喜、我的。所以，这五个场景就分别对应了蔚来的社区内容和咨询、朋友沟通与服务交流、汽车控制与服务选择、周边电商与礼物以及我的信息管理。
+
+<img src="https://static001.geekbang.org/resource/image/05/08/054e2383874aa6b40bf78b7563bf1208.jpg" alt="">
+
+这样我们就能看出，蔚来最看重的不仅仅是汽车的使用和服务，还很看重车主社区的交流、生活方式的推荐与活动交付，所以它会把包含社群和资讯的“发现”一栏放在进入Nio App后默认的位置。
+
+而与朋友间的交流，在蔚来的App架构中是第二重要的，无论是和蔚来Fellow的交流，还是和其它车主的交流，或者是参加各种活动，都是Nio App的重要任务。
+
+“爱车”一栏排在了Tab正中间的位置，说明了它仍然是这个App必要的功能。在这里，围绕蔚来汽车的所有状态和控制，以及服务的选择和预约，都是整个App最刚需的功能。
+
+而“惊喜”一栏主要包含的是电商模块，这是围绕汽车生活的重要组成部分，它构建了蔚来汽车车主生活的周边产品的交付和兑现。
+
+最后，在“我的”Tab模块，基本就是蔚来用户的个人中心，里面有订单状态、蔚来值、社区贡献等等用户信息。
+
+所以通过蔚来App的架构设计，你可以看到，一个企业要如何理解用户和商业，就需要如何来做互联网产品核心场景的功能架构。
+
+那么，同样是汽车品类的App设计，反观特斯拉的App，则是以汽车状态的操控为主，充分反映了其强大的产品能力和设计自信。在其产品的App上，就能看出和蔚来模式完全不同。
+
+<img src="https://static001.geekbang.org/resource/image/6b/0b/6b58ac02c6e4d05c56c7c239cabc1c0b.jpg" alt="">
+
+所以你看，任何App产品的每一个页面的架构，都是应该基于商业场景思考的，而不是人云亦云或者是只考虑美观或个人喜好的。所以我们搭建产品体验设计系统的第一步，就是要根据用户场景和商业服务的特性，来架构页面中核心场景的功能体验。
+
+## 2.体验的定义
+
+在这个模块，我们要回答的核心问题就是，我们要通过App给用户传递怎样的体验。这关系到App产品的设计风格、内容图片的选取以及产品功能的规划，甚至是界面中动画的节奏等等。
+
+以蔚来的App为例，它的核心目标人群是35~40岁之间、有家且事业小成的男性，那么能打动这一类用户群的关键体验就是有社群交流的、有生活品质的、有无忧服务的、有未来体验的。
+
+但这还不够，我们需要把这些关键词拆成具体的体验设计动作：
+
+- **功能性**：什么样的界面功能会让这些人体会到蔚来的这四种特性？比如，是鼓励沟通交流体现社区性？强化科技感，让用户感受未来体验？
+- **流程性**：通过体验设计的流程优化来表达这四种特性，比如设计十分方便的“一键加电”服务。
+- **内容性**：即指整个App的内容图片、文案风格的审定规则等等。比如，App的电商模块商品内容一定要显示出品质感，采用那些能让人感受到高质量的质感和选择的商品元素。
+- **设计性**：即指App整体的图形风格以及交互动画与细节的体现。比如icon的绘制曲线风格要体现出细腻的品质，每张汽车图片的修饰都要有速度感和沉稳感等。
+
+当然这个体验的定义可以狭义，也可以广义，狭义只会定义到功能，而广义则会定义到活动、营销和品牌，这个完全要看团队的配合度。有一些职能断裂的团队，设计和产品的体验定义都是分割的，这是不可取的。
+
+## 3.关键任务流程设计
+
+搭建一个产品体验设计系统，需要完成场景任务的核心循环。而关键任务流程的设计，就是在为产品设计循环的流程。我们需要定义每个关键流程的目标、体验地图和资源配置。
+
+- **目标**：即每个关键流程的达成目标是什么，以及达成目标的评判标准。
+- **体验地图**：也就是我在[第15讲](https://time.geekbang.org/column/article/293498)中提到的，每一个关键任务流程的设计，都要用体验地图来表达。
+- **资源配置**：我们需要定义每一个关键流程需要配置的关键资源是什么，以此来估算成本（体验设计永远不要忘记成本控制和落地执行）和设计后台的配合流程。
+
+这里，你需要掌握以上设计关键任务流程的三个要点，在第21讲当中，我还会给你重点介绍流程交互设计的方法。
+
+## 4.通用功能、流程模块设计
+
+每个产品都会有通用的功能模块，一般来说都是一些共用的基础功能，这样的模块主要包括：通知模块、交流模块、支付模块、用户信息模块、信用模块、设置模块等等。这些模块都是在一个App中，可能会被各种任务调取。
+
+因此我们需要在设计体验系统时，就将其规划好，为它们进行统一的功能交付，并像设计程序那样，为其设计各种各样的接口，和各个关键任务流程进行对接。
+
+我就拿通知模块来说，一个App内的消息通知往往是多种多样的。比如说，蔚来App的通知模式就有很多种。
+
+- **系统通知**：即App本身的各种更新和改变状态的通知。
+- **用车通知**：即与汽车状态和服务相关的通知。
+- **资讯通知**：即各类汽车相关的资讯和社区内容的通知。
+- **对话通知**：即各类社区朋友交流和Fellow交流的内容。
+- **电商通知**：即与电商相关的内容通知。
+
+这五种通知模式都有其各自的应用场景，以及需要用户处理的紧急程度和复杂程度，因此我们需要将其归类，并按照各自不同的特性进行功能模块、交互界面的设计。
+
+比如根据紧急程度，我们可以选择通知的强度大小，是弹出Push、是用红色数字提醒、还是用红点等等，这都需要具体的设计。最终，当我们穷举整个App的通知场景和用户需求后，就会得到一个通知模块的模型设计，这就是一个通知模块的功能交互设计的体系。
+
+其实，你只要观察各个App的通知设计，你就能看出来这个产品的设计团队是不是专业的。如果一个日活不小的App，整体的通知体系还异常地混乱，那你就能知道，这个产品团队手活不太行。
+
+## 5.视觉组件库搭建与规则设立
+
+当我们确定了关键任务流程以及功能模块的划分以后，在开始设计页面之前，我们还要先对整体的页面布局进行规划。当然，这个规划的细致程度，要看你的产品或商业当前的发展状态，也就是你需要结合课程[第1讲](https://time.geekbang.org/column/article/280322)提到的内容来进行判断。
+
+在进行整体的页面布局规划时，我们一定要先思考一个问题，就是当一个10人左右的设计团队去配合共同设计一个项目的时候，**随着功能的迭代更新，我们如何能保证视觉上的一以贯之，且不会降低迭代的工程效率？**
+
+答案就是需要**搭建起视觉组件库和建立各类的迭代规则**。
+
+一个视觉组件库，会包含风格的描述、各类可用的组件，以及每个设计师能够创新的空间边界。而迭代的规则，能够帮助大型团队达成高效协作的目的。在该模块的第四讲中，我还会给你具体介绍视觉设计的创意方法。
+
+另外，我经常会听到有人说，App图形设计现在不重要了，因为都扁平化了，都工程组件化了，那可就大错特错了。要知道，一个团队想招一个靠谱且有创新能力的GUI总监，是非常难的。因为这个职位不仅要了解工程，还要懂得艺术，更需要懂得商业和用户，这也许是我们每个设计师都需要为之而努力的。
+
+而就App设计本身来说，并不是说扁平化了就不用画图、就可以随便做了， 而是我们要更加理解扁平化以后，平面设计的规则要如何应用，对信息的处理要如何增强阅读感，要如何归纳符号，要如何在有限的手段里塑造出打动用户的氛围，这都是设计中需要精细的工作。
+
+## 课程小结
+
+今天的课程，我们了解到了在开始设计产品体验之前，要先为产品体验搭建设计系统。这个系统是为了让我们能够在设计产品体验的时候，更加统一化、工程化、利于协作，且不容易出现问题。把设计理解为系统，我们才能够稳定地创造出靠谱的产品。
+
+那么，在搭建一个体验设计系统时，你需要掌握以下五个关键部分：
+
+1. **核心场景的功能映射。**
+1. **体验定义。**
+1. **关键任务流程的设计。**
+1. **通用功能、流程模块设计。**
+1. **视觉组件库搭建与规则设立。**
+
+本讲的内容，来自于我多年设计产品和App的经验。即使我们是在做设计这样充满创意和艺术性的工作，在开始之前，我们仍然是要基于对商业和用户的理解，然后结构化地给出一套思考方案，而不能认为仅仅是一两个令人心动的灵感，就可以造就好的产品体验设计。能结合结构化的思考，并在合适的时候打开枷锁，天马行空地想象一下，然后再回归到结构里来，才是一个靠谱的产品体验设计的方法。
+
+<img src="https://static001.geekbang.org/resource/image/c7/fe/c73cd95f1974c0e6de92d2f11dd453fe.jpg" alt="">
+
+## 一课一思
+
+基于今天对搭建体验设计系统的方法的学习，你能否重新梳理一下你手中的产品，哪里可以有新的提升？
+
+欢迎在留言区分享你的思考或设计经历，也非常欢迎你把今天的内容分享给更多的朋友。感谢阅读，我们下一讲再见。

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/21 | 七步判断互联网产品交互设计质量.md

@@ -0,0 +1,155 @@
+<audio id="audio" title="21 |  七步判断互联网产品交互设计质量" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/59/dc/591d45852a7620cbb7c3137243ca02dc.mp3"></audio>
+
+你好，我是相辉。
+
+上一节课，我给你介绍了基本的产品体验设计系统的构建方法，其中，我带你一起了解了关键任务流程的设计步骤，并给你留了一个思考空间，那就是要如何具体落地这个方法。
+
+所以，今天我们就接着来讨论一下，打造好的互联网产品交互设计流程的关键步骤都有哪些。
+
+交互设计从出现至今已经有将近40年的历史，最早的交互设计概念是由IDEO公司的一位创始人比尔·摩格理吉（Bill Moggridge）在1984年的一次设计会议上提出的，他一开始给它命名为“软面（Soft Face）”，后来更名为了交互设计。现在，交互设计一般指的是定义、设计人造系统行为的设计领域，主要侧重在交互模式的设计。其设计领域主要包含人工制成的物品，比如软件、移动设备、人造环境、服务、可佩带设备等等。
+
+而现在交互设计的定义会更加广泛，因为产品的种类更多了，所以你其实会发现，交互设计的概念是比较广义的，涉及的范畴比较大，可以聊的方法论也有很多，要展开介绍的话至少可以写一本十万字的书。
+
+但今天这节课，我们只说移动互联网的交互设计，因为它的应用场景最广泛，和服务设计的配合也更紧密，并且其设计方法是最综合的，也是大家最常用的。
+
+在现今大厂中的交互设计，有明显两个趋势，一个是和产品结合，由产品经理完成交互工作；另一个趋势是与图形设计师结合，变成界面体验设计师。无论是哪个，都无对错，关键是要看如何提高协作效率，以及要看是否能交付架构交互设计和交互体验细节的设计。
+
+如果在激烈的产品竞争的环境下，一个产品没有好的交互流程，那几乎就是一种自杀的行为。想想看，运营团队好不容易搞来了流量和用户，结果在交互上一塌糊涂，用户与产品互动起来非常困难，那真的是一种商业和用户的悲剧。
+
+所以今天我想给你分享的，并不是书本上那些正确的理论，而是我自己总结出的一套简单地判断交互设计质量的方法。掌握了这套方法，你就会知道如何用实际落地的办法把坑避掉，交付出好的产品交互设计。另外，按照这套方法进行交互质量的核查，也会更容易帮你找到考量一个交互设计好坏的思维方式。
+
+那么，什么是一个好的产品交互设计呢？根据我多年的设计经验，我往往会结合七个方针来做综合判断：用户场景还原、信息交付清晰、使用流程顺畅、界面模块统一、体验细节动人、穷尽极端方案、符合自然习惯。
+
+为了让你更清晰地理解和掌握这七个方针，接下来，我会用星巴克App中的种种交互设计，来给你一一分析说明。
+
+## 第一步，用户场景还原
+
+用户场景还原就是指，无论是产品交互的流程架构还是页面架构，都要依据用户场景来构建和设计。所以这个部分有些像上一讲中提到的核心场景的功能映射，它要根据用户场景和商业服务的特性，来架构页面中核心场景的功能体验。所以这里我们不再重复赘述，直接来看看星巴克的App是如何通过还原用户的使用场景，来构造交互设计流程的。
+
+首先，我们可以看到在这个App中，主要分为了五个关键模块：
+
+- **首页**：包括推广位和积分换券、到店取咖啡和专星送以及Feeds流的各类推广活动。
+- **福利购**：即各类优惠卡的充值购买和用户星礼卡的充值。
+- **付款二维码**：即用户付款的二维码入口和充值入口。
+- **星消息**：即星巴克的各种推送信息。
+- **我的**：即用户的登记和用户的各类信息管理、帮助入口。
+
+<img src="https://static001.geekbang.org/resource/image/bc/8f/bc831f16df2ee772fe3b0ea7d22a4d8f.jpg" alt="">
+
+基于以上的交互模块架构，可以看出星巴克App的定位仍然是以打折消费和外卖到店取为核心，并专门设计了“福利购”来强化各类组合打折促销方式。底部Tab中间的付款二维码入口也非常地清晰，说明这是一个线下交易的高频场景，并且是星巴克希望突出的交互设计关键。
+
+但从星巴克资讯和消息推送的内容安排来看，这个App几乎没有任何内容和社群的发展属性，说明这两个场景并不是星巴克生意的核心逻辑。但我相信，等打折促销的核心场景需求发展到了平台期，星巴克一定会在内容和社群服务上尝试更多的可能性，比如因为场景的拓展而重新设计App的内容和交流模块。
+
+那么，总体来看，现在这个App的交互架构，基本上就是围绕打折充值、付款、外卖、到店取四个核心用户场景来进行设计的。所以，交互设计的开始，就是要考虑清楚用户场景和流量分发架构要如何搭建。当我们在设计自己产品的交互架构和流程的时候，都需要思考用户的产品使用场景，而不是把功能和信息一股脑地塞进App里。
+
+## 第二步，信息交付清晰
+
+作为交互设计师，我们时刻要记得用户的注意力是非常稀缺的，特别是在如今的互联网时代，信息流丰富，碎片信息也非常散碎，所以在做交互设计时，信息在一个页面上交付的清晰度、阅读体验的节奏感，都要符合人的阅读场景和环境。
+
+以星巴克App的首页信息交互设计为例。你可以看到，他们采用了突出的视觉风格来强调到店取“啡快”和外卖“专星送”的功能，而底部的二维码处在最强调和突出的视觉层级上。其他内容类的信息，包含活动和各类打折积分，都处在第二个层级，因此我们可以清晰地了解到其首页上都在强调什么信息。
+
+<img src="https://static001.geekbang.org/resource/image/29/52/295f4be7e1c093e40f4e0f7e096b8952.jpg" alt="">
+
+但它在交互设计上也有个硬伤，那就是在首页的头部位置混杂了太多不同的信息，比如说头部的Banner运营下面，就是和用户相关的积累消费信息，再往下又是滚动消息，然后又是用户可以点击的功能，再往下又是促销的Feeds，从上到下，功能、内容并没有很好的信息排布逻辑，并且在视觉上也没有做很好的区隔，所以会让用户的阅读过程很混乱。要是我去Reveiw这个设计，我肯定接受不了。因为诸多不同种类的信息、不同种类的操作、不同种类的优先级，像斑马条纹一样混在一起，会让用户的学习成本非常高。
+
+这里我说个别的例子。打车软件一般来说，基本上出行流程，都会设计得非常清晰，一个大大的Button放在底部。另外，虽然其首页上会包含很多的信息，比如说地图、地理位置、司机状态提示、排队信息、内容等等，但它们会被各类的微动画，以及会通过图形设计的文字大小、强弱来把信息分隔开。
+
+所以说，我们在设计交互界面时，永远要考虑，用户看到这个界面的第一眼会感受到什么，用户是否有很高的兴趣去点击他想要阅读的内容或按钮。
+
+而且，我们要认真地思考每个页面的交互操作是否流畅、信息的交付是否清晰。具体来说，你可以按照用户的使用场景、任务路径规划、关键信息提炼、视觉和操作动线，来进行信息交付的清晰设计。
+
+很多时候，交互设计的新手会生怕用户找不到他们想要的东西，结果就毫无逻辑地用各种信息把界面给填满，这其实是一种设计不自信的体现。真正的好设计，并不是同时给用户很多内容，而是会按照用户的使用场景，智能化、个性化、场景化地给到用户想要的，把在当前的这个场景下不重要的信息藏起来，或者等到用户场景符合交付清晰的条件时，再露出来。
+
+## 第三步，使用流程顺畅
+
+什么才叫做用户的使用流程顺畅呢？很简单，你可以想想，当你在进行微信聊天操作的时候，是不是几乎不怎么用思考和学习，下意识地就默认大脑网络可以完成体验操作的流程（而且也真的做到了），并能够完全沉浸在服务和内容里。
+
+也就是说，要达到使用流程顺畅的目的，我们需要紧密贴合用户心智与操作习惯进行设计。但这其实是很难的，因为一个完善的使用流程是需要经过一步步的积累才能够达成的。所以一个好的交互设计，需要提供一个相对完整的交互逻辑架构。用户也会随着逐渐学习这个流程，来帮助这个流程变得更好。
+
+我们仍然以星巴克的App为例，用户在下单交易这样一个基本流程里，就会发现诸多不顺畅的情况。比如在下单前的页面当中，如果我们不勾选各种选项堆儿里的“已阅协议”，那么下单按钮就是灰色的。而这个过程几乎没有任何提示，所以我们就会以为星巴克App停止了服务。
+
+<img src="https://static001.geekbang.org/resource/image/e7/25/e79bfe0f54bf5fdc04c6c19a91b35825.jpg" alt="">
+
+可是，就这么一个小小的问题，可能就会造成巨大的单量损失。如果是一个日活上亿的App，这一个交互问题，就足矣造成一次海量的用户投诉，造成大量交易失败。
+
+所以，往往关键的交互流程设计，需要我们经过初步设计、小流量测试、定性定量研究、更新设计、再测试.……往复循环5~10次以上，才能拿到一个相对靠谱的流程模型。而在这个过程里，我们还要测试各类的用户，因为小白用户和玩家用户学习能力是不同的，这个我们在[第12讲](https://time.geekbang.org/column/article/290118)中也提到过，你可以去复习一下。
+
+总而言之，要想达成使用流程顺畅的交互设计，是一个需要耐心地使其逐渐达成完美状态的过程，它也决定了用户完成任务的效率。
+
+## 第四步，界面模块统一
+
+这一步的目的就是，让产品界面完全模块化，并让具有相同功能的组件形式在设计上做到完全一致，以此让用户没有学习门槛。
+
+这一步也几乎是交互设计功力的最关键的体现。也就是通过统一界面模块，我们可以把一个产品相同的信息架构的内容，都归纳在一种组件里。
+
+星巴克App的交互设计，在我肉眼可见的梳理当中，其一级和二级的界面上，就有八九种ListView的表达形式。但在这八九种List的表达信息中，有几种实际上是内容相近、信息架构也相近的，所以其实可以合并同类项，比如所有的图文广告类就可以合并为一种，而所有文字信息的通知，也可以做成相同的组件。这样既可以降低App开发成本、用户学习成本、产品设计成本，同时也能让界面看上去更加得简单清爽。
+
+做交互设计最怕的就是，明明是相同的信息架构和使用场景，设计师还要做出好几种交互样式出来，那样用户和研发都会疯掉。而最厉害的设计师，就好像乐高的设计师一样，可以只用几种简单的模块，就组合出各种高效的页面。
+
+当你面对一个App的界面时，你去看看它的信息架构和交互组件模块化设计的成熟度，就能知道这个设计师是不是足够厉害。比如说，你看iOS，它涵盖了成千上万的App应用以及各类的用户场景，但Apple的产品和交互设计就生生地把那么多的操作归纳成了几十个控件而已，我们随意地就可以组合出不同领域的App。
+
+所以花哨的交互并不是好的设计，我们要看到那些千千万万的信息背后，交互设计师的梳理是怎么样的。
+
+## 第五步，体验细节动人
+
+在交互体验的关键细节上，如果能有精巧的、令人心动的小体验，让用户记忆深刻、感受良好，这会是一个产品非常打动人的地方。好的交互设计总是能在大的框架上像一个英俊的美男子，而在一些细节上又能宛若细腻的少女。
+
+我们还是来看看星巴克的App是怎么做的。
+
+在你点开付款二维码的那一刻，你的手机屏幕会自动变得最亮，让扫码一下就会变得非常容易；而当你每一次购物成功，就会有一个小动画，落在你积累星星的位置上，这会让你非常具有成就感；当你在首页将信息流向上推的时候，到店取“啡快”和外卖专送“专星送”会自动吸顶，让你在浏览内容的同时，也可以随时下单。
+
+<img src="https://static001.geekbang.org/resource/image/06/2e/0668c0fdbac16a71126629a7175fa22e.gif" alt="">
+
+这些体贴的小细节，都是我在这个App里看到的交互设计上的小巧思。
+
+一个好设计，总是会有一些魔鬼的细节，能在每一个恰到好处的地方打动用户，并让用户体会到产品的细腻。
+
+## 第六步，穷尽极端方案
+
+所谓的极端方案就是指，用户在产品里的各种极端的操作方式，都不会有使用的死胡同、操作失败、流程错误等问题，我们都能给出相应的解决方案。
+
+一个产品好的交互系统，必然是健壮的。这个健壮可以理解为，它不会那么容易出现问题，不会那么容易让用户用到崩溃，或者在死胡同里走出不来。所以，好的交互必然是穷尽各种极端的用户使用方法，也能够不出错误，这才是OK的。
+
+过去，我们在系统地设计产品交互流程的时候，会写各种各样的Monkey Testing（猴子测试），依靠程序胡乱地使用App来测试交互。而在交互设计的环节，也会加入一个极端情况的特殊设计，比如因字符过多、名字过长、页面过长导致出现无法收起键盘等等问题，我们都会用一个可用性的极端List去逐个梳理。但每个产品都是不同的，所以你可以给你的产品梳理一个极端交互问题List，来穷尽极端的场景。
+
+说回到星巴克的App，我花了20分钟反复地使用了他们各类的交互流程，还没有发现重大的UI 极端情况的Bug，算是及格啦。
+
+## 第七步，符合自然习惯
+
+符合自然习惯的意思就是说，所有的交互设计要符合人基本的常识、习惯和预期，不去做不必要的创新，不去做反人性的设计。
+
+设计师仿佛总被要求去创新，但我们要时刻警醒自己，要学会去分辨什么是好创新、什么是坏创新。那么反映在交互上，就是要做顺应人性的设计，而不是刻意为创新而创新。
+
+举个例子，现在大家对Touch手机的手势已经很习惯了，单击屏幕是Click。但如果我们在交互上，非要改成双击才是进入下一页，然后说这个是创新，就不是非常合适。所以，我们要让所有的交互设计都能符合自然的习惯，符合用户的基本常识与预期，而不是为了不同而去反人性。
+
+比如星巴克的首页混乱布局，就是有些反人性的。
+
+好，以上就是我判断一个产品交互设计流程好坏的七个关键的方针了，它基本涵盖了一个交互流程中的各项关键指标。通过这七个关键的交互要求，我们就可以大概率地把交互的核心问题完全规避掉，这也是每次我在Review交互设计的时候，心中默念的七个方针维度。经过这七个维度的洗礼，基本上我们就会得到一个良好的交互产品了。
+
+<img src="https://static001.geekbang.org/resource/image/a8/11/a8752c1c1ecfac3d94de08e3a5ca0411.jpg" alt="">
+
+## 课程小结
+
+好，我们来总结一下今天所讲的内容。
+
+那么，要如何判断一个互联网产品的交互设计质量呢？你可以遵循以下七个关键步骤来行动：
+
+1. **用户场景还原**：无论是流程架构还是页面架构，我们都要依据用户场景来进行设计和搭建。
+1. **信息交付清晰**：我们时刻都要记得用户的注意力是非常稀缺的，所以信息在一个页面上交付的清晰度，阅读体验的节奏感都要符合人性的特征。
+1. **使用流程顺畅**：要想达成使用流程顺畅的交互设计，是一个需要耐心地使其逐渐达成完美状态的过程，它也决定了用户完成任务的效率。
+1. **界面模块统一**：产品界面完全的模块化，并且相同功能的组件形式设计完全一致，让用户没有学习门槛，让研发更容易模块化，效率更高。
+1. **体验细节动人**：在交互体验的关键的细节上，有精巧令人心动的小体验，让用户记忆深刻感受良好。
+1. **穷尽极端方案**：用户在产品里的各种极端的操作方式都不会有使用死胡同、操作失败、流程错误等问题，均有解决方案。
+1. **符合自然习惯**：即所有的交互设计符合人类基本的常识、习惯和预期，在使用的过程里不做不必要的创新，不做反人性的设计。
+
+这就是我根据以往的设计工作和经验，通过浓缩大量的交互设计的原则和方法，所得出来的超级简化+实用版。交互设计是一个非常庞大的知识体系，因为它的决策并不是仅仅根据所谓交互设计本身的知识来的，它的决策来源于综合的场景、用户、商业、功能需求判断。如果你能一步步地按照这七个关键步骤总结下来，就可以保证你的交互没有大问题。
+
+那么，如何能设计非常棒的产品？这就需要多年经验的打磨，在诸多维度的思考和设计过程中取得决策的平衡，让交互设计可以在它该有的位置上展现出正确的样子。
+
+<img src="https://static001.geekbang.org/resource/image/b1/f5/b1b9c9453fe2a7d22379d94082dd99f5.jpg" alt="">
+
+## 一课一思
+
+你可否用今天我所讲的交互设计的方法，来评判一下你所在产品的交互设计的质量，并提出改进的方案？
+
+欢迎在留言区分享你的答案，也欢迎你把今天的内容分享给更多正在探索交互设计流程的朋友，我们一起探讨和进步。感谢阅读，我们下一讲再见。

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/22 | 如何为产品设计优雅的界面？.md

@@ -0,0 +1,169 @@
+<audio id="audio" title="22 | 如何为产品设计优雅的界面？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/6e/79/6e6c24cebc30f067a415b799faf23779.mp3"></audio>
+
+你好，我是相辉。
+
+前面我们从商业的阶段开始，讲到了用户需求与企业之间的密切联系，也一起探讨了场景服务设计和交互设计的具体落地方法。今天这一讲，我们终于说到了界面设计。
+
+实际上，我就是做GUI设计师出身的。我也一直认为，设计就是用各类美妙的图形和界面给用户带来视觉体验上的快感。
+
+和交互设计一样，界面设计也不是通过短短一节课的时间就能全部讲完的，它是一个庞杂的知识体系。不过别着急，在今天的课程中，我会给你分享一套我自己总结的关于界面设计的简单方法，来帮助你快速理解界面设计的定义以及掌握判断界面设计好坏的手段。
+
+如果你是一名设计师，那么掌握了我今天分享的这套设计逻辑，你就可以通过全局性的视角来考量自己的界面设计，提升它的质量。而如果你是一名产品、运营或者研发，那么基于今天的方法，你也可以学着去看懂界面设计，学会考量界面设计的质量，并和视觉设计师沟通你的需求和建议。
+
+## 什么是界面设计？
+
+好，那么首先，我们来简单地理解下界面设计的概念。
+
+界面设计，我们通常会简称为**GUI设计**（Graphical User Interface，图形用户接口）。一般来说，GUI就是屏幕产品的视觉体验和互动操作部分，它是一种结合了计算机科学、美学、心理学、行为学，以及各个商业领域需求分析的人机系统工程。
+
+举个例子。星巴克App中，用户使用操作的图形界面部分，就是一个产品的GUI。
+
+<img src="https://static001.geekbang.org/resource/image/bc/8f/bc831f16df2ee772fe3b0ea7d22a4d8f.jpg" alt="">
+
+当然，和交互设计一样，GUI设计同样要基于商业分析和用户场景需求分析，并要考量工程实现的效率和难度。但它会更加偏向视觉的表达和艺术的创作，这跟交互设计偏向产品的理性与信息架构是不同的。
+
+那么，我们在实际的设计工作中，要如何判断一个GUI设计质量的好坏呢？
+
+通常我会根据以下这七个关键步骤来推进产品中的GUI设计：
+
+- **实现商业目标；**
+- **明确场景人群；**
+- **传递准确信息；**
+- **表达正确氛围；**
+- **风格一致统一；**
+- **工程实现高效；**
+- **界面美观优雅。**
+
+这里你可能会发现，其中有几个步骤和产品交互设计的关键步骤是重合的，比如说，实现商业目标就对应了交互设计中的商业实现、明确场景人群对应了“用户场景还原”、传递准确信息对应了“信息交付清晰”。这是因为，在互联网产品的体验设计当中，产品 - 交互 - 视觉这三个方面都是紧密配合的状态。
+
+<img src="https://static001.geekbang.org/resource/image/c1/c3/c16647df6536ef4851c21eb8c3a1cec3.jpg" alt="">
+
+所以，接下来我们就以设计一个移动互联网产品的界面流程为主线，来重点说说GUI设计相较于产品和交互设计的不同之处，一起看看对于GUI设计，其独特的思考方式是怎么样的。
+
+### 一、表达正确氛围
+
+当我们拿到了产品的交互设计以后，就要开始思考，我们要给用户传递什么样的产品信息，之后就进入到了产品体验设计中最独特的部分，也就是GUI设计了。
+
+GUI设计的一个重要的任务，就是要帮助产品表达正确的氛围和情绪。
+
+我们要知道，**产品体验设计中所传达给用户的情绪的影响和感官的信息传递，是最重要的**。也就是用户对于产品第一眼的感受是什么，这几乎会影响到用户对产品特性80%的判断。
+
+比如，当我们打开Airbnb的时候，一个旅行风格的界面就会映入眼帘，让我们产生旅行的欲望；打开美团或者饿了么的时候，各类美食就会出现在首屏的Feeds中，让我们知道这里有我们想要的美味；打开iPhone的默认工具“指南针”的时候，就会出现一个模拟真实指南针的界面，让我们毫无使用障碍。
+
+所以，一个正确的氛围，是产品和用户高效沟通的起点。在当今这个产品越来越丰富的时代，一个产品的正确氛围，是越来越重要的，因为它几乎可以瞬间将用户吸引住。
+
+那么，要想达到这个目标，我们需要怎么做呢？通常我会采取三个关键的动作：
+
+- **明确目标用户画像与生活场景**
+
+GUI设计师往往要和产品经理一起讨论目标用户的画像和生活场景，因为不同画像的用户对于图形的审美和理解是不同的，进而所产生的生活场景需求也不一样。另外，不同生活场景的界面设计风格也会有所不同，就像我在[第17讲](https://time.geekbang.org/column/article/294411)介绍服务生活主张的设计时所说的，我们的界面设计要表达出生活场景的主题，要根据用户的人设来进行设计。
+
+- **梳理关键词与图形印象**
+
+第二步，就是要梳理出产品、场景、服务的关键词和印象是什么。因为只有基于关键印象，我们才能找到正确的设计风格。
+
+比如，滴滴快车的关键词是快捷、安全、经济；但专车的关键词就是品质、专业、服务、高级。再比如，转转二手的关键词是性价比、公平、惊喜感，而京东的是快捷、效率、品类全、标准化、省钱等等。
+
+根据梳理出的这些关键词，我们就可以开始思考，什么样的事物和画面可以表达出这样的感觉？比如针对快捷这个关键词，也许是在说我们的界面设计要充满速度感，那么什么事物会有速度感？那可能是上篮的运动员，或者飞驰的列车，再或者是奔跑的猎豹等等。
+
+当然，我们还需要结合着所做产品的主题来进行思考。
+
+比如说，针对专车的界面设计，我们要思考，专车的专业是什么？是礼貌、是省时、是确定性、是优质的服务？那么它能用什么图形表达？比如一丝不苟的衬衫图形？在颜色的设计上，我们是采用黑色+金色来体现出专车的尊贵感吗？等等。
+
+这样，基于以上的思考逻辑，我们就得到了专车界面设计的关键词和图形印象。
+
+- **提取风格特性**
+
+那么，当我们梳理出了很多针对产品主题的关键印象图片以后，就可以提取这种风格的特性，从而开始指导界面设计。
+
+还是刚才的例子，针对专车的品质和服务的特性，我们就可以提取出，专业的服装、青年司机、黑金的色彩组合、能够让人联想起尊贵感的字体（如细仿宋、Times、罗马等），甚至是有仪式感的信件和合同的排版方式，等等。
+
+这样，我们就会拿到一系列针对专车界面设计的版式、颜色、形体、字体、元素选择的指导。紧接着我们就可以根据产品的交互设计，开始进行视觉的设计和表达。
+
+### 二、风格一致统一
+
+和交互设计一样，产品的GUI设计，一定要风格一致且统一，这样才能让用户沉浸到产品的氛围中，同时也可以降低用户的使用成本。因为相同的视觉规律，用户的学习成本一定是低的。
+
+之前我在做一个游戏案例的时候，听一个设计游戏规则的前辈说过，好的游戏只会制定比较少的规则，但这些规则之间都充满了联系，并且用户可以根据现有规则来推演出新规则。
+
+对于GUI设计来说也是如此，界面中具有相同功能的视觉元素一定要使其看上去一致，且可以让用户根据现有的元素进行组合，并能让用户自动去学习新的功能。
+
+那么，这里我以一个App产品的界面为例，通常我们会把其界面的风格设计分成三种：
+
+**第一种，关键界面**
+
+也就是每个App产品中都会有的最代表产品特性的界面，它往往就是App的首页和一些关键的交易流程。
+
+在这样的界面设计中，我们需要根据用户场景的特性，来进行完全适配的设计。
+
+比如像滴滴，它最重要的就是地图、定位、出行信息填写组成的首页，所以在这样的界面设计上，就既要让用户可以简单学习，又要能够充分反映出行产品的风格特性。
+
+**第二种，控件界面**
+
+也就是用App控件自由组合的界面，比如iPhone中的Setting App，就是用iOS控件搭成的界面。
+
+一个App当中，如果要有大量的界面来展现和罗列各种信息，那么我们就要为App设计合适的控件风格。另外，在设计控件的时候，我们还要考虑它的拓展性和组合性。就像乐高玩具一样，我们能用各种组件，来组成各种缤纷的世界。
+
+**第三种，特殊界面**
+
+在App产品的界面当中，还会有一些无法固定设计规律的特殊界面，比如“关于”页、拍摄扫码、语音唤出等等，那么这些界面就都需要根据产品风格的定义进行特殊设计，另外还需要在产品视觉的风格和特性上有所传承。
+
+此外，这三种界面还有一个设计要求，就是虽然它们各自出现的用户场景不同，但都需要它们带有相同的视觉特性，因为这三者是出现在一个App产品中的，需要有视觉感官上的和谐统一。
+
+那么，这就要根据我在前面所说的，根据产品视觉关键词的提取来进行设计，或细节、或整体地体现出视觉的统一性。这听上去可能有些主观感性，我给你一个口诀：超级符号、适度重复、假借认知。
+
+**超级符号**就是指，要提取你的产品体验设计中最有特点的图形规则，将其变成产品界面设计中的核心语言，并让其在关键的位置都出现。比如度小满金融的菱形符号，比如滴滴的Logo，比如Google图标的四种颜色。
+
+<img src="https://static001.geekbang.org/resource/image/ac/fd/aca3dccef47fbab52911626bf1ccf9fd.jpg" alt="">
+
+**适度重复**就是指，在产品的界面风格中选取一两个特性，然后在不同的页面里都保持这几个特性。比如，我很早之前看过一个App就很喜欢把界面的输入框设计成三个直角和一个圆角，并且在很多页面上都重复这个特性，于是就成了它的特点。
+
+**假借认知**就是指，提取用户在生活中的某些固有的认知，放到界面上进行诠释，让用户感受到统一性。比如，原来Windows  Mobile曾使用过杂志风，即选取用户生活中经常看到的杂志排版，然后应用在界面里。再比如，单读App选取的都是传统文学风格的字体和图片的表达，艺术性和阅读感十足，即使是完全不相关的页面，看上去风格也十分统一。
+
+<img src="https://static001.geekbang.org/resource/image/34/ya/34ef03d05ea56b3008fb04c75d506yya.jpg" alt="">
+
+### 三、工程实现高效
+
+我们要知道，任何的设计，都是在资源有限的情况下开始做创意的。因为每多研发一个新控件和新的页面架构，对于设计工程来说，都占据了一些新的工作量，同时对于后期的维护来说也是新的成本。
+
+所以从界面设计的一开始，视觉设计师就需要和交互设计师一起打好配合，考虑好工程上的可实现性，而不仅仅是想着要实现自己天马行空的创意。我们要尽量去掉那些意义不大又很耗费工程研发的功能，尽量把好钢用在刀刃上。
+
+设计师的脑海里应该有一个像建筑师一样的架构，以此帮助自己梳理清楚一个App产品大概的页面结构、信息展现结构、关键操作特性。我之前在设计手机系统的时候，就会安排交互设计师梳理出来所有用户的操作和信息模块，并进行归类，再让界面设计师按照类别设计页面元素。
+
+### 四、界面美观优雅
+
+最后，一个好的产品界面设计，必然是美观优雅的。但这里有一个痛苦的现实，就是每个人对美观优雅的定义是不同的。更细致一点说，用户对于美观的定义和设计团队对于美观的定义也不太一样，所以这就需要一个逐渐磨合和探索的过程。
+
+不过你可以记住的是，一个产品界面的审美风格，往往取决于三个方面：**团队创始人的审美、设计师的审美、用户的审美**。这三方面的统一，基本上就是我们看到的一个产品的设计风格了。
+
+审美是一个非常玄妙的东西。有一些设计，可能我们看久了就觉得它从不好看变得好看了，比如iOS7刚推出扁平化界面的时候，所有人都觉得丑爆了，但时间久了，现在大家用着也觉得还不错。再比如，有一些设计，我们一开始看可能会感到非常惊艳，但用久了，就会很腻很反感。
+
+所以现实情况是，关于审美相关的视觉设计，也是逐渐迭代出来的。比如iPhone的界面，我们就几乎可以看到它从开始到现在的进化路径。
+
+其实漂亮美观的界面相对来说会好设计一些，只要符合美学的基础就好。但很多时候，我们会面对老板或用户的各种反馈：你们的界面都挺好看的，但我觉得就是没有灵魂。
+
+啊，这就有些崩溃了，界面的灵魂是什么？很漂亮但不高级，这看上去有点矛盾的表达，到底是什么？
+
+别着急，这是个有点儿玄学的问题，我下一讲就跟你说清楚，我们要如何在产品设计中体现高级感。
+
+<img src="https://static001.geekbang.org/resource/image/e8/e6/e846ac794a2cef6cb98ae95115ea77e6.jpg" alt="">
+
+好，到此为止，我就介绍完了一个产品GUI设计的流程和方法。最后我们来总结一下今天所讲的内容吧。
+
+## 课程小结
+
+今天我给你讲解了产品视觉设计的七个关键步骤：**实现商业目标、明确场景人群、传递准确信息、表达正确氛围、风格一致统一、工程实现高效、界面美观优雅**。
+
+其中，我主要给你介绍了与交互设计不同的四种关键的界面设计方法。很多时候，我看到年轻的界面设计师在和产品讨论问题的时候，视角都是不全面的。他们往往会从美观度和用户使用的角度去思考，但有时却忽略了商业目标、风格统一性和工程实现的问题，这就会让他的设计陷入绝望的境地，因为他无法感知其他角度的需求，从而也就很容易得出一个错误的结论：其他人根本不在乎审美！
+
+实际上当然不是这样的，其他人也在乎审美，但对于一个好的产品界面设计来说，审美只是关键的决定因素之一，只是近几年的权重略微提升了而已。
+
+如果你可以从以上七个步骤来重新审视一下你的界面设计，那么大概你就能知道用户反馈的问题属于哪一类，也就会知道要如何来安置和权衡这些需求及问题了。
+
+<img src="https://static001.geekbang.org/resource/image/3d/1e/3df30cf6558d8737a6326eb8ea53971e.jpg" alt="">
+
+## 一课一思
+
+给你留个作业，你可以按照这七个步骤，来重新审视一下你所在业务的界面设计吗？你觉得其中哪个做得好？哪个做得不好？欢迎你给我留言。
+
+另外，如果你觉得有收获，非常欢迎你把今天的内容分享给更多的朋友。感谢阅读，我们下一讲再见。

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/23 | 产品设计的高级感，是怎么做出来的？.md

@@ -0,0 +1,157 @@
+<audio id="audio" title="23 | 产品设计的高级感，是怎么做出来的？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/64/33/6473e598198c6a78df4cc205bd8eb933.mp3"></audio>
+
+你好，我是相辉。
+
+上节课，我给你讲解了界面设计的四种关键设计方法，并给你分享了我对于产品界面设计的思考方式，也就是从商业到信息架构到交互设计，到最终交付视觉风格的方法。其中，针对界面美观优雅这一点，我给你提出了一个比较玄妙的问题：漂亮但不高级、界面设计没有灵魂，这到底都是什么意思？
+
+实际上，归结为一点，这个问题就是在问，**一个产品的高级感是怎么设计出来的？**那么今天这节课，我们就来讨论清楚它。
+
+## 产品设计高级感的塑造虽然主观，但仍然有规律
+
+首先我们要知道，一个产品不是在各个方面都设计到位、在体验上处处都贴合用户的需求，就能有吸引用户的魅力的，它还要有基于艺术的创作。
+
+艺术本身虽然是种很主观的东西，但基于它，我们可以塑造出产品的高级感，而且这是有规律可循、有方法可依的。也只有这样，我们才能让用户喜爱自己的产品且愿意分享和传播。
+
+那么，在这个基于艺术创作来生产高级感的过程中，我们要参照什么规律呢？
+
+经过多年的思考和探索，我找到了一些可以复用的方法，来指导产品设计高级感的塑造，在这里分享给你。
+
+在开始讲解之前，我想先说明一下。今天所讲的内容呢会有些感性，但它非常重要。这个思考源自于我之前总结的[一篇文章](https://mp.weixin.qq.com/s/rcEs0eTvaj-jLs2sxFtnhA)。不过在今天的课程里，我重新梳理了一下思路，并给出了相应的解决方案，希望能让你获得合适的设计方法，来帮助自己的设计找到高级感。
+
+OK，接下来我们就开始吧。
+
+## 如何找到产品设计中的高级感和哲学意味？
+
+曾经有个朋友问我：漂亮的设计和美的设计之间的区别是什么？我回答他，漂亮的设计就只是漂亮而已，但是**美的设计会自带高级感和哲学意味**。就好像英文当中会区分Pretty和Beautiful一样，这里面具有微妙的区别。
+
+高级感和哲学意味，你可能会觉得这两个词看起来有些抽象，描绘的画面可能仍然不够清晰。
+
+那不如我们先来思考一个问题：为什么很多装饰精美的东西我们会觉得俗气，而有些粗糙的产出，我们反倒觉得充满力量？
+
+比如欧洲的镶嵌画，艺术大师陈丹青曾说过，文艺复兴时期的油画更像是奇技淫巧，让宗教委身于了艺术，而镶嵌画更拥有宗教的力量。
+
+> 
+<p>近世油画的惟妙惟肖是在期待人间的目光，那目光因科学知识——也即人类那点可敬可怜的小聪明——而兑现了绘画的所谓真实感，导向文艺的理性。而早古信众在密密实实的镶嵌石缝中认出耶稣的脸庞与目光，我猜，他们确信那是神迹。<br>
+——陈丹青《航向拜占庭》</p>
+
+
+<img src="https://static001.geekbang.org/resource/image/19/f3/19f19820fb925d4943694154169493f3.jpg" alt="">
+
+那么，这个粗糙的美来源于哪里呢？有些美好的东西是不怕露拙的，藏拙反而是一种匠气所在。
+
+那匠气的藏拙和真诚的露拙的界限在哪里呢？你可以先自己想一想，一会儿我就告诉你答案，这里我先给你举个例子。不知道，你有没有听说过日本的圆空佛，据说是一位叫做圆空的僧人雕刻出了十二万尊的佛像，这些统称为圆空佛。圆空采用的并不是一个不是特别精湛的雕刻办法，却带出了佛最原本的慈悲像，每当我看见圆空佛的时候，内心都会像沙画一样展开这个场景：一个雕刻家在为穷人雕佛的修行之路。
+
+<img src="https://static001.geekbang.org/resource/image/db/08/db37fe159e9f9ae4f4c79de24801b008.jpg" alt="">
+
+既然说到了这里，你可能还要问，**露拙的美，出自哪里呢？**
+
+实际上，好看的东西是有很多，但它们并不一定都有动人的魅力。毕竟像奥黛丽赫本式的公主范现在仍然是稀缺的。
+
+意大利时装设计大师瓦伦蒂诺有一个经典的能力：“穿上瓦伦蒂诺设计的套装，淑女会变成模特，模特会成为淑女。”
+
+这精妙的比喻道出了一个关键问题：淑女、模特，在某种魔法下发生了互换和融合。那么这个魔法又是什么呢？
+
+所以说了那么多，还是让我们回到问题本身上来。设计的优雅和高级感是怎么来的，为什么有些产品看上去拥有一种魅力和高级感？其实这个规律并不复杂，只有三个，当你记住了以后，你就可以判断一个产品设计的质地了。
+
+### 1.为产品寻找高级的隐喻
+
+隐喻的意思就是说，某个事物的出现会意味着什么。然后这个隐喻会在你大脑里形成想象，从而改变你对这个事物的感受。
+
+比如源自生物性的，如果一个人长相匀称、体态健康，意味着TA拥有良性的遗传基因，从而会让我们在本能上抱有对TA的好感，甚至潜意识里会告诉自己这是个好人，希望去亲近。
+
+再比如源自阶级性的，举个简单的例子，欧美家庭一般都有带草坪的院子，这个文化源自于欧洲的皇室，他们的宫殿外都有巨大的草坪。所以普通人家愿意追随这个习惯，因为这意味着家里人可以有闲暇的时间去打理“无用的草坪”，从而体现出更好的生活品质，也更能带来观者对这个家庭实力的定位。
+
+实际上，我们所看到的任何事物都带着隐喻，这个隐喻所触发的想象，就是我们整体体验的由来。而如果这个想象是强大的、动人的、道德的或者是闪光的，那么这件事物的高级感和魅力也就油然而生了。真正的高级感不是在产品设计表面的线条里，而是藏在隐喻里。
+
+那么，我们应当如何为设计寻找到高级的隐喻？我一般会有如下的两个步骤：
+
+**第一，寻找魅力归属**
+
+每个产品都有自己悠久的历史传承，即使是完全创新的产品，它仍然和过去的某种产品拥有联系。比如，互联网刚刚兴起时的电子邮件，虽然它是全新的事物，但Yahoo Mail的设计，仍然是一个老式的信箱+信件的信封，这让用户一下就能明白，这个产品来自哪里。Google搜索也是如此，它虽然是一种全新的索引信息的模式，但是搜索的Button就是放大镜的按钮，让人一下就能联系起搜索的动作。
+
+**所以，我们在设计产品的时候，如果希望找到自己产品的历史文化传承，那么第一步就是找到人们过去生活中，你的产品所能触发用户高级感想象的领域。**
+
+我再给你举个例子，我之前在和我夫人设计珠宝的时候，其中有一个主题是十二星座系列。在这个系列中，除了用视觉特征来归纳每个星座的特点之外，更重要的是在形体曲线的选择上，我们还会尽量从希腊神话里的建筑、神器、景色以及人物审美的特点，来提取出每个星座的特质。这样，这些珠宝看上去就会令人联想起希腊神话中的故事。
+
+<img src="https://static001.geekbang.org/resource/image/ba/91/ba850a10c796791b9f9438ecee497591.jpg" alt="">
+
+再比如说，姚仁喜先生设计的乌镇剧院，它的灵感来自于江南的并蒂莲。乌镇剧院是类似一个双黄的剧院，一大一小两个舞台，两个厅套在一起。而乌镇剧院的四周都是水面，远远望去，就好像隐喻了一个并蒂莲开放在乌镇水面上，它的外墙也选取了碎冰玻璃和金墙砖的混搭来表达两朵莲花。这一下就让整个剧院充满了时空的穿越感，展现出了文化与现代相融合的场景。
+
+总而言之，我们无论是在做什么设计，都不应该只从外表去描绘它，而是要借助与其相关的文化符号和故事元素来表达产品的内核。这样的设计，一语胜千言。
+
+就像我在[第17讲](https://time.geekbang.org/column/article/294411)中所说的，我们要为用户搭建体验的舞台，那么在体验和服务舞台元素的选择上，就要尽量去关联以前那些已经存在于用户心中的好故事和好文化，用那些特性来武装我们新的设计，才能让产品具备某种高级感。这种高级感，是不言而喻的。
+
+**第二，萃取特性符号**
+
+当我们找到了产品相关的魅力归属领域以后，就需要把领域里相关事物的特性提炼出来，并重新加以组合，变成体验故事和视觉的识别。
+
+比如，我前面提到的珠宝设计的例子，就是把希腊神话的线条应用到了珠宝设计当中去。我们在提取希腊神话的特性的时候，最终得到的是一个故事库和素材库。当我们脑海里带着一个个的希腊神话故事，来设计十二星座的时候，其表现的手段和丰富度，也是完全不同的。
+
+再比如，最近刚完结的《乐队的夏天》，项目组为了表达他们在摇滚乐上的专业性，在片头动画中隐藏了超多摇滚乐队的经典镜头和专辑的封面，我看到的就有Beatles、Blur、Greenday等诸多乐队的代表元素。因为我特别喜欢Blur的那张专辑《the great escape》，所以我看到乐夏的这个片头就特别喜欢，一下就被带入了这个节目里。另外片头里还涵盖了很多夏天的元素，比如泳池、小黄鸭、蓝天阳光等等。那么，这些符号和新的设计进行结合，就能够用非常短的时间，迅速表达清楚摇滚乐的魅力，只要喜欢摇滚乐，观众总能在片头里找到自己喜欢的乐队的符号。
+
+所以，萃取这些特性符号，并巧妙地在产品里应用它并贯穿它，逐渐形成一套风格，那就是塑造产品高级感的第一个维度“高级隐喻”的关键。
+
+### 2.自洽的世界观
+
+一个有魅力的产品，必然有着自洽的世界观。
+
+我曾经认真看过《南方公园》这部动画片，在看的时候，我就会想：为什么这些小人画得如此粗糙，我还觉得它充满着一种“精致感”？我也看过几集《小猪佩奇》，按说这种画风的设计师我都不会放到招聘的考虑范围内，但小猪佩奇也能形成一种反潮流的文化。我也曾经研究过表情包这种文化潮流，为什么在某些场合下，表情包反而带着一种力量。很多画得不是很精细的漫画人物，比如悲伤蛙，也能让人们得到戏谑的快感。
+
+实际上，有魅力的设计，绝对不是“只要符合设计师审美就行”这么简单的事情。有时候，设计师的审美反而是对表达产品魅力的桎梏。设计应该是表达这个产品应有的态度，而不应该是展现某种所谓的“美”。
+
+这有点像我在第17讲中所说的，如果把产品理解为一个人，那么这个人必然是有自己对于世界的理解和价值观，且要言行一致，这个人才会展现出自己的魅力。
+
+产品也是如此，如果我们希望设计一款能令人心动且愿意分享的产品，那么不仅需要流于外表，还更应该去从设计团队的初心出发，去挖掘该产品的内核，用于表达设计。
+
+就好像澳洲化妆品品牌Aesop，其“理智”的生活哲学，在美容界独树一帜。无论是像药瓶一样的产品设计，还是展现理性的店面设计，都保持了这种一贯的风格，让用户在接触产品的每个瞬间，都会拥有相同的感受，从而识别他们，记住他们，追随他们。
+
+<img src="https://static001.geekbang.org/resource/image/4a/d1/4a94cc0a032c03511edc4d246a4b45d1.jpg" alt=""><br>
+<img src="https://static001.geekbang.org/resource/image/70/86/709f5198c7fcd20dddb40eefd3ccyy86.jpg" alt="">
+
+所以，我们还是要回到第17讲中提到过的舞台剧本的设计上。我们要用一套舞台剧本来指导产品和用户接触的每一个触点的体验，从而使其产生强大的品牌魅力。但如果要做到这一点，就需要我们在服务设计的流程上，以及在团队对产品魅力的追求上，都有相当高的要求和标准，才能做出所谓的“高级感”。
+
+### 3.强化产品的稀缺性
+
+最后，我想说明的一点是，好的产品和设计必然是稀缺的，它必然是创造了与时代平行的意外。
+
+怎么理解这里的“与时代平行”呢？那些充满高级感和魅力的事物，你简直难以相信怎么会在这个世界里滋养出来。我记得陈丹青评价过他的老师木心，说这个老先生是一个无解的迷。他好像是和这个世界有关系，但又好像是从某个时代穿越过来的，很难想象有这样一个人存在。
+
+所以我才说，一个好产品，必然是稀缺的，稀缺的才珍贵。
+
+而现在的各种产品之所以能活下来并能长期地得到增长和发展，那自然是因为人们对它有长久的需求，且它有自己不可替代的部分，那么这个“不可替代”，就是该产品的稀缺性。
+
+如果一个产品的特性不稀缺，很难讲它能有什么魅力。如果一个产品的特性不意外，那大概也没法引起别人的注意。就像我在[第19讲](https://time.geekbang.org/column/article/295797)中提到的，如果我们不能在产品设计中回答用户为什么“非用不可”，这个产品就是有问题的。那些真诚生长的稀缺和意外，才是有价值的。
+
+所以体验设计的发心，也应该源自于产品的稀缺性。我们在设计时，不能在所有的功能上都用差不多的力，而是要找到这个产品最独到的地方并能表达出来。
+
+通常我在设计一个产品体验的时候，会去寻找属于这个产品在用户场景中独特的“生态位”。这里说明一下，生态位就是在一个协作系统当中，产品的场景位置。
+
+比如，我最近在设计一款瑜伽产品的时候，就抛弃了在竞品中已经实现了的姿势训练。因为那不仅是对瑜伽的误解，更是瑜伽产品中已经相对泛滥了的部分。瑜伽是人的身心与宇宙之间的平衡训练，而不是体操或者健身。
+
+我为这款产品强调的是“正统性”。因为很多用户给我反馈，市面上的瑜伽产品那么多，谁才是正宗的呢？所以“正统性”，就是我最想塑造的体验。
+
+这也许没什么具体的方法，而是源于各类的研究和分析，最后产生一个关键的洞察。这个洞察可能是一瞬间的灵感，也可能是长时间的思索逐渐得出来的。但毋庸置疑的是，强调一个产品的稀缺性，能令人感到惊喜和意外，就是产品魅力表达的关键。
+
+## 课程小结
+
+今天说了那么多，总结一下，其实要做出一个产品设计的高级感就是这三个规律：
+
+- 隐喻，即在产品设计中采用的体验体系意味着什么，它是不是用户有感的。
+- 自洽，即产品的设计是不是拥有一套自洽哲学，能给用户带来独特体验的。
+- 稀缺和意外，即产品的隐喻和自洽，是不是足够的珍贵和特别的。
+
+有了这三条，我们无论是分辨一个人、一种外形，还是一个产品、一种服务、一个价值观，都可以轻松地发现其高级感的来源和低级无聊的关键。
+
+这里的内容和思想可能与之前我所讲的一些设计方法类似，但我觉得还是有必要花费一点时间带你了解一下产品高级感和魅力这件事。因为在这样一个注重体验的时代，那些主观的东西如果无法用语言解释清楚，就可能会导致我们即使采用的设计逻辑和方法都正确，但设计出来的产品仍然如同白开水，这是不可取的。
+
+其实类似的感受还经常会在我的工作中出现，我在听一些方案汇报的时候，可能大家所说的逻辑都是对的，数据也是对的，但对产品的设计思考和规划却听上去、看上去就是没有心动的感觉。
+
+前面的课程中，我讲的都是一些按部就班的设计流程，而这节课就是把产品体验设计这个话题单独拿出来，再强化一遍思考的逻辑。我相信，当你面对一个设计逻辑都对，却没有魅力的产品的时候，用这个思考模式来考量，一定会有新的发现。
+
+<img src="https://static001.geekbang.org/resource/image/d0/96/d099b6f47bd36dea30c7ca46134d0696.jpg" alt="">
+
+## 一课一思
+
+你可否用这个方法来判断一下你手头的产品是否具有高级感呢？如果没有的话，你认为该如何改进呢？欢迎给我留言，分享你的见解和思考。
+
+如果觉得有收获，也欢迎你把今天的内容分享给更多的朋友。感谢阅读，我们下一讲再见。

极客时间专栏/geek/用户体验设计实战课/搭建产品体验：为用户的场景交互而设计/24 | 如何搭建发挥产品设计价值的流程架构？.md

@@ -0,0 +1,110 @@
+<audio id="audio" title="24 | 如何搭建发挥产品设计价值的流程架构？" controls="" preload="none"><source id="mp3" src="https://static001.geekbang.org/resource/audio/9d/47/9dd7dc9f722468ed9272yy98c9a1f147.mp3"></audio>
+
+你好，我是相辉。
+
+到这里，我们就基本上说完了产品体验设计的基本方法，现在你知道了如何洞察用户场景需求、打造沉浸体验、提炼服务的生活主张，也了解了互联网产品的交互设计和界面设计的基本流程和判别标准。
+
+那么和场景服务设计模块一样，我们还是要再谈一下互联网产品的组织体系搭建方法和发展趋势。因为一个良好的团队组织，是设计一个产品好体验的关键。
+
+随着互联网产品的更迭和发展，人们总是在不断地迭代产品和服务，却忘记要迭代组织。就像我在[第5讲](https://time.geekbang.org/column/article/284484)中所说的，我们现在很多的团队，还仍然在用十五六年前的流程来生产互联网产品。现在的产品早已日新月异，如果我们还不改进体验设计的流程组织和架构，如何能设计出适应时代的产品，以及令人心动的用户体验呢？
+
+所以今天，我就带你一起探索可以发挥产品设计价值的流程架构的搭建方法，我们一起讨论清楚产品、设计、运营、品牌的组织生产流程，并给你几个互联网产品体验设计的组织建设的建议，以此让你能够迭代自己的互联网产品体验的团队架构。
+
+## 第一，要产品体验设计一体化
+
+所谓的体验设计一体化，就是**在职能认知上，我们要逐渐地将产品经理、交互设计师、视觉设计师尽量地整合在一起**。因为一旦这几个职能在工作上有所分裂，你就会发现，产品的产出结果往往和最开始的策划相差甚远。
+
+我举个例子。最早百度在2007年的时候，采用的是大PM的产品生产设计方式。也就是由一个产品经理来管理整个产品的整个链条，从需求的撰写到页面的设计，再到研发和测试，以及市场的营销推广，都由一个PM来整体抓。
+
+当时可以采用这样的运作模式实际上取决于三个关键：一是因为早期的产品场景和功能足够简单，二是各个职能的专业性还没有那么深，三是百度早期的产品团队也是真的很强。这就造成了一个有超级话语权的产品团队，很强势，大家也都配合产品团队的工作。
+
+所以在这个模式下，面对相对简单的场景搜索相关的产品，不但设计效率高，而且最终的产出跟产品经理所要的效果是非常一致的，而且也是逻辑自洽的。
+
+但是后来，因为移动互联网时代的到来和产品场景与功能越来越复杂的情况，一个大产品经理对于体验的管理就变得非常难了。
+
+虽然这时候，移动互联网也发展了几年时间，但它依然算是比较新的东西，而且因为比最初的版本更加复杂了一些，大家都在学习。于是在2010年的时候，就出现了移动互联网的交互、用户研究、图形设计、营销设计等等部门的设置分工。
+
+不过这么做也有优缺点：**这样的分工虽然让产品的每个职能都变得更专业，但也导致了产品的割裂。**
+
+我经常就碰到，有的产品经理设想了一个功能体验，交付给了交互和视觉设计师完成后，就变成了另外的样子。而交互和视觉因为太专注于图形的表达和体验的顺滑，有时候甚至忘了产品的商业目标。另外，运营也会经常和产品无效PK，比如说运营为了增长而大幅度地增加广告位置，让产品体验受到了很大的破坏。
+
+**所以说，我们要看到问题的一体两面，当一个产品的职能为了更具专业性，过于分化，反而不利于产品整体的交付。**
+
+令人比较欣慰的是，如今在一些互联网公司，已经开始有所调整了。这是因为移动互联网发展到今天，很多与产品界面和体验相关的工作已经被工具化和控件化了，所以有越来越多的公司开始去**整合和调配产品 - 交互 - 视觉这三者的关系**了。
+
+比如，2010年小米在研发产品的时候，就要求产品和交互要由产品经理来管理和维系运作流程，即产品经理要设想好最终交付的样子，直接给图形设计师，而不仅仅是写功能列表。
+
+再比如滴滴，他们最近开始把交互和视觉合并为了一个职位，目的是让前端体验的交付一体化，促使每个交互设计师在开始做交互设计的时候，就要利用视觉表达的方式来进行图形界面的通盘考虑。
+
+也有的一些公司，则会做产品和运营一体化的考虑，要求产品的职位更加偏向商业，把所有用户端的交付，全部都给到交互设计师，而交互设计师也会演化为体验产品经理。
+
+这些都是目前我见到的企业所努力作出的改变，他们都有一个共性，即重新分配产品体验设计的工作职能，合并同类项，简化组织。
+
+我想，这是目前所有的企业在产品设计流程上，都应该做的事情。
+
+## 第二，要体验设计团队数据平权
+
+相对来说，体验设计的发展最初是从人的主观感受出发，而到了今天，逐渐发展成了用数字来量化体验。
+
+所以这就意味着，我们仍然有大量的产品体验设计师对数据工具是陌生的，这就大大妨碍了设计师发展出自己的决策能力。而且这也意味着，整个企业在产品体验表达端，缺乏数据能力的支持。
+
+而那些善于使用数据的团队，因为能够不断地用数字能力证明自己产品或商业的设计策略，所以在企业内部也可以持续地获得话语权。
+
+于是，这就意味着，类似于运营、产品经理这样的团队会拥有更强的话语权。久而久之，就会陷入一个强者更强、弱者更弱的状态。团队话语权的不平衡，久而久之还会伤及企业的发展，因为这等于是让企业某一大块的数据视角缺失了。
+
+我经常看到那些交易数据很好的团队，明明已经出现巨大的体验问题而不自知，最后摔了大跟头。我也经常见到一个好的设计，在没有数据证明的情况下，被无情地拿掉。
+
+所以，我一般到了一个设计团队，就会开始要求一件事，就是**数据平权**。即在**不影响数据机密的情况下，产品、设计、运营、品牌应该共同享有一份数据资料，大家依据一个数据现实去做基于自己职能角度的判断**。如果大家对数据的理解不统一、不一致，甚至连数据的知情权都是不同的，那么实在谈不上可以进行高效的沟通。
+
+那么，数据平权应该包含哪些内容呢？我认为主要有四点：
+
+- **知情权**：也就是团队中产品和业务的数据是大家可以共同使用的。
+- **统一性**：也就是大家都可以在某一个地方找到统一迭代更新的数据，而且没有时间差。
+- **理解能力**：也就是大家都拥有基础的数据素养，而不是拿到数据却不会用。
+- **资源权**：也就是每个团队都有给研发团队提数据提取和研发需求的权利，并有资源支撑。
+
+这样，有了基础的数据权利，你就能发现团队之间的沟通效率会大大提升，因为信息不对等的问题，从大家对基础工具的使用上就给消除了。如果一个体验设计团队不会使用数据来证明自己的设计策略的效果，那真的很难说自己是在一个维度上与运营、产品做配合。手持大刀的跟现代化的部队一起出去打仗，那前者一定是炮灰。成为炮灰可能没什么，但受损的是企业。
+
+所以，体验设计团队需要能数据平权，并要求设计师能用量化的和从宏观到微观的角度，来看待体验设计的问题。这样，有了这个工具以后，我们才算真正地赶上了其它团队。
+
+## 第三，把体验团队的设计流程溶解进企业
+
+在探讨这个组织设计方法之前，我想先给你分享一个体验设计团队的两难问题，因为这个问题直接会引出体验设计团队在企业的关键定位。
+
+如果一个设计团队不去主动思考企业的商业策略和用户目标的话，就会很容易成为产品和业务团队的设计工具，这是非常不健康的团队协作模式，它会导致设计团队失去创新的动力。而且，如果设计团队的专业性无法让其他职能部门理解，久而久之，就会造成产品的体验设计质量下降。
+
+所以，有的设计团队就会去想办法改变这个状态，于是就开始去做产品和运营团队的工作，去自己制定业务方向。这当然也是有问题的，因为体验设计团队的知识结构并不是为了做商业架构而存在的。所以这样就很容易出现问题，也会造成团队协作之间的不和谐。
+
+那么，体验设计团队的两难就出现了。**我们到底要不要听产品的？我们到底要不要有自己的独立思考？**很多团队就在这两极里沉沦了。我曾经也一度很困惑，我们到底要如何在企业里发挥产品设计的价值？
+
+后来经过多年的思考，我找到了解法。那就是设计团队既不应该代替业务去做商业决策，也不应该只做其它团队的工具。**我们的任务是翻译，也就是把产品的商业决策和功能决策，翻译成用户需要的产品，而翻译的技能，就要求我们既能理解商业，又能理解用户，我们是企业内部最好的转译器。**
+
+这个定位清晰了，我们很多工作的做法和边界就好开展了。
+
+体验团队最重要的任务，就是在企业内部尽早地进入商业决策流程，了解到企业对于一个业务的商业判断是什么，从而指导自己资源使用的边界。然后要将自己融入到互联网产品设计交付的流程里，以确保自己的设计成果可以更好地落地。我们的核心工作，就是要能把这些信息很好地整合在一起，交付出设计方案。
+
+我在滴滴、蔚来采用的都是类似这种的组织设计方法，这样做的好处是，设计师一早就知道了自己设计的最大目标是什么，从而也学会了如何将商业目标拆解、转化为设计目标。而没有做到此流程的团队，最终就会像我刚才说的，在两个极端里面打转。
+
+所以，溶解流程、收集信息、整合设计、确保交付，就是体验设计团队和企业结合的完整流程架构。
+
+## 课程小结
+
+今天我们一起讨论和确定了互联网产品体验设计组织迭代的三个方向：
+
+- **整合体验**：即将产品、运营、交互、设计、品牌按照自己的业务领域和业务需求进行整合，提升设计效率。
+- **数据平权**：即建立所有职能共享的数据权利，并要让体验设计团队能够很好地应用数据。
+- **溶解流程**：即要明确体验设计团队在企业内部的定位是翻译，而溶解进入企业流程当中，是翻译正确交付的必要手段。
+
+这三个改进方向呢，都是我最近5年在顾问工作中，感受到产品体验团队一旦做了就立刻有效果的事情。但很遗憾的是，我看到更多的企业的体验设计团队，都在商业增长的压力之下，找不到自己的定位和发展方向，非常迷茫。
+
+所以，在搭建发挥产品设计价值的流程架构的时候，我们首先要知道，任何一个团队都有自己在企业生命周期中最重要的时刻，然后我们也要清楚，并不是所有的时候都会顺风顺水。
+
+但只要我们理解了这个组织体系的架构规律，就会在顺利的时候不自大，在有压力的时候不气馁，一步一步地用自己的能力，来帮助企业完成好业务的发展目标。
+
+<img src="https://static001.geekbang.org/resource/image/91/39/911d4c0f33c891ddc681e0a3e6a25e39.jpg" alt="">
+
+## 一课一思
+
+基于今天所讲的三点关于搭建体验组织体系的建议，你觉得，自己所在企业的体验团队，该如何更新组织迭代方向呢？欢迎留言给我，我们一起讨论。
+
+如果你觉得有收获，也非常欢迎你把今天的内容分享给更多的朋友。感谢阅读，我们下一讲再见。