用户画像作为一种设计工具，可以很好得帮助设计师跳出“为自己设计”的惯性思维，聚焦目标用户，发现核心价值，赋能产品。

设计分析是作为交互设计师必备的一项基础能力，一套有效的分析思路可以帮助我们找准设计发力点，更效率的推导出合理的设计方案，它是一种思维能力，也是一种方法工具，但是在我们的实际项目中，常常会遇到这样几种场景：

• 新手设计师或者第一次做活动的设计师，设计分析不知道要如何入手

• 花了很多时间做分析，但感觉对实际画稿子并没有什么帮助

• 分析过程中发散了很多很好的点，但最后大多都落不了地

这些情况常常会导致设计分析流于形式，套用了很多方法、花了很多时间、输出了很长的文档，内容看上去似乎很丰富，但落地的方案却平平无奇，甚至也会自我怀疑设计分析真的有用吗？

总结下来，会出现这些场景的原因有两点：首先是设计分析太泛，没有聚焦到核心问题；其次是时间分配不合理，没有抓到发力重点。那么结合我们目前的项目来看，怎样做一个更有用的设计分析呢？

活动中常见的项目类型

根据活动产品化设计思路，可以把我们的日常项目分为两类：迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目，例如大促主会场、我的专属会场、榜单会场、攻略等等，通常是一些已经比较固化的经典业务，或基础的功能类业务；探索型项目则是一些全新的业务方向，例如下沉会场、直播会场等等，刚处于进入期或成长初期。

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理，没有抓到发力重点，尤其是对于很多新手设计师来说，往往大部分的精力花在重复之前已经做过的内容，比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等，但是对于已经比较稳定的迭代型项目来说，这部分背景内容相对来说已经比较固化（除非有明显的变化），这就可能会导致重复分析出来的结论跟之前的差别并不大，也很难带来实际业务提升。

既然迭代型项目过往已有过经验和策略的沉淀，也经历过多轮的数据迭代，核心思路应该是先定义要解决什么问题、然后才是如何解决，这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题，没有问题的项目也可以不用再花时间做分析，效率做即可，例如像全部会场，本身的业务模式就比较简单，过往的效果也相对比较稳定，如果不考虑进行突破性的创新，通常是可以效率复用的，这种时候则不需要再去做分析，毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢？有三个常用的思路：看数据、看用户反馈、看运营策略。

第一，从数据分析中找到关键问题，例如根据618的项目数据复盘，我们发现预售会场、品牌会场的页面跳失率较高，那么双11核心可以围绕“如何降低跌失率？”“如何提升流量利益效率？”去进行分析，从而推导出更有针对性的设计策略。

第二，根据用户反馈来找到关建问题，例如过往的主会场，用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容，那么可以围绕“如何更好的进行需求匹配？”“如何提升屏效？”来思考和分析，解决实际存在的问题，才更有可能提升体验和数据。

第三，结合运营策略，很多业务虽然已经相对稳定，但随着每次大促战略的变化，运营策略上也会有一些新的需求，那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场，在原会场定位不变的情况下，在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求，那么服务内容如何匹配“专属”会场的用户心智，则是这个会场可以重点解决的问题。

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后，就可以按照常用的设计方法进行方案的推导，在发散解决方案的过程中，如何判断方案的合理有效，确保最后的可落地性，是让我们设计分析有价值的关键，因此总结了两个常用的技巧。

首先要理解业务逻辑，减少无用的策略发散，很多时候我们的方案很难推动落地的原因，是没有考虑到业务的诉求，越能够深入的了解业务，才能更好的解决业务侧的顾虑，保证方案的可落地性。

其次是要跳出来从整体来看优先级，我们在进入自己的思维逻辑中时，会比较容易陷入细节，有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视，并不是因为我们的方案不够好，而是没有关注到整体优先级，因此要学会看全局，通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据，相当于需要从零开始去探索如何做，对于设计分析的能力要求会更高，那么常常容易陷入两种极端相反的误区，要不就是容易被方法论套路，设计分析过泛但得不出实际有价值的结论，要不就是完全没有头绪，属于想一步做一步的类型，分析的内容之间缺乏逻辑。

因此，探索型项目的核心思路是要先有分析框架、再做纵向深挖，就像画交互稿的过程一样，需要先定义交互框架，纵再进行交互细节的打磨，才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步，一是先想清楚要分析哪些内容，包括哪些环节是必要的，哪些是重点的，时间要怎么分配。例如当我们第一次做宠物品类活动时，需要对这个品类有深入的理解，因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容，而如果我们做的是一次大促的综合会场，其主要用户群体如果跟常规站内主流群体并无差异时，则不需要再花费大量的时间单独去分析用户画像，因此，需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

第二步是梳理清楚内容之间的逻辑关系，常见的逻辑结构有两种，一是递进式的推导（A→B→C），分析维度之间是先后关联的，通过严谨的逻辑步步推导而来，例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案；另一种逻辑结构是进行综合归纳（A+B→C），即通过几个不同的维度综合推导，例如经典的五导家分析方法，结合用户目标以及业务目标综合推导出设计目标。

在很多设计分析中，我们也会参考一些方法论，其实方法论提供的就是分析框架，在理解了这一步之后，相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

纵向深挖如何得到有价值的策略

有了分析框架后，接下来就可以进入每个模块的具体分析了，如果要得到有价值的策略，同样有两个小技巧。

首先，策略要足够具体、有差异化，尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营，这个大的方向没有错，但如果只到这一步是很难指导具体内容落地的，所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们，才能够更准确的判断是否会存什么问题。

其次，策略最好能够关联验证指标，可以参考UGD数据增长思路，在推导策略时要能预判它能带来哪些数据指标的提升，以保证设计分析的结论是有理有据的。

文章来源：站酷   作者：大葱设计

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

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

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

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

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

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

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

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

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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务