用户体验地图（Customer Journey Map）是什么？

用户体验地图是从用户的视角出发，去理解用户、产品或者服务交互的一个重要的设计工具。

也可以说是以可视化的形式，来表现一个用户使用产品或者接受服务的体验情况，从体验的过程中来发现用户在整个体验过程中的问题点与情绪点，以此来从中提取出产品的优化点，方便对产品进行迭代，从而保证良好的用户体验。

经典案例

Chris Risdon绘制的欧洲铁路购票的体验地图

上图中是欧洲铁路公司整个体验地图的一部分。欧洲铁路公司是一家美国经销商，为北美旅客提供一个独立预订火车票去欧洲各地的平台，而无需用户去网站预定。他们已经拥有了一个良好体验的网站和一个屡获殊荣的咨询中心，但他们希望通过所有接触点来优化用户使用过程，这样可以让他们更全面地了解，他们应该专注的投资，设计和技术资源。整体的“诊断”评价系统，包含一系列的重点举措，体验地图只是其中派生的一部分。体验地图帮助建立同理心图，来理解随着时间和空间的推移，用户与欧洲铁路公司服务系统交互时接触点的变化。

在这张体验地图中采用了五个关键组成一个体验地图，一个体验地图可以直观的表示用户操作流、期望、特定的目标、用户情绪状态和整体的体验点，做到整体把控和评估产品体验。

作用 ：

用户体验地图能帮助我们创造出一个有大局观的用户体验，更好的帮助我们理解用户的痛点和需求，帮助Team达成共识，非常有利于跨团队合作。

用户体验地图包含的内容 ：

其中包括，人群（产品的用户是哪一类人）、 用户的需求（用户想得到什么）、 路径（在某特定的场景下体验的整体过程） 、接触点  （产品与人或人与服务接触的关键点）、行为（用户的行为是什么样的？）、情绪  （体验过程中的感受心情） 、机会点  （过程中可以突破的点，可以成为特色的地方）、 解决方案  （解决用户在体验过程的痛点）、 问题  （解决用户在体验过程的痛点）。

用户画像 ：

在准备开始绘制用户体验地图的时候，我们应该要确立用户群体 / 确定产品目标 / 了解用户目标，并作出用户画像。

视觉设计师怎么使用

举例（一）：

那我们看看作为一名视觉设计师应该关注哪部分的流程。

视觉设计师的用户体验地图 ：

我们的聚焦点应在上图的这几个部分。

所以当绘制完用户体验地图后，应该再绘制一份视觉设计师看的版本，我们设计师主要关注的视觉的触点。

定量方法（产品方向）：

我们在行为和情绪上一般会使用问卷法、后台数据分析法；而在需求和问题上一般会使用焦点小组、访谈法、观察法、日志法和田野调查，下面就为大家来解释下这些方法。

焦点小组：是指从研究产品中所确定的全部用户群(总体)中抽取一定数量的用户来组成样本,根据样本信息推断用户群总体特征的一种调查方法。

访谈法：访谈，就是以口头形式向用户进行询问，根据被询用户的答复搜集客观的、不带偏见的事实信息，以准确地说明样本所要代表的总体的一种方式。

观察法：观察法是指研究者根据一定的研究目的、研究提纲或观察表，用自己的感官和辅助工具去直接观察用户，从而获得资料的一种方法。

日志法：是由用研人员按时间顺序，详细记录自己在一段时间内使用产品的过程，经过归纳、分析，达到分析产品目的的一种工作分析方法。

田野调查：在日常生活中，在一个有一个严格定义的空间和时间的范围内，体验特定用户群的日常生活与思想境界，通过记录自己的生活的方方面面，来展示不同阶段用户群的基本需求。

注意事项（5要点）

1. 在制作地图前，应理清楚产品的前期规划和需求，并且与同事达成共识。

2. 避免以自己的经验或者认知来确定用户体验地图中的接触点，应当真正的从用户的行为中去提取。

3. 不要将一些落后的信息加入到用户体验地图中。

4. 最好先在Team内部脑暴一份地图，再去与所制作的地图进行对比。

5. 用户体验地图不会涉及到实现方案和现实机制，只涉及用户的体验。

团队人员的合理搭配 ：

将公司或者团队的PM、RD、运营、Leader等过来，详细的描述这一份用户体验地图，聆听他们的反馈。

在分析用户问题上 ：

分为四个等级：ABCD，在对优先级进行排列的同时应该，考虑到产品在每个阶段的侧重点，根据不同的进度和情况，来对优先级进行排列，帮助我们整理问题和提炼最核心的一些体验问题，区分问题还能帮助我们更好的把握产品的优化方向。

视觉设计师应该关注的点 ：

视觉设计师的任务是什么？是有效的传达出产品的信息、简洁并且优雅的传达、通过视觉设计制造出愉悦的用户体验。用户在很多的场景下都可能接触到企业的产品或者是服务，这个服务接触带给用户的感受更多是偏向于视觉感知方面的。所以我们需要尽可能的列举出企业的产品或者服务与用户可能产生接触的场景、服务触点，再根据服务触点延伸出相关的“视觉触点”，用来梳理出我们需要输出的视觉产物，做出相对应的查漏补缺和优化，输出指导企业的品牌建设工作。而用户体验地图就很适合作为这样的工具。

“体验地图”对于优化视觉体验的意义 ：

整体性：系统性地规划品牌的视觉统一化工作，提升品牌建设工作的全面性和完整度。也可以避免未来工作中不同的品牌 / UI / 运营设计师对于品牌概念的理解不同而带来的设计出入。

品牌设计，是用户对于公司产品的直接印象，所以在品牌设计的要求就是：建立特征、保持特征、推广特征、美化特征、对于以上的要求，来提供完整且匹配的设计方案。

运营设计，运营设计的目标就是让用户尽可能的感知到产品的好，把产品的特点通过设计包装传递给用户，一个好的运营设计，应该是在用户看到你的设计作品后，会产生足够好的兴趣和好感，并愿意去关注你的产品。

UI设计，这是产品与用户接触过程中，频率最高、最直观的部分，目的是为了让用户认识到产品的相貌和气质，UI设计需要注意界面视觉层次的强弱、信息划分、用户的视线轨迹、色彩的表达、质感、舒适度等，来让用户觉得这个产品设计真好。

例如 ：

OFO，以年轻人为主的共享骑行产品，无论是在品牌/运营/UI的设计上，都能让人感觉时尚、年轻、阳光、且有亲和力。

品牌设计 :

UI设计 :

运营设计 ：

UI设计 ：

运营设计 ：

设计师的进阶 ：

在一开始的初级设计师阶段（也就是1.0阶段），我们需要从交互设计师手中接过交互设计稿，来对它进行气质进行改造，做出独特的视觉设计，也就是将其翻译为高保真稿，然后再与开发同学进行对接，也要保持视觉走查，以防实际效果与预期效果的不符；在这个1.0阶段我们的表现力和创造力，是最为主要的，如何去做出差异化？这是这个阶段的设计师需要考虑的，在这个APP设计趋同的大浪潮下，你如果能够做出不一样的设计，那么你则可以一鸣惊人，从众多水平相当的设计师中脱颖而出，这时你便可以考虑进入下一个阶段，也就是2.0。

在高级设计阶段（即2.0阶段），这时候你就需要拥有更好的产品思维和逻辑能力，不仅仅只是从交互设计师拿到交互设计稿，直接上手开做，在这之前，你需要开始了解产品的业务定位、用户人群、产品目标、当前的问题、未来的迭代等，需求方这时候就成你的主要对接对象，需要你具备拆解需求、采集用户的需求、扩展业务、能进行设计验证的能力，能将产品的气质和品牌贯穿于整个产品(UI/运营/品牌)，设计是怎么推导的，现在就不是仅仅只在停留在好看的层面上了，毕竟设计师不是画师，而是解决问题的，我们在做了某个设计后，就要去关注它的变化了，看看用户的反馈、商业转化率等等，这都是为你的下一次设计迭代做的参考。

从

分享到脉脉

转自：脉脉

原文链接：https://maimai.cn/article/detail?fid=988630001&efid=N-uHKNnf7vXGBmaFd3lZHA&use_rn=1

在页面导航栏中，常会见到返回、取消与关闭三者按钮。许多同学会弄混它们的使用逻辑，所以写一篇小文帮助各位梳理下。

返回和关闭

先抛开图标，我们回到功能本身的含义上看。如果我们不在产品的语境里，就单看「返回」和「关闭」这两个词，你首先会想到什么呢？

当我这么去问自己的时候，脑子里出现的并不只是零碎的词语，而是一些场景和画面。比如我走错路了，需要原路返回；公司复工了，我要返程回去。或者，睡觉时间到了，我该关闭电脑了；饭菜烧好了，我得把油烟机关掉，等等。

如果仔细去想的话就会意识到，语义衍生出来的，都是我们日常生活中的经验和对世界的认知。产品中使用的各种语言，不管是文字也好，或者图标图形也罢，一直都是以我们对它最本能的理解为基础的。所以只要你联想自己对「返回」和「关闭」的看法，就能知道它应该在什么样的产品情境中出现，以及它为什么会出现。

于是，很自然的，我们会把「返回」和「路径」联系在一起，所以「返回」在导航设计中不可或缺。并且「返」也预示着我们会回到之前的路径节点，整个过程是连续性的，不被切断的。而「关闭」就完全不一样了，它一般和我们的动作有关，是一个短暂性的操作，相比返回也显得更为独立。

根据我们对语义的判断，再结合实际产品中「返回」的场景，我们可以概括出「返回」和「关闭」的特征差异。

1. 返回

连续性：按照产品的页面层级顺次跳转。但存在特殊情况，因为有些产品定义的功能出入口是不一致的，在信息架构层级已经做了一定的优化，所以返回不一定会按原来的路径回去，可能会按产品既定的路径。比如网易云音乐歌曲播放页进入直播后返回不是到播放页。

整体性：在产品功能页面关联性较强的功能中，「返回」需要连接各个页面与层级之间的架构关系，因此「返回」作为操作节点，可以帮助产品功能的各个页面之间建立联系，维持产品的整体性。

2. 关闭

非连续性：用于产品中的临时内容或临时动作，比如弹窗或活动页，与上一级页面没有直接关系。

独立性：非产品原生内容或是产品内的独立内容。比如小程序、浏览器标签等。

3. 返回和关闭的使用场景

知道了返回和关闭的特征后，我们可以从两者的使用角度上再去梳理一下。

现在产品中关于返回和关闭有三种状态：

1. 只有返回
2. 只有关闭
3. 返回和关闭同时存在

1 和 2 的情况很好理解，我们只要根据前面各自的特征去看就能够理清场景。

3 的情况会有特殊性，因为它同时具有返回和关闭这两种看起来相矛盾的特性。其实这是由内容决定的，当内容同时具有独立性和整体性时，就需要支持两种操作。如小程序可以作为一个独立功能，但其本身又可以看作是一个完整的小产品，具有自己的页面结构和页面层级。所以小程序对于它所属的产品，我们有关闭的需要，小程序内的页面导航又需要返回来实现。

除此之外，产品可能开始只有返回，后面临时出现关闭按钮，比如微博「疫情地图」中使用「小区疫情查询」和「7×24 小时疫情快讯」后会出现关闭功能（帮助用户快速退出）。

这里我们可以从连续性和非连续性的角度看，产品针对具有复杂层级和内容的页面设计了顺次（返回）和跳页（关闭）的导航方式，其中关闭随实际情境出现。以此为用户提供了更为灵活的导航路径，来同时满足用户逐级深入、连续返回浏览和选择性查看、临时关闭的需求。

取消和关闭

针对于「关闭」，它和「取消」会有重叠的含义，所以有时并不能很好地去区分这两个功能表达的应用场景。于是，我们可以借用之前的方式，先把「取消」单独拿出来理解。

一般来说，「取消」意味着行为过程中，还有后续行为，整个过程没有完成，当下后悔了，因此取消了当前操作。它更倾向于表达我们主动去做了什么改变，然后中途放弃了。

比如，想煮个饭，于是下了米，倒了水，定时，确认（取消），完成（关闭）。

这时候中间如果突然不想煮饭了，在定时之后，就停止当前行为，那就是取消。但点了确认并完成煮饭之后，这个行为就结束了，只能关闭。因此，它们之间就是行为上的差异。

就好比，打开微信公众号文章，内容已经加载出来，行为已经产生并结束，这时候左上角就一定是关闭。而发朋友圈的时候，左上角是取消，那是因为行为过程还在继续，没有发布，所以可以取消。而发布之后，就无法取消，想要关闭，也就只能删除这条朋友圈了。

所以在操作行为中的页面，左上角最好是使用「取消」。

当我们对词的含义有了进一步思考后，就可以去看它们在产品中的表现了。

比如广告的关闭、推荐内容的关闭。都是产品自身提供的内容，用户不想看到就选择关掉了，没有试图去改变什么。

包括内容页面，或者活动页面，被点开，且加载完成呈现出来之后，这个行为就结束了，没有取消的概念，只有关闭。

再比如，选择图片文件时的取消，微信发朋友圈、微博发帖时的取消等等，我们能发现都是用户主动采取了什么措施，但是又后悔了所以选择取消。

或者如游戏设置，就不适合用关闭，会让用户在理解上产在歧义，比如用户设置到一半，不想设置了，那现在关闭的话，设置是生效了么？所以用取消会更合适。

这些时候，不存在关闭的概念，因为没有内容可以关闭，只能是取消当前行为。如果使用关闭，与该场景下的用户行为不符，反而增加了用户对文案的理解成本。

简单来说，取消强调的是放弃改变，关闭强调的就只是抉择。

不过这里也有一个特殊例子，就是，微信公众号文章转发给好友，左上角是关闭，而钉钉里面内容转发给朋友，就是取消。为什么呢？

在一些特殊场景之下，「关闭」是包含「取消」的。

好比刚才煮饭的例子，现在的电饭煲很高级，如果在过程中不想继续了，拔掉电源就是完全关闭了，但同时这个行为也包含了人不想继续煮饭这个行为，想取消掉了，所以这时候关闭是包含取消的。它跟文章加载完成，已经呈现出来，是不一样的。

而上面这个微信与钉钉的例子，就存在这种包含关系。比如，内容已经加载完，要分享给好友，这时候加载出来的好友列表已经出现，只是选择发送给谁的问题，用户可以关闭已经加载完成的好友列表页面，或者理解为用户打算取消当前行为。

不过这样的设计并不建议大家将其定义为关闭，因为毕竟行为还在继续，使用取消反而更容易理解也更符合场景定义。

譬如，PC 的弹窗经常会同时出现叉（指代关闭）和取消，虽然操作的结果都是使弹窗消失，但是用户的操作目标是不一样的，事实上这里提供了两种选择，即我不想做决定，我要关掉弹窗，以及我决定现在不这么做，我要取消这个动作，这里的关闭其实就暗含了取消的动作。

在 PC 端，我们有足够的空间为用户提供不同的选择，给予用户充分的自主控制权，以满足他们对功能的不同期待。而在移动端，我们需要删减或合并功能，所以当用户同时产生重叠的诉求时，我们往往会选择当下最符合用户心境的功能，这是「场景细化」的结果。这也能解释为什么现在很多 PC 产品的弹窗中也只会保留取消，而不提供叉（指代关闭）的选择。因为用户面对功能不知所措、不做决定的情况已经越来越少，更多的用户已经明确地知道自己应该怎么做。

这就是「取消」和「关闭」的差异，以及移动产品对两者的取舍的根本原因。

同样的，有一些页面，取消和关闭都会用叉的图标来表示，只是在不同情境中，这个叉同样可以理解为取消，关闭，以及取消或关闭。差异点跟上述内容相同。

结语

返回、取消和关闭看起来简单，深入分析后又显得复杂，但相对复杂的分析都只是为了能简单地去运用。在这个问题中，每个人都可以从自己日常的经验出发，然后在产品不同的语境里去体会一个词语、一个图标背后隐藏着我们什么样的认知和使用的习惯。

那由这个问题延伸的，其实还有产品的导航方式，页面出入口的设计差异，产品中整体与独立，连续与非连续的内容结构，原生与非原生页面的差异等等。

小问题同样可以见大，但我们也不需要过度思考，本来问题的解读角度就是因人而异的，也无法面面俱到，上面的只是我的理解方式。设计还是需要回归到用户和产品的目标，再去结合场景和产品业务的使用模式才能得出合理有价值的方案。

文章来源：优设    作者：呆呆U理

菲兹定律在交互设计中的应用是很普遍和广泛的，有时候在我们设计界面之时，不知不觉就应用了菲兹定律，但是我们却未察觉。

关于菲兹定律的具体内容，可以说是大家耳熟能详，甚至在学生时代就有所了解：从一个起始位置移动到最终目标点所需的时间由两个参数来决定，到目标的距离（D）和目标的大小（W），可以用数学公式表达为：

在当今互联网背景下简单来解释说，就是大而近的目标区域意味着用户用需要耗费太大的精力即可轻易点击或者关注到目标，反之，小而远的目标区域则意味着用户将耗费一些时间和动作才能触及到目标。在一般情况下，让用户耗费时间和动作的操作，会使人产生负面的用户体验。

以上说的，其实是对菲兹定律表象的解释，每个人在网上也会搜到很多类似的解释。当你搜索时会发现，关于对菲兹定律的应用，网上绝大多数的资料都是在以PC端界面作为定律的解释，但移动界面却少之又少，这里面的一部分原因是菲兹定律提出的时间，一部分也是因为在移动端的设计中，菲兹定律会变得很零散和琐碎，很难真正用几句话来总结，这篇文章也是我第一次试着在移动端的交互设计的范畴内对菲兹定律的应用进行简单的总结。

1. 让按钮更大一些

我在这一部分分了几种情况，分别进行讨论，其一呢，就是fab button。在现有的fab button中，大家会发现，虽然按照正常iOS的设计规范，一般按钮的大小都会被设计为88px，但是在设计fab button时，我们一般都会选择大一些的尺寸，例如100px、110px、120px。

其二就是页面内功能按钮的大小，我们在做界面设计的时候，都知道做到统一性，但很少去深入地想，界面统一的背后是在像用户传达一个什么意思。

举个例子，这是【洋葱数学】和【360家庭防火墙】的登录界面，市面上的登录界面大多大同小异，基本组成就是账号+密码+按钮（或手机号+按钮等）的组合。

那我们来思考一个问题：为什么在手机号只有11位已经确定的情况下，输入框和【下一步】按钮还要做这么长，接近通栏的一个样式。

我试着来找到这个问题的答案，第一个，是对于品牌设计规范的执行，对边距是有一定要求的，也就是我们常说的保持页面元素的统一性；第二个，即是对菲兹定律的应用，在这个页面中，最核心的两个功能【输入】和【下一步】给予他们一个足够的大小，会让用户的注意力更加集中，避免被分散精力。

2. 让相关联的信息内容距离更近

这也和设计原则中的亲密性相一致。依旧可以用我们常见的信息输入界面来加以印证。这两个界面是我随手做的，对比一下即可看出优劣。

在相关性比较强的功能中，拉近彼此距离，既能够给信息一个清晰的层级，更能够减少用户的操作成本。

3. 界面的边界会让用户操作更加精准和容易

在研究交互界面的时候，我们总听到一个说法，“界面的边界是无限的”，它当然不是在说界面是无限大的，对于一块屏幕来说，在进行操作的时候，无论是PC的鼠标光标，还是移动屏幕的手指，在操作到界面边缘时，因为无法延伸，所以最精准。

这也是我们看绝大多数fab button弹出的菜单是在界面边缘，而不是在界面中央的原因。

除此之外，还有在很多安卓手机中，卸载app时会让用户把要卸载的app拖拽到屏幕上边缘的区域进行卸载，这样相比给一个【X】按钮，会更加精准，而且拖拽的操作也会给用户更多思考的空间和时间，减少误操作的概率。

但是，这个但是很重要，不要把所有既定的法则都奉为圭臬，所有事物都要辩证着看，在没有限定条件的情况下，菲兹定律的应用不会有任何问题，但是如果加以条件的限定，就不是这么简单了。

简单举个例子：在进行删除等负向操作时，很多app会把确认删除等操作做得离你的上一步操作区域更远，或者让确认按钮更加不明显，这是在帮助用户，或者说希望用户在做负向操作时，有更多的思考空间和时间，规避误操作的影响。

在《看懂设计》这个系列里，我会选择性地对在交互设计中常常被应用的设计心理学、方法论等进行简洁有案例的解析，例如大家耳熟能详的交互设计7大定律、斯金纳箱理论、边际效应、锚定效应、格式塔理论等等让大家尽可能地在实际案例中找到它们的应用，而不是让这些方法论成为我们脑海中的空中楼阁，知道、听说过，但是不会应用。

转自：站酷-鹿爷不是咸鱼 

当我们回顾近20年的手机发展历程，可以发现2007年iPhone的横空出世真正改变了手机这个行业。乔布斯在发布会上展示初代iPhone给行业带来的冲击力是前所未有的，对人机交互领域也带来了了深远的影响。

信息限制

操作与反馈

总结

任何一个新事物的出现，人们总是倾向于从现有的知识体系中寻找类似的事物进行描述与概括，以寻求情感上的归属和理性上的辨识。但是过于超前的创新，往往是现有的知识体系无法解释的。无法解释，自然无法接受。

文章来源：站酷

在我们设计UI有所疑惑时，可以参照以下标准做法。

这些做法并非一成不变—我只是列举出这些方法，相信它们可以对你的日常UI设计工作有所帮助。

我们需要记住一点，设计其实就是跳出框框思考，这意味着，有些时候我们要打破陈规。所以，对我的建议也不要全盘接受。

1. 设计时使用密度像素（dp），而非像素（pixel）

图中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素个数，简称PPI（Pixels Per Inch）。dp（density-independent pixel）是密度独立像素，也写作dip（也有device-independent pixel之说，设备独立像素）。

设计界面时，建议大家基于设备的密度像素，而不是像素。这样可以保证我们设计出的图标素材比例适当，适应不同尺寸的设备。

举个例子，假如我们以密度独立像素dp为单位，设计了一个 200 x 50的按键，那么这个按键在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸则为400 x 100像素，即原尺寸的两倍。

因为有些屏幕的单位英寸的像素数量要比其他屏幕多，即ppi分辨率大，为了保证设计的图标在不同分辨率的屏幕上都一样大，设计师通常只是设计一个尺寸，导出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但这里的单位并不是像素，而是点的个数。论像素，则是1242 x 2688 px。知道了这些，给iPhone XS Max做设计时，我会以414 x 896个点为尺寸做设计，而后导出3x的图标素材。

2. 间距使用8的倍数（8dp）

为什么UI设计的间距都是8的倍数而不是5的倍数呢？这里有一个简单的解释—如果一个设备是1.5x的分辨率，我们就没法导出一个奇数。

另外，现代主流的屏幕尺寸都是以8为单位，以8的倍数做设计可以很好地适应这些屏幕。

以8的倍数设计可以保证设计的一致性。基于这种惯例，大家在进行设计工作时不用再猜测间距的数值，每个图标都可以完美地与其他图标对齐。

有关这个话题的更全面探讨，请参考Bryn Jackson的文章《八像素网格设计》。

3. 删减元素容器的线框

我们在设计的过程中应该时常将自己抽离出来，审视界面中这些作为元素“容器”的线和框是否让界面显得过于杂乱，是否应该予以保留。通常这些用以区隔界面内容的线和框可以被边界留白代替。

我们设计的大部分元素都存在于线框里，简单清除掉这些“容器”可以让界面看起来不那么拥挤—给元素更多呼吸的空间。

4. 无障碍设计—重视对比度

善用对比度不仅仅是为了让用户的注意力集中于重要的信息，更是为了使产品更容易访问/使用。

设计产品就好比建设像图书馆、学校一类的公共场所，它的适用对象需要涵盖每一个人，包括失明、色盲和视障用户。

Web内容无障碍指南（WCAG）要求文本或文本图像的对比度至少为4.5：1。

为了保证设计达到该标准，我们可以下载Stark这款插件来检查设计是否是无障碍的。

5. 基于用户习惯，设计用户体验

为什么有些图标元素会被公认为标准？原因有多种。

假如你把一个按钮设计成圆形，那么当我们需要一个（字数较多的）“Start Free Trial”按钮时，它就会不必要地占用界面中竖直方向上的空间。

另外，用户期待的是与其他产品相似的体验。如果你设计的网站、APP或软件与用户的既有习惯相悖，那么这样的体验是不直观的，用户很可能会因此受挫。

故而，在我们发挥创造力的时候，最好以现有的设计规范为基准和前提。不要重新设计轮子。

6. 善用颜色重量（color weight），建立视觉层次

每一种颜色都有自己的视觉重量，我们可以通过借助颜色的视觉重量来建立内容的视觉层次，用颜色的深浅来呈现内容的重要性的层级。

善用颜色视觉重量的秘诀是，一个更为重要的元素，应该有更重的视觉颜色，以便用户快速浏览网页，区分重要和不重要的信息。

大字号、粗体的信息会首先被用户注意到，而后他们会关注其下的辅助性信息。

7. 避免使用超过两种字体

通常，设计界面会控制使用的字体数目，两种不同的字体就应足够—这不是说你不能使用更多字体，只是你需要充分的理由。通常来讲，仅用两种字体会更好。

设计界面时要善用字体家族。

使用字体家族意味着我们可以使用同一字体的不同变体。字体家族的存在就是为了字体的不同变体可以更和谐地被放在一起，让设计在保持多变性的同时兼顾一致性。

选择字体时，尽量选择那些有多种重量（如标准、适中、粗体、特粗）和样式的（如长体、宽体、斜体）的字体家族（译者注：作者此处所述选字体经验的适用对象主要为英文字体。）。这样既会给设计留出可探索的空间，也不会增加额外的字体种类。

8. 让用户认知，而非记住

让用户去认知产品是产品设计中所推崇的，因为，我们为什么要让用户在使用的过程中去思考呢？

结账页面、电子邮箱、搜索历史、返回按钮等都是很好的建立了用户认知的例子。

在好的设计中，结账页面是不需要让用户记住他们所要购买的物品的。用户应该可以清楚地从界面中确认他要购买的物品，而非通过回忆来想起。

在Gmail邮箱中，我瞟一眼就可以知道哪些是已读邮件，哪些是未读邮件，这个过程不需要过脑子。同理，我登录到自己的亚马逊账户后，可以迅速地从上次购物时中断的地方继续开始购物—因为它显示了我最近浏览过的物品。

设计时，应让元素、功能、选项明显可见，最小化用户的记忆负荷。用户无需自己在操作的步骤中记住信息。系统的操作说明应该在需要时很容易看到或查到。

—Nielson Norman Group（尼尔森诺曼集团，人机交互和用户体验咨询公司，唐·诺曼是创始人之一）

9. 切忌拖慢用户体验  

作为用户，速度和效率是最重要的。用户使用一个应用程序，是为了解决某个特定的问题。

我要速度。
— Ricky Bobby（电影《塔拉迪加之夜：瑞奇鲍比的民谣》主角、赛车手）

如果将一张支票通过手机存入银行账户这个体验是非常让人享受的，那固然很好，但作为设计师，千万不要让你的创造力阻碍用户实现他们的目标。

关于动画和微交互的一条经验就是，如果某个体验只是无谓地增加了时间，那么这不是在改善用户体验。

如果加入的动画带有目的性，则可以改善用户体验；但是如果增加的只是不必要的分散注意力的元素或用户操作，那么用户体验不会变得更好。

Dribble上有很多着陆页的设计—当用户向下滚动鼠标时，动画随之展开。通常，这些设计展现出过火的动画效果，每个元素都在淡入淡出，动来动去，而几乎不关注体验本身。当太多事情同时在界面上发生时，用户很难知道到底哪些信息是应该关注的，这等同于浪费用户宝贵的时间。

这位Dribble用户，非常抱歉把你揪了出来:/

无数研究表明，界面中动画的最佳时间在200到500毫秒之间，这个数字是由大脑的特征决定的。任何短于100毫秒的动画都是一晃而过，人眼根本无法识别；而超过一秒的动画会带给人无聊和延迟的感觉。
—《UX微动画设计指南》

所以，如果你要在界面中使用动画，那么给它一个明确的目的，并且不要让用户等待超过500毫秒。在2019年的今天，惹恼你的用户只需要1毫秒。

10. 大道至简

每次我们想要增加额外的信息到界面中时，例如按钮、文字、照片、动画、插图等等，它们就会跟相关的信息进行竞争。如果一页上有太多东西，那么某些元素的重要程度就会被削减。

谷歌搜索首页就是典范。这个设计将全部的注意力放在了搜索这个主要功能上，没有把用户淹没在不必要的信息海洋里。

对不起了雅虎，在这必须把你当做不好的案例展示

最后，分享给大家一句我最爱的设计箴言：

臻于完美之时，不是加无可加，而是减无可减。

文章来源：UXRen

作者通过从会员体系构成的4个核心要素对“京东、亚朵、支付宝、腾讯理财通”的会员体系进行拆解，发现不同类产品中的设计会员体系需要注意的问题。

一款产品要想持续获取用户价值，前端增长和后端活跃、留存与转化缺一不可。随着流量越来越贵拉新成本越来越高，多数互联网公司开始将用户活跃与留存视为产品核心指标，而会员体系一直以来都是最有效的活跃留存与转化的运营手段之一。

本文对比4款目前付费类产品中比较典型的“京东、亚朵、支付宝、腾讯理财通”的等级会员体系，分别代表4种不同的等级会员体系类型。从会员体系构成的4个核心元素：命名、层数、成长值计算、会员权益，来快速了解一款产品的会员体系。

希望通过这篇文章给在做会员体系抓耳挠腮的你一点启发。

一、会员命名和层数

会员命名是品牌文化、用户群体特征的体现，而会员层数的多少则反映了产品转化路径的长短。

1. 四个产品的会员命名和层数概况

京东会员分为非付费会员（下称等级会员）和付费会员两个体系。为了凸显付费会员，2019.9.15日起，取消了等级会员原有的铜银金钻制会员体系，以京享值代替。

至此，从会员命名的角度，京东的会员只有付费会员和等级会员两种名称，等级会员会员之间以京享值的大小进行区分，共分为5层。

亚朵会员在命名方面充分体现了“舒心微笑”的品牌特征，等级会员共分为5级，分别为注册会员（初遇）、银会员（识君）、金会员（知己）、铂金会员（执手）、黑金会员（逍遥）。括号内的短称分别来对应着两句诗词，详见官网的会员介绍。

支付宝等级会员共分为4级，分别为大众会员、黄金会员、铂金会员、钻石会员。从级别数量来说，支付宝会员级别相比于前者少了1级，会员升级的难度也加大了。

腾讯理财通等级会员共分为4级，分别为普通会员、白银会员、黄金会员与铂金会员。颜色区分上，级别从低到高颜色分别为蓝灰色、银灰、金色、黑色，通过灰色调营造理财产品的严肃和专业感。

【注：等级会员是指，会员级别不能直接购买得到，而是要通过完成产品任务升级达到。付费会员是指，用户通过付费购买产品会员特权，购买的会员独立于非付费会员，不是非付费会员的某一级】

2. 会员命名和层数分析

通常会员命名会以金属作为主线，其中金、银、钻石等最为常见。

这是用户已经熟知的命名方式，遵循以上规则有助于用户更快的接受会员身份。但如果产品有特殊的品牌文化和目标用户，可以考虑在命名上加入品牌元素，如亚朵。

付费会员与等级会员之间具有重叠性。

高阶的等级会员分散了用户对付费会员的注意力，因此京东最终不得不对等级会员体系采取“除名”做法。

付费会员必然会导致原等级会员体系影响力的削弱，在初始设计时需要综合考虑付费会员和等级会员体系在维系用户、营销行为等方面的价值，做好取舍。

此外，还可以参考亚朵酒店的做法，将等级会员的某一级作为付费对象来售卖，如下图，亚朵酒店将会员体系中的第三级【金会员】单独售卖。

不同产品的会员层数不同。

电商等付费类产品会员普遍采用4-5级的分层、资讯类产品的会员体系可多达10级，如趣头条等；社交、游戏类产品更是根据玩法的不同，设置几十级的会员等级。

会员定级层数主要取决于产品的转化路径长短：

付费类产品转化路径短，用户使用产品就一定会付费，因此只需要根据用户实际消费能力进行用户分层，4-5层即可覆盖用户的全部消费能力。

但社交类产品转化路径长，需要用户长期活跃在产品内才有机会转化付费用户，会员级别需要足够多，才能保证用户有动力持续的活跃和留存。

此外，从成本的角度考虑，付费类产品的会员权益通常为商家的折扣和返利，会员级别越高企业付出成本越高，

级别过多会导致企业难以承担成本，而社交、游戏类产品的会员权益通常为虚拟的勋章、身份象征等，即使会员级别高达几十级，也不会产生过多的成本。

下图是趣头条10级会员的权益，可以看到权益大多数为荣誉勋章类虚拟奖励，企业几乎不需要付出成本。

二、成长值计算

成长值是用于衡量会员级别的刻度，用户通过获取成长值来达到升级、保级的目的。成长值的获取方式体现了产品主要的运营动作，而计算公式也根据业务变动速度和产品特点有所不同。

1. 京东会员的成长值计算涵盖的要素

• 计算周期：30天；
• 涵盖产品：京东商城和京东金融
• 行为：消费、活跃、信誉等方面，详见下图，已将需要消费的行为进行了特殊标记；
• 计算方式：黑盒，并未对外展示成长值计算的详细公式。

分析如下：

京东的主要运营动作包括以下几方面：提高用户消费，促进用户活跃、收集用户信息、建立信用评分体系等。

京东成长值的具体计算公式并未明确给出，因此可以推断其业务调整快，变动幅度大。不公布具体计算公式可以灵活的调整成长值计算公式，但也牺牲了用户的确定性体验。

2. 亚朵会员的成长值计算涵盖的要素

• 计算周期：最近12个月；
• 涵盖产品：亚朵；
• 预订渠道：亚朵APP、微信小程序、客服热线、企业号等渠道预定；
• 行为：消费、任务（完善信息、完成订单）；
• 计算方式：白盒，成长值包括支付金额、入住间夜、完成任务三个部分，计算公式明确。

分析如下：

亚朵对用户的主要运营方向为消费和互动，运营动作主要是围绕着订房和相关服务展开。

成长值计算兼容地区差异：酒店业务通常分布在多个城市，每个城市的消费水平差异很大。若仅仅以消费金额来衡量会员级别，会导致大多数的高级会员都集中在高消费城市，无法实现对二三线城市的用户激励。因此，酒店行业会员的成长值通常结合间夜和消费金额综合计算。

酒店预定更加依赖于用户渠道，包括OTA（美团/携程等平台）、自营渠道、分销商等。不同的渠道企业付出的成本不同，会员体系通常只给自营渠道的用户计算成长值。如亚朵。

3. 支付宝会员的成长值计算涵盖以下几个要素：

• 时间：最近12个月；
• 产品：支付宝；
• 行为：消费购物、生活缴费、金融理财；
• 计算方式：白盒，所有行为可获得的成长值均明确规定，详见下图梳理。

分析如下：

支付宝主要的运营动作包括促进用户消费购物、完成生活缴费和增加金融理财。生活缴费任务的成长值奖励较高，可以推测占据用户生活支付场景是主要运营方向

支付宝的成长值计算公式为白盒，这与理财类产品性质相关，由于涉及到用户的金钱投入，更需要获取用户的信任，明确的计算方式能够带给用户确定感。

4. 腾讯理财通会员的成长值计算涵盖以下几个要素：

• 时间：最近30天；
• 产品：理财通平台
• 行为：购买理财、会员任务（完善个人信息和达成理财目标）
• 计算方式：白盒，详见下图拆解。

分析如下：

腾讯理财通的主要运营动作包括促进用户购买理财、激励用户完善个人信息。腾讯理财通的会员任务多达27个，收集用户信息的任务占到1/3，可见完善用户画像为产品的主要战略。

理财通会员成长值的计算公式同样为白盒，清晰的展示用户完成任务能获得的成长值。

三、会员权益

• 从用户角度来说，会员权益是用户持续在产品内活跃和留存的动力，好的会员体系应当有突出的核心权益，且核心权益能够满足用户使用产品的核心诉求。
• 从企业角度来说，会员体系权益应当形成一个好的业务闭环，权益能够促进用户的再次消费，尽可能的挖掘用户的剩余价值。

1. 京东会员权益构成

• 从核心权益角度看：京东的会员以售后服务为核心特权，会员的级别越高，享受的售后服务越全面。这说明京东等级会员体系的目标用户更加注重售后服务，是用户长期留存的主要原因。
• 从业务闭环角度看：京东会员体系特权强化了其售后能力的优势，为用户的购买提供保障，提高用户满意度。结合京东的付费会员，共同形成业务闭环，促进用户的复购。

2. 亚朵会员权益构成

（注：数字标记表示用户级别，其中高级会员拥有低级会员的全部权益）

• 从核心权益角度看：亚朵的会员权益基本围绕住宿需求，其核心权益是消费优惠返利，涵盖1-5级全部会员。可见酒店类产品的用户的核心诉求还是在于更高的性价比。
• 从业务闭环角度看：亚朵酒店的会员权利累计20项，包括优惠返利、住宿体验、饮食、服务和身份彰显等，几乎覆盖了用户住宿的全部场景。以优惠返利为核心的会员权益和多种服务提升用户体验的业务闭环，可以有效的促进用户的二次下单行为。

3. 支付宝会员权益构成

• 从核心权益角度看：支付宝会员体系的权益覆盖用户的衣食住行多种场景，核心特权是在支付宝内的商家小程序可以享受会员特权。满足了用户在支付宝以会员身份完成衣食住行的需求。
• 从业务闭环角度看：支付宝会员权益形成了对商家小程序的引流，促进支付宝小程序的发展，进而实现用户在衣食住行各个场景下都在支付宝小程序内消费，实现了支付宝的支付业务闭环。

4. 腾讯理财通会员权益构成

腾讯理财通会员等级礼遇如下图所示：

• 从核心权益角度看：腾讯理财通会员权益基本围绕用户的理财行为，核心权益为资金流转特权。包括周转、还款、存取等。用户在产品内的核心需求是更加顺畅的完成资金流转。
• 从业务闭环角度看：腾讯理财通会员权益为用户提供了流畅的资金流转权益，用户就可以更加放心的在产品内投资理财。同时理财通的等级礼遇主要围绕白金以上会员提供高端服务类权益，与会员权益形成业务闭环，促进用户的活跃和留存。

结语

通过分析会员体系的4个核心元素：命名、层数、成长值计算、会员权益，可以迅速读懂一个产品的会员体系。

一个好的会员体系能够通过选择合适的会员命名、设置符合产品转化路径的会员层数、设计涵盖主要运营动作并能灵活调整的成长值计算体系、提供满足用户核心需求的会员权益。最终形成业务闭环，引导用户价值逐步提升，实现用户价值的最大化。

文章来源：人人都是产品经理

看似简单的登录框，暗藏了多少值得推敲的用户体验？这10个细节，就是你和设计高手的区别。

技巧1：更明显

你不应该让你的用户到处寻找登录区域。他们找的时间越长，就会越沮丧。他们越沮丧，最终登录的可能性就越小。

一个很好的例子就是 Gmail 的登录页面。

你可以确切地知道你需要在何处登录，以及要在输入区域输入什么内容，上面的例子，如果你没有 Gmail 帐户，它允许你通过单击「创建帐户」来轻松地创建一个帐户。

好的用户体验是使你的登录区域明显，使你的用户尽可能容易地进行登录操作。

技巧2：使用第三方登录

第三方登录正迅速成为用户登录账户的方式，理由很充分。为不同的产品创建多个账户既耗时又令人困惑。很难记住一堆不同的密码和用户名。

通过允许用户使用用户的第三方账户中的信息来创建一个账户，可以解决所有关于这些问题。

让我们来看看下面的石墨文档和MONO登录时的选择方式：

甚至还有更方便的注册登录方式，手机短信验证码在注册的同时登录：

一些产品在用户点击第三方注册登录时还需要用手机号进行短信登录，从用户的角度看，这很明显是一个不好的体验，但是产品的角度去思考就不一样了，产品为了获取用户更多的信息，则需要这样来设计流程。

这种设计流程该不该用，这需要在产品和用户之间进行权衡，第三方与手机短信验证码登录，在提高用户体验的同时，可以提高用户的效率，使界面更加直观。

技巧3：更简单

因为环境不同，在中国很多网页端的网站，第三方登录很的产品很少。

例如，如果你的 QQ 没有在电脑端登录，因为即使选择第三方 QQ 登录，你也要拿出手机—打开 QQ —打开扫一扫，进行扫码登录等一些列的操作。

又或者，当你想要登录 behance，只要浏览器有记录之前的第三登录，点击第三方登录即可直接进入该网站，甚至不用注册。

可以看下面的腾讯网与 behance 的网页登录：

好的登录体验应该只有账号、密码两个输入字段，或者手机号码、短信验证码两个字段，以及使用第三方登录的选项。在简单、的同时，并为用户提供了很好的体验。

技巧4：区分注册与登录

如果一个用户来到你的网站进行注册，或者想他们返回登录界面，这就需要让用户清楚的知道他在何处，下一步应该去哪里。

我们通过使用登录字段与注册字段的区别来帮助他们，让我们看看下面的 dribbble 注册界面：

创建账户的按钮已 dribbble 的主题能很快突出在用户面前。新用户可以直接在页面上注册，而返回的用户可以使用最上面右上角的登录两字。看到上面「sign in 」字段了吗？

dribbble 使用了不同的颜色、布局去区分注册按钮与登录的入口，这样更加清晰明了。

同时可以看看 dribbble 的主页面，他们会把 sign in 与 sign up 的进行区分，在 sign up 加上微边框，让用户能更快区分两者的不同。

技巧5：跳过用户名

让用户用他们的用户名来进行登录真的不是一和很明智的做法，为用户省去记录你产品的用户名的麻烦，应该让他们使用他们的电子邮件地址或电话号码注册来进行代替用户名。

ins 让用户有机会用他们的电话号码或电子邮件地址登录。

反例：

尽可能让用户同时用手机号码或邮件地址来登录，因为用户可能会忘记他们用来登录你的产品的电子邮件地址，所以这时，用户能使用手机号码进行登录。

技巧6：密码可显示

给用户提供可显示密码的按钮，减少用户输错密码的操作，当输错的同时，可进行对错的字段进行纠正，不用全部删掉重新来。

让我们来下面的脉脉和片刻：

技巧7：记住用户信息

还有什么比再次到你之前登录的网站或 app，却发现你需要再次输入账户密码登录更令人沮丧的事情吗?

当你的用户返回到你的网站时，请确保他们已经登录了，或者为了方便登录，提前为他们预先填充账户和密码等字段。

谷歌在这方面做得很棒。每当用户需要重新登录到 YouTube、Gmail 或任何其他谷歌品牌时，他们的登录信息都会被记住，使登录过程更加简单。

盟友银行允许用户勾选 「保存用户名」 复选框，允许网站在用户到达网站时默认记住用户名。这是记住用户信息的另一个好方法，展示形式可以多样化，可根据自己产品与用户需求来进行把控。

技巧8：轻松恢复密码

有时你的用户会忘记他们的登录信息。当这种情况发生时，尽量让恢复过程尽可能的轻松。

公众号的账户密码输入栏有记住密码复选框，以防用户忘记他们的用户名和密码，不用每次进来都输入账户密码进行登录。

印象笔记对他们的密码做了一些巧妙的处理，让用户知道他们多久以前更改了密码。

这个小小的提示可以唤起用户的记忆，帮助他们记起密码。

如果用户忘记了他们的登录信息，要让他们清楚应该去哪里。如果你将使令人沮丧的情况变得不那么令人沮丧，你的用户将因此会喜欢上你的产品。

技巧9：让用户知道大写锁定已开启

我们都有过这样的经历：令人沮丧地输入和重新输入你的密码都无济于事，结果却发现你一直开着大写锁定键。

可以通过警告你的用户，防止这种情况发生。微软的 Edge 浏览器还使用户可以选择在键入时打开大写锁定时打开通知。

技巧10：无密码登录

让你的移动用户使用无密码登录，现在很多特别是金融类 app，都可以让用户进行指纹登录，因为不像其他 app 一样可以一直保持用户已登录状态，在保障安全的同时能更便捷。

以上的设计技巧与案例希望能帮助各位读者提高产品的用户体验。

欢迎关注作者的微信公众号：「设计探」