什么是体验可视化地图

它们是一种体验洞察和形成参考材料的工具，能够帮助业务人员探讨决策使用，它们都是结合真实用户反馈形成的。另外这些地图本身并不能直接提供答案，而是用于促进对话或作为决策导向，它能跨部门让人们聚在一起讨论业务目标，指出潜在的机会或达成一致的价值观与目标，使解决方案更可行。即促进共同参与、共同思考、共同目标、共同发力。像心智模型、空间地图、服务蓝图、用户体验地图、客户旅程地图都属于体验可视化地图，也有称为对齐图。

用户画像&用户体验地图介绍

用户画像 本身可以反映出服务对象的特征，便于改进业务服务，帮助研究用户需求或产品痛点，因此在一些体验可视化地图中会配合使用。并且可以帮助设计师指导产品功能、导航、交互、甚至视觉设计方面的决策，是一种联系用户诉求与设计方向的有效工具，总之它能让你知道产品是给什么人用的，他们有什么特征或诉求。

用户体验地图 以个体在某个产品或领域中的体验经历为主，关注产品是如何契合个体用户体验的，通过用户个体的行为触点与视角来洞察商业机会。是一种比较视觉化、有助于引发共鸣和聚焦用户体验的工具，比较贴合情感化设计的理念，适用于洞察用户视角下与产品系统交互的可视化地图。

所以在作品集里经常看见这些体验地图就能够理解了，一方面是作为战略层的研究报告说明，用于佐证设计或决策的依据。另一方面是为了其他读者达成共识，便于共情设计目标。当然丰富和美化作品集也是一方面，更多的则是希望不要滥用起来，形同虚设，成了一个没有深入作用的装饰工具。

两者工具的差异与特性

用户画像的因素

用户体验地图的因素

如何打通用户画像与用户体验地图

方便直观易懂的去解释用户画像与用户体验地图之间的关系作用，这里我通过流程、相互作用来解释一下；

从流程上看

体验地图是基于用户研究开展的，所以要考虑研究谁，研究什么问题，在什么场景或领域进行，因此就需要借助用户画像去界定范围，以及形成用户材料，再去考虑用何种体验可视化地图展现，而用户画像也将一直贯穿始终提供可参考的用户信息；

相互作用上看

用户体验地图一般都是聚焦于既定范围的目标群体，一份完整的用户体验地图应该包含用户画像信息，应交代清楚目标用户的背景、场景、需求、痛点等关联信息，方便读者了解，以便于代入用户视角深入到用户体验地图的讨论中。

而用户画像尽管提供了由外而内的视角或部分设计见解，但并不能满足项目多样化视角的需求，且不足以形成一系列的设计见解洞察，所以用户画像始终需要与心智、情景、体验地图或研究报告等结合使用。也就是说用户画像需要与用户体验地图配合输出，两者谁也替代不了谁。

体验可视化工具的一般流程简述

一个正式且有效的体验可视化地图一般必须经过四个阶段才能完成，最后再得出结论达成一致；

一、项目启动；通过内部识别或收集用户反馈找到需求点，计划研究目的，制定目标。

二、开始调研；通过研究手段向用户收集优化资料或数据，为创造体验可视化地图提供可靠的数据。

三、阐述分析；选择阐述方式，通过体验可视化地图将研究结果与核心价值进行呈现，为后面探讨做准备。

四、达成一致；使相关业务人员共同参与研讨，结合地图报告进一步的思考，指出潜在机会或达成一致的观点。

五、展望未来；根据研讨结果设计解决方案，提出价值主张，进一步跟进和实施起来。

真实应用中不用急着画图准备填充，先明确目标再从用户研究或资料收集开始。如果没办法找到目标用户进行访谈或测试研究，那么至少找到一线的人员进行访谈或测试，不要依赖自己的见解或认知套用，这些地图的精髓在于打破内部视角建立起一场具有包容性的对话，不同部门的参与者多多益善，所以这些地图只是研讨中心的参考物。

如何正确Get用户原型与画像

构建和使用画像时大致可以分为两类；

1. 根据用户研究建立正式的用户画像

2. 建立人物角色原型

具体取决于用途与条件情况等，制作任何一组用户画像都非依托想象力，都是基于事实或用户研究的。并且不只是简单的人口数据或个人信息描述，如果一组不能达到共情效果的用户画像也就失去了核心价值《如何有效快速共情-点击查看》，就像一份简历，没能体现出个人能力与专业素养一样。

人物角色原型

制作一个正式的用户画像是一个漫长的过程，还需要开展用户研究，如果你没有现成的调研对象或调研条件，你就可以采用人物角色原型，该方法是由《Lean UX》的作者Jeff Gothelf提出的，他描述到；

“人物角色原型是一个正式人物角色的变式，其最大不同在于人物角色原型不是用户研究的结果，而是更多的源于头脑风暴的结果。公司成员会从公司理念出发，基于自身领域的专业性和直觉，来明确谁是公司产品或服务的目标用户，用户的动机和需求是什么。”引：Jeff Gothelf."Using Proto-Personas for Executive Alignment,"UX Magazine(May 2012)

这类角色原型不用花费大量时间去做用户调研，它们是基于已知的特征情况或预期的目标用户，适合临时性使用，便于开展前期工作或达成一致的见解，但是人物角色原型并不能代替基于可靠数据的用户画像。

构建人物角色原型的方法

就是跨部门集体参与贡献观点与数据来构建。前线相关业务人员是必备的，人数控制在5-8个人就行，要有主持人把控节奏和参与度，尽可能收集到不同业务视角下的问题反馈，讨论开始前可以提出一两个角色原型来激发讨论，然后充实起来，尽管最后可能形成了多个角色甚至有些看起来有冲突，不过没关系，重点是让这些人物角色清晰明确下来，不一致的地方可以进一步的讨论。

人物角色原型的构成内容

一般人物角色原型在一页的篇幅内就可以显示完，主要五个板块。值得注意的是，一定不要脱离了产品主题的范围；

一、角色基本资料：角色头像、姓名、头衔、单位或一些可用的辅助资料。

二、人口统计特征：一般包含性别、年龄、职业、收入等与主题相关的人口统计指标（类似简历中的个人信息）。

三、心理统计特征：与主题相关联的因素，主要指不可轻易观察的心理活动、态度、信仰、动机、观念的个人特征。

四、产品相关行为：指与产品体验有主要关系的行为或是行动，包括兴趣爱好、个人习惯、专业活动等。

五、需求与痛点：用户有哪些与主题相关的需求或痛点，你的设计可以满足用户那些需求和痛点缓解。

用户画像

用户画像本身可以帮助发现问题或进行决策，同时也反应出了对用户或用户视角的共同理解，并且可以在日常研发工作中持续使用，例如一些材料归档、分享、更新、辅助其他可视化地图等，以发挥出更多的余热。

如何打造可用的用户画像

定性还是定量类型

根据产品需求选择定性还是定量分析，亦或者结合，一般定性适用于用户需求深挖或业务创新等情况，讲究的是“为什么”，而定量更像是通过数据验证“有多少”，常用于数据分析、趋势分析、数据验证、做精细化运营和用户精准投放。  

定量需要足够的数据支撑，如果项目需要画像且企业不稳定、用户量级不够不能满足数据需求，则可以借助市场数据报告、白皮书、第三方数据服务平台、调研服务公司等来参考，这些数据也都是可靠的。大数据杀熟就是数据画像的反面引用，通过画像对用户进行分层，再挑出用户中的软柿子或老实人欺负。

识别用户群体优先级

对目标群体要有认知，要根据特征划分层级或类型，例如典型用户、潜力用户、专家用户。这些用户的界定范围需要业务相关人员去制定，类似一份简历我们可以根据能力对标级别，一般我们可以通过4个比较有影响力的指标进行划分，至于权重我们可以采用常见的四象限或卡诺模型；

在制作用户画像前可以合理的根据人物角色原型的特征过滤目标用户群体，但不要过分依赖，你只是需要找到符合的目标群体，而不是根据原型找到理想的那个人。

最终调研对象的关系表呈现；

定性类画像不用邀请很多用户参与研究，一般在5人左右，只有研究资源充沛时才会考虑邀请更多研究对象，一方面是研究发现5人左右就能反映出绝大多数问题了，另一方面是出于时间精力和预算情况考虑。

定性类用户画像要做什么

一、确认研究对象的优先级，根据需求背景或目标确认重点跟次要群体来挖掘不同用户视角下的问题；

二、通过线上招募(APP内或相关平台发布有偿邀请，亦或者寻求第三方服务公司帮助)、客户群(相关的用户答疑群邀请)、论坛社区(发布招募帖子等)、专家咨询、产品线上推送等方式，寻找目标群体并建立联系；

三、选择线上访谈、可用性测试、问卷调查、焦点小组等有效的用户洞察方式，并设计好相关问题或材料准备与用户进行深入研究(主要围绕已知问题或新的设计方案验证，再就是新的业务需求洞察为主)；

四、整理用户资料，围绕研究主题建立用户画像信息，完成主要信息模块，可以根据业务需要，将用户技术特征、职业特征、环境因素进行补充(需要考虑是否与业务有一定关联或影响，否则无意义)；

五、完善用户画像的细节，将价值信息同步到画像中，并对有效信息的细节进行补充，增加可信度还原真实性；

用户画像并没有一个模版标准，具体还是要看业务需求，而且网上的模版挺多的，自己甄别吧。另外在用户洞察的过程中，我们可以结合可用性测试、绘制故事板（这两种研究方法有兴趣可以查阅资料，一两句讲不清楚，有机会展开讲）等方式一同进行，而不只是把目的停留在建立用户画像上，这样反而获取的有效信息受限了。

定量类用户画像要做什么

一、数据采集

通过有效途径将用户产生的数据集中，不论是产品数据库、数据埋点、第三方数据统计或是定量调研的结果，这些数据都是重要构成部分，同时也决定了信息的范围，比如你拿不到用户的出行数据，那么就根本没办法构建相关标签或指标。

二、数据定义

对数据进行清洗整理，识别出用户行为数据、用户偏好、生命周期等数据，并进行标签化分类整理，这些标签或指标可以体现出某些维度的趋势或用户行为预测。不过值得注意的是，在构建这些标签或指标时尽量结合业务流程或生命周期来梳理，考虑画像建成目的与业务场景同时，也要思考标签的权重问题，标签不等于越多越好。 

三、构建画像

根据产品阶段或业务需要，把相关业务标签结合用户群特征信息整合成用户画像，一般的业务标签类型有增长策略、用户偏好、用户价值、营销触点等，这类画像可以包揽多个维度信息，还能对周期数据可视化显现趋势变化，但是在用户痛点或需求上，可能不会很直观，需要进一步的结合用户场景带入思考。

通常互联网产品前期，没有构建标签或数字画像的经验，可以考虑让团队引入相关第三方数据画像服务，它们可以更便捷的接入到你的产品中并帮助你打标签做统计；

以下截图来自第三方大数据画像工具(神策)

*第三方数据分析辅助产品也不少，这里只做交流使用

如何让画像角色更生动

画像中的角色应该更加生动，能够让我们感受到真实的存在，只有这样才能产生共鸣，赋予画像价值，为此我们可以通过控制以下六点来做的更好。

一、不要特殊化

特殊能加深印象，但是特殊化并不代表产品的典型群体，同时在实际应用时容易扰乱共情或分散注意力，例如用户群体是普通青年，就不要描述成一个帅气的学霸，也不要为用户添加一些奇怪的癖好，这些不相干的信息并不能让画像更加生动；

二、合理应用头像

通常作品集中的头像都比较美观个性，这没事儿。但实际画像应用中，头像也是很重要的一部分，会马上映入眼帘，这些头像不要使知名人群的，且贴合真实用户标签，不用暴露性感或是丑陋异样的，也不要使用插画、卡通、3D形象，不要有奇怪或不自然的行为动作。

三、充实细节

以一款线上教育产品作为背景，举例原本我们的用户信息写到：

那么即可根据产品属性结合实际情况进行丰富补充，例如调整为以下描述；

虽然没有过大的变化，但是已经将贴合教育产品的地域信息、课程阶段、收入情况进行了完善刻画；

接着再例如，虞溪女士的需求写到；

简单来看确实是透出了线上教育产品的需求，但是需求并不深刻，也没有刻画出虞溪女士的核心诉求，为此我们可以结合创造情景故事的方法，融合角色、场景、行动、事件、评价、情节这些元素去深度刻画描述，例如以下调整；

结合创造情景故事的办法是为了刻画出更多细节，不仅可以让浏览者更好的沉浸在角色视角，也能在完善的过程中深挖出更多有价值的思考；

四、创造情景故事

情景故事不会很枯燥会更抓人心，能够传达更多信息的同时，将产品信息与真实情景交融在一起，方便团队记忆理解以及更好的促进讨论。创造情景故事的元素通常有：角色、场景、行动、事件、评价、情节。看起来就像是在描述“我与xx产品的一天”。

1. 角色：故事的主人翁或是参与者，不可缺少的重要部分；

2. 场景：故事发生的时间地点物理环境，例如早上八点半我在拥挤的地铁上抢到了座椅，并打开了手机；

1. 行动：能够观察到且与主题有影响的行为动作，例如我被这个问题难住了，解锁手机并打开了这个APP；

2. 事件：发生了什么事儿，角色间做出了什么反应产生了何种结果；

1. 评论：角色怎样评估并作出决策，有了怎样的目标，并如何进行下一步。其中任务目标是驱动的核心；

2. 情节：一系列行为与事件的演变过程再到结果，从问题的发生到角色推进目标到结局。例如经典的戏剧结构：

*创造情景故事是要花费时间精力的，如果时间充裕你可以慢慢将相关描述进行转换，时间有限责挑取重点转化；

五、不要孤立使用画像

在前文就有描述到画像需要配合其他体验可视化地图一起才能更好的发挥效用，画像通常始终保持着个体视角，而且没有办法传达一系列完整的体验报告，所以为了更好的满足项目多样化视角的需求，尽量不要孤立的使用画像。

六、定期更新

产品发展中，会经历不同的阶段与市场变化，用户群体自然会变。如果说产品在研发新的功能去开拓年轻化的市场，那同样意味着目标群体趋向年轻群体，这种时候就需要变更或新增用户画像，就不要使用旧的画像起步了。

基本上做好以上细节，你的用户画像就大功告成了，这就像是结合STAR法则优化项目经历一样。最简单的标准就是业务人员能够去理解这些角色并代入角色视角思考，可以有效共情或决策。

如何用好用户体验地图

首先我们回顾一下用户体验地图的关键词：既定的用户群体、应用场景或领域，用户以某个持续性目标驱动与你的产品或服务发生交互，并且涉及多个阶段来实现目标，地图会通过由外而内的视角洞察产品服务是否契合用户的体验。

由此可见在与用户研讨时，我们的问题或测试任务应该覆盖相关阶段或重要的任务流程，以此来获取体验地图的相关重点信息。另外很多产品比较庞大，服务颇多，因此控制好体验的阶段范围也很重要，不仅会拉长工期也会使得焦点分散。

用户体验地图的构成简述

用户体验地图主要包含三个层面的内容，一、用户目标阶段，二、用户与产品服务交互，三、痛点机会洞察；

其实碍于不同产品和服务类型，体验地图的构成元素也有差异，不过在漫长的应用发展中也逐步趋于稳定。

常见的构成元素：

一、用户需求或目标：
在体验地图中，用户以需求或目标驱动与产品发生交互，需求或目标既定了要做什么，应该需要什么服务。

二、行为阶段：

行为阶段是界定场景的重要部分，以目标任务阶段的生命周期或者关键节点展开，不一定所有阶段托盘而出，阶段太多则不聚焦，细分太多则费时间也不一定快速见效。

三、采取的行为触点或步骤：

用户使用产品或服务展开的行为或接触的设备、泛功能应用等。

四、想法与问题：

在体验服务的过程中出现的问题或是一些真实的想法感受。

五、情绪波动与精神状态：

情绪和精神状态通常是反映服务好坏或用户满意度的重要因素，但同时也难以观察或量化，通常会根据用户对问题的描述来共情情绪，亦或者向用户提供情绪表情标签。

六、痛点或机会揭示：

结合上层阶段行为与用户的反馈信息向下垂直洞察产品服务的痛点或机会。

七、设备或其他图例补充：

例如跨端跨设备或包含特殊标签信息的补充说明。

*示例模版

用户情绪板怎么用才对

表情包早已成为网友互动和情绪表达的重要部分，但是在实际的可用性测试或访谈中，用户会相对拘束一些，也不会把各种各样的表情挂在脸上，所以才说用户情绪很难研究和洞察，更别说量化执行了。有些人可以进行表情管理，情绪更是难以琢磨；

那么体验地图中的情绪板怎么搞定呢？

就用户体验地图中的情绪块来讲，通常一定不只是表情icon来做表达，这样费解还缺乏实际价值，所以一定会加上相关描述来揭示用户情绪与观点。心智模型中用户情绪感受便是靠的文本描述来传达。

早期Pieter·Desmet在其《Designing Emotions》一书中提出了如何衡量情绪的研发方法，他开发了一款叫做产品情绪度量仪的工具，其原理就是为用户提供各种表情表达的卡通形象，用户在体验过程中根据自己情绪选出最匹配的那个卡通形象来示意自己情绪。这个工具经过不断迭代并丰富声音后已授权到：https://www.premotool.com/，我们可以在度量用户情绪或其他体验可视化地图中配合使用。 

另外在使用表情标签应用时，并不大推荐常见的微信表情、QQ表情等，这些表情在长时间的使用中，用户都会形成一些偏好，这会影响使用决策

在服务体验的过程中，很多时候情绪变化并非是单一线型上起伏变，例如：

我在观看电影高潮的部分突然网络异常，那么我的情绪应该是多样化的，一边是代入高潮部分的激动，另一方面是网络带来的失落感，同时还有等待网络恢复的焦急。

为此我们通常有两种方法来传递情绪变化；

1、将喜、怒、哀、乐、悲、恐、惊或需要的情绪标签化，每种情绪用一个颜色表示，然后使用同轴的趋势图结合用户行为阶段来表示；

2、即使一次展示多种情绪，也难免有积极情绪与消极情绪同时出现的情况，这种时候可以围绕一条分界线划分两类情绪区间，使用情绪曲线结合关键因素描述来显示更加全面而复杂的情绪心理，对应每个关键情绪节点可以使用不同表情图标细化辅助，使得情绪起伏的信息更充实有价值；

怎样完善用户体验地图

1、建立正确的项目目标是第一步，用户体验地图的优势与作用都有在前面讲过(如果忘了可以在“两者工具的差异与特性”中开始回顾)，使用用户体验地图是有目的性地，它不是优化体验的万金油，通常都是收集用户反馈知道某一些阶段或环节存在问题，而建立优化目标开展的工作；

2、锁定存在问题的阶段，建立用户问卷、焦点小组或用户测试进行聚焦研究，尝试收集用户的意见或优化方案；

3、通过白板或线上协作工具建立简易的用户体验地图框架，并将研究用户的画像信息与碎片信息填入地图。白板共创的办法其实就是根据用户体验地图的框架，结合用户视角将自己的观点写到便签贴到对应的区域，避免你一句我一句难以记载和整理；

4、关注每个阶段的过渡，通常问题很容易出现在这些地方，例如付费前到付费后阶段，如何进入后者阶段就成了关键点，另外没啥优化空间或体验良好的阶段可以折叠起来留出更多空间关注核心；

5、用户体验地图的画龙点睛之处在于跨部门协作完成，而不是闭门造车，邀请一两个其他部门的人说明要求和完善地图并不是什么难事，只有这样最后的结果才能达成战略一致，而不是自己绘制完后要求其他人被动接受结果；

检验用户体验地图的标准

一、首先看你是否与用户建立联系，用户体验地图的个体对象是用户不是你自己，尽可能的获取真实的用户的信息。

二、一个产品运作是需要多个部门协作的，所以至少要有三个不同部门的人员参与进来。

三、协作完成用户体验地图和达成共识后，你会惊奇的发现问题如何解决，各个部门该怎么配合实现都清晰明朗了。

前一阵子跟UXren社区主理人宝珠老哥讨论过，就如截图所示，更重要的是将企业各部门协同在一起，达成一致的战略目标，共同参与探讨出解决方向为业务赋能，这才是体验地图的精髓所在。

什么是触点模版工具

用户体验地图通常包含了一系列阶段，而每一个阶段都会由多个触点编排成一段微型体验，而触点模板工具将会很好的为你建立和打开一片微型的体验模型，这种模型是由罗伯特·罗斯曼(j·Robert·Rossman)[美]与马修·迪尤尔登(Mathew D·Duerden)[美]在《最佳体验》中提出的一种体验洞察工具，它可以很好的结合体验地图去进一步的深挖某段流程或阶段里需要优化的体验，它们之间的关系就像一条路线图与一份详细的指引说明。当你完成某个触点模版时，你会对该触点上的体验设计有清晰的认识，并且会形成一份书面报告与执行团队共享和交流，触点模板可以很好的解释体验是如何设计的，并且将相关执行团队的角色联系在一起，这不是噱头，你可以根据后文指引进行尝试。

体验类型的框架

体验是复杂的，在用户触点模版工具中，体验被划分为平淡的、专心的、难忘的、有意义、革新性五种类型，并且它们具有连续性，是通过关键特征与关键属性定义出来的，它们结合了心理学理论基础，目的是方便更好的理解体验，并在设计实践中起到指引作用促进交流，因此我们在设计时也应该对用户体验结果有意向性的去设计，框架如图；

*关于参与感的两种系统思维是两种不同的思维状态，系统1更像是惯性思维，凭借认知或经验更加快速和自动化的思考，而系统2就会开始更主动的更深入的进行思考，参与阶段越高思维越深思。

而三个阶段分别是；

一、接受：个体意识到和接受体验过程中正在发生的事情。

二、思考->处理->计划：个体开始积极的思考体验，并对正在进行中的事物做出处理与反应，同时可能开始计划各种应对方案。

三、行动：深入的参与到体验中并引入新的触点和元素来维持互动，从而共同创造体验，例如《鱿鱼游戏》上映后，影片中的“扣糖饼”又带火了糖饼。

当新的事物被第三阶段引入后，又会重新开始接受并循环，不过这并不代表所有的体验都能够完整经历这三个阶段。

触点模板框架

触点是用户进行交互的重要部分，其周期可长可短，会产生不同感受，而一系列的心理感受会促成最终阶段或完整的体验。触点模版由11个部分组成，它们互相作用指导和揭示体验设计的方向与细节，并把设计结果引向预期的体验方向。

抬头信息

• 编号：对应到体验地图的阶段编号或是触点编号，随着触点设计逐步完善，对应的位置可能会发生转移。

• 标题：对应该触点模版主题的标题或是任务触点的名字。

• 体验类型：触点的体验类型或整体的体验目标，从平淡的到革新性的五个体验类型。

• 期望的反应：我们把期望的反应视为触点预期结果的北极星指标，它可以是多个。我们通过用户反应逐步提炼出预期的结果供予用户体验，例如期望的反应是笑容，那么我就可以提炼出“讲个笑话、开黑游戏”等可以促成反应的体验结果，同时期待的反应应该尽可能的传递用户价值。

核心组成部分

• 期望的结果：根据期望的反应，我们要提供给用户哪些体验来实现。同时期望的结果应该跟类型相匹配。一般我们可以根据 “1. 产生积极情绪、2. 吸引注意力、3. 帮助发展和加强关系、4. 从更宏大的视角给人来带意义、5. 提升能力、6. 孤立自由选择” 这些类型内容作为起点，并根据体验项目的情况细化，例如“心情低落想要刷刷手机产生积极情绪”Change“在App上刷会儿短视频，看点有趣搞笑的段子来缓解下低落的情绪”。

• 体验场景元素：触点模板工具没有特定的行业或业务模式，因此这些元素根据需要完善即可。而实际的元素应用中也会有不同的权重，注意重点元素的设计应用。

• 互动设计：可以是人与人互动、人机交互或更为复杂的互动，就是有意向性的将元素进行编排与用户产生互动获取必要的信息或传递。

• 贡献者：整个体验阶段中，可见的幕前服务人员与后台的服务员，他们是组成完整体验的重要部分，例如餐饮店的服务员与传菜员就是可见的幕前服务贡献者，而厨师们就是幕后的贡献者。

• 共同创造：共同创造和可供性是促进用户参与的两个重要的方法，并且参与度有高有低。好的体验更多是与用户共同创造的，建立合适的触点与用户共同创造体验是重要的！以微信的“拍一拍”来看就是个很好的例子，拍一拍功能本身是加强了微信聊天的可供性，给用户提供了更多的互动可能，同时用户可以自己编辑被拍以后的文本，加强了体验的趣味性，这便是共同创造的过程。可供性为用户提供更多互动体验的可能，而共同创造为用户提供DIY的空间。

• 优化：对触点进一步的优化，加深体验感受。一般分成了两大类型，一类是技术优化、一类是艺术优化。例如让一个App加载短视频更快更流畅，这就是技术型优化，如果为一个服务器未响应的404界面配上缓解焦虑的插图，这便是艺术型优化。

• 过渡：触点与触点之间的过渡可能波动、异常、缓慢、复杂等，如何引导用户正常的过渡到下一个触点也是重要的一部分，它可以是自动化的隐式过渡也可以是引导性的显式过渡，就像是安全通道的指示灯一样将用户从一个地点带往另一个地点。

*触点模版（可直接下载原图进行打印使用）

如何构建一个触点模版

通过一段音频聊天室互动体验之旅来揭示触点模版用法与效果，音频聊天室大家应该都熟悉了，这里就不聚焦用户画像与用户体验地图了，触点发生在用户第一次进入歌厅音频房间，那么应该怎么设计体验来为用户留下好印象呢？

触点是发生在注册后的第二个阶段，即首页房间列表(编号A02)，完成注册阶段后见到的第一个界面。标题则暂定为“一次非凡的音频互动之旅”，我们希望新用户在选择好一个房间进入后能够有一次愉悦难忘的体验经历，而相应的期待反应则是“有人带我玩真棒！这个声音我好喜欢，下次还来找Ta们”。体验类型则希望是从平淡的体验类型升华到难忘的。

其中体验场景除了设备自身与软件环境，更多真实的环境因素碰撞我们无法预测和控制，因此仅锁定软件自身的场景元素。互动设计则是关键，软件本身更多是工具支持，我们需要利用好运营资源跟用户产生互动来促成体验结果，这里我们会根据技术可行性优先考虑能为用户提供的体验结果，再到互动设计部分。其次就是过渡部分，预期的过渡触点实际上会有多个方向，我们优先以充值消费作为一个触点(转化)、私信关注为另一个触点(形成互动联系方式)，完善后的触点模版如图；

在该触点模版中，主要揭示了如何为用户打造理想的体验之旅，不仅涉及到运营方法也包含了软件的重点优化部分，它很好的展示了如何通过角色之间在软件中的互动来促成体验与商业价值，当你把这份资料在团队里分享后，完全可以清晰的对体验设想进行解释，以促进团队内的深入讨论与细节推进。至于相关功能的细节推敲同样可以采用触点模版继续深入。

接着A02触点模版中提到的标签体系优化，我们再一次的结合触点模版进行标签的体验设计，编号设定为“A03”，这是一个泛触点，它涉及到用户注册进入时、房间互动、系统消息、消费与充值、装扮标签的着落页，但归根还是在应用内。标题为“让标签为用户赋能意想不到的体验”，在这段泛触点中我们期望围绕标签为用户打造难忘的体验，让标签产生更多的价值与业务转换，经过初步的体验设计后，新的触点模版如下；

在这个触点模版上我们对标签的作用价值进行了定义，并对功能及业务流程上进行了设想，已经初步的形成了标签体验的设计，接下来只要将装扮标签的着陆页与房间内的应用进行完善设计，在辅以条件判断与消息通知打通闭环就算是完成主要工作了，再此后的内容你是继续用触点模版还是设计交互原型都是可以的，至少目标是明确的。相信写到这里，触点模版的应用与功效你已经一目了然了。

触点模版小结

触点模版的板块跟信息维度较多，但是考虑到触点或项目的实际情况，模板内的信息填充不用完整。并且它的确可以很好的将体验设计的思路整理出来并形成材料分享，对于多个触点只需要根据体验地图上的顺序打上编号后，即可将多个触点模版的关系连接起来，你可以将打印填充后的模版依次排列或张贴在白板上的体验地图上。

触点模版就像是一份交互自检表，它从多个维度去考虑和解释了触点体验的设计，尽管没有勾画出详细的设计细节，但是体验设计思路与执行团队的任务已经很明确了。

另外完成触点模版时，并非是要按照模版里的板块顺序作业，比如有时候我们是根据体验结果考虑运用哪些体验场景，如果有固定的场景，那么你就可以根据场景情况开始考虑，一般更倾向于先设定体验结果进行倒推。再就前面啰嗦过的，我们根据项目情况完善需要的模块即可。

服务蓝图介绍

更完整的服务流程可视化工具，可以结合用户体验地图对服务流程进行优化或调整，相比传统的业务流程图，它在用户角色关系与前后端分离上有明显优势。是一种服务可视化的工具，利于让产品保持精益（识别价值点、优化流程）

多角色的引入，虽然使得蓝图更加复杂，但是能够反映出更多角色的交互与流程关系。

服务蓝图的因素：

服务蓝图的构建元素：

结语

客观来讲，这些体验地图时常保持争议，特别是逐步大范围在业内曝光后，形式化、假把式、滥用等标签也愈发明显呐，这些体验洞察工具并不总是能够在项目中发挥预期作用，它们也需要区分使用场景跟项目需求情况，如果你没有尝试过，可以积极引用，当你熟悉应用后你会发现收获更多的是一种体验设计的思维，一旦需求或痛点摆到面前时不再像一只无头苍蝇。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

写在前面

今年的“双十一”，朋友圈异常安静，没有了以前电商活动的氛围，没有漂亮的数据，没有晒图，有人说是用户消费疲软了？数据不会骗人，今年”双十一”一天的GMV还是比去年高了将近500亿，而且一大波尾款人在11月1日就已经结束。再加上直播电商，用户购买渠道变多了。李佳琦直播带货一晚就超100亿的GMV，说明用户的消费意愿和消费力还是很强的。算一下，50个李佳琦直播一晚上就能抵上“双十一”一整天的GMV，有点厉害。中国伟大复兴的道路还在继续，随着人民生活水平的提高，文化素养提高，互联网普及，消费力只会增不会减，只是战场在变化。

前些日子发了PP微助手的优化作品，本篇将结合改版思路和最近对互联网设计行业的思考进行一些分享，希望对大家有一定的帮助，欢迎大家来指正吐槽~

点击可以查看   PP微助手改版优化

流量变“留量”

互联网产品最重要的就是流量，没有流量，就算产品设计的再好，早晚也会运营不下去。纵观这些年移动互联网的发展，市场已经被分割的差不多了，各个行业都有龙头企业（社交：微信、购物：京东淘宝、出行：滴滴哈罗、外卖：饿了么美团、旅游：携程等等），各大互联网公司业务也趋于稳定，红利期已经过去，流量市场已经变成了“留量”市场。就像淘宝这种大流量的产品，也在吃流量老本。

回归到设计，在互联网公司做设计，一直在强调需要有产品思维、用户思维，然而在“留量”的时代，更需要我们具有运营思维，同行业的业务趋同、需求趋同，可挖掘的需求少之又少，可以打开同一行业的各类app一看，就知道产品形态大同小异。所以只能在“留量”里下功夫，既要减少存量用户的流失，还要在这基础上让存量用户创造更大的价值。必然，我们在做设计改版的时候就需要结合一些运营知识。

曝光

“曝光”一词相信大家都听过，在拍照时，“曝光”时间越长，照片细节就越丰富，当然过度“曝光”，也会让照片失真。在运营一个互联网产品时，也需要用到“曝光”，这里的“曝光”是指产品内容的“曝光”。

用户在进入某款产品的时候，都是带有一定目的性，通常情况都会经历三步操作，从看见内容，到与产品互动，最后得到想要的结果。

这里的“看见”，就要说到产品承载信息的曝光，合理的信息曝光才能更精准快速的触达用户。同时，运营同学最关心的数据和流量，也是需要安排合理的信息曝光才能有有效的数据和流量。在手机这么一小块屏幕想把所有内容都曝光出来，是不太现实的，就算能，也不合理。把过多的信息一下子全部曝光给用户，效果反而会很差。通常做法就是对页面进行楼层的分割，流量进行合理的分发。大流量的产品，每个楼层都需要单独部门去运营的，这样就会出现业务主次和优先级，不然各部门就会为了争夺"屏幕地盘"，无限撕逼。

作为设计师，就需要和运营部门做好以下确认：

1、楼层怎么分割，哪些楼层是产品部门控制，哪些楼层是运营部门控制，每个楼层显示哪些内容，设计师需要根据每个楼层的重要性，去定义屏占比

2、哪些模块需要首屏曝光，哪些是需要第二屏曝光，依此类推，这个至关重要，设计师就要考虑各类机型适配问题，比如iPhoneX一屏能显示下的内容，在其他手机未必能显出来，这样会直接影响曝光，导致数据不好（等着背锅吧～），严格来讲要根据实际用户使用机型占比去定义首屏显示的内容。

3、每个模块内容的信息层级，明确信息优先级才能结果为导向去做交互布局和视觉呈现，这时候就是你发挥的时候，对比、亲密关系、留白等等，都可以上了。

这里结合PP微助手的一些改版优化（非全套），分享一些改版思路。

PP微助手改版思路解析

项目背景：PP微助手是取代电视遥控器一部分功能开发的一款小程序，核心需求有几点

1、账号统一，PPTV时代的用户，大多都是使用的PPTV的账号，为了方便管理苏宁易购账号体系，会引流把PPTV尚未升级的账户统一升级合并至苏宁易购账号。

2、投屏功能，看影片终端还是以电视机为主，所以只做投屏，不做在线播放功能

3、智能语音，结合苏宁小biu智能语音系统，可以和电视机语音互动，实现交互功能

4、会员业务，移动端开通会员比电视端更方便，同时可以用一些运营手段促进用户开通会员

5、推送活动，电视机打开频次不如移动端，推送活动给用户，移动端可以实时看到

电商行业通常会把用户分成“大明”、“笨笨”、“小闲”三大类用户，在视频类产品，绝大多数用户都是“小闲”用户，来平台都是找乐子打发时间的。

思路一：架构改变（产品思维）：

PP微助手本来就是辅助电视机的，用户觉得用遥控器操作麻烦才会选择用小程序操作。在设计的时候，把用户当成是一个并不想动脑子并且很懒的傻子，产品设计越简单越好，否则用户干嘛要用小程序，遥控器挺好的，遥控器的大多交互都已经习惯，也没啥学习成本。

从用户角度分析，进入小程序无非就是找片源、看片以及看片过程中的一些基础控制操作（播放、暂停、快进等等），所以简化了产品整体框架，从原来底部5个tab（首页、片库、遥控、搜索、我的），改为3个tab（首页、遥控、我的）。产品呈现给用户的样貌更加简单直观，也相应的培养了用户心智，让用户对PP微助手这款小程序有个基本定位。

思路二：楼层分割（运营思维）：

首页改版前，按照iPhoneX的尺寸，首页第一屏也就曝光了3个分类，而且下滑到底总共也就几个分类，片源的曝光度不高，banner呈现也相对普通，就是那种正常电商类头部banner。同时交互成本也高，要点击“更多”才能看该分类影片的全部列表，要知道多一步操作就会多损失一部分用户转化。

改版后，针对第一楼层推荐影片采用电影宣传时的大海报样式，视觉焦点更强烈，同时曝光也更强烈一些，你去电影院的时候，看到的电影宣传海报，大多都是这类竖版的，用户已经有一定的心智模型，所以在这里采用竖版更为好一些。这些推荐影片在这里也作为“hook”，后面会讲。当然像电商类产品，首页需要考虑严谨的屏占比，这类尺寸肯定不合适。

第二楼层是影片的分类，采用文字tab左右滑动的方式，这种分类方式虽然没啥设计感，也普普通通，但是在一个分类众多的产品里，这种处理方法相当不错。减小了楼层的冲突，也提高了内容的曝光。像腾讯视频、爱奇艺、优酷，分类tab都是吸顶固定的，很直观的传达给用户影片信息。下拉的时候，这里采用feed流，用户在交互习惯上，连续操作时，对同一种交互会有惯性和依赖，上滑时查看更多影片，能满足用户的预期，也不会因为调整新的交互（上述的点击跳转查看更多）方式让用户反感。在视觉形式上，采用了横版的样式，是为了和第一楼层形成对比，也是为了节省屏幕空间，能曝光更多的内容。二楼的影片内容也可以分布一些“hook”

搜索也是一种用户找片源的方式，后面再讲，这里要考虑到流量分发的情况。

思路三：引导用户（运维思维）

按照福格模型B=MAT，完成行为的三要素：动机、能力和触发器。

用户进了影片详情，说明已经有动机了，这时候需要抓住机会，按照产品需求可以完成两个行为目的，一个是让PPTV账号升级成苏宁易购账号，二是转化成会员用户。

这里要看一下进入详情的数据，是“hook”进来的用户多还是非“hook”进来的用户多。如果是“hook”进来的多，说明用户主观意愿不是很强，这部分用户可能会流失，如果是非“hook”或者搜索进来的更多，说明平台用户主观意愿更强，有较高的粘性，更容易促进会员的转化。

对平台来说，希望用户进来完成两条路径：

1、未登录的用户，点“推送”和“开通会员”按钮，进入下一步登录或者升级账号流程。当然这一步会流失用户，部分用户会反感登录这种操作。

2、已登录的用户，可以快速推送影片，完成自己的看片目的，如果是会员影片，这里就需要用户先开通会员，当然只是引导，还会有一部分用户不想开通会员，选择离开。

防止用户过多的流失，就需要平台一定的干涉，加强登录或者开通会员的意愿，可以从以下几点入手：

1、沉浸式体验，进入详情，头部区域自动播放影片花絮或者预告，快速让抓取用户眼球，增加下一步操作的意愿。

2、醒目的豆瓣评分，“hook”影片选择一些评分高的，用户针对豆瓣评分已经有一定的认知，评分优质的影片，用户更有意愿观看，更容易促进下一步动作，提高会员的转化率。

3、各类标签，比如：首播、独家、会员免费、会员半价、4K高清等等，能清晰定位影片，捕捉各类用户看片心智。

4、会员相关信息展示，未登录的提示“登录领券、限时活动等”，非会员提示“会员权益、开通会员的利益点等”刺激用户。

思路四：优惠券吸引用户（运维思维）

改版前优惠券和体验券在不同入口，流量分散了，券的目的就是要让用户去使用，需要缩短路径，更直观的展示给用户，能让用户快速做决策。如果券种类多的话，还需要区分各种券样式，需要让用户快速定位想使用的券。

其中已使用和已过期的券对用户来说就是已经没用的券，并不需要再用单独的tab分类，并且弱化处理。因为PP微助手会员券相对比较少，不像电商一样，会送很多商品券，所以用最简单的形式展示给用户就行。

值得注意的一点，不是说已过期的券就没用了，如果运营把控好节奏，发券有一定规律，用户看到过期的券会有一定的挫败感，就会经常来关注券。“废券再利用”也能增加用户的粘性。针对快过期的券，必要时候可以做二次提醒，给用户造成紧张感，会激发用券欲望。

说服用户下决定，一般从以下三个点去考虑：时间紧迫性、暗示稀缺性、后果恐吓性

流量分发和流量承接

产品的流量来源有很多，除了自身用户进入产品的流量，还有线下广告、线上广告、分享链接等等各种来源。目前主要的流量分发方式包括：搜索分发、算法分发、社交分发、人工分发、付费分发。PP微助手主要应用算法分发、搜索分发、人工分发。

先讲一下“hook”，在电商里是“钩子商品”，这里我把“hook”当做是“钩子影片”，运营精准推荐的一些“hook”，会取到不错的转化效果。

用户在产品内的行为路径是不可控的，一大波流量进入首页，每个用户都有自己的目的，所以需要对用户进行分流。一部分用户去了搜索，这类用户目的很明显，知道自己想看的影片名称，这部分就是搜索分发的流量；一部分用户被“hook”勾走了，"hook"激发了用户的看片动机，这部分就是人工分发的流量，需要运营去干预；一部分用户在不停的浏览，在浏览过程中找自己的影片，产品会分析用户行为，显示千人千面的首页，这部分就是算法分发的流量。

有流量分发，那必然就有流量承接，流量承接都是相对流量分发的，在电商产品里，站内的流量承接一般都在商详，以及对应的后置链路（订单确认、结算等等），从各渠道进来的流量，最终汇总在商详。在商详，会突出各种利益点和产品自身优势去刺激用户下单。至于利益点，活动时候的各种优惠信息就是典型例子，产品自身优势，比如：淘宝的先享后付、京东有京东物流次日达等等。在PP微助手这里流量承接就是影片详情以及后置链路会员套餐页，具体可以看上面的“思路三”的分析，怎么去承接流量，怎么去促进转化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

1.准备工作

设计工具

Sketch

精不精通Sketch，就看插件用的溜不溜，推荐个网站：http://sketch.cm/

无论是学习Sketch，还是搜插件、找素材，都是Sketch使用者的优选项。

Sketch是OS X平台独占，需要下载Sketch可以到这个网站去下载。

这里推荐个Mac平台应用的下载网站，使用Mac的小伙伴可以去这里下：http://xclient.info/

我个人是很推荐使用Sketch做UI设计的，软件本身已经提供了大量的IOS和Android系统设计资源，配合各类插件，几乎无所不能。

Photoshop

相比于Sketch来说，体型胖了点，在UI设计上略逊一筹。不过因为Sketch是OS X独占，所以因为平台限制的原因，用PS设计也没有问题。

我很久没用它做UI设计了，也没啥可推荐的了。

Adobe XD

全称为Adobe Experience Design；这是一款集原型、设计和交互于一体的小清新时代风格的设计软件。虽然有人说，Adobe XD将会是Skech的劲敌。然而在windows系统当中，Adobe XD的确是产品原型设计领域最顺手的设计软件。它使用简单，界面整洁，虽然之前一直使用的是Axure 8.0，但看来，Adobe XD在界面、素材以及设计操作上的确甩了Axure好几条街，至少它成功的吸引到了我。

做好版本管理、文件归档的工作

专业水平不仅体现在设计能力之上，优秀的管理能力也是重要的职业素养。

合理规划好设计版本，进行明确的文件归档工作，有助于提高设计师的工作效率。

这里不赘述了，每个人有自己的版本管理方式，不过目标只有一个：清晰高效。

2.关于手机的基础概念

这里的概念性内容不要强行记忆，理解即可，它是做移动UI设计的理论常识。

手机分辨率

手机屏幕的像素点数。比如750*1334、720*1280等等，细分还有物理分辨率和逻辑分辨率，这里不扩展讲解了，想了解自行百度吧。

手机分辨率牵扯到的就是工作时设计稿的尺寸，只要记住设计尺寸就可以了。

屏幕尺寸

手机对角线的物理尺寸，单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

屏幕尺寸和设计其实关系不大，主要是用来计算屏幕密度的。

屏幕密度(DPI或PPI)

每英寸的像素点数。简单理解就是屏幕密度越大，画面越逼真细腻。

下面是屏幕密度的计算方法，范例是5英寸，分辨率为1920*1080的手机：

屏幕密度牵扯最多的是安卓系统，安卓手机屏幕本身的密度种类非常多，这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题，这个我们下面会提到)

3.基础设计规范——IOS系统

这是苹果的开发者官网：https://developer.apple.com/

这里有持续更新的最新设计规范和资源模板，虽然是全英文的，但并不影响阅读。

设计师应该学会从官方获得设计资料，这比其他途径获得的资料更加全面和权威。

最新系统版本：IOS 11.4.1

中文字体：苹方黑体

英文字体：San Francisco

官方系统设计模板下载：

https://developer.apple.com/design/resources/

官方系统设计字体下载：

https://developer.apple.com/fonts/

下图是截止到目前，可能还需要支持的机型和对应的设计尺寸：

设计稿尺寸

只推荐750*1334的尺寸来做设计稿，这是向上向下都最容易适配的尺寸，包括用这个尺寸去适配Android版。

除了IPhone X的比例特殊外，其他的IPhone比例几乎差不多的，比较容易适配。

Sketch设计

使用375 * 667尺寸即可，开发在Xcode里也是使用这个尺寸。

导出的@2x图适配IPhone 5/5S/5C/SE   6/6S/7/8

导出的@3x图适配Iphone 6/6S/7/8 Plus    IPhone X

Photoshop设计

画布就建成750 * 1334尺寸的即可，在这个前提之下，

导出原尺寸图片加后缀@2x，适配IPhone 5/5S/5C/SE   6/6S/7/8

导出1.5倍图片加后缀@3x，适配IPhone 6/6S/7/8 Plus    IPhone X

常用数据

下面的内容苹果官方提供的模板文档其实都有对应的数据，可以去官网下载。

字号使用建议(这个不是硬性规定，根据视觉效果酌情使用)

导航文字            34-38px

标题文字            28-34px

正文文字            26-30px

辅助文字            20-24px

Tab bar文字       20px

图标尺寸建议

APP应用图标，建议使用1024*1024尺寸去做，逐级缩小去应用到各种场景中。

SKetch已经提供了IOS和Android系统的APP尺寸图标模板，直接使用就可以了。

界面适配

程序内部的功能界面：这种界面通过写成自适应的界面可以很好的适配各种机型；如果有特殊的布局要求，也可以让开发根据特定机型去调整，不需要单独为各类机型再做设计稿。

覆盖全屏类的界面：比如闪屏、启动页、引导界面、插画页面等等，这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

其他的IPhone机型，遇到这种界面，整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。

IPhone X的安全区域：IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后，中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿，请一定设置好参考线，不要把内容做进这两块区域内部。

IPhone X规范：iPhone X 人机交互指南及其设计细节

简单理解APP构成

下图是IOS开发工具Xcode里的一个空白页面，图片的文字标注请仔细阅读。

本质上，开发写APP界面和设计做设计稿是一样的，只不过两者实现方法不同。

APP的构成远远要比上图写的复杂的多，我们这里使用最简单的理解方式。

设计稿的标注

根据上图我们可以理解设计稿和程序之间的关系：

设计稿里的按钮、文字、图标、列表、背景色、线条等等所有的设计元素，

在Xcode里都有对应的控件，设计元素必须使用对应控件，才能在APP的界面里显示出来。

设计稿的标注，实质上是标注的各类控件的属性以及相对于其他控件的关系：

设计稿中：

文字的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

图片的自身属性：宽高、间距、距离、透明度。

至于标注在上篇文章有详解：一款APP从设计到切图标注适配全记录，这里就不累赘了！

程序的对应控件

Label的自身属性：颜色、字号、字体、行间距、对齐方式、透明度；

Image View的自身属性：宽高、间距、距离、透明度。

实际上各类控件的属性也要比这个复杂的多，这里是最简单理解的举例说明。

如今使用本地化插件Sketch Measure，几乎不用手工标注，标注导出HTML后，扔给开发，他们想看什么属性自己点击查看就是了，所以我们这里了解下标注原理就行。

而一些线上工具的插件，比如蓝湖、墨刀、Mockplus等等，功能更加丰富，各位根据自身情况灵活运用吧。

Sketch Measure去http://Sketch.im下载

设计稿的切图

IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀，是为了在Xcode导入图片资源时，识别对应机型所用的图片。

Xcode里提供了相应的位置，相同命名图片会根据后缀填入到对应的位置。

目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。

但是对于UI设计来说，常用的图片格式就以下几种：

PNG      常用图片格式，没什么解释的，目前大部分产品还在使用此格式；

WebP    安卓的图片格式，同等质量图片下体积非常小，非常推荐给安卓使用；

SVG      矢量格式，完美解决适配问题，但也有部分缺点。

想具体了解WebP和SVG，可以查看之前的文章。

切图输出规范

前提：同一类型、位置的切图，请保证切图尺寸、规格一致，图片尺寸为偶数大小。

1.有操作功能、可点击的功能性切图：最小点击区域问题

苹果官方提供的能准确点击的最小点击区域：88 * 88px;

小于这个范围也可以点击，但是点击不灵敏，体验较差。

对于比这个范围小的可点击按钮，周围需要用透明区域填充后再输出切图。

解释下为什么用透明区域填充来扩大点击区域范围：

图标这东西，对设计师来说没区别，都是图片。

但对开发来说，可操作和不可操作的图标是两种类型的控件，图标的样式不过是传给该控件的显示图片罢了。

可操作的功能图标在Xcode对应控件是UIButton。

对控件来说，如果不在代码里明确固定控件的大小、点击区域等等各类属性，设计师传给我多大的图，这个控件就会被这张图撑到多大。

你给我一张40*40的按钮切图，如果开发什么都不做，那这个UIButton在手机界面里就被撑到40*40的大小。

我也可以在Xcode里写几行代码，固定图片的大小就是40*40，扩大UIButton这个控件的大小变成88*88，这样这个控件的点击区域也扩大了。

但是一张规范的切图就能解决的事情，为什么还要在代码里再手动加几行呢？

一个可点击按钮需要加一行代码，整个APP就可能多加上百行上千行的代码。

规范的切图也是可以提升产品开发效率的。

2.非功能性切图，比如列表图标、说明图标等，按统一规格的最小尺寸切。

这么切还可以减少一些程序因图片资源大小导致的体积大小问题。

这类切图，对应的是UIImageView控件，就是一张图片，无操作，只是占位和显示。

所以你按照相同规格，最小尺寸切就可以了。

有朋友问：一定要切正方形的吗？如果图标都是30*20的，那我统一切30*20的行不行

答案是：可以，这个没有完全的硬性规定。虽然我是设计师，但也会去写一些IOS程序。正方形规格切图就是为了方便开发，当然还是推荐你使用正方形规格来切图。

但实际开发过程中，只要保证同一位置，切图规格统一就可以。

切图输出状态：

同一按钮、元素的不同状态，要明确命名对应状态之后，分别输出对应图片。

下图示例按钮的选中状态多出现在游戏APP中，这里仅表示说明。

命名规范

不要使用中文、特殊字符，请使用英文、下划线、数字对切图命名，数字不要打头。

命名方式尽量清晰，推荐采用：种类_位置_功能_状态

示例说明：

btn_homepage_seach_normal@2x.png

开发看到就会明白：这是位于首页，处于正常状态的搜索按钮2倍切图。

4.基础设计规范——Android系统

这是Android Material Design中文版的地址

https://www.mdui.org/design/

Android的英文版地址

https://material.io/

最新系统版本：Android 9.0

中文字体：思源黑体

英文字体：Robot

Android不整理各类机型的尺寸规范了，数据零散，难以整理。所以我们从屏幕密度这里理解设计规范就可以了。

Android手机屏幕密度

上文我们提过屏幕密度的计算方式，安卓手机因为各种屏幕尺寸和分辨率，导致如果单纯按照数值计算，可能屏幕密度种类会多到让设计师崩溃。

所以为了解决这个问题，安卓手机出厂时，屏幕有自己初始的固定密度，系统会根据这些屏幕密度自行适配，下图是对应的屏幕密度表：

Android的开发单位以及设计尺寸

正因为Android手机分辨率多样，为了保证同一设计在不同屏幕密度的手机上显示效果一致，Android系统使用了下面两个单位：

dp：android开发单位，相当于比例换算单位。使用该单位，可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果；

sp：android开发文字单位，和dp类似，也是为了保证文字在不同密度的屏幕上显示相同的效果。

当屏幕密度为MDPI（160DPI）时，1dp=1px

当屏幕密度为MDPI（160DPI）时，1sp=1px

按照上面两个公式的换算，同样dp大小的图片在不同屏幕密度的手机上如下图所示，

基本可以保证图片显示效果在各类手机上相同。

设计稿尺寸

通过上面的分析，在xHDPI这个密度等级下，倍数关系为2，推荐使用720*1280尺寸做设计稿，换算方便，适配容易。

不过目前的现状是，如果公司的产品有IOS和Android两个版本，基本上设计师只会做IOS的版本，然后套用给Android，这样做也是可以的。两者的切图，在这个设计尺寸之下是可以通用的。

设计稿的标注

推荐使用dp和sp进行标注。但是呢，如果你用720*1280做设计，使用像素单位标注，现在也不会影响什么。

因为前面已经提到过IOS的标注了，这里也就不再赘述了。

设计稿的切图

理论上，对于Android系统来说，如果你想完美适配各种机型，应该为不同的屏幕密度提供不同尺寸大小的切图，而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹。

但实际上，并不需要提供上面密度表那么多套的切图，程序安装包的大小基本就是由于图片占用了太多的位置。

所以需要提供多少套图片，请和公司的开发沟通，确定你们的产品实际支持哪些屏幕密度。

图片格式

WebP和SVG

我个人是推荐现在为Android系统使用WebP格式，体积小，显示效果好；

而SVG这种矢量图片格式完美解决了Android多套切图的问题，一套切图，完美适配各种屏幕密度。

最小可点击区域

48dp：这和IOS的最小点击区域性质是一样的，都是考虑到手指点击的灵敏性的问题，设计可点击控件的时候要考虑到这一点。

更多的注意事项和IOS切图是相同的，这里不再赘述了。

5.UI设计师的职业道路

如今的移动UI设计行业已经很成熟了，针对移动UI设计的便捷工具层出不穷；移动UI设计的理论体系知识也已经渐渐完善。但这些都是外部因素，社会发展了，我们跟着一起向前适应就好了；

但对于设计师工作能力的提升，还需要有明确的方法体系，更要有清晰的职业规划！

很多设计师工作了几年，却一直在原地踏步，苦苦挣扎，甚至没有职业目标。

目前我工作5年，就从我自身的体会来分享我自己的方式，当然资深的、精英设计就别跟我较真了，我代表的是那90%还在向上努力爬的普通设计师~

工作能力，不仅仅指的是自身的专业技术水平，还包含了各种综合性能力，请务必对自己有明确的职业规划和能力发展轨迹。

工作0~2年

这个阶段对于新人来说，是一个设计能力和工作经验的快速积累过程，不夸张的说，这两年内的经验可以决定你之后的职业发展道路是否顺利。

此阶段目的：提升设计专业能力、完善理论知识、积累实际项目经验

这个阶段就别想着一专多能了，先把那个“一专”搞好就可以了，当然不是不让你学习别的知识，而是说重心应该发在提升目前的专业能力上。

提升设计能力：

一方面，通过公司的实际商业项目提升能力，这个没什么可说的；

另一方面，业余时间务必进行大量的作品练习，无论是临摹、还是重设计都可以，目的就是一个：量大 从优！

临摹请用高质量作品，临摹一堆垃圾还不如不做，临摹请务必做到99%以上的相似度，不然那不叫临摹，临摹的过程是考验软件功力、设计技法能否完美复制的过程。

重设计请使用成熟知名产品，不要重设计一堆垃圾应用，成熟产品每个界面的布局、样式、功能、逻辑都是经过深思熟虑后呈现给你的。

重设计的目的是要体会产品背后反映的设计意图，不是为了重设计而重设计。

所以重设计之前请自己思考原产品这么做的目的再动手。

完善理论知识：

没有理论体系方法的支持，在设计道路上是走不远的。

现在关于UI设计的知识网站已经很多了，当然不局限在这类专业性网站上。

人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方。

当然，你也可以关注我嘛~（给自己打个广告，吼吼~）

工作2~3年

3年对于互联网从业者是一个坎儿，其实这是相对于职业规划来说的。

通过前两年的积累，对于UI设计本职工作已经可以胜任了，接下来的要考虑的是个人的职业发展规划了。

此阶段目的：拓展技能、明确职业目标、为进大厂做准备

拓展技能：

这个阶段可以考虑“一专多能”的多能了，作为UI设计师，可以学习的东西实在太多了，交互、动效、产品设计、开发等等。

不要求你达到那些专业从业者的地步，你要学到专业程度，还干什么UI设计啊。

目的是为了拓展自己的技能树，为自己提供更多的竞争力，这个习惯要一直保持伴随之后的工作……

明确职业目标：

设计师最怕的就是迷茫，如果说前两年因为刚入行，对行业，对自身都不完全了解，那情有可原。但工作两年后，对自身的情况再不清醒那就说不过去了。

可以从以下方面考虑：

是始终坚持在一线岗位的设计技术大牛，还是想做设计管理者，亦或者想从UI设计师转职成交互设计、产品设计等等。

工作两年已经对自身，对行业有理解了，自己的能力是否适合设计岗位，对设计的热爱是否能经久不变都可以作为参考调节了。

为进入大厂做准备：

刚工作，可能限制于能力实力问题，委身于小公司。

但是！虽然我们身在小公司，但心要在BAT CAO  TMD，

Apple、Google也不是不可以！

Skr！Skr！

这阶段可以为大厂准备一下，当然不是让你工作两年多就去面试啊，如果你的能力特别突出，就当我放屁吧~

意思是，可以以进入大厂为目标，综合性的考虑自身的缺陷并尽量弥补。

千万别以为就在小公司将就着干吧，反正拿的钱也差不多，大公司的滋味你是体会不到的。

拿同样的薪水，在小公司和大公司的感受可是完全不同的，小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。

工作3~5年

对互联网人来说，3年一个坎，5年一个坎，都是职业规划的节点时间。

3到5年的设计师，如果你真的用心工作了，一个人可以实实在在的顶起来一个项目。

我们上面说，为进入大厂做准备。在这个阶段，可以考虑进入一些中大型企业，提升个人的综合能力、拓展人脉。

部分企业也比较喜欢要这个阶段的设计师，有工作能力，职业道路又刚开始，搞不好可以在公司培养起来。

此阶段的目的：提升综合能力、拓展人脉圈子

这时的个人专业水平其实已经不是问题，继续在工作中磨练积累就可以了；

这里需要的是打开个人在职场上的道路。

说实话，即使是互联网行业，搞技术除了要保证自身技术过硬之外，会不会发展人脉，能不能提升综合能力才是最后职业道路能不能走远走高的决定因素。

提升综合能力：

与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等，都算综合能力，这是对内部的能力。

不要以为对设计师来说，我闷着头接需求，做设计就可以了。

这样的设计师，也许你可以踏踏实实当个接需求的小设计，但你永远也只是一个这类的设计，对于有更高更强的职业追求的人来说，没有帮助。

所以，张开嘴、迈开腿，一步一步尝试去推动自身进步吧，这个没什么技术性方法，必须要自己亲自去做。

拓展人脉圈子：

人脉对个人职业道路的帮助，远远要比专业能力的帮助要大的多，这是对外的能力。

设计师的圈子，说实话不算大。搞技术的，本身就坐办公室，而做设计的人本身性格也有一部分原因，但还是请你努力拓展自己的人脉。

对于自身的专业圈子，努力分享自己的设计经验、工作心得，总结自己的体会，发布到各类设计专业论坛上，积极的帮助别人，这都算一种拓展方式。

时间久了，就会结识非常多的设计界朋友，设计大牛也会逐渐注意到你，这些都是你职业道路上的宝贵资源。

还可以认识几个不错的猎头朋友，有好的职位，他们都会优先想到你的。

作者自述

这也是我写的最后一篇关于基础规范类文章，也算是整理一下工作到现在的基础常识类内容，以后不再写这类基础文章了。

人总要进步的，设计师还是要靠干货作品来撑腰的，对吧。

以后发的内容都是我做过的实际商业项目，我会把设计经验和工作方法融入到这些作品实例里来写，这总比我单纯讲理论知识要强。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

沟通是为了完成设定的目标，把信息、思想和感情，在个人和群体之间传递，并达成协议的过程。沟通目的一般分为：说明事物、表达感情、建立关系、达成目标。

需求沟通是设计师和团队围绕需求目标，信息传递的过程，是设计师展开设计工作的起点，贯穿整个设计过程，沟通质量直接影响设计和项目质量。但因沟通复杂性、开放性，对很多新手设计师来说，在需求沟通过程中，可能会碰到一些共同的沟通问题，比如前期需求不明确导致设计频繁修改、产品和体验发生冲突时无法说服产品、沟通过程中陷入情绪争吵、沟通中鸡同鸭讲等等。

针对这些问题，本文尝试梳理需求沟通过程中几种典型场景和方法，以期帮助新手设计师快速识别需求沟通中的常见问题；提升沟通效率，快速达成共识；掌握沟通窍门，更精准高效的产出需求。

本文主要分成2个部分，第1部分主要聚焦在需求沟通过程中的不同阶段，面对的典型沟通问题和解决方案；第2部分主要介绍沟通中一些常见的技巧和方法。

Chapter 1

——————————

需求沟通的目标和方法

1.1 设计师在不同需求阶段的沟通目标

通常设计师在处理需求的流程大致可以分成4个部分：了解需求->分析需求->探索方案->实现方案。在不同的阶段，设计师要解决的核心问题不同：

了解需求阶段，设计师和产品针对需求目标进行讨论，并和团队就产品目标达成共识；

分析需求阶段，设计师和产品针对产品策略合理性进行讨论，并提出体验诉求；

探索方案阶段，设计师探索设计方案，并和产品就商业目标和体验目标达成平衡；

实现方案阶段，设计师和产品协调优先级，调整方案，确保方案最大程度实现还原；

1.2 如何更好的了解需求，明确目标，达成共识

在了解需求阶段，设计师需要了解需求来源、背景、要解决的问题和目标。总结来看需求可大致分为2类：一类是需求目标较明确，产品有明确要解决的问题，如提升产品体验、满足某个用户明确需求、完成某个产品目标；一类是需求目标较模糊，比如挖掘用户潜在需求，探索新的业务方向。

对于目标较明确的需求，在了解需求背景、解决标准、需求边界、限制条件和责任人等问题后，即可进入需求分析，策略讨论阶段。

但对于方向探索类需求，如何协助产品探索目标，和团队达成关于目标的共识，是这阶段的沟通重点。以一个创业的项目为例，产品想做一个图片社区，原因是目前国内没有头部图片社区。还原项目初期的沟通过程如下：

在产品的催促和时间压力下，设计并没有围绕产品定位、用户群、产品目标进行充分讨论，也没有和团队成员达成共识。在这种情况下，选择跟随产品的节奏，陷入了被动执行。由于前期并没有针对需求进行细致的推敲讨论，方案的输出过程变成了试错的过程。产品方向修改频繁，这种被动的沟通方式，导致整个团队目标感不清晰、理解混乱。

经过反思和问题总结，设计师发起了主动沟通，运用设计方法协助产品明确需求，提升方向说服力，探索如何就目标和团队达成共识。首先，需要和产品明确用户群，并寻找用研协助，或发起快速访谈了解用户；其次，组织团队相关成员发起关于产品目标的讨论，围绕产品决策人给出的产品初步方向，团队成员每人写下对产品的期待，提炼总结团队成员的想法，提炼总结产品目标；再次，根据用户访谈材料，利用亲和图法，提取关键词，从用户诉求中洞察提炼用户目标。最终，产品目标得以明确，团队也取得了关于目标的共识，同时通过快速demo，来验证优化，项目得以顺利进行。

1.3 如何更好的分析需求，确保产品策略合理性

在了解需求背景、用户群体，明确了需求目标后，进入需求分析阶段，通常产品会给一个商业假设：假如做了xxxx，用户就会xxxxx，产品可以达成xxxx目标。以一个需求为例子：产品想做一个任务体系，通过福利吸引用户做任务，从而拉动产品活跃。

如果设计师完全按产品给的商业假设输出，方案产出过程貌似很顺利，但可能隐藏了很多问题。以本需求为例，产品的商业假设逻辑是：用户被福利吸引->用户为拿到福利做任务->用户获得福利->产品完成目标诉求；

但这个假设是正确的吗？设计师的价值就在于，这个时候要能找出产品假设中的问题。通过对用户的了解和洞察，还原用户的实际使用过程可能会发生的问题。找到这些关键问题并通过和产品沟通协调解决掉这些问题，才能顺利实现产品目标。

通过对用户实际参与过程的分析，用户在看到任务奖励后，实际需要权衡的内容很多，如福利吸引力够不够大、有没有关系亲密的好友可邀请、好友要完成的任务难度大不大？分析需求过程关键就是找到这些问题的对应策略，强化用户参与的动力，降低参与难度。

1.4方案探索阶段，如何平衡商业和体验诉求

在方案输出阶段，设计师和产品最常发生的争执是商业目标和体验之间的冲突。产品为了达成商业目标，很多时候希望把达成商业目标的手段做的很强；

当发生围绕商业目标和体验问题，谁都无法说服对方的情境时，设计师该如何沟通呢？

首先，作为设计师要摆正沟通立场，理解商业化是任何产品的根本目标，体验也是实现商业化手段之一，我们反对的不是商业化，而是简单粗暴的商业化方式，商业化的前提是对目标用户有足够的了解和盈利模式的清晰判断。

其次，应能够识别对于曝光越多越好，越直接越有效的这种思维方式，通常是一种鸟枪法的投机心理。在没有更巧妙的解决方式时，最节省力气的做法就是提升曝光等方式达成目标。

当发生争执时，如果仅仅站在设计立场上，用设计理论说服对方，通常效果有限。尝试找到产品实现商业化目标背后的逻辑，不要用手段代替目的，探索更好的实现商业化方式的可能性，比如尝试在合适的路径上推荐，或探索用户更容易接受的内容形式。

1.5 方案实现阶段，如何协调优先级，推动方案最大程度还原

在方案实现阶段，很多时候由于时间紧张，产品仅完成最核心功能，部分体验相关功能一直无法得到优化。

通常如果方案产品认可，但推进意愿不高时，可能的原因是：1.当前方案不是核心KPI，产品要优先保证对kpi影响最大部分完成；2.投入产出比不划算，方案在产品看来投入的人力/时间/资源过大，并不值得；3.方案改动可能引发数据风险，产品并无法确保改动一定能带来数据的成长；4.资源紧张，产品也很想实现方案，但项目时间/人力/资源真的很紧张。

这种情况下，首先，要和产品够分沟通他们的疑虑和担心，到底是哪类问题；其次，从心态上也不用急于一时，做好长期推动的准备；还有，充分优化方案，消除产品疑虑，寻找合适时机进行推动。在项目逐渐迭代的过程中，对需要推动体验优化点持续关注，尽可能放大方案价值，结合新的需求点，思考能否从价值拓展角度，如提升品牌价值、扩展性等角度提升方案说服力；同时，从缩小成本和打消产品疑虑角度，做足准备，推动方案。

Chapter 2

——————————

沟通技巧的问题

沟通的过程是一个信息螺旋传递的过程，表达者的信息传递到接收者时，因为背景、环境、理解能力、传递完整度等差异，接收者仅能接收部分信息，而接收者在理解消化后，再将自己的信息传递出去，这个过程循环往复，会导致两个最常见的沟通问题：目标偏离以及信息衰减。学习适当的沟通技巧，可以有效减缓目标偏离和信息衰减。

2.1 如何防止沟通目标偏离

要防止沟通目标偏离，首先要理解什么会导致目标偏离？1.目标不清晰，比如本来想找产品聊下某功能体验不合理，但因为产品一直说项目时间紧，被倾诉了一通苦水后，忘记了本来要沟通的问题，转移到了其他话题上，最后不了了之；2.缺乏同理心，比如当发生争执时双方不能互换角度，产品一直在说实现目标手段和现阶段问题难点，设计在说体验问题和设计规范，双方互不妥协，陷入争吵；3.陷入情绪，表达观点时陷入情绪化的争执。

针对这三个会导致沟通目标偏离的问题，可使用以下技巧：

① 设定沟通目标并保持关注：在每次沟通前想清楚自己的目标和底线，尝试用全局视角分析自己设定目标的合理性；在沟通过程中要经常反思当前沟通的问题是否已偏离了目标，对达成目标是否有帮助；发现目标偏离可尝试改变节奏，思考接下来说什么有助于达成目标；

② 换位思考：能够倾听对方的问题和困难，尝试寻找解决问题的办法，而不是一直表达诉求，无助于问题的解决和推进；

③ 控制/倾听情绪：美国心理学家埃利斯创建的ABC情绪理论，拆解了事件发生和情绪之间的关系，指出事件的发生并不是导致情绪的直接原因，我们持有的信念才是。因此在沟通中不要加入太多内心戏，过度解读事件。比如产品让设计反复改稿时，可能会解读为产品在故意刁难，尝试了解反复修改背后的原因，可能对解决问题更有帮助。

2.2 如何减少沟通过程的信息损耗

沟通过程中表达者的模糊表达和接收者的理解偏差，会导致沟通过程中的信息损耗。比如经常会听见产品有以下类似的表达：“设计稿尽快输出”、“页面太结构化了，想要更社交化一点”、“能不能做得更有创意一点，更有趣点”当出现这些类似的沟通语句时，可以尝试通过具体化方式，进行确认。

对于可能会出现理解偏差的问题，重要的信息用自己的语言组织后再次确认“你的意思是xxxx吗？”；重要的沟通后，可梳理沟通记录，企业微信同步周知确认；方案的沟通过程可以快速画草稿确认；尽可能的减少因为理解不一致导致的沟通问题。

总结

在需求沟通过程中，我们要对不同阶段的沟通目标有清晰的认识，围绕目标进行充分准备，运用设计方法了解用户、了解产品核心诉求，做到知己知彼，才能进行有效的沟通。

在沟通过程中保持对目标的关注，始终牢记沟通是为了解决问题服务的。适当学习沟通技巧较少沟通过程中的信息损耗。

沟通是解决问题，共同协作的重要方式。如果你觉得自己不善于沟通，可能要反思下沟通前是否想清楚自己的沟通目标，对于解决问题的过程、方法是否熟悉，准备是否充分？当我们能做到知己知彼、胸有丘壑时，沟通可能就变得简单起来。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、设计和艺术的区别

艺术：

艺术是感性、天马行空、富有创造力的，表达创造者的个人意识。

设计：

设计是理性、精密的，为了解决用户的问题

（你看得懂吗？你有什么见解？为什么大家见解不一样？这就是艺术的魅力）

二、用户体验及用户体验设计

什么是用户体验？——————使用一个产品时的主观感受

用户体验设计？———————为了提升用户体验而做的设计

1.用户体验设计

首先要解决用户的某个实际问题--让问题变得容易解决--最后给用户留下深刻的印象。（视觉只是其中一部分，并不是设计的全部）

Eg：充电插座的苦恼--错开位置

尿液四溅--厕所里放一只苍蝇，用户会去瞄准上厕所（设计美观且有趣味性）

2、用户体验设计的特征

(1)严谨、理性、创意

先关注要解决的问题----其次思考有趣的创意帮助用户得到更好的体验。

(2)提供特定问题的解决方案

设计目标是什么，为什么人解决问题，如何解决

Eg:钢铁侠u盘死死按住关机键；楼梯是为残疾人设计的吗，我懵了？

(3)不让用户思考

用户感到挫败，会放弃。你的设计不要用户一头雾水。

(我到底怎么走?)

(4)趣味横生

尿液四溅贴提示语效果不好，放一只苍蝇效果很好？

因为：抓住了用户的心理和行为习惯，同时充满趣味，吸引用户

Eg：path推出的商店功能，在里面买自己喜欢的贴纸，摇晃手机贴纸也摇晃，感觉很好玩吧～带来好的体验感

3.用户体验设计师遇到问题如何思考

三、各种设计师的区分

1.怎么和别人解释用户体验设计师

A：“你用一个网站的时候，有没有出现：某个功能找不到了，点击按钮没有反应，填写的信息不知道哪里错了总是不能提交成功？”

B：我们的工作就是改善这种情况，让你使用网站时有一个好的体验，同时能让用户感到愉悦和不受打扰。

工作中：除了考虑用户还要让公司有利可图

2.交互设计师

通过分析用户心理模型、设计任务流程、运用交互知识把业务逻辑（需求/功能）以用户能理解的方式表达给用户，最终实现产品战略（公司需求和用户需求的平衡点）的过程。

即：从公司战略角度考虑问题，在公司需求的基础上让用户觉得好用、易用

交互设计师的产出物：不是原型，你不是画图的工具，重要的是解决问题的能力

工作内容：竞品分析文档、用户反馈整理、流程图、设计草图、原型...

3.视觉设计师

原画：设计者很强的手绘能力，作品充满艺术表现力

平面：传达思想，较强的感染力

推广运营设计师：突出重点抓眼球

UI：良好的审美、具备一定的交互知识

                      (原画)                              (平面)                                              (推广运营)

4.用户研究员

通过各种分析和研究，深入了解用户特征，用户行为习惯，为产品运营推广提供必要的方向

工作内容：市场分析、竞品分析、创建人物角色、问卷调查、焦点小组、用户访谈、可用性测试

四、用户体验设计师的作用和价值

1、用户价值商业价值

用户通过优秀的设计快速达到目标，企业也会财源滚滚

eg：改变一个按钮的颜色，点击率提高35%；优化操作流程，转化率提高50%...

2、项目价值

跟进各个环节，保证产出物质量

推进统一及标准化，提升设计效率

促使项目流程合理，有规划

五、交互设计师的作用和价值

1.工作内容

分析重塑需求;与用研配合，了解用户特征与行为；设计结构、流程、界面、动态效果；跟进视觉、前端、开发；及时整理上线问题，准备下次迭代...

2.品牌价值

维护和突出品牌形象，统一的设计理念

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

///

它是如何开始的-固定屏幕

在千禧年来临之前，我们首先开始在单一视图屏幕中进行UI设计，这类屏幕在当时最流行的尺寸是640x480。大多数时候，我们甚至没有考虑让屏幕滚动，而是在特定区域或文本局部区块中设置了内部滚动条。毋庸置疑，当时的大部分网页也是用Flash或HTML创建的，并带有用于布局的表格。那是在智能手机出现之前，随着事物的发展，我们经历了第一个向“响应式”设计的根本转变。我们已经走了很长一段路，CSS已得到长足的发展，“响应式”网页设计从2010年开始才真正获得了专有工具。

图表来源: https://www.webdesignmuseum.org/web-design-history

///

它现在怎么样-响应式设计

随着CSS3的发布，我们获得了对“媒体查询”（Media Queries）的访问权限（译者注：随着移动互联网的兴起,我们需要适配多种移动端设备,这就需要用到Media Queries，即“媒体查询”），此后不久，Ethan Marcotte在2009年底创造了“响应式设计”一词。十多年来，我们一直使用“响应式网页设计” (RWD) 创建网页布局，作为一种网页设计方法，仅需基于一种屏幕尺寸进行设计，“响应式”使我们的设计能够适配各种设备和屏幕尺寸。

在早期，当移动电话还不兼容媒体查询或JavaScript时，“移动优先”和”渐进式增强”的概念就成为了非常流行的方法，当时有很多CSS完全不受支持。

用我们今天的话来说响应式设计，我们认为页面的布局要适配整个浏览器、屏幕大小和那些需要投射到整个布局上的限制。当需要设计从桌面端调整为移动设备屏幕所需的尺寸时，我们使用“媒体查询”来更改整个页面布局。

///

它的未来是什么-组件驱动

很快，使用这种“响应式”设计方法可能会被认为与使用表格进行页面布局一样过时—就像我们在90年代所做的那样。

我们通过基于viewport（视口）的“媒体查询”获得了许多强大的工具，但我们也缺乏很多适配的可能性，因为“媒体查询”是一个适用于整个页面的通用解决方案，并且对每个用户来说都一样。我们缺乏响应“用户需求”的能力，也缺乏将“响应式”样式注入“组件”本身的能力。

当我们谈到组件时，这里指的是页面上的“元素”，这些元素可以由其它“元素”的集合组成。例如卡片、横划卡或推荐模块之类的UI内容，每个“块”都由各种更小的“构建块”组成。这些组件拼凑在一起构成我们的网页。我们可以使用 global viewport information（全局视口信息）来设置这些组件，但它们仍然无法拥有自己的风格。当我们的设计系统是基于“组件”的而不是基于“页面”的时，这使得它变得更加困难。

好消息是这个生态系统正在发生变化，而且它正在迅速变化，这需要我们进行一些思维转变：考虑如何设计和定义组件样式以及它们如何适应周围环境。

CSS正在不断发展，“响应式”网页设计的新时代即将到来。从目前的情况来看，自从我们第一次引入 “响应式网页设计” (RWD) 以来，仅仅10多年的时间，这个生态系统已经准备好迎接CSS发生一些相当大的改变。

让我们深入研究一下可以期待哪些类型的变化，这会如何改变我们的设计方法，以及我们如何考虑界面设计。

///

用户能够设置基于个人偏好的“媒体查询”

简单来说，我们可以期待新的基于偏好的“媒体查询”来帮助我们更好地“响应”用户。它们将使我们能够根据用户自己的特定偏好或需求来设定网页样式。这将使我们能够根据用户的体验偏好来调整用户体验。

这绝不是一个完整的列表，但能给你一些想法，这些基于偏好的“媒体查询”可能包括：

这些将帮助我们构建更具活力和个性化的网页体验，专门满足我们用户的专属需求，尤其是那些希望网站易于访问的用户。更进一步说，这些基于偏好的“媒体查询“尊重任何用户已经在操作系统设置的偏好。举个例子，当用户的操作系统偏好设定为“减少动效”时，他们很可能不喜欢你页面上的超级华丽的介绍、加载或飞入的动画动效。我们应先尊重他们的偏好，并为其他人提供“动效增强”的体验。

另一个流行的媒体查询是@prefers-color-scheme（配色偏好设定），它允许我们根据用户的偏好和操作系统中的设置将我们的设计更改为“亮色模式”或“暗色模式”。这不依赖于用户需要手动来更改“暗色模式”，它会自动发生。

///

“容器查询”为你的设计系统注入新的生命力

CSS 中最令人兴奋的新兴领域之一是“容器查询”（container queries），通常也称为“元素查询”。从基于“页面”的“响应式”设计到基于“容器”的“响应式”设计的转变对发展“设计系统”的作用价值不容低估，尽管今天使用它并不安全，但重要的是要了解其发展方向。

简而言之，“容器查询”将允许我们基于“父级容器”而不是整个页面来设置规则。这意味着任何组件都更加独立，与现代设计系统保持一致，真正成为“即插即用”模块，可以转移到任何页面或布局，而且无需根据新环境重新考虑所有内容。

“容器查询”为我们如何规划、设计和构建特定组件提供了一种更加动态的方法，因为组件本身拥有它的响应信息。

甚至Ethan Marcotte自己也表达了为什么“容器查询”如此重要，我们应该研究一下。

///

考虑各种形态因素

由于各种“形态因素”（form factors）的变化和扩展，例如新的屏幕类型，可折叠屏，我们需要“媒体查询”来考虑这些场景。在这里提到的所有内容中，请记住，这是最具实验性的，并且只是一项正在进行的工作，仍在尝试解决我们可能遇到的任何复杂问题，同时考虑未来“形体因素”可能会如何发展。

在可折叠屏场景中，原型中有一些“媒体查询”可以让你定位屏幕跨度以及我们如何让内容根据新环境进行适配。例如，你可以在一个屏幕上放置一个收起的侧边栏（或菜单），并允许内容在另一个屏幕上展开并随页面滚动。

///

为什么我们需要它？

我知道你在想什么，我们已经从事网页设计并使用“响应式”来进行网页设计10余年了。我们对其相当满意，那么为什么要改变呢？如果我们真的以终局视角来看响应式设计，那么它就是关于个人用户的用户体验设计。我们正朝着一个与每一位个体用户高度相关的时代迈进。我们的网页体验应该去适应用户的需求偏好。随着设计系统的发展以及我们如何创建更便携的网页，诸如“容器查询”之类的工具将变得非常有意义。

配图：CSS 将基于各个层级来确定用户的最佳体验

考虑到这一点，这意味着我们现在可以使用基于页面的媒体查（包括跨越屏幕的细微差别）来设计宏观布局；使用容器查询的组件设计微观布局；使用基于用户偏好的媒体查询，根据用户独特的偏好和需求定制用户体验。

对于新的响应式设计，有许多新概念正在被原型化和概念化-请看下面的延伸阅读。所有这些协同工作的方式需要我们从根本上转变我们对设计和用户独特体验的看法。我们需要更加适应这样一个事实：即我们的设计不是静态的，不仅在布局上，还有在用户可获得的体验中，我们需要学会在这种模糊性中做出计划。网页和设计的未来变得越来越复杂，我们需要适应和挑战自己，理解“新响应式”体验的意义。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加：ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

向世界知名的设计师致敬系列之二：乔纳森·伊夫,马克·纽森

向世界知名的设计师致敬系列之一: 雷蒙德·罗维,约恩·伍重,菲利普·斯达克,荣久庵宪司,亚历克斯, 亚历克斯·塞缪尔森