产品该如何避免同质化？本文作者依据工作中项目实践的所思所想，从产品同质化的产生原因出发，结合企业和用户的具体应用案例，就此话题分享了自己的想法，供大家一同参考学习。

这篇文章只是想从个人理解的角度回答下标题问题，如有不足，欢迎指正和讨论。

一、为什么会有产品同质化？

产品是需求实现的载体，是企业和用户实现价值交换的媒介。需求是有来源的并不是凭空可以创造的，这也就意味着可见的、可交换且可盈利的需求在一定程度上（没有新元素加入的情况下）是有限的（这和需求本身的无限性并不冲突）。再也不是移动互联网初期一片蓝海，站在风口就可以起飞的时代了。

除了这个外部因素外，新业务的试错成本往往比已经验证过可行性的产品来的高的多。因此，为求稳，也有不少本身有实力的公司会进入相同的赛道一争高下。

但是没有差异的产品对用户来说由于替代成本低，很难维持稳定的用户群体。本文分别从用户分析和企业核心竞争力两个角度分析，在同质化中寻找突破口。仅为作者本人经验和观点，如有不足和问题，欢迎沟通和指正。

二、从用户出发，精准把握产品定位

1. 飞猪 VS 携程

因为前段时间去成都需要订酒店，原本是想单纯的做下比价的。但是却意外的发现两个APP酒店的推荐逻辑差异甚大。

根据推荐结果不难发现，携程的关键词是商务型、中端酒店，而飞猪则更偏重于经济型、酒店公寓（民宿），且两者在整体均价上也是拉开了差距的。

携程作为出行行业的老大哥，在移动互联网还没有普及时，就已经占据旅游出行机酒业务的半壁江山了，特别是商务出行板块。而酒店线上预订业务本身就是偏重于供给型，没有资源就没有话语权。

而在这种情况下，飞猪通过抓住近年旅游行业爆发的契机以及大众对民宿接受度的提高，把握年轻群体对休闲游、穷游的诉求，加之其对小型公寓酒店、民宿的扶持和曝光（19年成立了菲住酒店联盟，实现联盟会员共享），实现了这部分用户和商家的在线交易。

虽然从表象上看产品的形式是相同的，都是酒店预订，但是产品本身的定位和底层逻辑的不同，各自圈定了不同的用户实现了差异化竞争。

2. 巧克力VS口红

上面携程和飞猪的例子是基于一个小的赛道在做细分，如果只将目光放在这个层面，那只是在“分饼”，但是这种情况下饼的大小总是有限的，如果不换个角度“把饼做大”，在竞争严峻的当下也很难长久的不被打倒。

之前在阿里妈妈的公开课中看到过这样一句话：今天巧克力最大的竞争对手是谁，不是糖果，不是坚果，而是口红。

这是基于当今消费并不只基于个人的需要，而是越来越多的扮演着情感表达、场景营造的角色（基于阿里妈妈2020消费观察数据），25岁男性对口红价格的接受度甚至是女性自用的三倍，口红逐渐蚕食了巧克力在男女恋爱市场中稳固的礼物宝座，想想在口红一哥李佳琪的一声声“OMG，买它”中，多少男性也同时乖乖的掏出了腰包。

因此，我们差异化的思考不应该只局限于品类下人群的思考，也应该基于不同的场景去挖掘场景下的用户群体。

三、从企业出发，发挥企业核心优势

1. 美团优选 VS 橙心优选 VS 多多拼团

今年年初的疫情，虽然对各大行业都造成了不同程度的损伤，但是却“社群团购”这个模式看到了曙光。

艾媒咨询数据显示，在疫情的刺激下，2020年社区团购市场发展迅猛，市场规模预计将达到720亿元，而未来随着市场的良好增长态势，2022年中国社区团购市场规模有望达到千亿级别。

各大平台也在下半年争相加入这个赛道：美团、滴滴、拼多多相继推出了美团友选、橙心优选和多多拼团，均将其作为下个阶段的业务重点。

本身社群团购这个模式本身是可以成立且存在用户体量庞大。但是，从松鼠拼拼到呆萝卜，都昭示着生鲜、社群并不是一个好啃的骨头。

从三个平台目前呈现出的产品来看，产品逻辑是一致的，依然是通过团长建立社群拉流量下单并获得提成的模式，前期抢地盘抢团长的价格战看来是在所难免了（某鹿已经为能够薅到羊毛平台羊毛开始暗自窃喜了），但是价格战始终是双刃剑，并不是长久之计。

这就需要深究，相同的模式，企业通过什么实现差异化竞争。这三家平台加入这场战役，凭的到底是什么核心竞争力，总不能真的是指望靠烧钱烧到行业第一吧。

回归社群团购这个模式本身面向的群体是偏价格敏感型，且因为社群本身快速传播的特质，对品质的要求更为严格了，真正是要求物美价廉。对供应链和履约的要求十分高，也难怪乎有人说“社群团购，始于团长，终于供应链”。

对于美团来说，O2O的基因是刻在骨子里的，本地现成的数以万计的线下商家都是潜在的团长，且这些团长是自带线下流量的；对于线下B端的管理和运营也是轻车熟路；此外线下商家支持以供应商模式入驻美团优选为平台供货，对于平台品类的丰富度提升有极大帮助；外卖配送的管理经验让他在物流上也占有相当优势。

滴滴原来的行业布局和社群团购看起来似乎是毫不相关的，但其对在线下司机的管理、运营上是有一定沉淀的，而对于团长的管理在这个点上是可以互通的，在团长履约上是具有一定保障的。而滴滴因为有货运的布局，其在物流上是具有一定优势的，社群团购虽然时效要求没有外卖高，但也都是要求次日达的。但在供给上的劣势也是十分明显的。

早期多多是从生鲜水果拼团开始做起，不排除他在这块供应链的运营和把控上是有积累的，且从早期的生鲜价格来看，其价格优势较为明显。同时因为拼多多原生用户群体中一大部分都是对“白牌”价低质优商品存在相当高接受度的用户，相信价格和品牌差异（限于标品，非生鲜果蔬类）依然会延续成为多多拼团的优势。

但拼多多目前一直只有线上电商业务，本次社群团购是其首次转战线下履约的尝试，其挑战难度也是不言而喻的。

所以基于以上的剖析，从我的角度来说，这三家中，我个人目前是更看好美团优选未来前景的，他底层在供应链上的优势差异是目前另外两家还无法达到的。不过这个领域盘子不小，各家发挥优势的话后续还真不好说。对于这场仗，我拭目以待。

总结

基于以上论述，即使是看似“同质”的产品和业务，但是通过对业务的理解，对用户的挖掘，对企业自身优势的把握而实现“不大相同”的逻辑，我认为这就是身为产品经理很重要的意义所在了。希望我们都可以做出各自领域与众不同的产品来。

文章来源：人人都是产品经理    作者：麋鹿产品   

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

亚马逊作为一个知名的电商平台，它的成功背后却有一个很难让人理解的设计逻辑：成功的设计不一定是美观的。为什么会这么说呢？本文将从四个维度展开分析，希望对你有帮助

编辑导语：B端产品往往由于业务体量庞大，导致信息复杂，同时对业务的性的要求很高；服务于B端的业务，不能够出信息错误，填错一个信息，就会引发巨大的问题。本文结合笔者自己的工作经验，总结了大型B端业务中表单的设计方法，供小伙伴参考。

一、表单的定义

表单是信息添加、录入的通用形式；其作为获取用户输入的重要交互方式，也承担着将问题和答案进行配对的角色。

二、表单的设计原则

设计原则是任何一种解决方案的指路灯，它们体现解决方案应包含的基本目标。

针对互联网表单设计，我倡导的原则如下：

1. 尽量减少痛苦；
2. 说明填写完成路径；
3. 考虑情境；
4. 确保一直沟通。

三、表单的结构

我们先看看表单的结构，表单主要由5部分组成：

1. 标题：这个元素帮助用户引导完成表单填写的整个过程，尤其在你对信息进行分组方便用户填写时，特别有用。
2. 标签：告诉用户相对应的输入字段的含义。
3. 输入域：包含了文本框、密码框、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
4. 提示信息：包含帮助信息、占位符和反馈信息提示。
5. 操作按钮：包括提交按钮、保存按钮、复位按钮和一般按钮；用于将表单数据传送到服务器上。

四、表单的表现形式

1. 标签

标签根据标签与输入域的位置关系，分为：左对齐、右对齐、顶部对齐、内联标签、图标标签和浮动标签。

每种标签样式都有自身的优点与局现性，根据不同的场景选择适合的标签样式，能提高用户阅读效率，同时还能降低信息填写时的错误率。

1）顶部对齐：根据Matteo Penzo 发布的关于标签放置的文章表明：采用顶部对齐的标签样式，浏览表单所需的时间最短；如果希望用户能快速扫描填写表单，顶部对齐的标签是一个不错的选择。

顶部对齐的结构，使得能放下更长的标签；但对于纵向空间是一个挑战，当填写信息过多时，表单就会很长。

• 优点：有最快的浏览和处理速度，同时标签长度弹性大。
• 缺点：非常占纵向空间。

2）左对齐：左对齐标签，文字开头按阅读视线对齐，符合人们的阅读习惯，是有利于阅读的。

浏览表单所需时间最长，但是缓慢完成率并不总是一件坏事——如果表单要求敏感数据(例如提供驾驶证、身份证、银行卡号等，可以故意减缓用户的填写速度，来确保填写的准确性）。

左对齐的结构需要更多的横向空间，因此在移动端的呈现上可以是个问题。

此外，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：文字开头按阅读视线对齐，方便阅读，节约纵向空间。
• 缺点：填写速度慢，标签长度和输入框弹性小。

3）右对齐：右对齐使得标签和输入之间的距离固定，有明确的视觉关联。

对于简短的表格，右对齐的标签可以有很快的完成时间；但由于标签长短不同，左边缘参差不齐，整体扫读表单的时候不容易了解全部信息。

与左对齐类似，在屏幕空间有限的情况下，也会一定程度上限制了标签和输入框的长度。

• 优点：时间较短，节约纵向空间。
• 缺点：整体可读性低，标签长度和输入框弹性小。

4）内联标签：内联标签由于它对空间的占比很小，往往运用于移动端的界面设计中；但如果在交互上处理不好，会有很大的缺陷。

内联标签是用作提示性文字，来告诉用户应该填写什么内容，但用户在填写的适合，它就会消失；因此用户无法仔细检查他们是否写下了所要求的内容，这增加了错误的可能性。

另外一个问题是：用户可能会把占位符文本误认为预填数据，因此忽略它（正如尼尔森诺曼集团的眼动追踪研究所证实的）。

• 优点：空间占比小。
• 缺点：在增加错误的可能性。

5）图标标签：图标标签是内联标签的一种演化形式，在一定程度上缓解用户的困惑和自我怀疑的心理。

但就图标而言，用户需要时间来反应它所代表的意思——若表意性不强或者并不是常见的图标样式，用户就要思考和猜测它的含义。

此外，输入项一多，还得记忆那个图标所对应的意思。

• 优点：空间占比小；在一定程度上缓解用户的困惑和自我怀疑。
• 缺点：可能造成用户的认知负担，增加用户记忆成本。

6）浮动标签：用户在输入时，内部标题（提示信息）进行浮动位移，即节省了空间，提示性信息依旧在。

但相比其他几种标签样式来说，需要一定的开发成本。

• 优点：空间占比小，无需用户对标签进行记忆
• 缺点：需要一定的开发成本

关于标签样式的选择

2. 输入域

输入域是表单的核心主体，包含了文本框、选择器、开关、复选框、单选框、步骤条、滑块、上传、标签页等控件（按类型分）。

选择适合的控件样式，能在一定程度上提高表单填写的效率。

在输入域中，存在多种控件样式，那么在设计产品的过程中，我们该如何选择，如何取舍呢？

以下是我在日常工作中的一些摸索，也包括借鉴前辈的一些经验。供大家参考。

1）文本框

文本框包含了单行文本框和多行文本框。

针对单行文本框的设计建议：

a. 选择适合的大小，它的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。

如下图即一典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理的话，容易误导用户对所需输入金额的判断，造成极大不安全感。

b. 采用字段掩码，自动匹配特定数字的输入格式。

例如：电话、身份证、银行卡等；按照7加减二法则，根据用户的记忆结构来最大化提升阅读体验。

c. 弹出键盘应与需要输入的文本类型相匹配（移动端）。

d. 涉及到金额输入时，当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。

e. 文字输入最好有自动补全、自动建议功能，减少不必要的文字输入，减少出错。

例如：填写地址栏通常是表单中最成问题的部分，像地址自动填充（基于用户的定位和输入提供准确的建议）的工具使用户能以更少打字量完成输入。

f. 有限制输入时，给予用户明确的提示，增加用户感知，减少出错率。

知识扩展：什么是7加减二法则？

早在19世纪中叶，爱尔兰哲学家汉米尔顿观察到，有一个神奇的7±2效应；意思就是人们的短时记忆的信息量是7个，可能会上下浮动2个。

针对多行文本框的设计建议：

使用可拉伸的文本框比固定框更好，从使用体验讲，可变化的文本框使页面整体效果更统一。

固定文的文本框当输入文本超过其设置的宽度，会出现内滚动条，当页面上出现两个滚动条时（大页面的滚动条），在使用操作上会带来一定的混乱。

2）选择框

包括下拉列表、选框、开关、日期选择器等。

对于选择框有如下几个建议：

a. 避免设置默认值：除非您认为大部分用户将选择该值，尤其是必填字段。

为什么？

因为你可能会增加错误，用户会快速扫描表单，所以他们可能会跳过一些已经有默认值的字段。

但是这个规则不适用于智能的默认值，也就是根据用户的信息设置的默认值；因为智能的默认值可以使表单更快，更准确地完成。

例如：根据定位数据预先选择用户所在的国家/地区。

不过，请谨慎使用。

b. 当选项很多时，提供检索功能。

c. 提示信息要明确，要让用户明确自己选择的是什么。

3）单选框与复选框

a. 按一定的逻辑进行选项排序，例如根据发生的可能性、难易程度、风险大小来排序。

b. 选项应该易于理解，容易区分。

c. 尽可能提供默认选项。

4）关于控件的选择

a. 选择框优于输入框。

任何高密度的操作，都会引起用户的不适；因此，在输入项的选择时，用选择来代替键盘输入。

• 一方面：简化用户的操作，点击次数远小于输入，减少用户的操作密度；
• 另一方面：减轻用户的认知、记忆负担。

相较于输入框，选择操作步骤少，相对来说效率较高；同时，用户用思考输入值，也不用承担输入错误要重新输入的风险。

用户可以通过选择项，清晰明确的知道有哪些值可以选择，对于一些无关紧要，或者用户较难理解的输入项，可以预制默认值，可以照顾到各阶段的用户。

b. 单选框与下拉选择框。

单选框较为适合选项较少（少于五个），同时选择项之间较为类似，需要强调或对比时，可以优先考虑单选框。

另外，当选项能见度和快速响应优先时，也建议优先考虑单选框。

因为相较于下拉选择，用户可以通过展示出来的选项，直接选中目标选项，提升输入效率。

下拉选择框较为适合选项较多（超过五个），有默认选项或者选择项之间有较大差异，同时下拉选择，最好不要引起随后输入项数量以及页面的变化；否则下拉选择的收起以及页面的变化，易引起用户不适。

若选项过多，超过二十个，最好引入模糊匹配以及一定排序规则（首字母排序、数字排序等），方面用户提前预知选项的大致位置，或通过模糊检索找到相应的选项。

5）关于必填项

大多数情况下，所有字段都是必填项，只有几个字段是可选的，一般用“*”标记必填字段。

但星号并不适合所有类型的用户，记得之前客户问星号是什么意思？

它是页面中的标签还是描述中的标签；同时，并且红色会从用户方面引起负面关联，因为红色表示错误。

为了避免这种误解，可采用文本框内暗提示。

它也是一个比较清晰标志必填项的方式，并且还很节省空间，也能在一定程度上起到视觉降噪的作用。

3. 提示信息

提示信息可以分为引导性提示（帮助文字、输入框提示、错误提示信息）和反馈性提示两种。

这里主要想讲讲错误提示的设计：

1）关于错误提示的最佳位置

Javier Bargas-Avila和Glenn Oberholzer对表单验证的研究发现——在表单顶部显示所有错误信息，会给用户的记忆造成较高的认知符合，会强制用户回忆每个错误输入框中的错误消息。

错误信息提示在输入框行间显示是减少记忆认知负荷的有效方法。

它可以帮助当场识别错误而不是靠回忆错误，缩短反应时间，提高表单填写效率。

因此，错误信息提示与错误的字段邻近放置可以获得最佳性能。

下面来看一个简单的例子，如下图：

当我们在录入客户信息时，假设填写错误手机号码，按照上面的论述，错误提示可以最直观的显示在这4个位置。

哪一个位置是最佳位置呢？

答案是：右边。理由如下：

a. 错误信息提示右边，符合人们从左到右的阅读习惯；用户视觉路径自然流畅，很大程度上减少了用户的精力和视觉工作。

放在左边则恰恰相反，同时左边与用户期望相违背，因为左侧放置更高优先级的元素，是我们的直觉。

但事实上用户需要专注于纠正他们的输入，因此输入框应该是更重要的元素。

b. 对于上边的错误信息提示，有着更高的认知负荷。

当标签顶部对齐时，错误提示和输入框中的提示这两个文本靠得很近会产生视觉噪音，用户注意力被分散，很难专注于其中一个，并且可能混淆它们。

c. 放置下边的错误信息提示，虽然不符合从左到右的阅读习惯，但它确与自然的从上倒下的阅读流程相对应。

手机屏幕缺少水平空间，把错误信息提示放置在下方是个不错的选择。

虽然它可能会增加用户阅读文本时的认知负荷（与类比上边的错误信息提示），但可以通过将它们隔开足够的间隔来防止这种情况。

综上所述，如果是web端请选择放置在右边，如果是移动端则放置在下边。

当然，如果开发时间有限，都选择放置下边也可以，方便适配。

2）帮助信息

有时候需要帮助性信息，来辅助用户完成表单填写。

当文本简短的时候，可以直接放在改输入框的附近。

当文案过长的时候，就需要做气泡框——获取鼠标焦点，则展开信息，失去焦点则消失（在气泡展开时，切忌勿挡住input输入框）。

也有些产品是将帮助信息放在页面顶部，如果是针对全局帮助性信息，则可以采用这种方式。

如果只是针对某个元素提醒，则应将两者放在一起，让用户知道当前处于什么地方，在针对什么进行引导、辅助。

五、复杂业务表单布局结构探索

在复杂业务表单设计中采用单列布局，大家有没有遇到过类似的问题，例如：

• 客户1：“单列右侧空白区域过大，留白多，表单太长啦。”
• 客户2：“单列纵向占比大，表单太长，我看不到全部内容。”
• 客户3：“怎么不采用多列，多列我能看的内容多啊”等等…

针对这些问题，我们团队从自身的业务出发，对复杂业务表单布局进行了相应的探索。

1. 多列与单列的探索

首先，我们根据下图的规则对复杂业务的表单布局进行多方案的实验：

方案一：采用4列布局，标签顶对齐。

那为什么标签不采用右对齐呢？

四列布局，页面已经很拥挤，加上标签长度长短不一且最大长度也无法确定（用户自定义），所以放置采用了标签顶对齐。

总体上来看，缩减的长图并不理想。

方案二：三列布局，标签右对齐的方式。

由于三列布局，页面空间较大，尝试着把标签右对齐，总体上达到了缩减表单长度的目的。

但字段若出现换行，则页面信息模块是混乱的。

根据CXL研究所的发现：单列表单比多列表单完成得更快一些。在这项研究中，参与测试的人完成单列表单的平均速度比多列表单快15.4秒；多列布局虽然缩减了表单长度，空间利用率也提高了，但整体的填写效率降低了，这与表单设计原则相违背。

同时从开发效率来看，单列成本较低（多列需要做响应式）；从业务承载上看，单列扩展性更强，适合复杂多样的业务场景（多列适合交单一的场景）。

综上，最后还是采用单列布局。

2. 单列布局在复杂业务中运用

面临的问题该如何解决？

我们团队重新审视了客户的这些反馈：空白区域过大、留白过大、表单太长、我看不全、不知道什么时候可以填完等等。

我们尝试把这些问题翻译成：我无法预知表单的填写内容，我想要是把空白的地方也利用上我是不是就看全了整个表单。

如果是这样，用户的本质述求就是想要掌控感。

对现有的单列布局做了以下几个处理：

• a. 采用卡片式布局，区分内容；
• b. 增加引导式的定位锚点；
• c. 在锚处加入微动效反馈，给予用户确定感。

感谢阅读！本文给表单设计提供了一个基本的指南，在具体项目中，你可能需要根据产品特性和用户需求进行调整。

文章来源：人人都是产品经理           作者：@Nick 

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

编辑导读：如今，谷歌可以说是科技领域最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。

6. 利用声音和触感唤起用户的情感

这里的声音特指“Hero sounds”，用于衬托一些喜庆的、重要的高光时刻，它们常被用来激起用户的情感，或烘托一种喜悦的气氛，从而塑造产品或品牌在用户心中的形象。以下场合适合使用 Hero sounds：庆祝用户进行了某项操作；欢迎用户使用新的应用程序或体验；确认用户成功使用某款产品。——《谷歌声音设计指南》

声音可以被用来传递成功、成就或获得回报等信息。谷歌指南中提到，Hero sounds出现的次数不应该频繁，否则无法突出其重要性。通过在同样的环节提供同样的声音，久而久之用户会将这种提示音与成就感挂钩，从而增加对产品的粘性。如每成功更新一次应用程序就会出现庆祝的声音，或者每次待办事项标记为完成后就会出现庆祝的提示音。

不管我们是否注意到这一点，我们所听到的产品的声音与自己的感觉都是相挂钩的。无论是手机发出的“叮咚”的消息提示音，还是MacBook的废纸篓在清空时发出的揉纸的声音，都在某种程度上影响着我们的情绪，也帮助我们更加了解用户界面上发生的一切。

触觉可以和声音配合使用，也可以单独使用。举个例子，在手机黑屏的时候，触觉是唯一一种可以对用户提供反馈的方式。和其他配合使用时，触觉应该强有力、传达愉悦的情绪。——《安卓触觉设计指南》

除了声音之外，触觉设计（如震动）也是一种刺激感觉的好方法，可以为用户提供更加完整的体验。用户可以通过触觉提示来尝试、学习使用某一款产品。在有了不同的触觉体验后，我们将会对产品的某些功能有更加深入的了解。

举个例子，如果某个用户通过APP进行付款，但在付款过程中出现了错误。这时候APP会进行一连串紧张、短促的震动，对用户进行错误反馈。当用户熟悉了这种震动模式之后，下一次再感受到这种震动，就会立刻知道付款出现了问题。

产品设计师很容易忽略声音和触觉这两个板块，而过度专注于画面。但这两个板块却也扮演着非常重要的效果，可以为用户体验锦上添花。

7. 通过动图表达独特的风格、塑造个性化品牌体验

图片来自Material

动图可以增加用户的好感，在互动中为用户增加个性化体验，也可以表现品牌独特的风格。——《谷歌手势设计指南》

动图是我自己设计的产品Confetti中一个非常重要的因素，这是一款运动追踪APP，是为那些追踪自己生活习惯的用户设计的。在设计这款产品时，我希望可以为用户创造出一种满足感，鼓励他们培养好习惯。在这款APP中，我大量使用切换功能，通过不同的手势，界面或进程可以平滑过渡，使用起来非常便捷。当一个好习惯完成时，还会出现彩屑动画飞舞的，加强用户的满意度。

简言之，动图可以应用于不同的场景，通过过渡和变化的吸引用户。

动图可以强化两种元素之间的联系，实现快速切换，迅速解决特定的任务。动图可以让用户专注于眼下最重要的事，不被其他因素所干扰。——《谷歌手势设计指南》

在2020年，你的产品可以在一秒之内激怒用户。正如塔拉斯·斯凯斯基（Taras Skytski）在《用户体验设计中动画使用的终极指南》中指出的那样：“众多研究发现，界面动画的最佳速度在200到500毫秒之间。这一数字是通过研究人类大脑运行机制所得出的。100毫秒及以下的动画因为速度太短而无法被识别，而超过1秒的动画则会造成一种延迟感，让用户感到不舒服。”

通过动图及产生的动画效果（如切换）可以改善用户体验，同时保证可以迅速找到需要的版面，而不被其他信息干扰。但如果动图及切换画面的过程增加了不必要的等待时间，又不能改善体验，那么这种环节就没有必要存在。

8. 通过图像进行交流，并区分和突出产品特性

图片来自Bribble｜制图Elena Petkovska

我们或多或少都有这样的体验：打开一个界面，里面充斥着太多文字和太少的图像。在用户体验设计中，展示画面比阅读文字效果更好。用户不希望通过阅读来理解一款产品，而是希望通过图像对一款产品进行直观的视觉理解。

你所选择的图像应该能够清晰地展示产品特点，不管是用户自己上传的图片，专业摄影师的图片，还是插画风格的图片，它们都应该能直观展示产品外观，反应产品的特点。——《谷歌图像设计指南》

APP里的插图和所有的视觉元素一样重要，好的图片可以让用户界面更加生动，使用户体验更加完善。恰当的图片还能展示品牌风格，成为无声的“故事讲述者”。

我们应当有目的地使用图像，作为总体内容的补充而非替代。照片或者插图最好能够传达足够的信息，如产品外形、风格，APP的用途，状态等。媒体界有这么一句话：一张图片抵得上1000个字。你可以在Unsplash、Pexels、Adobe Stock等网站上找到高质量的图片。

9. 关注产品的像素密度

图片来自Material

用户界面设计中应该关注产品的像素密度，让界面可以适应不同的屏幕。——《谷歌像素密度设计指南》

像素密度（PPI）是用来衡量每物理英寸的像素数。另一个常用的单位是DP（Density-independent pixels，有时候简称为DIP）。像素密度=屏幕宽度或高度（以像素为单位）/屏幕宽度或高度（以英寸为单位）。

在设计界面时，我们不应该只关注像素，还应该关注不同设备的像素密度。这样可以让我们在做设计时保证元素适当缩放，以适应不同屏幕的尺寸。

举个例子，我们现在有一个按钮素材资源，大小为200 x 50 px。在一个160ppi的屏幕上可以原画显示；在一个320ppi的屏幕上它就会扩大成400 x 100 px，相当于原始素材的两倍大。

通过以上例子我们可以了解，在像素密度不同的屏幕上，素材呈现的状态是不一样的。在实际应用中，素材可以会被放大三倍甚至四倍，如果素材不够清晰，就会在拉大后虚掉。这就需要我们在选择素材时格外谨慎，尝试在不同设备上打开并检查。

素材密度如何适应屏幕尺寸？举个例子，iPhone XS Max的屏幕是414 x 896 pt，注意这里的尺寸是物理尺寸pt，而非像素。如果以像素为单位计算，那么它的屏幕是1242 x 2688 px。所以当我们为iPhone XS Max设计应用产品时，我会首先考虑用414 x 896 pt的素材，然后在输出素材时将其乘以3。

10. 考虑设计在线/离线状态

图片来自Material

离线状态可以让用户知道这款应用程序没有连接网络。如果你的产品有一些功能需要联网使用，你最好能向用户明确显示连线状态。——《谷歌离线设计指南》

离线访问功能是设计师经常忽略、对用户体验影响却非常重要的一环。虽然有些功能离线也可以使用，但是在能联网的时候，最好还是主动提示用户，推荐他们连接网络。

如果有可能的话，要提前告知用户下载相关信息，以便脱机访问。最常见的例子就是Spotify等音乐应用程序，它允许用户下载歌曲，以便在没有网络的时候也能继续听歌。

假如你的产品不像Spotify或者Netflix那样需要下载具体内容，你可以发挥创意来设计在线、离线两种模式。

谷歌浏览器在离线页面提供恐龙游戏就是一个著名的例子（在谷歌浏览器连网的过程中，离线画面会出现一只霸王龙，按空格键或者向上的箭头就能控制霸王龙——译者注）。这个小游戏填补了用户等待连线的时间，将消极体验转变成了积极体验。

11. 总结

我希望这份设计指南可以为你提供一些想法。除了谷歌的设计指南之外，我们还可以在IEM Carbon、Zendesk Garden、Workday Canvas等网站找到关于用户界面和用户体验的设计指导，在这一领域进行更深入地探索。

文章来源：人人都是产品经理           作者：Danny Sapio           译者：Michiko

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

编辑导读：如今，谷歌可以说是科技领域规模最大、最具有影响力的公司之一。正因为如此，它们的数字产品设计会对整个行业产生巨大的影响，成为人们竞相模仿的榜样。在该公司的UI&UX（用户界面&用户体验）设计指南中，设计师们提到了10条原则，不管是iOS还是安卓系统都同样适用。在这篇文章中，作者从这10条指南出发，加上自己的经验和相关案例，在设计方面为大家提供一些建议，希望对大家设计产品有帮助。

1. 通过图标和动画传达意思

图片来自Material

在没有其他方法的情况下，图标可以成为理想的指示工具。——《谷歌材料设计指南》

在《Design of Everyday Things》一书中，有“以人为本的设计之父”之称的唐·诺曼（Don Norman）阐述了他对图标的理解：图标就是代表动作、同时可以指示该动作以何种方式完成的元素。在数字产品中，我们很少会出现“左滑-删除”这样的文字指示，而是通过左滑的动作引出一个红色的小垃圾桶来阐明“左滑就会删除”这样的设定。

在用户和产品交互之前，插入动画效果。——《谷歌材料设计指南》

如果我们希望一款数字产品有着极简主义外观，那么我们可以借助动画来达到这一点。在上图的例子中，最开始画面中甚至不会出现垃圾桶的图标。在我们手指滑动后，也就是人机交互的动作产生之后，才会出现这一垃圾桶，同时也会强化“滑动表示删除”这样的信息。动画效果有效简化洁面、改善用户体验的功能。

2. 有动画效果的图标

图片来自Medium｜制图Eddy Gann

动画可以展示图标所代表的执行动作，从而增加流畅感和愉悦感。在两个视觉效果之间插入带有动画效果的图标，可以反映这两个视觉效果之间的关联。——《谷歌材料设计指南》

在两个动作之间增加一个过渡的动画，这个效果我们应该很熟悉。最简单的例子就是“播放/暂停”按钮。在点播放后，该图标变成了暂停按钮；点下暂停按钮，该图标又变成了播放按钮。这个变化的图标展示了播放和暂停两个动作之间的关系。

这只是一个简单的案例。现在想象一段更加复杂的经验：比如将某个产品添加到购物车中，购物车图标会出现装进货物的动画效果；或者想象某一功能无法使用时图标的弹出效果。

带动画效果的图标本身并不复杂，我们可以在Adobe XD中完成：通过给图标添加预设效果，或者加入淡入、淡出的效果即可。

动画效果可以根据需要设计出简单或复杂的运动轨迹。图标虽然小，却是影响用户体验非常重要的一环，我们可以通过设计复杂的运动轨迹来强调它的重要性。——《谷歌材料设计指南》

请记住，如果界面上所有的元素和图标都在动，那么用户可能会不知所措。过度使用这一方法反而会削弱你想强调的重点。给图标添加动画应该适可而止。

3. 调色板的生成和使用

调色板生成工具｜图片来自Medium

调色板生成工具（Material’s Palette Generator）可以调出任何你需要的颜色，色相，亮度，色度等都可以通过一系列算法调节出来，通过算法调出的色彩实用又美观。——《谷歌材料设计指南》

如果我们无法使用谷歌的调色板生成工具，手动调色就会变成一件非常麻烦的事。调色板生成工具最大的好处就在于它自动给你调出了同一种颜色的不同形态（如蓝色从暗到明、从深到浅的形态），你就不需要再对照标准调色板一点点矫正了。不过即使没有这样的自动生成工具，你也应该仔细检查并矫正自己的调色工具。

4. 颜色

• 在考虑如何使用颜色或颜色相关的问题时，指南中还提供了给界面选色相关的技巧和工具。——《谷歌材料设计指南》
• 选择令人难以忘记的色彩，以增强产品的品牌风格。——《谷歌色彩设计指南》

颜色对于数字产品的重要性，就像是盐和胡椒粉对吐司的重要性一样——添加太多了，就盖过了吐司自身的风味；太少了，味道就会变得寡淡。在选择配色以求增加品牌视觉效果时，一定要仔细考虑清楚给哪里添加什么颜色。

通过有节制地在APP里添加颜色，你还可以突出相应的内容，如文本、图片、按钮等。你可能已经注意到了，Instagram和Twitter上面布满了色彩鲜艳的图片和图标，与之相对应，它的用户界面非常简洁，不会喧宾夺主。

色彩也可以是一种交互元素，要考虑它们在什么地方交互，希望达到什么效果。最重要的元素要用最突出的色彩。——《谷歌色彩设计指南》

当一个元素的色彩与周围环境形成对比时，用户会更理解它的重要性。我们可以给重要的元素增加“色彩权重”，这个概念是说增加色彩的饱和度，使用更加大胆、更吸引人的色彩，制造视觉冲击。

另外，我们可以将重要的信息加粗显示，让它在第一时间进入用户的眼睛。简单来说，如果一种信息比另一种信息更重要，那么前者就要在色彩和篇幅上胜过后者，好让用户直观地进行区分。

5. 文字类型生成工具

文字类型生成工具｜图片来自Medium

Google Fonts是谷歌研发的一款文字类型生成工具，可以使用它来调节字体、大小等。您可以根据需要调整和优化产品的文字设计。——《谷歌材料设计指南》

字体设计是一门艺术，它不仅关乎选择某一种具体的字体，更设计如何使用、粗细调节、比例调节等，目的是增加界面的可读性，从而增强产品的实用性。谷歌研发的这款文字类型生成工具为设计师提供了多样的选择和排版支持。通过这一款文字类型生成工具，可以节省时间，迅速生成段落、标题、正文、按钮等。

文章来源：人人都是产品经理           作者：Danny Sapio.    译者：Michiko

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

如今，很难用界面动画给人留下深刻的印象甚至惊喜。它显示了屏幕之间的交互，解释了如何使用该应用程序，或者只是引起用户的注意力。在浏览有关动画的文章时，我发现几乎所有的文章都只是描述了关于动画的特定的用例或一般事实，并没有遇到任何关于界面动画通用规则的文章。在本文中我收集了界面动画的主要原则和规则，以便给想要设计动画界面的设计人员提供一些帮助。

01 动画的持续时间和速度

当元素改变它们的状态或位置时，动画的持续时间应足够慢，以使用户可以注意到变化，但同时也要足够快，以免引起等待。

在动画中使用适当的持续时间，不要太快，更不要让用户过长等待

大量研究发现，界面动画的最佳速度在200-500毫秒之间。这些数据是基于人类大脑的特殊性得出的。任何小于100毫秒的动画都是瞬时的，根本不会被识别。而超过1秒的动画时长会传达延迟感，因此对用户来说很无聊。

最好在界面中保留动画的持续时间

在移动设备上，《材料设计指南》还建议将动画的持续时间限制在200-300毫秒之间。至于Web端，持续时间应延长30％，大约为400-450毫秒。原因在于：屏幕尺寸越大，物体在改变位置时可以克服的路径更长。因此，在可穿戴设备上，持续时间应缩短30％，大约为150-200ms，因为在较小的屏幕上，移动距离更短。

移动设备的大小会影响动画的持续时间

Web动画的处理方式有所不同，由于我们已经习惯了在浏览器中即时打开网页，所以我们希望也能在不同状态之间快速转换。因此，Web转换的持续时间应比移动设备短约2倍，150-200毫秒之间。在其他情况下，用户将不可避免地认为计算机死机或网络连接出现问题。

但是，如果你要在网站上创建装饰性动画或试图吸引用户对某些元素的关注，则无需考虑这些规则。在这些情况下，动画可以更长一些。

大屏幕电脑=慢动画？决不是！

需要记住的是，无论平台如何，动画的持续时间不仅取决于移动距离，还取决于对象的大小。更小的元素或带有小变化的的动画应该移动得更快。因此，大而复杂元素的动画在持续时间稍长的时候看起来更好。

在相同大小的移动物体中，停下来的是经过最短距离的物体。与大物体相比，小物体移动得更慢，因为它们的偏移量更大。

动画的持续时间取决于对象的大小和移动距离

当物体碰撞时，根据物理定律，碰撞的能量必须均匀分布在物体之间。因此，最好排除反弹效应，只在特殊情况下使用它才有意义。

避免使用弹跳效果，因为它会分散注意力

物体的运动应该是清晰和锐利的，所以不要使用运动模糊。即使在现代移动设备上也很难再现这种效果，并且根本不用于界面动画中。

不要在动画中使用模糊效果

列表项(新闻卡片、电子邮件列表等)在其出现之间应该有一个很短的延迟时间，每次出现的新元素应该持续20-25毫秒。元素出现较慢的话可能会惹恼用户。

列表项的动画应持续在20–25毫秒

02 缓和

缓和有助于使物体的运动更加自然，这是动画的基本原则之一。这一点在《迪士尼动画原则》(The Illusion of Life: Disney Animation)一书中得到了充分的描述，这本书是由两位重要的迪士尼动画师——奥利·约翰斯顿和弗兰克·托马斯所写。

为了使动画看起来不显得机械和人造，物体应以一定的加速或减速的方式移动，就像物理世界中的所有活动对象一样。

与线性动画相比，具有缓动效果的动画看起来更自然（这里提示下：注意看每段竖格的间距）

2/1 直线运动

不受任何物理力影响的物体直线运动，换句话说就是匀速运动。正因为如此，它们看起来非常不自然，对人眼来说是人为的。

所有动画应用程序都使用动画曲线，我将尝试解释如何阅读它们以及它们的含义。曲线显示了物体的位置( y axis=position )在相同的时间间隔内物体的位置如何变化(x axis=time)。在当前情况下，运动是线性的，因此物体在同一时间行进相同的距离。 

直线运动曲线

例如，直线运动只能在物体改变颜色或透明度时使用。一般来说，我们可以用它来表示物体不改变其位置的状态。

2/2 缓入或加速曲线

我们可以在曲线上看到，在开始时物体的位置变化缓慢，而速度则逐渐增加，这意味着物体正在以一定的加速度移动。

加速度曲线

当物体以全速飞出屏幕消失时，应使用此曲线，比如说系统通知或者是界面卡片。但请记住，只有当对象永远离开屏幕且我们无法调用或返回它们时，才应使用这种类型的曲线。

将卡片滑出屏幕的加速曲线

动画曲线有助于表达正确的情绪。在下面的示例中，我们可以看到所有物体的移动持续时间和距离是相同的，但是即使曲线上的微小变化也可以影响动画的气氛。当然，通过改变曲线，你可以使物体尽可能地接近于真实世界。

持续时间和距离相同，但却是不同的氛围

2/3 缓动或减速曲线

它与缓入曲线相反，因此物体会快速覆盖很长一段距离，然后缓慢的降低速度，直到最终停止。

减速曲线

当元素出现在屏幕上时应使用这种类型的曲线——它以全速向上飞入屏幕中，然后逐渐减速直到完全停止，这也可以应用于从屏幕外部出现的其他卡片或对象。

减速曲线，使动画更好地呈现

2/4 缓入缓出或标准曲线

该曲线使物体在开始时获得速度，然后慢慢地将速度降回零。这种类型的移动是界面动画中最常用的。当你犹豫在动画中使用哪种类型的运动时，可以使用标准曲线。

标准曲线

根据《材料设计指南》，最好使用非对称曲线，使移动看起来更加自然和真实。曲线的末端必须比它的开始更加突出，以使加速的持续时间短于减速的持续时间。在这种情况下，用户将更加关注元素的最终移动，从而关注元素的新状态。

查看对称和非对称标准曲线之间的区别

当对象从屏幕的一部分移至另一部分时，使用缓入缓出功能。在这种情况下，动画避免了引人注目的戏剧效果。

卡片在屏幕上的移动以及相应的不对称曲线

当元素从屏幕上消失时，应该使用相同的移动类型，但用户可以在任何时候将其返回到先前的位置。它涉及抽屉式导航等。

抽屉式导航从屏幕上隐藏了标准曲线

从这些例子中可以看出，许多初学者忽略了一个基本的规律——开始动画并不等于结束动画。与抽屉式导航一样，它以减速度曲线出现，而以标准曲线消失。另外，根据谷歌的材料设计语言，物体出现的时间应该更长，以吸引更多的关注。

侧面菜单的出现和消失，分别通过减速度和标准曲线实现

使用函数cubic-bezier()来描述曲线。之所以称为立方，是因为它基于四个点。在图上已经定义了具有坐标的第一个点0;0（左下）和具有坐标的最后一个点1;1（右上）。 

基于此，我们仅需描述图形上的两个点，这些点由函数的四个参数给出cubic-bezier()：前两个是坐标x和y第一个点，后两个是坐标x和y第二个点。 

为了简化曲线的工作，建议使用easings.net和cubic-bezier.com网站。第一个包含最常用曲线的列表，你可以将其参数复制到原型工具中。第二个来源使你可以使用曲线的不同参数，并立即查看到物体将是如何移动的。

函数三次贝塞尔曲线的不同类型的曲线及其参数

03 界面动画中的编排

就像在芭蕾舞蹈设计中一样，主要思想是在从一种状态转换为另一种状态的过程中，引导用户注意一个流动的方向上。舞蹈编排有两种类型——平等交互和从属交互。

3/1 平等交互

平等交互意味着所有对象的外观都遵循一个特定的规则。在这种情况下，所有卡片的外观都被视为一种流程，可以引导用户的注意力集中在一个方向上，即从上到下。如果我们不按照顺序，那么用户的注意力将会分散。所有元素同时出现看起来也会很糟糕。

用户的注意力应引导在一个流动的方向上

对于表格视图，它有点复杂。在这里，用户的焦点应指向对角线，所以逐个地显示元素是一个很糟糕的主意。单个展示元素会使动画过长，并且用户的注意力会呈锯齿状，这是错误的。

卡片形式的对角线外观

3/2 从属交互

从属交互意味着我们要有一个吸引用户注意力的中心对象，而所有其他元素都从属于它。这种类型的动画给人一种有序的感觉，从而引起用户对主要内容的更多关注。

在其他情况下，用户将很难知道该关注哪个对象，因此他的注意力将被分散。所以，如果有多个要设置动画的元素，则需要明确它们的运动顺序，并尽可能将动画设置为最小的对象。

只有一个中心对象的动画很有必要，其余元素应是被引导的。否则，用户将不知道关注什么对象

根据材料设计语言，当移动的物体尺寸发生不均衡变化时，它们应沿着弧线而不是直线移动。这有助于使动作更自然。“不成比例”是指物体的高度和宽度的增加/减少是不对称的，即以不同的速度进行(例如，一个正方形的卡片变成了一个长方形)。

当移动的物体不按原有比例变化时，应沿着弧线运动

当物体按比例改变其大小时，使用沿直线的移动。由于这种移动的实现比较容易，因此通常会忽略不成比例的圆弧移动的规则。看看实际应用的例子，你会看到线性运动的主导地位。

尺寸的比例变化是沿着直线上运动的

曲线上的运动可以通过两种方式实现：第一种称为垂直向外——物体开始水平移动并以垂直移动结束；第二种是水平向外——物体开始垂直移动并以水平运动结束。

物体沿曲线的移动路径必须与滚动界面的主轴线重合。例如，在下一张图片上，我们可以上下滚动界面，相应的卡片以“垂直输出”的方式展开-首先从右到下，然后向下。反向移动以相反的方式进行-即卡片首先垂直上升，最后水平移动。

卡片的展开/折叠方向应与界面的轴线一致

如果移动物体的路径彼此相交，则它们将无法彼此移动。这些物体应通过减慢或加快自身的速度，为另一个物体的移动留下足够的空间。另一种选择-他们只是推开其他物体。为什么？因为我们假设界面中的所有物体都位于一个平面中。

在移动过程中，物体之间不应相互穿过，而应为另一个物体的移动留下空间

另一种情况，移动物体可以高于其他物体。但也不能通过其他物体消失或移动。为什么？因为我们相信界面元素的行为符合物理定律，现实世界中没有任何固体物体能够做到这一点。

物体可以超越其他物体，然后移动

结论

从以上总结的规则和原则能明白，UX界面动画是反映物理世界中存在的运动，如摩擦、加速等，模仿现实世界存在的行为。我们可以创建一个序列，让用户能够理解期望从界面得到什么。如果动画是正确构建的，那么它不会太引人注目，并且不会分散用户的目标，动画不应该影响用户使用或完成任务。

但是不要忘记动画更多的是一种艺术而不是科学，所以最好的方法是在用户身上试验和测试你的决定。

文章来源：站酷    作者：UX辞典

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