这是作为设计师同学工作中经常用到的一个点。当接到一个需求时，你是如何开始动手工作的？是否经历过和下面这位同学一样的尴尬场面。

被迫N次改稿的大场面，想必每位设计同学都难免经历过。但，别慌，这次跟大家一起来学习一个让设计具有说服力的诀窍–竞品分析。再接到新需求的同学，不能再打开网站找几个参考图，打开Sketch就开始撸图了，试试利用竞品分析的方法做出让leader满意的设计稿。

01、竞品分析该如理解？

竞品分析一词最早源于经济学领域。市场营销和战略管理方面的竞品分析是指对现有的或潜在的竞争产品的优势和劣势进行评价。这个分析提供了制定产品战略的依据，将竞品分析获得的相关竞品特征整合到有效的产品战略制定、实施、监控和调整的框架当中来。个人理解官方含义更偏向于产品侧，注重的是产品战略层的问题。对于设计师来说，重点是分析产品五个维度中功能结构(结构层)、交互体验(框架层)、视觉规范(表现层)的东西。但方法论都是一样的，是为了知己知彼百战不殆，学习长处，避免别人踩过的坑。设计要做的竞品分析多数是以功能为基准点的横向分析，主要是对产品细节上的分析，要做到窄而深，小而美。

02、竞品分析的目的

竞品分析的目的是为了提高产品核心竞争力，说白了就是为了思考如何才能比别人做得更好，在市场中脱颖而出。在设计层面我们要通过竞品分析了解产品定位、商业目标以及用户人群、使用场景和行为习惯，这些作为设计基础去了解。主要的是做表现层的细节分析，不能做简单的抄袭，而要合理分析设计背后的理论价值，做到青出于蓝而胜于蓝。

做竞品分析之前，一定要明确：你的目的是什么？到底需要分析什么？只有先把目的搞清楚，才知道应该重点分析什么。其次，目的决定了我们分析的侧重点是大而全，还是窄而深。当分析重心放在面上的时候，就很难突出重点，同理，大而全则很难兼顾窄而深，所以一定要先明确是为了什么而去分析。

03、什么时候开始竞品分析

首先我们要知道什么时候开始竞品分析，那就要先了解在接到需求后你是怎样的去开展工作的。(这个点在面试中也经常被问到就是说你平时工作都是怎样一个流程呢？这个问题可以全面衡量一个设计师的思维，需要慎重回答呢。）良好的设计步骤应该是在接到需求后，先对理解需求，然后思考本次的需求是要解决什么样的问题，最后带着问题针对性的去分析产品。

04、竞品分析如何去做

大而全的分析：

选择竞品–产品分析–数据分析–用户路径分析–用户评价分析–视觉规范分析。

– 选择竞品

竞品有三种分类分别是：直接竞品、间接竞品和潜在型竞品。

直接竞品指的与自身产品定位高度一致、目标用户一致且产品功能十分相似的一类产品。间接竞品就是指产品定位类似，目标用户有重叠，核心功能不完全一样的一类产品。潜在型竞品是指产品定位不一致，但目标人群具有一定共性。在竞品选择的时候会首先选择分析直接竞品，找到行业内顶尖的多数产品，可借助数据网站来帮助选择(文末尾附赠各种数据查询的网站)，还可以选择其他竞品比如视觉交互做的很棒的产品。

– 产品分析

根据上一步的竞品选择，针对某几个产品进行深入分析，从商业模式、产品定位、市场现状和产品核心功能这些方面进行一一对比，这些层面都关乎产品的商业价值，及其业务所能拓展的范围的宽度，了解竞品的核心竞争力。

– 数据分析

数据是分析是为了看清楚产品在走上坡路还是下坡路，发展趋势如何，可以借助数据网站(文末领取)，根据排名变化、流量变化、日活、月活deng数据来看竞品最近几年的发展变化。

– 用户路径分析

用户路径分析就是指用户在APP中的访问路径，它是以目标事件从起点到终点的一整个流程。针对产品结构层的分析，了解产品交互流程，具体的去体验和研究竞品的功能是如何交互的，取长补短，回到自己的产品应该如何去做。

– 用户评价分析

走进用户，了解真正用户的内心，这算是定性分析的一种，通过用户声音收集有效信息，分类别整理，做到真正的服务于用户，让设计有据可循。

– 视觉规范分析

视觉分析主要是分析竞品的设计风格、基础栅格、颜色、字体、间距、设计手法、导航、表单、icon、按钮、标签、通用组件等。这里作为产品设计的最后一个环节，如果我们只盯着界面美观与否来做分析，很难得出有说服力的结果。无法解释竞品为什么这样设计的？这样设计解决什么问题？无法用理性的思维来衡量自身产品与竞品之间的差距在哪。所以在视觉分析时要看到设计背后结合产品的背景去深入思考。

窄而深的分析：

竞品选择–分析提炼–规律总结–方案预设。

这里引入一个理念：Atomic Design原子设计理念，这个理念的灵感来源于化学，原子的结合形成分子，分子的结合形成更复杂的生物体。这里原子是所有物质的基本组成部分。同样的我们现在的分析方式就是利用这一模式，将产品看成一个大分子，把每一个分子进行细分，分析里面都包含什么样的原子，都有怎么样的结合方式。

– 竞品选择

这里的竞品选择可选择直接竞品也可选择间接竞品，这里图片距离中选择均为直接竞品。

– 分析提炼

根据功能模块去分析每个竞品中同一个模块的不同展现形式，把所有相关的页面整理到一起，形成更清晰的对比。根据产品模块的观察，利用图片或者图表的形式把内容进行规律汇总，多种形式都展示出来，一一去分析。

– 规律总结

根据多个不同的设计展现方式，把内容进行分类整理，看针对某一模块都有哪几种展示方式，结合每个产品的定位去分析设计背后的原因以及设计的优缺点。

– 方案预设

最终根据多种设计方式，应用到自己的产品当中，结合产品目标进行横向对比，选择最合理的设计方式应用到产品当中，这就做到了让产品的设计有理有据。

文末小结

竞品分析对于设计师来说，更多的是设计背后的思考，是利用设计理论支撑让设计做出合理的设计，佐证设计结论的正确性，同时提升项目中的话语权，还能与普通设计师拉开差距，提升自身价值，不做没有意义的填图上色设计师，真正的实现产品有用性。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

你会不会经常会和你的设计师在争执到底这个图设计的合不合理？层次是否分明？不断地把图打回去修改，结果发现还不如第一版的！既让你的设计小伙伴难过，又自己心塞的很。产品经理和UI设计师都属于互联网时代下诞生的岗位，也都服务于互联网产品。在日常产品工作中，UI和产品经常会产生分歧，产品经理如果知道一些UI设计技巧，有助于更好地与UI设计师进行沟通。

那接下的几个设计小技巧可以让你在设计过程中做好前期准备，还能让你在设计阶段与你的设计小伙伴更好的交流你理想中的设计想法。

01 使用颜色和重量来创建层次结构，而不是大小

设计UI文本样式时的一个常见错误是过于依赖字体大小来控制层次结构。

以下的两句相必在日常工作中，各位会经常听到这类的话

• UI设计师：“这段文字重要吗？ 让我们做更大。”
• UI设计师：“此文字是次要的吗？ 让我们缩小它。”

但是我们产品经理应该在和设计师沟通时，不应该将目的按照自己的观念实质化告诉设计师，只需要将你的目的描述点抽象化一些，留给设计师更大的空间去发挥他们的能力

那么在设计样式时不要将所有繁重的工作留给字体大小，而应尝试使用颜色或字体粗细来完成。

• 产品经理：“这段文字重要吗？ 让我们变得更大胆。”
• 产品经理：“此文字是次要的吗？ 让我们使用较浅的颜色。”

可以建议设计师在对整个产品设计规范时尝试并坚持两种或三种颜色：

1. 主要内容为深色（而非黑色）（如文章标题）
2. 次要内容（如文章的发布日期）为灰色
3. 辅助内容的浅灰色（可能是页脚中的版权声明）

同样，两个字体粗细通常足以完成UI工作：

• 大多数文本的常规字体粗细（400或500，取决于字体）
• 要强调的文字的字体粗细（600或700）

不建议用400以下的字体粗细来设计，因为它们可以用于较大的标题，但以较小的尺寸很难阅读。

如果你的设计师正在考虑使用较小的粗细来去强调某些文本，可以建议你的设计师改用较浅的颜色或较小的字体。

说不定会对你的审美高看一眼，也就减少了出现【体验审美缺失部】的概率了

02 不要在彩色背景上使用灰色文字

将文字设为浅灰色是在白色背景上不加强调的一种好方法，但是在彩色背景上看起来并不那么好。

那是因为我们实际上看到的白色灰色效果是降低了对比度，使文本更接近于背景颜色实际上有助于创建层次结构，而不是使其成为浅灰色。

使用彩色背景时，有两种方法可以降低对比度：

1. 减少白色文字的不透明度。使用白色文字并降低不透明度。 这样可以使背景颜色略微流血，以不与背景发生冲突的方式去强调文本。
2. 手动选择一种基于背景色的颜色。这比在背景是图像或图案时降低不透明度更好，或者在降低不透明度会使文本感觉太暗淡或褪色时效果更好。

选择与背景相同的颜色，并调整饱和度和亮度，直到看起来合适为止。

03 抵消你的阴影

可以使用垂直偏移量来代替使用较大的模糊和散布值来使框阴影更明显，让它看起来更自然，因为它模拟了一个光源，就像我们过去在现实世界中所看到的那样，从上方向下照射。

这适用于插入阴影，就像您可能在孔或表单输入中使用的阴影一样：

04 使用更少的边框

当需要在两个元素之间创建分隔时，请尝试阻止立即到达边界。

边框是区分两个元素的一种好方法，但边界并不是唯一的方法，过多使用边框会使您的设计变得忙碌而混乱。

下次您发现自己要穿越边界时，请尝试以下一种方法：

（1）使用阴影

框阴影在概述元素（如边框）​​方面做得很好，但是可以更加微妙，可以实现相同的目标而不会分散注意力。

（2）使用两种不同的背景色

通常，只需要使相邻元素的背景颜色略有不同即可，以区分它们。 如果除了边框以外，您已经在使用其他背景颜色，请尝试删除边框； 您可能不需要它

（3）增加额外的间距

有什么比仅增加间隔更好的方法来在元素之间建立间隔？ 将事物隔开得更远是在根本不引入任何新UI的情况下在元素组之间进行区分的好方法。

05 不要把本来应该很小的图标放大

如果你要设计一些可能会使用一些大图标的东西（例如登录页面的“功能”部分），则可能会本能地获取一个免费的图标集，例如Font Awesome或Zondicons，然后增大大小，直到它们满足你的需求。

它们毕竟是矢量图像，所以如果增加尺寸对，质量不会受到影响吗？

的确，增大矢量图像的质量不会降低画质，但是以16–24px绘制的图标将其放大至其预期大小的3倍或4倍时，看起来就不会显得非常专业。 他们缺乏细节，总是感到“矮胖”。

如果只有小图标，请尝试将它们封装在另一个形状中，并为该形状提供背景颜色：

这样，你就可以使实际图标更接近其预期大小，同时仍可以填充较大的空间。

如果你有预算，还可以使用设计用于较大尺寸的高级图标集，例如Heroicons或Iconic。

06 使用强调边框为平淡的设计增添色彩

作为一名产品经理，你如何将其他设计从精美摄影或彩色插图中获得的视觉效果添加到你的UI中？

一个可以起作用的简单技巧是在界面的各个部分添加彩色的强调边框，否则它们会显得有些平淡。

例如，在警报消息的旁边或者突出显示活动的导航项目，甚至整个布局的顶部

在用户界面上添加彩色矩形不需要任何图形设计人才，并且可以大大提高您的网站的“设计感”。

很难挑选颜色吗？ 尝试从受限制的调色板（例如Dribbble的颜色搜索）中进行选择，以免因传统拾色器的无穷可能性而感到不知所措

07 并非每个按钮都需要背景色

当用户可以在一个页面上执行多个动作时，很容易陷入纯粹基于语义来设计这些动作的陷阱。

诸如Bootstrap之类的框架通过在每次添加新按钮时提供一个语义样式菜单供您选择来鼓励这种情况：

• “这是积极的行动吗？ 将按钮设为绿色。”
• “这会删除数据吗？ 将按钮设为红色。”

语义是按钮设计的重要组成部分，但还有一个通常被遗忘的更重要的维度：层次结构。

页面上的每个动作都位于重要的金字塔中。 大多数页面只有一个真正的主要动作，几个次要的次要动作，以及很少使用的三次动作。

在设计这些动作时，重要的是传达它们在层次结构中的位置。

主要动作应该很明显。 纯色，高对比度的背景色在这里效果很好。

次要行动应明确但不突出。 轮廓样式或较低对比度的背景色是不错的选择。

第三行动应该是可发现的，但不要太过分。 设置链接等这些动作的样式通常是最好的方法。

以上总结的UI小技巧，大家可以平时多实践一下，其实对于我们产品经理来说更多是设计的理念保持一致就好，具体的细节让UI设计师去把控。但是我们需要知道哪些是美的~

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

作为产品工作者，与设计师协作，是产品建设过程中必不可少的一环，而本篇内容将结合笔者工作中与UI设计师、交互设计师等合作的经验与感悟，分享一些与之友好、高效协作，并提高对你认可度的“诀窍”。

笔者的“诀窍”

1. 了解设计理论知识
2. 熟悉设计的交付件
3. 掌握各端设计规范

以上做到，不仅能使你在产品设计时更具审美高度，人机交互意识，同时也会让你在与UI设计师和交互设计师等进行沟通时，如鱼得水，如虎添翼，容易得到较高的认可与信任!

了解设计理论知识

每个行业都有相应的行业理论知识，UI设计和交互设计都有相应的设计理论知识，这些知识是作为产品设计人员的你&我应该了解的。不仅能帮助我们在思考产品时有的放矢，更能帮助我们同设计同事达成一致，更好、更快的推进产品进程。
那么，都有哪些作为产品设计人员需要了解的设计理论知识呢?笔者总结如下：

1)平面设计理论知识：logo(标志)设计、配色设计、字体设计、图文布局设计等；

2)界面设计理论知识：web端设计、移动端设计等；

3)交互设计理论知识：web端交互、移动端交互等；

现在信息通达，资源丰富，有很多的书籍和网站可以学习和了解以上设计理论知识，在此列举一些笔者读过的相关书籍和常用的设计网站资源：

1)平面/界面设计书籍：《标志设计》、《色彩设计》、《字体设计》、《Grid systems 平面设计中的网格设计》、《品牌至上》、《西文字体》、《写给大家看的设计书》、《写给大家看的设计书》等；

2)交互设计书籍：《触动人心：设计优秀的iphone应用》、《点石成金：访客至上的网页设计秘笈》、《方寸指尖：移动设计实战手册》、《在你身边，为你设计》、《用户体验要素》、《设计心理学》、《瞬间之美》、《锦绣蓝图》、《About Face3 交互设计精髓》、《UCD火花集》、《交互设计沉思录》、《情感化设计》、《简约至上》、《赢在用户》等；

3)设计网站资源：Dribbble、Behance、站酷、UI中国、花瓣、Iconfont、千图网、昵图网、海洛创意等；

通过了解这些知识，在实际工作中，能给我们产品工作者带来哪些帮助呢，笔者总结如下：

1)建立一套相对丰富的、成体系的设计理论知识，能够帮助自己在做产品设计的时候，从无到有的整个进程中，都能够做好设计层面的把控，从界面到交互，都有自己基于理论知识的理解与思考，这样保证设计的产品是有理论支撑的，首先能够让自己信服。

2)增加信任感。产品设计人员交付的原型或者是在与不同阶段的设计同事进行沟通时，都能够站在专业的角度，与之平等交流。比如：产品人员交付的原型，界面间的链接逻辑，功能间的跳转等交互，界面的基本布局等，为什么会这样设计，大到整个产品，小到一个控件，都能够道出相应的缘由和设计依据，这时候有足够的理论知识支撑，将会更加让人信服，而不会给人一种臆想般的自嗨感。

3)与平面设计同事(有的公司没有单独的平面设计岗位，由UI设计兼任)交流时，主要是关于产品logo设计，产品相关宣传册设计，宣传海报设计等。如果你了解平面设计的一些理论知识，那么你在和对方交流时，就不会信息不对等，显得不专业。比如：交流logo设计时，可以提出一些设计参考，参考的依据可以是，色彩搭配和谐，贴合产品定位和行业属性，是需要图形logo，图文结合型，还是文字logo;交流宣传册设计时，可以提出对封面(首页)设计，版式，主题色选取，内容页排版风格，图文搭配比例等的思考;宣传海报的设计，清楚不同场合的尺寸要求，风格和版式等有较为明确的需求，当然能够引导设计师发挥能力，创作出超出预期的作品，也是需要基于设计理论探讨出来的。

4)与UI设计同事交流时，主要是关于产品界面配色，界面布局等。如果你能够了解web端和移动端以及其它硬件终端的UI设计理论知识，那么你和设计的沟通效率，执行效果都将会提高很多。比如：对于web端的UI设计，你能够对web页面的配色，不同字体大小，不同网站布局风格，网格系统理论，格式塔原理等都有所了解，并结合自己对产品的理解，有一定的设计思路;对于移动端的UI设计，不同端的字体设计单位，模块间的间距规律，按钮大小，行间距，元素间距等，闪屏页，广告banner，网格系统，格式塔原理等设计知识有所了解。

5)与交互设计同事交流时，主要是关于产品界面间的交互逻辑，控件间的交互逻辑等。如果你能够了解web端和移动端的UI设计理论知识，那么你和设计的沟通效率，执行效果都将会提高很多。比如：对于web端的交互设计，是基于鼠标的点击、滚动等操作。页面的滚动方式，模块的滚动方式，按钮的默认、悬浮、点击的不同状态，控件点击后的反馈形式(弹窗、Toast、定位、新页面等)的设计，产品设计人员需要有一定的了解;对于移动端的交互设计，是基于用户手指的滑动、点击、长按等操作。页面的滑动，模块的切换方式，按钮的不同状态(默认、点击、长按、禁用等)，控件点击后的反馈形式(弹窗、Toast、定位、新页面等)的设计，产品设计人员需要有一定的了解。

熟悉设计的交付件

同产品设计岗位一样，各个设计岗位也有对应的需要产出的设计交付件。

笔者准备阐述的不仅仅是结果性的交付件，也包括与设计合作过程中，一些过程性的交付件。对此，笔者总结如下：

1) 结果性交付件：UI设计视觉稿。UI设计师根据产品设计人员提供的原型图，进一步美化设计的文件，包括配色、布局、控件、弹窗、banner以及不同内容字号的设计等内容。作为产品设计人员，你需要熟悉这些元素，并能够同自己在设计的原型文件时进行的表现层的思考结合，分析出UI设计师产出的视觉稿交付件是否达到预期，是否有超出预期的地方，这些判断能力都是必要的(UI设计师需要配合输出视觉设计规范，产品设计人员可以就此文件与设计人员进行深入探讨)。

2) 结果性交付件：交互设计稿。UE设计师(用户体验/交互设计师)会根据产品设计人员提供的原型图和需求文档进行交互设计(也有可能产品人员兼任交互设计的情况)。包括页面间跳转，跳转方式，跳转等待期间的动效设计，跳转失败的提醒设计，页面滚动或滑动形式，弹窗动效，页面加载动效，控件点击动效等，这一系列的动效设计，除了看其表象(呈现样式)，还需要深入了解实现方式和具体参数。比如，一张图点击后，放大查看的动效，虽然都是点击后放大的样式，但是实际上，UE在设计的时候，花的心思往往是你不易察觉的。同样是点击放大查看效果，不同的动效节奏和运动曲线，造成的细节体验区别会是很明显的。你需要同交互探讨动效组成部分，每个部分的意义，运动曲线是怎样设计的，缓进缓出各自所用时间等，甚至自己能够在结合理论知识的基础上，通过动效网站，动效设计软件进行效果模拟，同UE深入交流。

3) 过程性交付件：图标资源。不管是web端还是移动端，图标资源都是必须产出的。从图标样式是否符合产品主题，风格是否统一，图标形式是面型还是线型，以及不同终端图标的输出格式(移动端一般需要五种不同倍数的图标用于适配)，作为产品人员，对这些的要求和评估都需要足够熟悉。

4) 过程性交付件：点9图。点9图是一种移动端设计中比较特殊的产出文件(研发人员也有点9图制作工具)，一般用在需要保证元素纵向或横向拉伸不变形的情况下，比如非规整的聊天框，随着字数的增多，会拉长或拉宽，如果不做成点9图，那么就会造成变形，边缘模糊等。所以掌握点9图知识，知道怎么制作点9图，或者自己会制作点9图，也是不错的技能。

掌握各端设计规范

各端都有属于对应的设计规范，该设计规范交付件一般会由UI设计师产出，产品设计人员能够熟悉这些规范，对协作和评估规范严谨性是大有裨益的!

根据不同终端属性，可以分为web端UI设计规范和移动端UI设计规范等，而设计规范一般需要包含：

1)色彩设计规范: 所使用的色彩种类，主色与辅色的搭配；

2)文字用色规范：所使用文字的颜色，不同的应用场景应该搭配相应的颜色，一级标题，二级标题，内容，提示，备注等；

2)文字字号规范: 所使用文字的字号(大小)，不同的应用场景应该搭配相应的字号，一级标题，二级标题，内容，提示，备注等；

4)ICON(图标)规范: 所使用的icon设计规范，不同的应用场景，ICON的不同用色，是面型还是线型，都需要相对统一，成体系；

5)控件设计规范:包括输入框、按钮、滑杆、页卡、开关等控件，同一类型的控件，需要统一设计规范，形成一套体系；

6)间距设计规范: 不同页面，同类型间距的尺寸需要统一，符合规律；

7)交互设计规范;包括滚动，滑动(上下/左右等)，点击反馈，弹窗动效等的交互设计，同一场景的交互样式，需要保持统一；

总结

以上就是笔者关于——“产品应该掌握的设计知识”的分享内容，希望对各位有所帮助!总而言之，就是希望各位能够多迈出一步，去了解对方行业相关知识，提高工作效率的同事，提升协作双方的满意度!

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

设计师经常会遇到这样的囧境：思考太肤浅、思考不够体系化、设计无法说服别人。针对这种境况，我希望从设计模型的角度去帮助大家扩展设计思维，让设计方案有理有据。本文作者通过实战案例，为我们介绍了一些常用的设计模型，希望大家在使用的过程中趋利避害，做出满意的设计。

本文用几个实际案例来展示如何使用设计模型辅助设计，希望帮助大家可以成长为一个有思考深度能解决问题的设计大师。

▲优秀设计师必备素养：能解决问题，还有思考深度

1. 常用设计模型

在实际做项目的过程中，既有指导整个设计流程的体系化的设计方法论，又有针对具体设计方案的指导性设计模型，所以设计模型按照使用场景可以分为2大类：

1. 流程框架型设计方法论：为设计师整个设计过程提供明确的步骤与框架，让设计过程更加体系化；
2. 设计策略型方法论：让设计师的设计方案有理有据，富有说服力，设计师常常在进行提案输出时用设计策略型方法论帮助自己的方案更加有说服力。

常用的流程框架型的设计模型主要包含：

1. Design Thinking设计方法
2. Google Design Sprint设计方法
3. 双钻模型和GUCDR模型

设计策略型的设计模型主要包含下面几种：

▲点击查看大图

这些设计方法论存在的意义便是「辅助」设计师做设计。

由于设计细分领域很多，每个领域都有很多大师提出的设计方法论，所以大家要根据具体情况去使用这些方法论，这里只是汇总了部分较为常用的设计方法论与大家分享。

在设计的每个阶段都有对应的设计模型，很多设计模型需要大家在用的时候慢慢探索，本文结合项目实例重点讲一下如何运用FOGG行为模型和心理账户模型来辅助设计。

2. FOGG行为模型

FOGG模型阐述了如何让行为发生，表明一次转化行为的完成需要具备三个要素：

1. 动机（motivation）
2. 成本／能力（ability）
3. 触发点（trigger）

▲FOGG行为模型

下面我们结合直播项目看一下如何使用FOGG行为模型。

例：直播间如何引导用户进行礼物打赏？

• 背景：2019年移动直播行业付费用户规模约1240万，行业付费率仅为3.58%，当前直播行业用户付费比率整体偏低。
• 分析：新用户自身没有打赏习惯、不舍得花钱、打赏主播操作成本高。
• 设计目标：提升用户礼物打赏率。

从模型中可以看到我们需要做的是：

2.1 如何提升打赏动机

2.1.1 fogg行为模型中提到用户主要的3个动机

1. 愉悦的感受（Pleasure)
2. 期待（Hope）
3. 归属感（Acceptance)

2.1.2 如何在直播中提升用户打赏的动机

2.1.2.1 降低成本感知，鼓励用户打赏，打赏行为的去货币化

▲使用V钻代替货币，1元=10v钻，降低用户的打赏成本感知，从而提升打赏欲望。

2.1.2.2 给与奖励，制造意外收获的惊喜（愉悦）

▲给用户超出付费价值的激励，增加用户“捡到便宜”的愉悦感受。

2.1.2.3 增加打赏感官刺激，满足用户打赏后的互动期待（期待、归属）

▲便宜礼物名字采用网络用语，使用户产生亲切感；昂贵礼物采用酷炫的名字，符合土豪身份，通过这样的设计吸引不同阶层用户点击。有好寓意的打赏数量

▲通过有好寓意的打赏数量吸引土豪来选择，使打赏更有气势，并且不同数量级的礼物触发不同的动效，给用户积极的回应。打赏后的动效

▲设置不同礼物特效，越贵的礼物特效越复杂，同时刷礼物也会引起主播对用户的感谢，这种方式符合用户的期待，同时给予用户极大的满足感，也是促进用户打赏的最大动力。

2.2 如何提升用户能力，降低打赏难度

有了动机不代表会行动，要让用户完成打赏，他们必须有做这件事的能力；由于动机的不稳定性，所以需要降低做这件事情的成本，用户能力才会越强。

有2种方法可以提升用户能力，降低使用难度：

1. 训练用户，帮助他们不断提升自我直到可以完成目标行为；
2. 降低行为难度，简化用户路径，降低操作成本.

结合直播我们看一下如何提升用户能力，降低打赏难度。

2.2.1 培养用户打赏习惯，逐步升级引导，完成打赏目标

2.2.2 简化用户打赏路径，降低操作、决策成本。

▲增加礼物打赏快捷入口，只要点击就可发送成功，简化了普通用户的打赏路径，减少用户从面板选择礼物的决策成本。

2.3 如何恰到好处地提供触发点

增加了动机和能力只能是增加了用户产生该行为的可能性，至于用户的行为最终会不会真正发生，还取决于是否提供了合适的触发点。

针对不同的人群，触发点的设计也不相同，结合直播我们看一下如何恰到好处地提供触发点。

▲针对不同人群的设计策略

1. 对于高动机、低能力的人，他们需要一个引导来帮助他们完成打赏；
2. 对于高动机、高能力的人，他们只需要一个触发的入口和满足更多高级需求；
3. 对于低动机、低能力的人，需要更多的激励引导用户发生打赏行为；
4. 对于低动机、高能力的人，需要更多的激励来激发他们做某件事的动机.

2.3.1 针对低动机、低能力的人，提供低门槛的打赏和有效的激励来激发用户消费

▲为没有充值记录的新用户提供快捷0元打赏，让用户体验到打赏的乐趣和快感，培养用户打赏习惯。

▲直播间首充入口

▲打赏礼物面板首充入口多通道提供首充入口，引导用户完成首次充值。

2.3.2 对于低动机、高能力的人，提供更多的奖励来激励用户

▲主要抓住用户冒险、贪的心理，吸引用户来抽奖或者打赏福袋来获得一定收入，激励用户进行更多的打赏。

2.3.3 针对高动机、低能力的人，简化用户路径，降低操作成本

▲结合场景提供快捷VR礼物，简化用户打赏主播的行为路径。

▲连击效果降低用户对钱的感知，增加打赏趣味，减少用户打赏的操作步骤，刺激用户贡献更多的打赏价值。

2.3.4 对于高动机、高能力的人，需要满足个性化需求

▲利用用户追求与众不同、标新立异的心理，在普通礼物没有满足用户的情况下用个性化的方式刺激用户付费，同时也弥补了标准化礼物无法满足大众用户不同口味的需求。

3. 心理账户模型

心理账户（mentalaccounting），是芝加哥大学行为科学教授查德·塞勒（Richard Thaler）在1980年提出的概念。

心理帐户是行为经济学中的一个重要概念，由于消费者心理帐户的存在，个体在做决策时往往会违背一些简单的经济运算法则，从而做出许多非理性的消费行为。

心理学有一个经典的实验：

▲点击查看大图

丢50块钱和丢50块的电影票是对等的，可是统计结果有如此大的差距都是因为有心理账户的存在。

3.1 心理账户有三大特征

1. 不同的收入来源之间，有不可替代性（就是自己努力赚的钱更值钱）；
2. 不同的消费项目之间，有不可替代性（情感账户让产品更值钱且不可替代，例如钻石）；
3. 用不同的态度来对待不同数量的收入。

3.2 在产品中要想刺激用户消费把握2个方向

1. 正向激励：让用户的心理账户觉得这笔消费很划算；
2. 反向激励：让用户的心理账户觉得某种行为会让自己的账户产生损失。

下面我们结合直播项目看一下如何使用用户心理账户模型。

3.3 直播间如何引导用户进行礼物打赏

3.3.1 合理利用免费的心理账户，培养用户打赏习惯

对新用户适当提供免费礼物，对于免费账户里面的钱用户会不大珍惜，会更快的打赏掉，从而培养用户打赏习惯。

▲免费礼物

▲首充送礼

3.3.2 为用户创造心理账户，降低用户对成本的感知

打赏体系去货币化，1元=10v钻，让打赏账户不和钱直接挂钩，降低用户对打赏成本的感知，从而提升付费率。

▲充值面板

▲打赏礼物价格

3.2.3 提供限时折扣/活动，反向激励用户

结合活动不定期做限时折扣或者活动礼物，让用户感觉错过就有损失，刺激其消费。

▲限时折扣

3.2.4 从低价值心理账户转移到高价值心理账户让用户掏更多钱

建立粉丝体系，让用户心理账户向情感账户转移，赋予打赏更高的价值。

▲粉丝团

以上便是结合实际项目阐述了如何利用设计模型来辅助我们做设计分析，希望对大家有帮助。

四、结语

凡事都有两面性，在设计思考遇到瓶颈时，这些设计模型对于我们思考深度的增加和思维扩展有很大帮助。但是设计模型会对设计中的感性和创意部分有限制，作为设计师要随时警惕。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

竞品分析是设计过程中的必要组成部分，可帮助企业获得对市场的宝贵见解，确定其产品的优缺点，并制定有效的产品策略。那么，如何判断产品是否具有竞争优势？本文将介绍竞品分析的几种手段与方法，帮助初学者了解如何进行竞品分析以及在此过程中要使用的框架。

为什么要在用户体验设计中进行竞品分析？

在用户体验设计中进行竞品分析有助于公司识别竞争对手相对于其自身业务，产品和设计的优缺点。设计师通过竞品分析研究获得的数据可帮助您开发更好的产品和进行后续更有效的UX设计。竞品分析可以帮助企业：

• 评估产品或服务在市场上的位置
• 填补市场空白
• 了解产品的竞争优势和劣势
• 确定您产品的优缺点
• 为后续的设计迭代提供数据支持

什么时候应该进行竞品分析？

进行竞品分析应该是UX设计过程中最早的研究步骤之一。竞品分析应在进行新设计之前就开始，并在项目持续时间内进行，因为市场上随时会出现新的竞争产品，公司需要在整个设计流程中依据市场变化不断分析迭代产品。

UX竞品分析的步骤

要开始UX竞争分析，首先需要定义分析目标：

1.定义您的产品。为什么要进行竞争对手分析？希望实现什么目标？

2.制定直接和间接竞品清单。创建一个包含5到10个直接和间接竞争对手的表格。根据优先级将它们分类如下：

直接竞争：这些公司以相似的价格提供相同的产品和服务，以满足客户的需求。

间接竞争：这些公司在同一市场中提供可能满足相同需求的不同产品或服务。

3.创建产品功能的比较列表。这包括：

• 用户界面
• 图片
• 筛选选项
• 排序
• 加载时间
• 反应度

4.确定产品之间的差异。使用比较表确定您的产品与竞争对手产品之间的差异。

5.总结并提交结果。完成研究后，将您的分析结果提交给利益相关者，评估产品策略。在竞品分析报表中尝试使用视觉元素，使其更易于理解。

UX竞品分析框架

UX设计师应该熟悉不同的研究方法，以更好地制定其设计策略。以下是UX设计人员可以在竞品分析中使用的一些流行框架：

SWOT

SWOT是基于四个要素（优势，劣势，机会和威胁）的战略规划方法。 SWOT框架可帮助您评估影响产品或设计决策的内部（优势和劣势）和外部因素（机遇和威胁）。

SWOT通常用于战略规划中，以帮助确定潜在的竞争优势。这是UX竞争分析中的一种流行方法，因为它可以快速发现产品问题并确定行动方案。

SWOT分析是一种用于竞品分析的功能强大的工具，但确实有可能由于限于这四个类别的筛选而造成内容的简化。如果没有进一步的数据研究和分析，SWOT可能会影响分析的质量。

增长份额矩阵

增长份额矩阵，又称为BCG Matrix，是由波士顿咨询集团创建的，一种使用相对市场份额（uses relative market share）和行业增长率因子（industry growth rate factors）来评估业务组合和投资策略的业务工具。

波士顿矩阵认为一般决定产品结构的基本因素有两个：即市场引力与企业实力。市场引力包括整个市场的销售量（额）增长率、竞争对手强弱及利润高低等。其中最主要的是反映市场引力的综合指标——销售增长率，这是决定企业产品结构是否合理的外在因素。

企业实力包括市场占有率，技术、设备、资金利用能力等，其中市场占有率是决定企业产品结构的内在要素，它直接显示出企业竞争实力。销售增长率与市场占有率既相互影响，又互为条件：市场引力大，市场占有高，可以显示产品发展的良好前景，企业也具备相应的适应能力，实力较强；如果仅有市场引力大，而没有相应的高市场占有率，则说明企业尚无足够实力，则该种产品也无法顺利发展。相反，企业实力强，而市场引力小的产品也预示了该产品的市场前景不佳。

通过以上两个因素相互作用，会出现四种不同性质的产品类型，形成不同的产品发展前景：

• Stars/明星类产品：销售增长率和市场占有率“双高”的产品群
• Dogs/瘦狗类产品：销售增长率和市场占有率“双低”的产品群
• Question marks/问题类产品：销售增长率高、市场占有率低的产品群
• Cash cows/金牛类产品：销售增长率低、市场占有率高的产品群

这种竞争性分析框架有助于企业确定其产品组合。但是，这种竞争性分析很少提供有关如何评估所有品牌和细分市场的产品策略的信息。

五力分析

五力分析是一个框架，可以帮助企业根据五个要素来分析行业竞争力：买家，供应商，替代品，竞争性竞争和新进入者。根据Michael Porter的模型，这些是直接影响您的业务在行业中面临的竞争的关键因素。

该UX竞品分析工具有助于规划和衡量竞争；但是，它仅提供对企业有利或有害的外力清单，并假设市场结构相对静态。与SWOT类似，这种一维框架需要进一步分析以获得更深入的见解。

感知图

感知图是客户对您的产品相对于竞争对手的看法的直观表示。感知图是帮助公司评估客户对您和竞争对手的看法的有用工具。这可以帮助企业跟踪市场趋势，确定市场差距以及制定品牌和营销策略。

感知图通常是针对两个轴设置的，它们从低到高移动以评估某些因素，例如价格与性能，功能与价格或价格与质量：

感知图可以分析客户对产品的看法，例如质量与价格

感知图的缺点之一是只允许使用两个变量，因此无法考虑其他因素。这种方法将客户的购买决策简化为两个属性。数据也可能比其他方法更难获得分析和成本。

结论

作为用户体验设计师，在开始产品设计之前，必须进行透彻的研究并尽可能多地了解您的竞争对手。通过不同的框架研究竞争对手的情况，不仅可以改善您的设计决策，还可以帮助您提供更好的产品解决方案。通过使用用户体验竞品分析，您可以让品牌建立更加优异的客户价值。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

画原型是产品经理日常工作中必不可少的部分，通过原型来展现我们的产品样式，表达我们的产品逻辑。对于产品经理来说，严谨的产品逻辑与良好的用户体验是我们关注的重点，我们很少会关注原型本身的好不好看，好不好看更多的是设计师的事情，同时如果在原型好不好看上纠结太多，也会消耗额外的时间成本。

同样作为一个产品经理，我也认为原型没必要做的太好看，只要能梳理清楚流程，完整表达产品的逻辑即可，因为即使你的原型再好看，消耗额外的时间不说，设计师终究还是会再重新设计一遍。同时也会影响限制设计师的思路，他们拿到你的原型可能只是给你调调间距跟配色，这对于他们来说也太没有成就感了，而且长此下去，可能也会导致设计师对产品的过度依赖，没有自己独立的设计想法。

虽然日常工作中我们可能不用画高保真的原型，但是我还是建议大家能有这样的能力。有没有这个能力是一回事，而有这个能力却不用又是另一回事。那么高保真原型一般会有什么用呢，今天就跟大家聊聊这部分的内容。

01

首先，有一部分公司是对产品经理原型有要求的，招聘里写明了要能出高保真原型图。这种情况要么是公司没有足够设计资源；要么就是虽然有设计资源，但设计的能力比较弱，这就提升了产品经理的标准，要求产品经理在设计原型时，多做一步，把产品的样式布局等展现细节描述清楚，这样设计师在拿到原型时可以快速处理形成UI图，节省设计的时间。

其次，通过高保真原型可以提升我们的审美能力，它让我们在除了产品功能逻辑之外，更深入的关注产品的布局，样式。颜色该怎么搭配、按钮该如何摆放等等，这个时候我们是以设计师的角度去思考问题，而通过这些思考，不断的锻炼提升，我们对于美的分别能力也会大大提升。而且当设计师出完设计图之后，我们能很快的发现其中的问题，提出我们合理的意见建议。

第三主要体验在对外合作或者跟老板汇报时，可能会倾向高保真的原型图，当然有的公司也会让设计师来先出Demo，通过高保真的原型图可以更加清晰的描述产品，减少大家的理解偏差。

02

那么在日常工作中，我们如何才能让我们的原型看起来更加高保真，更好看呢？

尽量用真实的元素

高保真原型图的最突出的地方其实就在于真实，贴近线上的产品，因此我们的页面元素也要尽量使用真实场景。比如像原型里的图片、在普通的原型图里我们可能直接用一个图片控件来表示这个地方是一张图片，但是在高保真原型图里，我们需要找一张真实的图片来占位。

图标也是原型图里最常出现的元素之一，使用真实的图标而非占位控件，也会让整体页面美观度提升不少。给大家推荐一个图标网站iconfont，它是阿里妈妈MUX打造的矢量图标管理平台，对于一些图标按钮我们可以直接在这个平台搜索下载。

背景图的设置

背景图的作用其实主要为了衬托核心内容，常见背景图都为浅灰色，在上边显示纯白背景的内容模块，当然也有一些设计都是纯白背景，通过分割线来区分内容。通过背景图的加入我们可以很容易分辨出产品的主次，让产品增色不少。

间距字体统一

各个模块之间、字体与字体之间、字体与图片直接等等，这些间距都需要统一，规规矩矩的按照统一的距离排列整齐，这样整体看上去界面就不会乱。同时字体之间的距离也不要挨的太近，显得太拥挤。另外也要注意内容的左右留白，不要让内容贴着屏幕的左边或者右边。

对于字体的大小、字体的颜色也需要进行统一。同时也要注意不同作用的文字、字体的大小跟颜色也会不同，例如：主标题的字体都偏大、颜色也偏深，而副标题作为对主标题的补充，则需要使用相对较小的字体，较浅的颜色。

多看好的设计作品

好的审美设计能力并非一朝一夕就能形成，需要一步一步的积累提高，而市面上有很多好的渠道可以让我们接触到好的设计作品。最简单的，我们可以直接看其他家的产品，看他们的的设计风格、界面布局、颜色搭配。当然也有很多好的设计网站：像国内的花瓣、站酷，国外的Dribbble、Behance等等，都是我们可以接触到好的设计作品的渠道。

说了这么多，还是靠大家在日常工作中的多看、多想、多实践，在保证按时完成工作的情况下，可以尝试让你的原型看起来更好看。想跟做是两回事，希望大家能真正动手去做，学着去走进了解设计，发现设计之美。通过这些不断提升自己的审美水平，也给自己一个加分项，提升自己的竞争力。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

“我觉得这个文字应该放在左边、图片放在右边……”“我觉得这里的配图，用人拿着产品的比单独产品的好……”“这个流程到底是分两步走，还是一步完成呢……”

不知道大家是否经常遇到类似的「难题」，比如需求方或者boss有不同的设计意见，大家互相都说服不了对方，或者觉得双方说得也有点道理；再比如，自己感觉几个设计方案都不错、拿不定主意……归根结底，就是说不好「到底哪种设计方案会有更好的结果」。

想回答这个问题，有一种可靠而有效的实验方法——A/B Test，它既可以帮设计师为自己输出的设计方案正名，又可以让产品研发团队避免因争论设计方案细节耗费大量时间，并真正地评估到产品改版方案有无提升。

What – 先来简单了解下 A/B Test

A/B Test 也叫“拆分测试”或“水桶测试”，是一种比较同一页面、功能或产品的两种（或更多）方案中哪一个更好的方法。是将不同的方案分别展示给几组特征相同的用户，然后持续跟进关键数据（如转化率），从而判断哪个方案可以得到更好的效果。

简单来说就是用控制变量法，控制用户特征、时间等无关变量不变，将不同设计方案作为自变量，观测关键数据指标这个因变量的值。

When – 什么时候适合用 A/B Test

其实前面有说到，想要回答「到底哪种设计方案会有更好的结果」这个问题的时候，都可以考虑用 A/B Test 的方法。具体来说可以有这些情形：

• 需要在几个设计方案中进行抉择时：

「设计方案」的范畴可大可小，小到不同的设计元素，如色彩、按钮样式、文案等等，大到页面布局、任务、功能、产品/活动策略，乃至整个产品的体验。比如，想知道发满100减30、满150减45哪种优惠券可以更加促进转化、拉动 GMV时。

• 想要了解用户的喜好时：

例如，当产品要调整内容推荐算法，想知道哪种算法更能引起用户的点击欲望与兴趣时。

• 与现有方案进行对比时：

当想要测试改变现有设计后，是否会产生积极效果时。

• A/B Test 不受产品形式的限制：

无论是App、网页、PC 客户端，乃至硬件中都同样适用，只是对应的测试方案、收集监测的工具和数据指标会不同而已。

Why – 为什么 A/B Test 是有效的

A/B Test 在这几个方面的表现让它成为一种实用有效的测试方法：

• 了解用户：

我们设计师也好，业务产品侧也好，其实都在靠直觉和判断猜想来选择用户会喜欢的方案。虽然我们可能做过用户研究，但一方面用户可能不会具体、直接地说「我想要个红色的按钮」，另一方面用户就算说得如此具体了、也不一定会按照说的去做。

A/B Test 可以帮我们从真实的用户行为中了解信息，了解用户喜欢什么、会避免什么。

• 建立共识：

没有数据的支持，我们永远也不知道具体场景下到底哪个产品或设计决策是对的，我们有的只是假设、猜想。而 A/B Test 可以作为决策、验证猜想的工具，帮助团队选择设计方向，验证（或否定）做出的决策。

• 保持产品的持续发展：

A/B Test 后确立的方案，至少会是能想到范围内最好的方案，可以保证更高的转化率、更高的活跃、更好的沟通、更棒的设计。

How – 怎么用 A/B Test

第1步：选择要对比测试的内容（自变量）

前面说到了，测试的一处内容可大可小，随我们的目标来定就好；但必须是一处内容，如果有多处内容变化，需要用多变量测试的方法。

唯一需要注意的就是，变量的差别越大会越快地得到结果，如果要测试的方案之间差别很小的话，可能需要的测试时间会长一些。

选择测试内容的时候，要尽量选择未知的、高风险的问题，像前人已经做过深入研究、比较普适的方案（比如给按钮增加动效会促进点击转化）就不用再花力气去研究了，再像一些风险不高、影响不大、收益也不会太高的地儿，也不要浪费过多时间精力研究。

同时本着控制变量的思想，测试的内容要在同一水平/形式上，比如要测方案 M 和方案 N ，它俩可以是都发布上线的功能，但是不能说一个是线上的功能、一个是低保真的界面，这样测试就会让结果产生偏差。

第2步：确定要监测的指标（因变量）

这里要根据第1步中确定的测试内容来选择能衡量它好坏的指标，通常在 App 设计中可以是转化率、使用时间、交易额等；在其他产品，如无人机中关注使用频率、飞行高度、故障情况等。

根据公司具体业务情况，来确定测试中的监测指标。

第3步：确定测试的参与者

还是本着控制变量的思想，不同的方案要在同一时段展示给特征尽量相同的用户，尽量让分发的渠道也相同。总之，要控制一切可以控制的变量。

参与者的数量可以根据测试内容差异大小、产品用户规模、成本等因素来决定，保证参与者数量可以得出有统计学意义的结论。

因为肯定无法对全体用户进行该测试，作为抽样测试要能代表整体，需要有统计学意义。

第4步：制作测试材料，在工具平台上发起测试

这个我们设计师可以作为了解，现在有很多成熟的测试平台，如 Google Analytics’ Experiments，可以支持 A/B Test 的实施。

只需要在平台上设置待评价的方案、检测数据目标、发布的用户、置信水平（确信在什么概率的情况下重复实验会得到相同的结论）、实验持续时长等内容即可。

第5步：观察测试结果，直至停止测试

在有明确的测试结果后，就可以尝试停止测试了，通常是至少7天后可以停止；如果有条件的话可以30天后，排除工作日、周末、月初、月末等时间点的影响。

如果行业有特殊的时间节点，如大促、旺季淡季，也要考虑在内。

第6步：分析测试结果

一般 A/B Test 的工具会明确地显示出测试的结果，也就是某一个方案更优。如果一直没有明确的区分，可能是方案间的差异较小，需要更多的用户来测试才能得到有差异的结论；也可能是方案间本身就没有明显差异，此时要视情况决定是否终止测试。

若没有工具直接给出测试结果，也可以通过假设检验的方法计算各个方案在监测指标上的数据表现有误显著差异。

得到测试结果后，一方面，我们可以按照它来做决定了，可以选择表现最好的方案推进；另一方面，我们也可以规划后面的测试了，看有没有其他的元素组合或者改进方案会让用户更喜欢、数据表现更好。

此外，为了提升我们的设计思维、更好地理解用户，我们还要去探索 A/B Test 的结果是「为什么」。A/B Test 只能告诉我们用户怎么做的，但并不会告诉我们用户是怎么想的、为什么会那么做。

我们一方面可以继续思考、假设，再用测试检验我们的假设。或者通过可用性测试、大声思维法，观察用户的行为、倾听用户操作时的想法。

Notice – A/B Test 的作用范围是有限的

• 只是目前最好状态

通过 A/B Test 的定义我们可以发现，在测试之前我们先要给出几个方案，再从中选择最优。也就是说，它只能帮助我们找到目前提出的方案中最好的那一个，但不一定是最适合整个产品的方案。为了找到再好一些的方案，还需要提升设计者的认知，并且配合其他用户研究、产品设计方法探寻。

• 不一定能总结成经验规律

A/B Test 能发掘出在整个设计中某个部分是很棒的、可以拉动指标数据，但这只意味着在所测试的特定的产品设计中起作用，换做其他情境，不一定就是有效的。

划重点

本文简单介绍了如何实施 A/B Test 来在多个产品设计方案中做抉择，（更多地是捍卫自己的设计！让业务产品侧心服口服！）设计师要把握好明确测试内容（自变量）、选择监测指标（因变量）、确定参与者、制作测试材料等环节。

此外，设计师要利用 A/B Test 帮助自己理解用户，在得到测试结果后剖析用户行为背后的原因，通过更多的扩展测试来寻找其他更优的设计方案。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

大家好，我是彩云。按钮设计是用户界面中主要的交互基石，按钮作为*流，提升产品数据的重要节点，作为设计师必须对它的前世今生有一个很好的了解。想要把按钮设计做到最好？看完这一篇就够了！

按钮交互的设计由来

为了设计合适的交互方式，我们需要回顾实体按钮的发展历史，作为UI组件之一的按钮来源于实体按钮，现在广泛用于互联网产品中。按钮非常神奇，只需手指触摸，就可以打开一个APP、启动汽车或者一个系统，即使用户不懂背后的原理。在《Power Button》这本书里，Rachel Plotnick研究了今天按钮操作的文化起源，描述了按钮成为互联网产品的命令方式，可以实现毫不费力控制。

“你只需按快门，其余的我们来做。”—柯达相机用抓人眼球的口号来吸引潜在的顾客。

这正是迄今为止，按钮吸引用户的地方，只需简单的触摸，就能获得处理事件的满足感。即使很多新家电和其他设备都进化为了触屏操作，实体按钮却并没有完全消失，其塑造的行为习惯仍然影响按钮设计的直观性和易用性。

按钮与链接的区别

按钮传达了用户可以执行的操作，它们通常在UI界面中，比如：对话框、表单、工具栏等。区分按钮和链接特别重要：

链接：用于导航到另一个位置，比如：“查看全部”页面、跳转另一个位置等。

按钮：用于实现一个操作，比如：提交、合并、新建和上传等。

按钮的多种状态

设计正确的交互和样式，对按钮设计十分重要。按钮每个状态必须可识别，要显著区别于其他状态和周围的布局，但是也不能完全改变组件或者制造视觉混乱。

普通状态：可交互和可用的状态。

焦点状态：用户使用键盘或其他输入方法来突出显示一个元素。

悬停状态：用户把光标置于可交互元素上的状态。

触发状态：用户已点击按钮后的状态。

加载状态：当操作没有立即实现时，表示正在进行的状态。

禁用状态：按钮目前不可交互，但以后可以使用。

按钮的多种样式

最常见的是圆角按钮，可以轻易识别，并且在输入字段旁边看起来不错。为按钮选择正确的样式，取决于目的、平台和规范。以下是一些最流行的样式：

不同样式的优先级

样式最初是用来区分操作的优秀级。明确操作的优先级，可以在众多的选择前，引导用户。通常，要有一个突出的按钮（主按钮），几个二级按钮，还有三级按钮。

有时不需要默认按钮

通常，把最常用的按钮设置为“默认”（使用主样式）和选中的状态。这样可以帮助大多数用户，更快完成他们的任务，引导正确的方向。

此外，当选择同等重要时，或者操作存在危险，在这些情况中，需要用户明确按钮的选择而不是意外选择。

别让用户思考

Don’t make me think（别让用户思考）是可用性工程师Steve Krug所著的书的名字（中文《点石成金：访客至上的网页设计秘笈》）。其中指出，触屏是为了让界面更明显，而不是让用户产生困惑。基于多年使用不同的设备和其他产品，用户养成了对按钮外观和功能的特定期待。如果和“标准”按钮的样式差别太大，就会让用户迟疑和困惑。

不要对可交互和不可交互的元素，使用相同的色彩。如果可交互和不可交互的元素，使用相同的色彩，会让用户不知道点击哪里。

一致性提高效率和准确性

“一致性是最有力的可用性原则之一：当元素一直都是统一的样式，用户就不必担心突发事件。” — Jakob Nielsen

一致性提高速度和准确性，避免错误。创建可预测性可以帮助用户获得掌控感，在产品中实现他们的目标。在创建主要、二级和三级样式时，尝试找到一些共同的元素，比如：色彩、形状等。尝试不仅对设计的系统保持一致性，对平台也要保持一致性。

按钮的交互热区尺寸

按键应该是一个简单的任务，如果用户点击按钮失败，或者误点到了旁边的元素，会导致不好的体验和浪费时间。

对于大多数平台，触屏的区域至少为48x48dp。交互热区的尺寸应该是至少9mm，不论屏幕的大小。推荐的触屏元素的尺寸，至少为7-10mm。

对于icon按钮，确认交互热区大于元素的视觉边缘。这点不仅适用于手机或平板，同样的推荐尺寸也适用于对于网页的点击设备，比如鼠标。

按钮的可用性

所有组件都应该注意设计的可用性。交互热区是影响可用性的一个因素，其他因素还有字体大小、色彩和对比。许多工具可以帮助你轻松检查组件设计的实现效果。

设计师应该和开发团队紧密合作，以确保按钮的正常使用。按钮作为一个可点击的元素，在用户触发时，给予反馈。用户通过按钮这个元素，可以实现交互控制。

按钮的交互手势

通过手势操作，用户可以和APP进行交互。触摸作为实现操作的另一种方式，可以节省时间，获得触觉的掌控感。虽然一些手势，比如滑动引出相关的操作、双击点赞或长按，现在越来越广泛地使用，但对于普通用户，这些手势不太明显。建议使用手势作为替代的方案，供高级用户使用。

按钮的文案

按钮文案和样式一样重要。使用错误的文案，会让用户困惑，浪费时间，也会误操作。

一个好的按钮文案，可以引导用户操作。最好使用动词，告诉用户在做什么。就像这个按钮在询问用户，“你想收藏吗？”或者“你想确认命令吗？”

避免使用“是”或“不”，或者太通用的，比如提交。

按钮的位置

确认和取消的按钮，哪个放在右边，设计师们因此而争论不休。

• 确认按钮放在左边，符合正常的阅读顺序。如果我们知道用户最可能的选择，可以帮助用户节省时间。Windows系统将确认的按钮放在左边。
• 确认按钮放在右边，优化流程。将确认按钮放在右边，可以帮助用户在操作前，评估所有的选择，避免错误和冲动决策。苹果系统将确认按钮放在右边。

两个选择都有理由，并且也不会造成使用困难。我个人倾向于放在右边，在活动列表或者对话框，可能因为我常用Mac系统。

按钮的禁用设计

每个人都遇到过禁用按钮，被困在当前页面几秒钟或几分钟，尝试弄清楚为什么禁用按钮妨碍了当前进程，然后要怎样重新开始。禁用状态提示组件当前不可交互，但是以后可以。为什么使用禁用按钮呢？因为如果从原来的位置上移除按钮，或者在上层用内容覆盖掉按钮，会给用户带来困惑。

我建议，避免使用禁用按钮。最好让按钮永远可以使用，如果用户没有提供必要的信息，只需高亮强调空白的输入区域，或者提醒用户。

ps：material design中悬浮按钮、拖拽状态，可以了解一下

译者：Bravert

原作者：Taras Bakusevych

原文链接：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

无论是创新新产品还是优化现有产品，产品设计师都应遵循用户对熟悉的产品和界面的了解和习惯完成设计。在产品设计中利用心理模型（mental models）,回报是更顺畅的交互，更快的采用率和产品可用性的提升。

作为设计师，我们往往期望设计新颖且独具匠心的产品。然而，对用户而言，他们更习惯接触适应他们过往使用习惯的产品，他们期望在刚刚使用您的产品时，就能够快速了解产品功能及使用流程。在UX领域中，它被称为“心理模型”。因此，在开发新产品和功能时，设计师应遵循用户的期望。

什么是心理模型？

“A mental model is based on belief, not facts: that is, it’s a model of what users know (or think they know) about a system such as your website.”

—Nielsen Norman Group

通过习惯性地使用多种产品，人们的大脑会开发出有关产品功能的心理模型。这些心理模型是通过定期使用某些产品系统（例如网站，应用程序，甚至如上面的汽车座椅示例中的更具触觉性的用户界面）以及了解系统工作原理的知识形成的。

人们会将他们对一种熟悉的产品建立的期望转移到另一种相似的产品。

这种心理模型可以追述到儿童时期。如今，相比于传统书本或电视，我们可以留意到幼儿已经能够适应与触摸屏设备进行交互的行为。基于他们接触触摸屏设备的经验，触摸屏已经在这些长期接触电子设备的幼儿心中建立了一种期望（心理模型），即面对着“盒子形状的”物品应该使用滑动进行交互反馈。这不是因为他们花费了大量时间学习使用每种设备，而是因为他们了解特定设备及其工作原理。他们的大脑存储了用于操作的心理模型，并且能够成功地将其应用于使用相同或相似模式的其他设备。

“每个用户都有自己的思维模式，不同的用户可能会在相同的用户界面上构建不同的模型。此外，可用性的最大难题之一是设计师和用户的心理模型之间的鸿沟。”

梅赛德斯（Mercedes）的汽车座椅设置是使用心理模型完成交互设计的一个很好的例子——用于控制的汽车座椅形状使其在直观上易于理解和操作

设计师沉浸在设计项目中，并定期形成自己的思维模型。他们还从其他设计师使用的常见交互设计模式中获取它们。从某种意义上讲，这可能会造成“设计师泡沫（designer bubble）”，即设计师设计的产品能够对其他设计者产生同理心和共鸣，但普通用户却难以理解这些设计。

人们具有独特的心理模型，这些心理模型通常由教育，经验，年龄和文化塑造而成。为了使用户理解并设计出最大的可用性，设计人员需要缩小设计人员和用户心理模型之间的差距。

为了与用户现有的思维模型保持一致，设计过程应结合对产品运行方式中用户期望的理解，这一步骤需要作为用于发现用户需求和痛点的UX研究方法的重要环节。

改善错位的用户心理模型

当用户的心理模型与特定设计的实际工作方式存在差异时，就会发生心理模型的错位。因为产品与用户的期望和他们所掌握的现有知识不符，这些产品会导致灾难性的后果。

例如，大多数人已经习惯使用各种电子商务系统，以至于他们对线上购买体验的体验产生了一种习惯。在这样的环境当中，任何超出传统用户认知的操作步骤都有可能导致转化率下降和用户的流失。

当我们反向应用这种模式，我们却能得到意外惊喜的效果。在User Interface Engineering进行的案例研究中，当在结帐流程中将“注册”按钮替换为“继续”按钮时，这一细微调整创造了3亿美元的收入增长。根据以前的经验，购物者对单击“注册”按钮后将要遵循的过程具有心理模型，即注册流程会耗费大量时间，这些负面期望会导致部分购物者放弃完成后续购买行为。因此，当设计师将“注册”按钮拿掉时，用户的后续购买积极性大幅提高了。

在设计流程中，应用可用性测试和其他UX研究方法有助于揭示设计经验与用户思维模型之间的矛盾。此外，可以通过交互式导览（interactive tours），导入界面(onboarding)，实时反馈（real-time feedback）和指示符(signifiers)来帮助学习新产品功能和新UI来改善心理模型之间的差距。

对用户熟悉的现有设计进行大范围的大规模更改可能会违反用户现有的思维模型。为了最大程度地减少使用户烦恼的风险，公司可能会考虑通过几次更新或对较小的小组进行测试来进行较小的调整。

在心理模型的基础上进行设计

UX设计人员的目标是创建一个流程，使用户可以快速轻松地实现其目标。人是习惯的产物，利用用户的思维模式意味着用户将在使用产品之前就知道如何使用该产品。

UX设计人员通常会创建旅程图(user journey map)和移情图(empathy map)，并在创建新产品时使用数据来帮助确定用户的痛点。在心理模型方面，可以将相同的UX研究方法和过程应用于现有竞争对手或同等产品的研究。只要目标人群是相同的，参考和借鉴众所周知的系统就意味着几乎不需要进行任何测试即可验证核心功能的可用性。

可以对竞争性和/或相关系统的用户进行研究，以了解他们当前的工作方式，当前的心理模型以及他们的痛点

镜像现有UX

世界上最流行的应用产品之间是相互影响的，并且它们会根据现有的思维模型定期改进和优化设计。例如，当Facebook引入了“Like”的交互模式，随后就被LinkedIn和Instagram复制。除此之外，Twitter引入了标签（hashtags），然后由Facebook和Instagram复制。Instagram引入了故事(stories)， Snapchat引入了照片滤镜(photo filters)和操作(manipulation)，然后Facebook复制了它们。

Facebook Messenger的UI利用现有的心理模型来镜像Snapchat

最新统计数据显示，Facebook每月活跃用户超过26亿。该应用程序如此流行，以至于它影响了当今的许多设计，因为用户对熟悉的产品（如Facebook）已经建立的范例抱有期望。由于Facebook今天的设计影响力，在许多不同的桌面应用程序的登录区域附近的右上角找到通知图标是一种相当标准的做法。状态更新，新闻提要和点赞在其他应用程序中也越来越常见。LinkedIn可以根据自己的需要设计个人更新，新闻提要或通知。但是，他们利用成功，庞大的用户群以及用户现有的思维模式，选择创建一种直接镜像Facebook的体验。

除非有特殊原因规避用户的期望，否则引用熟悉的模式可以使设计人员将用户的注意力集中在产品更重要，独特的功能上。即使某人从未使用过LinkedIn，他们对Facebook的了解也意味他们能够快速适应与Facebook有同样信息流设计的产品。

心理模型和拟态

拟态化是一个术语，它用于描述界面对象，这些界面对象反映了现实世界中对应对象的显示方式和/或用户如何与之交互。此设计概念利用了用户对实际对象的现有知识和思维模型，拟态化的设计使得用户不再需要花费大量额外时间学习新的界面。

许多数字用户界面元素反映了现实世界中的对应元素。这并不是因为设计师缺乏想象力，而是他们意识到当UI元素与现实世界中的类似物相结合的时候，可以大大减少用户的认知负担。

Google的Material Design系统使用了非常扁平的视觉设计和图像，但利用了基于隐喻的常见UI模式来确保产品的可用性

该原则如果正确应用，则对提升产品的可用性非常有效。拟态化意味着UI的外观和功能都与现实世界同类物品类似。但是，设计人员必须谨慎使用这种心理模型理论，因为功能或外观上的差异实际上可能会损害设计的可用性。

拟态设计在专业音频制作应用中很常见。数字插件通常会模拟模拟设备，例如压缩器，均衡器和混响单元。在下图中，左下角的数字插件采用拟态设计来模拟顶部单元。

数字音频插件通常会模拟模拟设备，例如压缩器，均衡器和混响单元——左下方的插件使用拟态设计，而右下方的插件则没有使用拟态设计

基础创造力和创新

为了最大限度地提高可用性，在心理模型的基础上进行设计非常重要。在现有思维模式和标准下进行创新可以带来仍符合用户期望的新颖产品。

例如，大多数人已经开发了音量滑块的心理模型。在下面的示例中，左侧的滑块代表大多数人对于音量滑块所具有的心理模型。中间的滑块设计是不符合用户习惯的，它看上去完全与思维模型和用户期望值相抵触，右侧的滑块取自Apple的iOS。我们对比之后可以发现：苹果公司利用创造力和创新来设计新颖的产品，但仍然尊重心理模型的结构。

了解用户的思维模型是设计中的重要一环，对既定设计进行用户体验研究将有助于澄清现有的思维模型，并使设计师能够利用其特性改善产品体验，提升产品的可用性和易用性。

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！

通知设计是双向的，关键是要保持适当的平衡。通知设计处在产品的外围，所以设计师倾向于将通知设计留到最后。但它帮助用户实现目标的体验，产品设计过程中尽早处理通知设计将产生更好的结果，一起来看看如何深度执行通知设计。

一、通知设计的基本原则

进行通知设计时，需要牢记的基本设计原则是它必须协助（而不是阻碍）用户执行操作。

通知的形式取决于以下几个关键因素：

• 传达的信息类型
• 信息是否需要用户操作
• 信息的紧迫性(是否需要立即查看)

一个设计良好的通知模型会考虑到可访问性，并具有适应不同语言的灵活性。所以要求通知的样式和行为必须清晰、简明和易用。

二、通知设计的目是什么？

通知在产品可用性方面有至关重要的功能。人机交互学博士尼尔森发表的“十大可用性原则”中，第一条是状态可见性原则。

该规则规定，系统应始终在合理的时间内通过适当的反馈使用户了解发生的情况。

之前的文章中讲过如何通过反馈来让用户清楚所处的状态，点这里快速回看➡️提高产品状态可见性的4种方法。

通知设计是产品UX的重要组成部分，如果没有通知和反馈，就好比驾驶一辆没有仪表盘的汽车。

汽车仪表盘上布满了仪表、图标和指示灯，这样设计的目的是提高汽车操作系统的可见性，并确保安全可靠的操作性。

当我们开车时，仪表盘会发出有关发动机温度、机油、刹车、安全气囊等一系列的通知，使我们随时了解情况。转弯时转向灯会闪烁，同时伴随着咔哒声，这两者都为我们提供了反馈。

App产品与仪表盘的工作原理相同。系统状态和反馈的可见性是基础，而可用性是优秀用户体验的基石。

三、建立灵活的通知模型

向用户发送一定数量的通知是一种平衡行为。而过度发送会带来风险，产品可能会得到很多负面反馈，或者会让用户疏远甚至放弃使用。

因此，设计师需要仔细考虑产品的交互，只发送具有明确目的的消息。另外让用户灵活地关闭所有或部分通知也是一个好主意。

通知设计首先分为三个级别：高关注度、中关注度和低关注度。然后再通过这三个级别中的特定属性进一步定义通知的类型。

下面是一个可参照的列表，通知的类型将根据产品、用例和其他变量而有所不同：

高关注度

• 警告（需要立即注意）
• 错误（需要立即采取措施）
• 异常（系统异常，某些功能无效）
• 确认（需要用户确认才能继续进行的操作）

中关注度

• 警告（无需立即采取措施）
• 确认（对用户操作的反馈）

低关注度

• 信息性消息（又称被动通知，可以回看某些内容）
• 标记（通常在图标上，展示上次互动后的新内容）
• 状态指示灯（系统反馈）

四、通知设计需要注意的问题

要设计具有出色用户体验的产品，设计师需要列出所有可能用到的通知清单。

有了清单，首先根据所需的关注级别和属性对通知进行分类。通知不应该具有侵入性，所以需要谨慎进行。在此过程中还要思考的一些问题：

• 什么会触发通知？
• 正在传达哪种类型的反馈？
• 通知将出现在哪里以及如何出现？
• 哪个通知需要立即交互？
• 通知是持久性的还是非持久的？

接下来确定颜色和样式，并将其放入设计系统中。在这个过程中，设计师需要考虑每个可能出现的通知类型，确保它们在所有背景上都能正确呈现。

通知的位置也很关键。为了避免混淆界面，通知应该出现在UI的顶部、底部或者靠近角落。

除易读性外设计通知模型还要考虑在不同场景中许多小细节。作为全局导航的一部分，下图界面中的通知应保持可访问性。

有关定义通知行为的其他问题：

• 如果一个警告是持久的，那么设计师怎样确保用户在离开初始屏幕后仍然可以访问它们？
• 是否需要在可以看到通知存档的地方加入带有徽章的警报图标？
• 如果一个通知是非持久性的，它会在多长时间内消失，是否应该有一个选项可以在它淡出之前关闭它？

对于移动应用，不仅要设计应用内的通知，应用外的推送通知也要精心设计。

太多没必要的系统推送会让用户感到沮丧，他们可能会让通知静音甚至弃用该产品，比如令人恐惧的App小红点。

考虑一些通知的可操作性，让用户在不打开App的情况下就可以完成特定的需求，以此提高工作效率。还需要谨慎安排推送通知的时间，以免疏远用户。

五、打造优秀的通知设计体验

遵循以下做法可以确保用户将通知视为提供价值，而不是打扰或中断，从而提高用户体验：

1. 根据前面讨论的三个注意级别对通知进行分类，再定义这三个级别中各种通知的形式，为三个注意级别创建统一的配色方案以及图标样式。
2. 创建简洁易读的通知来提供有用的信息。注意适应性和灵活性，以适应不同的内容类型和文本长度。
3. 仔细考虑发送什么以及何时发送。对于高关注度的通知，尽可能考虑声音和触觉(振动)反馈。
4. 对于非持久性的通知至少应该停留4～8秒后再从屏幕上消失，也可以选择更快将其取消。另外考虑一个带有标记通知“不再显示”的选项。
5. 确保通知与背景之间有适当的对比来提高可读性。采用流畅的响应式设计时，背景可能会在通知下自动变化。

总结

通知设计不应该被看作事后诸葛亮。了解何时以及如何使用通知对于提供良好的可用性和建立产品的一致性至关重要。

快速回顾通知设计的正确方法：

• 尽早开始通知设计，而不是事后考虑；
• 按三个注意级别对通知进行分类：高、中、低；
• 考虑颜色和图标的样式并确定位置；
• 按类型对它们进行分类：持久性或非持久、弹窗、横幅等；
• 将它们整合到设计系统中。

原文：toptal.com/designers/ux/notification-design

作者：Sara Vilas

译者：Clippp

免责声明：本文版权归原作者所有，文章系作者个人观点不代表蜗牛派立场，如若转载请联系原作者；本站仅提供信息存储空间服务，内容仅为传递更多信息之目的，如涉及作品内容、版权等其它问题都请联系kefu@woniupai.net反馈！