比如以登录为例，当你把密码输错后，网站清空你刚刚才填好的表单，是不是非常让你崩溃？删除所有数据对用户来说很烦人，这会让你必须重新输入用户名和密码，即便只是拼错了密码而已。

因此，任何专业的用户体验设计师不仅应该考虑顺利的流程情况，还应该考虑失败时应该怎么办。

一、错误提示

错误提示应该让用户容易找到原因并方便理解。否则，他们可能没办法解决这些错误。所以对于设计师来说，一个非常重要的目标是要设计出一个易于解决错误的流程。一个错误信息应该能清晰的解释到底发生了什么，如果可能的话，最好也提供解决方案。

左边的错误信息很清晰的解释了发生的问题，右边的错误信息对用户来说非常困惑。

1.1什么时候告知用户发生了错误比较好？

当用户出错后，首先要考虑的事情就是应该在用户填表时提醒还是最后通知用户。错误预警中有三种常见模式：

• 内联/实时：在输入时或移开焦点后立即提供反馈。
• 提交后/客户端：当用户点击提交按钮之后
• 服务器端：当请求发送到服务器后再返回反馈给用户

这些方法中的每一种都有其优点和缺点。

1.2内联验证

一般来说，当表单非常短小时用内联验证，因为它允许在内存中的数据仍然最新时更正错误。

你可以用内联验证立即告诉用户哪里错了。

”尽可能的进行内联验证“”这种类型的错误消息很容易被察觉“，此外，输入完成后立即告知错误，对用户的交互成本最低——UX专家Rachel Krause

另一位专家Luke Wroblewski建议，当问题的答案不明显时，可以使用内联验证。例如，在选择用户名时，用户可能不知道哪些用户名可用。在这种情况下，在用户输入数据时立即告知错误可能会有所帮助。

1.3提交后验证

另一方面，当表单很大且需要保持关注时，你希望帮助用户保持专注，而不是通过不断显示错误来打断他们。

“使用内联验证，用户必须在两种截然不同的思维模式之间反复切换:填写表单和纠正错误。这减慢了用户的速度，增加了认知努力，通常会降低用户的满意度。”Jessica Enders在她的书《设计UX:表单》中写道

1.4服务器端验证

服务器端验证是最不友好的方式，但却为网站提供了很高的稳定性。当需要二次检查用户的数据时，这种方法最有效。

1.5如何提示用户错误？

错误提示告诉用户他们做错了，但是他们究竟做错了什么，要如何修复它？很显然，清楚地说明错误，而不仅仅是显示Error:90803，对用户有很大帮助。

使用用户能理解的话，而不是用专业术语

1.6使用积极语言而不是消极语言

错误提示措辞要使用积极语言而不是消极语言。例如，如果用户遗漏了一个字段，与其说”该字段不应该是空的“，不如说”请填写此字段“。当使用积极语言时，用户不会因为一个错误而受到责备，这能减少用户的焦虑感，减少流失。

1.7必要时提供帮助

在某些情况下，用户无法自己修复错误，他需要额外的帮助。例如，当用户无法登录时，大多数应用只提供找回密码，而没有找回用户名。但事实上，用户名和密码都可能会忘记。因此，在这种情况下，尝试提供所有必要的操作和信息资源来帮助用户解决问题。

二、标签

标签是表单可用性最关键的组成部分。如果标签不清晰，那么其他元素就算把可用性做得再好也没意义。所以，不要让用户来猜测这里面到底要填什么内容。

不要用一些模棱两可的词，比如”数字“可能会让人感到困惑，一定要明确意思。

2.1将标签放在输入字段的顶部

许多研究表明，将标签放置在输入字段的顶部可以帮助用户更快地填写表单，因为它允许用户遵循一条垂直线而不是Z模式。但是，如果它占用太多的垂直空间，您也可以使用浮动标签。因此，如果你希望用户更快地填充表单，请将他们放置在字段的顶部。

将标签放置在字段的顶部和使用浮动标签，这两种方式都很有效

2.2将标签放在输入字段的左侧

另一方面，当你询问用户比较复杂的问题，用户需要更多时间思考问题答案的时候，研究表明将标签放在输入框的左侧会比较好。

当用户需要思考答案时，将标签放在输入框的左侧会更好

2.3标签应该是可见的，无论什么输入状态

无论你用什么方式，确保当用户填完内容后，标签是可见的。因为，当用户需要再次确认表单内容的时候，他们不用删除填好的数据来查看系统需要他们填什么。

不管输入状态如何，标签都应该是可见的

2.4减少不必要的输入项

要填的表单越多，用户就不愿意填完它。所以尽可能地为用户减少不必要的输入项。如果实在做不到，可以将必填和非必填的字段区分开，减少用户的负担。

2.5可见性

不管状态如何，字段都应该是清晰可辨的。此外，活动字段和非活动字段之间的区别应该要明显。

输入字段应该有高对比度，在所有状态下都是可见的。

2.6自动激活PC端表单的第一个字段

自动激活表单的第一个字段，这可以提高处理效率，避免用户额外点击。

2.7帮用户预先填好

在某些情况下，你可以帮用户预先填好字段。例如，可以很容易地检测到邮政编码，或者某些数值可能是频繁的。在这些情况下，为用户填充字段。

2.8格式

含有大量小数的数字很难读懂。因此，当要求较大的数字时，需要考虑添加格式以支持可读性。例如，在询问卡号时，使用自动格式化:读取5678-9876-9738-8394比读取5678987697388394容易得多。

此外，当请求需要特定格式化数据时，要包含一个实例，让用户准确理解要填什么。

帮助用户了解如何格式化数据

2.9表单区域大小

输入框的大小应该要与所填的内容长度相匹配。比如，当要用户填写用户名时，如果显示的填写区域是一个长段输入框会让用户感到困惑。另一方面，如果你希望用户写一些反馈，但只能看到所写内容的最后一小段，那就很难用了。（彩云注：我就经常在一些体验不好的产品上碰到过这种情况，简直太难受了。）

如果你不能准确预测信息的长短，比如留言反馈，建议表单区域最好是能在用户填写内容触碰边界时，自动变高。

输入字段的大小应该与它预期的数据大小相对应

2.10为桌面系统设计灵活的表单

在键盘和鼠标之间切换很烦人。在理想的情况下，用户应该只使用一种媒介来填写表单，但有时，这是不可能实现的。因此，如果用户需要多种媒介来填写表单，至少要尽量减少切换。为此，将需要同一种工具的输入组合在一起。

另外，当创建一个网页表单时，要确保用户可以只使用键盘来浏览表单——使用TAB和方向键。

2.11为移动端系统设计灵活的表单

当在移动设备上时，将你显示的键盘与用户必须输入的数据相匹配。我们经常看到需要数字键盘的输入可以很好地实现这一点，但几乎很少有APP显示支持输入电子邮件地址的键盘。

支持通过显示正确的键盘输入电子邮件

三、下拉菜单vs单选按钮

下拉框的使用比单选按钮更有挑战性，因为它需要额外的点击来打开它们。此外，用户无法提前看到选项，这可能会让他们感到困惑。因此，如果你只有少量的选项，使用单选按钮。如果选项的数量超过4个，下拉菜单的效果会更好。

3.1复选框

通过勾选复选框，用户应该是同意某些内容。我的意思是，他们应该说，“是的，我想要这个”，而不是，“是的，我不想要这个”。不幸的是，我经常看到有误导性的复选框试图在创建账户时欺骗人们订阅他们的产品。当你不想订阅他们的通讯时，你又必须勾选复选框，像这样的伎俩对信誉是不合适的，所以不要动心使用它们。

通过勾选复选框，用户应该同意某些内容，而不是确认他们不同意。

四、结构

一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。

4.1从简单的问题开始

从简单的问题开始，从用户已经很清楚知道答案的问题开始，像名字、邮件这类。然后再循序渐进问稍微复杂的问题，像账户信息之类的。

首先，一个很自然的顺序，当你第一次见某些人的时候，你会找一些比较好切入的问题，比如叫什么名字啊之类的。其次，当用户已经填了一些字段之后，那么之后会增加他填完表单的机会。

4.2创建逻辑信息块

将不相关的信息按逻辑分组。例如，你可以将结帐表单分为“个人信息”和“帐户信息”组，将信息分组可以帮助用户一次只考虑一个主题。

通过对相关信息进行分组，使表单可被快速扫描

4.3单步VS多步表单

当你有很多问题要问的时候，你可能想知道哪一个最有效：单步流程还是多步流程。一般来说，单步表单的转化率更高，因为它看起来更小，而且不会劝退用户。如果你询问基本信息并希望用户快速填写表单，单步表单就非常不错。

当用户被要求必须填写更多复杂信息时，多步表单会更好。为了帮助用户在进行多步骤填写时不至于失去耐心，可以给到进度条，提示还剩多少步。

4.4单列vs多列布局

一般来说，用单列布局会更好，因为可以帮助用户更好地扫描，也可以尽量减少用户遗漏填写。

但当用户多次填写同一个表单时，他们更喜欢多列表单，因为这样不会浪费时间滚动。一般来说，在B端应用中这种多列表单会比较合适。

五、按钮

设计可用的按钮对提高转化率至关重要。如果按钮上的文字内容比较模糊，会容易劝退新手用户。

根据用户按下按钮会发生什么来命名按钮

5.1提高用户的容错率

对于更复杂的表单来说，按钮最重要的一点是，应该有提交和取消表单的单一方法。用户应该至少有补救的机会。举个例子，如果用户点了在线帮助时，他已经填好的数据不应该被丢失。或者，如果用户由于意外点击了按钮，请求不应该被提交。

5.2主要按钮和次要按钮应该很容易区分

为了避免点击错误的按钮，用户应该能比较容易地区分主要和次要按钮。另外，最好不要只依赖颜色，样式上最好有比较大的差异。

让主要和次要的按钮样式上有比较大的区分度

5.3正确的标签按钮

按功能明确地标注按钮。例如，如果按一个按钮可以创建一个账户，在按钮上的文案叫”创建账户”要好过“提交”

总结

当用户打开表单时，他首先肯定是想要填完它的。尝试帮助他们而不是用糟糕的设计给他们设置障碍。

不幸的是，这里面提到的许多错误，并不需要多么高级的技巧，而是因为设计没有同理心。仔细思考你的设计流程，检查是否能让所有内容对不同背景和专业知识的人都是清晰的。

通常来说，一般要达到以下目的，大多数指导原则都来自这些规则：

• 用户应该只输入一次数据
• 用户应该填尽可能少的信息
• 用户应该只需要记住少量的信息
• 用户检查和恢复错误内容应该要很容易

原文地址：彩云译设计（公众号）

作者：彩云Sky

转载请注明：学UI网》想把表单设计做到极致，居然有这么多细节需要注意，学到了！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

话说自从著名资本家胡晓波先生对训练营的同学下达坚持打卡两年送一台苹果手机的许诺之后，同学们纷纷战意满满，激情四设，每天就是手机碎片+1，手机碎片+1 的做练习…而本意是激励大家好好练习的波哥，整日忧心忡忡，省吃俭用…好怕自己两年后被原地榨干…

为了更好的协助大家吸资本家的血，丰富自己的武器库。本次教程整理了八个由易到难的 LOGO 设计方向与相应的 Ai 技法，大家可以用闯关的方式一各一个的逐个攻破，体验感会更好哦！话不多说，我们开始吧！

文章末尾另附视频版本，对步骤有疑惑的同学可以跟着一起实操一遍，嗯，是真的想教会你呢。

PS：本文所有案例均来源于网络，只用作分析技法。

首先出场的是一个雪花造型的 logo，复杂的线条纹路让它看起来既神秘又迷人，虽然看起来很麻烦，但其实我们很容易就能发现它的规律性：

1. 由六个相同的单一元素旋转复制得到；

2. 线条倾斜角度均为 60 度。

OK，掌握了这个规律，我们用网格大法很轻易就可以将它绘制出来，来，上步骤！

首先我们先画出网格，用几条等距的直线，然后群组整体旋转 60 度复制左右两组，即可得到。

想要做这种倾斜角度相同的线条，网格可以帮助你更好的进行规范。

然后我们沿着网格将单一元素的路径用钢笔工具绘制出来，这里需要注意两点：一是每一个端点处最好对齐网格的点；二是有转折的地方要一笔连过来，方便后面加圆角处理。

画好路径后我们将它转曲，然后添加圆角，注意添加圆角的规律，一般外圆角会比内圆角大一些，而且相同的角度一定要设定相同大小的圆角。

单一元素处理好之后，我们把它沿着中心点旋转复制 60 度绕一圈，就可以得到我们想要的图形了，一般操作就是复制一个然后 CTRL+D 进行重复即可。

最后添加颜色和排版就可以了。

一般越复杂的 logo 想要做的出彩，往往都需要一些规则性在里面，而网格能够很好的帮助我们去实现这种规则性。

这是今年意大利申办 2030 年世博会的 LOGO，整体造型由罗马古城门向内进行线条发散组合而成，寓意各国文化的友好交流。这种线条混合发散的 LOGO 既简单又出效果，用混合工具即可轻松完成，下面我们来看一下在制作过程中有哪些需要注意的点。

首先我们将需要混合的部件准备好，也就是建筑的外轮廓以及大门的外轮廓。注意一定要保证左右对称，否则混合起来会十分混乱，然后下面的底部先不要连接上。

这一步需要注意下面连接处不要合并，不然会出 bug。

选择混合工具，分别点击城堡和大门，将指定步数改为一定的数值，数值越大，越密集，这里设定为 35。然后就得到了向内混合发散的感觉了！

混合完成之后我们扩展出来，将最外圈轮廓直接向外扩大复制出轮廓线即可。

最后我们整体进行转曲，然后添加颜色就搞定了！可能有的同学会觉得这种多线混合的 logo 过于复杂，会不会不太好应用，但其实这种属于活动型 logo，并不需要用个五年十载，活动型 logo 更着重考虑当下，可以做得更个性，一切以视觉为出发点！

看完了国外的，再来欣赏一下这个极具中国风的湖州城市 LOGO。这个 LOGO 的亮点在于它的正形背景部分是由不规则的水墨感条纹组合而成的，文化气息拉满的同时让图形更加活力生动，我们来看看这种非对称条纹该怎么绘制。

首先我们将椭圆部分的线画出来，第一步找到最高点和最低点，然后用混合工具进行混合，得到由曲线逐渐变成直线的过程线段。

然后手动的将各个线条扩大到椭圆轮廓的位置，并调整好粗细和间距。

到了最关键的一步了！我们将每条线的描边配置改为这个不规则的样式，在描边窗口最下面就可以找到，记得适当调整粗细保持过渡自然。

然后我们把每一条线都改成这个描边样式，并将下半部分水波纹的地方也绘制出来，注意下面的地方描边可以调的细一些。

画好背景后，我们将负形部分的塔形建筑放到条纹的中间，并居中对齐，改为白色。

光变成白色肯定不行！我们要的是镂空！这里直接选择所有图形，然后用路径查找器里面的分割，可以将所有图形分隔开，然后用魔棒工具选择白色部分，直接 Del 删除即可。

最后加入渐变色！效果就拉满了！这种非对称式的线条相较于普通的线条，更加灵活生动，也天生自带中式笔触的感觉，以后大家碰到中式 logo 的命题，可以考虑尝试一下这个风格。

这个 LOGO 在 2D 平面的基础上，融入了褶皱感 3D 立体的感觉，同时它的组合结构是类似于飘带这种飘逸柔和的造型，比普通的方形更加优美。下面我们来看看如何做这种飘逸的结构以及如何进行视觉 3D 化的实现。

其实如果你的钢笔工具玩的 6 的话，直接画也是可以的，但是相信在座的各位钢笔都不太行，甚至很多同学经常被只会 Flash 的胡晓波嘲讽，那能忍吗？这里教大家一个曲线救国之路，先画一条直线，然后选择扭曲和变换里的波纹效果，大小设为 100，隆起数改为 1，就得到了一个…emmmm，优美又不太对劲的曲线。

将这个波纹线砍掉一半，嗯，总算正常一些了。

把它向下复制为六个，并适当调整一下间距。

将组合好的图形向右镜像复制一个，然后放到它的下面，对齐左边的端点并连接，形成一个翅膀的感觉。

然后再次左右镜像复制一遍，基本的造型就出来了。

选择实时上色工具，分别按路径填充黑色部分。

最后删除掉多余的描边，并合并黑色部分，效果就出来啦！用这个方法可以做出来很多种曲折线，大家可以尝试一下，肯定可以组合出各种好玩的样式出来。

像素化风格的 LOGO 也是常年比较流行的，不光光是游戏行业，其实很多企业类的 LOGO 也可以非常好的利用像素化进行视觉呈现，很多同学只闻其名，不懂其法。下面我们用这个案例来看一下像素化 LOGO 的设计步骤。

由于是企业类的 logo，在造型上就相对严谨一些，除了正常的方形，这里再给大家介绍几个常用的比例（如上图），经过比较，发现青铜比较接近于原 logo…那我们就用青铜的比例，做出王者的效果。

绘制网格有两种方法，一个是画好矩形之后，选择对象→路径→分割为网格，二是直接用矩形网格工具绘制。这里因为我们提前画好了矩形，所以直接用第一种方法，行数和列数分别设为 52 和 11。

画好网格之后，就可以请出我们的老朋友实时上色工具，在网格中挥洒你的创意。

用实时上色工具画好之后，需要扩展一下，才能提取出画出来的部分。

最后我们将网格线删除，就可以得到我们画好的图形了！纯纯矢量的像素化就这么搞出来了！这个方法是通用的，你可以通过改变不同的网格数量，来绘制不同像素块造型的图案，比如你想绘制常规的正方形像素块，那行数和列数设为相同的即可，之后就在里面进行填充色块，真真正正体验到画画的快乐！

平面构成作为设计学的基础学科，通过点、线、面三者规则或不规则的编排和组合，形成极强的抽象性和形式感，它在 LOGO 的实际应用中也非常容易出效果。这个 LOGO 就是通过线与面的结合来进行抽象创作，下面我们来看一下具体的实操过程。

第一步我们先把六边形轮廓和中间的三角形画出来，其实就相当于我们新建一张画板，在里面进行设计是一个道理。

第二步我们画三条辅助线来方便后续的操作，注意这里的线都是有规律的，比如最下面的线是与三角形形成 90 度相交，而另外两条线都是沿着三角形的边进行延伸。

第三步我们将下半部分的线绘制出来，具体操作如下：

1. 沿中心画一条直线，再沿六边形边画一条直线；

2. 两者进行混合，步数设为 24；

3. 左右进行镜像对称复制；

PS：这一步其实也是在画辅助线。

第四步我们接着用实时上色工具，将我们需要的部分提取出来，这里实时上色工具其实就是充当了马克笔的作用，大家可以想象一下，这样比较好理解。

画好其中一个部分了，剩下的我们直接旋转 120 度复制出来就可以，这里也是软件操作的方便之处，比在纸上快多了，容错率也高。

旋转之后我们发现左半边部分黑色会大出来一块，所以我们需要取消编组后，将这个部分单独置于底层，就可以了。

绘制这类 LOGO 的核心要素就是画好辅助线，同时特别锻炼人的思维和创意能力，它更像一件数学与美术结合的艺术品，当你成功完成之后，一定会成就感满满。

这一趴给大家带来的是苹果 2022 发布会 LOGO 中多层彩色混合渐变设计小技巧。既然大家都是即将拥有 iphone16 的人，那实时掌握自己手机的未来动向也是必须要做的事情。来吧！学起！

第一步肯定是要先画好基本造型，不管是苹果也好，是梨也好，造型画不好，再好看的渐变也救不了你啊！

然后我们先给它添加渐变色，这个大家应该都会。

接着我们需要给它添加一个描边，这里要把透明度模式由正常改为柔光，并适当降低透明度，这样外轮廓不会过于生硬，能够更好的与图形渐变进行过渡。

到了最关键的一步，我们将图形向内缩小复制一个，给它填充上黑色，然后用混合工具将两者进行混合，就可以得到一个由外向内逐渐消失的渐变效果了。

然后我们选择比例缩放工具，向内缩小 80% 并复制出来，接着按 CTRL+D 重复复制即可。

其他几个苹果只需要更改相应的渐变配色就可以啦。

身体做完了，上面的小叶子也是用同样的方法就可以搞定了，右下角另一个版本的用相同的做法也同样能够实现，但是想要完全还原它的投影效果可能要用到 AE 插件来完成，这里挖个小坑，感兴趣的同学可以尝试一下。

东京奥运会作为史上极具争议的一届奥运，带来了不少热点和话题。相较于它鬼畜的开幕式和一些莫名其妙的的比赛细节，它的 logo 却实实在在的堪称顶尖硬货。由很多很多不规则的小方块堆积而成，看似琐碎无章法，但其实拥有极强的数学逻辑和艺术美感，下面我们就来看一下它的设计过程。

看到这个图，是不是就能瞬间明白一些东西了？原来确确实实是有规律的，所以我们只需尝试画出其中一个部分，剩下的重复复制即可。

先画出一个十二边形，然后复制一个旋转 90 度，将它们进行居中对齐，这里需要手动调整一下大小，保证里面的顶点对齐到外面的边上，中间我们画一个小圆，方便后面找到中心点。

这一步我们先在最上面画出三个菱形，具体操作如图。

然后再找到中间部分，一样通过已经存在的三角形来进行旋转 180 度复制，之后合并出新的菱形。

和之前一样的手法，一样的配方，继续画菱形…

继续拼贴菱形，不过新加入的红色部分和之前的黄色部分是重复的，所以我们直接复制过来就可以了。

继续增加红色部分菱形，具体操作步骤如图。

右边再添加最后一块菱形，这一部分就算完成了！

下一步我们需要找到各个边的中心点，将它们进行连接，这里给大家安利一个比较常见的小插件（百度搜索 Ai 插件很多下载地点，由于版权问题就不直接分享了）里面的等分路径可以快速帮你定位到线段的中心点。另外里面还有很多其他的野路子，大家可以自己慢慢玩。

找到中心点之后（如上图左）就可以将它们分别连接起来，画出方块！如果说之前的几步完全不知道在干嘛的话，那么到这一步是不是有种豁然开朗的感觉？

后将画好的部分绕中心旋转一圈，再删除掉外轮廓线，终于完成了…头发掉了好多…向大师们致敬，salute！这个方法其实也是平面构成中的一种，大家可以跟着自己做一遍，一定会有自己的收获。

Okkkkk，那么今天的教程到这里也就结束了，不知道你们能攻克到第几关呢？临摹不是目的，学会举一反三才是最重要的。觉得意犹未尽的朋友抓紧跟着下方视频版本再来温习一遍！！总之，是很感谢今晚的相伴，感谢三连支持，朋友们，giao 辞！

▼ 点击图片前往原文观看视频版

原文地址：胡晓波工作室（公众号）

作者：告白天

转载请注明：学UI网》探索优秀LOGO背后的技法与思路！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

前言

刷新在产品中属于基础功能，方便用户获取最新动态，是普及度较高的基础功能之一。在设计表达时有系统级表达、自定义设计、多功能结合等，设计发挥的可控性较大。

今天黑马哥就结合一些优秀的线上案例，和大家聊一下关于产品刷新设计的千奇百态，希望抛砖引玉，和大家一起进步。

分享目录

一、关于刷新设计

二、刷新的设计形式

三、线上优秀案例分析

四、总结

一、关于刷新设计

在产品中刷新对于用户来说并不陌生，是经常使用的基础功能，便于用户获取新动态。在一些可以提供内容更新的产品中，刷新获取内容变动是较为常见的形式。

大家都习惯将刷新称呼为下拉刷新，其实刷新的动作不仅限于下拉手势交互，也有产品采用单击和上滑等手势交互实现刷新动作。比如一些产品在滑动浏览内容时，底部标签栏首页图标会变为刷新的操作，通过点击实现页面内容的刷新；也有产品在上滑页面时实时加载完成刷新，就像很多影视类产品或者瀑布流设计的产品。

刷新动作不仅可以满足用户的求知欲，也能通过源源不断的内容增加用户黏性，提高用户的使用体验。

二、刷新的设计形式

简单的刷新动作已经不是简单的设计了，在产品设计师的创新中呈现出了众多的优秀案例，下面为大家梳理一下不同的设计表达形式。

2.1、系统级表达

系统级表达是采用系统默认的一些处理形式，类似于花瓣循环的动态形式，属于比较常规的表达。也有很多产品采用系统级形式，用户理解度较高，设计创新的角度来说欠缺一些，表现形式比较生硬。

2.2、情感化文案表达

为了带给用户更有温度的设计，除了在图形层面进行情感化设计发挥，在文案上面也可以更加情感化。有产品使用俏皮可爱的话术，每次用户刷新都呈现不同的文案，与用户产生情感共鸣。

2.3、动态形式结合

刷新的动态表达形式非常普遍，图形动效和动作演变等，能够体现出加载的动作。动态形式结合可以使得趣味性更强，动画演变的过程也能降低加载等待过程中的焦虑感。

2.4、IP 形象结合

IP 形象结合到 UI 场景中不仅可以强化品牌感，也能带来更加情感化的体验。IP 形象结合到刷新设计中，伴随着动态演变，以此来体现加载的过程。设计形式动感化，趣味性强且感官体验较佳。

2.5、品牌基因结合

立足于品牌做设计，品牌感可以带来差异化的设计表达，也能提高用户对品牌的记忆度。很多产品将品牌 LOGO 图形、辅助图形、品牌字体、品牌风格特征等融入到刷新设计中，带来差异化的刷新体验。

2.6、业务属性结合

根据业务特征设计刷新图形，让用户在刷新的过程中感知产品的业务属性，也是强化记忆点的有效形式。

2.7、多功能结合

刷新设计更多的还是为了给用户提供更多动态内容，除了这个底层需求以外，也有产品结合了多功能设计。比如下拉刷新到一定距离可以激活“二层楼”，进入活动空间或者其他功能模块，也有结合浏览记录等展示。多功能结合赋予了刷新更多玩法，在有限的资源空间发挥更多操作价值。

2.8、其他设计形式

随着体验的重要性升级，产品设计师会在更细微之处探索出更优的解决方案，做出差异化的体验设计。而刷新功能也将会呈现更丰富的设计，从感官层面带来更多视觉感的表现，从体验层面结合更多辅助功能或者业务，发挥更多使用价值。

三、线上优秀案例分析

通过以上的梳理我们对刷新设计有了深入的了解，下面通过一些优秀的线上案例来进行分析，辅助大家掌握更多差异化的设计表达。

3.1、情感化的文案设计

刷新除了在图形设计和动效层面发挥以外，多功能结合和文案设计也是差异化表达的方向。文案提示的设计相对比较特殊，通过不同的文案来打动用户的体验。

喜马拉雅 APP 每次下拉刷新时，都会显示不同的文案内容，有功能引导的提示文案，也有与用户共鸣的温馨提示等。情感化的文案设计让刷新更有温度，不失为一种差异化的功能设计探索。

3.2、动态化 IP 形象

针对下拉刷新这一常规操作，设计形式也是丰富多样。结合 IP 形象进行动态演变完成刷新动作，被很多产品设计师所采纳。

美团外卖就将品牌 IP 形象结合得恰到好处，下拉刷新时两只耳朵摇摆非常俏皮可爱，松开后 IP 形象露出，还配合眨眼睛等可爱的表情动效。情感化设计结合动态表现，拉近与用户之间的亲和力，带给用户更人性化的使用体验。

3.3、刷新带来美食诱惑

在完成刷新功能属性的同时，还能将产品的属性或者服务卖点强化出来，赋予了常规操作更多的功能价值。

麦当劳在麦麦商城栏目的下拉刷新设计中，采用汉堡形象结合层级动效进行表达，让人眼前一亮。动效拉长的汉堡不仅体现出份量感，激发用户的食欲；汉堡形象就十分麦当劳，展现出品牌关联性。

3.4、趣味化 IP 形象

IP 形象结合到刷新设计中的案例非常多，不仅可以带来情感化的体验，也能增加功能操作的趣味性。半次元在下拉刷新时不仅结合 IP 形象，还通过下拉的程度将形象拉长，最后再配合表情和动态营造出趣味性。

3.5、动态 IP 完美结合

转转的 IP 形象头部的转动条是其特征所在，在下拉刷新过程中完美的结合了转动条，还伴随着装饰符号散开的效果。不仅贴切的结合了 IP 形象的特点，装饰元素的动态效果也强化了氛围感，非常符合产品的属性，是一个不错的刷新设计案例。

3.6、品牌化路径动效

刷新设计中采用路径动效的表现形式比较多，主要集中在图形路径动效和品牌文字路径动效，图形通常是品牌 LOGO 为主，这一类比较适合图形趋近于线性的表达中。链家 APP 的下拉刷新就是 LOGO 图形进行路径动效，完美的匹配了图形轮廓，动效的流畅度也比较自然。

从品牌层面着手于刷新设计，如果放弃图形层面的元素选择，品牌字体的选择也是一个思路。得物 APP 将品牌名称的字体直接运用到刷新设计中，以路径动效的形式进行表达，最终将笔画打散散开。设计表达依然延续了品牌感，也区别于其他产品的刷新设计，在差异化方面呈现出了自身的品牌特征。

3.7、一路骑行的芒果崽

芒果 TV 的下拉刷新设计结合了吉祥物芒果崽，下拉刷新的过程就是一路骑行的芒果崽。骑行的沿途中有众多地标建筑的剪影，下拉不松手就会一直处于骑行状态，下拉的反馈体验度做得很好。

3.8、漫步的卡通形象

利用动态卡通形象作为刷新设计案例较多，特别是行走和跑步，这一类都比较贴合刷新这一动态表达。比如在少年得到 APP 中，在下拉刷新过程中以一个背着书包漫步的卡通形象进行表达，流畅的动效完美的呈现了学生放学或者上学时，背着书包漫步的场景。这样的呈现方式不仅贴合功能含义，也能与用户产生更好的情感共鸣。

3.9、业务化的 3D 图标

友啥 APP 利用 3D 图标进行循环切换代表刷新过程，带有业务属性的图标不仅可以直观的突出产品特性，3D 图标化之后视觉感十足。图标切换带来的动效流畅自然，匹配刷新动作的差异化也非常明显。

3.10、刷新动作下的多功能结合

刷新已经不局限于内容更新这一单一需求，一些电商类产品也赋予了刷新多功能的属性，带来更多样化的操作体验。

比如淘宝 APP 首页下拉刷新时，短距离下拉依然属于刷新范围，继续下拉则会提示释放进入淘宝二楼。在保持刷新基础功能的前提下，融入了多功能场景，开发出功能或者活动的全新曝光入口。

在商品详情页时下拉则无法提供刷新服务，为了给予更好的反馈设计，下拉动作便会显示我的足迹。不仅可以在用户习惯性操作时给予反馈，足迹的提供也更方便用户做出选择。

同一个产品也并非只能呈现出一种刷新设计方案，不同的业务场景可以使用不同的表达。淘宝 APP 里面便根据场景的不同提供了多种刷新方案。常规界面的刷新便以品牌字“淘”作为设计出发点，刷新的过程以动态形式表达品牌字，简单粗暴的传递出品牌感。

3.11、结合 Slogan 完成刷新

刷新不仅只是内容的更新，产品设计中呈现出更丰富的表达，比如辅助传播活动、宣传品牌形象和 Slogan 等。产品设计师都在赋予单一功能多重使命，带来丰富多样的使用体验。

58 同城首页在下拉刷新时，除了体现刷新动态以外，也展示了 Slogan “让生活简单美好”。借助刷新入口的曝光度，更快的将产品的定位传递给用户，增加用户对产品的好感度。

3.12、保持格调一致的设计

很多小众的产品在设计上面呈现出比较有格调的设计，区别于常规的氛围营造，设计风格更加简约大气。

屋颜 APP 整体的设计风格就属于比较简约文艺，在下拉刷新的设计中也保持了这个风格特征。以生活物品演变出的线形图标体现刷新的过程，整体的过度和衔接也恰到好处。

3.13、探索式的刷新设计

刷新设计除了图形、动效、文案等层面发挥以外，背景层发挥的案例相对较少，除了配合传播性质的设计。

AcFun 在下拉刷新时，背景层设计成类似于宇宙空间的插画场景，刷新的过程就像探索一样。配合卡通形象左顾右盼的动效，带来的感官效果也是非常不错的。

关于刷新设计的优秀案例很多，这里就不一一例举了，以上案例仅作为抛砖引玉形式的引导。大家根据这个框架多多体验产品，总结更多的优秀案例。

四、总结

刷新设计作为产品中使用较为频繁的基础功能，与用户的接触也是非常密切的，设计的重要性因此不言而喻。无论是突出品牌感、趣味性、差异化还是强化感官层面的体验，或者是多功能结合等，都是产品设计师重点发挥的模块之一。

本文以案例分析为引导，为大家梳理了刷新设计的形式与思路，希望可以抛砖引玉，带给大家更多的设计灵感。总结观点属于个人理解后的呈现，如有欠缺大家选择性吸收和修正补全。

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》刷新设计的千奇百态（UI设计）

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

在UI设计中，95%以上的应用会涉及到头像元素，例如消息列表、个人中心/主页、会员服务、评价、排行榜等功能版块，明明用昵称或几个文字就能说清楚的地方，偏偏设计了一个头像、而且还占据该信息组的主视觉。那么，看起来简简单单、或方或圆的小头像到底还有哪些我们不知道的细节知识，今天笔者就通过这篇文章跟大家聊聊头像元素的方方面面，希望对大家有所帮助，欢迎共同探讨，相互交流。

一、头像在UI界面中的作用

1. 多账号区分

出于特殊原因，很多销售、客服等职业，在同一个应用中可能会存在多个账号，需要确认自己当前登录的是哪个账号时，查看头像就是最好的区分（需设置不同的头像）方式，当然也有一些非正常需要的用户有另外的小号，相信头像也会有所区别，其作用这里不便多说，避免「社死」。另外，如QQ登录、微信账号切换页面，也会利用突出的头像来快速区分账号信息。

2. 凸显自身形象

某个用户使用了一张成熟稳重、端庄得体的形象照作为个人头像时，在大多数情况下，这个人一定不是个动不动就爆粗口的键盘侠或网络喷子，虽然“隔着屏幕你又打不到我”，但在发表内容时会注意自己的措辞，潜意识的维护自己的网络形象（头像），这就是现实与网络中头像的人格映射。当碰到匿名社交时，为自己戴上面具后就会变得肆无忌惮，与前者相比，至少不再那么约束。

3. “面对面”沟通代表

很多时候，不管是跟好友聊天、还是在不同的应用中留言评论，有头像的用户总感觉是在进行平等交流，这么说感觉很抽象，下面举个例子：

如果是一个单身男性，当社交应用中有人加好友或请教问题时，针对有美女头像的用户，其响应效率、质量都会比其他头像的用户要高，这是不争的事实（别杠，我们不谈个例），这也说明自己时刻都在注意在对方心中的形象，总担心被对方看“穿”。

二、各场景中的头像类型

1. 默认头像

非强制登录的应用，切换到个人中心时，一般会有一个默认头像占位，可以是人物形象剪影或品牌吉祥物，以确保用户在登录之前保持页面的完整性。另外，即便用户登录后有上传自己的头像，但遇到网络延迟、头像加载失败、匿名操作等情况，系统默认头像都可起到临时替补的作用。常见的默认头像有灰色、彩色两种色彩模式，其二者各有利弊。

1）灰色头像

灰色头像色彩感较弱，可能会导致视觉不平衡，打破画面的美感，但也正好通过这一丝的不和谐，用一种明显且突兀的方式提醒用户去更换头像，强迫症患者几乎无法抵抗。

2）彩色头像

绝大多数是结合品牌色、吉祥物等进行展示，还能起到丰富画面、增加趣味性的作用，相比灰色头像则更加生动，不管用户是否登录、有无更换头像，都能保持界面的视觉平衡，唯一的缺点可能降低用户更换头像的欲望。

2. 系统推荐头像

1）用户选择

大家早期接触的QQ就是最典型的案例，系统提供了多种头像以供用户选择，甚至将部分头像纳入了QQ会员功能，当用户没有合适的图片作为头像且难以抉择时，使用系统推荐的头像不仅能降低用户的选择成本，还能满足部分个性化需求。如果默认头像跟产品相关联，也可作为品牌传播途径，两全其美的选择。

另外，最近很火的匿名社交应用Soul 只能使用系统头像（可自定义调整），不允许上传图片，这源于平台希望用户抛开颜值，通过不同的个体审美、价值观等进行心灵交流，找到真正的灵魂伴侣。同时，因为庞大的用户量，图片是否合法、质量的好坏带来了一系列的监管问题，使用系统推荐头像，在很大程度上能降低图片管理成本。

（PS：强制使用系统头像跟产品定位有着绝对的关系，并非拍脑门决定）

2）系统选择

注册成功后，系统会随机匹配个人头像，相比用户自己在列表手动选择，则多了一份神秘感与期待感，让头像的设置变的更有趣，例如小红书、B站等应用。

3. 文字头像

常出现在移动办公类应用中，由系统自动处理，基于OA类应用社交属性并不强，大多用于内部团队工作中的沟通交流，例如钉钉、纷享销客、飞书等。为了更清晰的获取对方个人信息，这类产品头像更倾向于上传自己的真实照片（部分企业强制），在用户未上传照片的情况下，系统会提取中文名字中的后两个字（两个字的全名显示）、英文名字前两个字母作为个人头像使用，方便团队成员更好的辨认。

4. 群组头像

只出现在群聊中，由多个群成员的头像组合而成，不同的应用对头像上限的设定不同，最为常见的是4个、9个两种。群组头像大多数不支持自定义上传，会根据当前群成员的数量（1-4人、1-9人）进行宫格排列，且不会超出设定的上限，例如钉钉群、微信群、QQ群等。

5. 用户头像组

在部分应用场景中，产品将多个用户头像堆叠组合在一起，通过“羊群效应”引导后续用户产生从众心理，以提高转化率，例如有多少用户已购买、多少用户已中奖等。另外，视频平台的直播间也会将排名靠前的用户头像组合排列并展示出来，吸引其他用户关注。

6. 历史头像

1）同平台

QQ会将用户之前使用过的头像搜集起来并单独提供一个入口，用户需要换头像时，可再次选择使用，虽然重新使用的几率并不高，但也不失为一种情怀，用户能清楚知道头像更换的历史轨迹，满满的回忆感。

设置微信头像时，也可选择使用上一张头像，方便用户设置新头像后反悔，可以理解为撤销本次更换操作，如果需要对图片进行裁切，也方便用户跟上一张头像反复对比。

2）跨平台

第三方登录的标配，用户无需重新编辑，就可以无差别继承第三方账号的头像、昵称等信息，节省了大量的时间及操作成本，例如微信、QQ、支付宝、微博授权登录等。

7. 其他头像

除了上述头像类型外，还有如视频头像、GIF头像、轮播头像等，这些并不常用，了解一下就好。另外就是之前刮起的一阵虚拟形象社交风潮而爆火的捏脸头像，极具针对性的新型头像类型，如果感兴趣，可以去下载Soul、崽崽APP体验，这里不多做赘述。

三、头像状态与附加操作

1. 不同的用户状态

用彩色头像和黑白头像来区分用户是否在线是最直观的表现方式，例如打开QQ好友列表，对方当前是否在线一目了然。除此之外，QQ的在线状态还延展了多种子级状态，例如：离开、忙碌、听歌中、请勿打扰…等，设置成功后，会以小图标的样式重叠在头像右下角，好友看到后能清晰感知当前状态下是否可以立即联系你。抖音采用了较为简单的方式，头像右下角有绿色小圆点显示表示在线，没有则代表离线。

2. 事件通知

常用于非社交类应用（社交应用有更专业的处理方式）的未读消息/事件通知，显示在头像右上角，点击查看后会消失。可设计不同的样式以体现视觉的强弱关系，对用户产生不同程度的引导。

• 弱提示：小圆点提示，填充红色或主体色，提示程度较弱；
• 中等提示：白色圆形+数字提示，数字色彩可以是红色或主体色；
• 强提示：圆形白色描边及红色填充+数字反白，较突兀的提示方式。

3. 挂件/装饰

很多挂件只是纯粹的装饰品，能起到美化、娱乐、趣味性的作用；增值服务、特权服务、认证类的标识更是一种身份的象征，体现出荣誉、尊贵的感觉；有小部分应用将用户的勋章标识重叠在头像某个位置，时刻给用户带来一种坚持完成任务之后的成就感，满足其虚荣心的表现。

4. 交互操作

在很多应用中，个人中心页面的头像区域隐藏了设置功能，点击后会进入到个人主页、个人信息页或更换头像页面。还有一些无实际功能作用、纯趣味化的交互，例如双击微信好友的头像“拍一拍”、拖动即刻个人中心头像会出现一个红心等，不同程度的给用户制造意外惊喜。

还有部分应用，在头像右下角通过有明确指向含义的图标引导用户操作。例如在完成表单过程中需要添加头像，上传成功后，头像右下角会出现删除图标；Soul个人中心头像右下角增加了个性商城入口；QQ、即刻则通过相机图标提示用户点击可直接更换头像，这种引导性的图标都相对较小，需要精准点击，为避免无效操作，在不影响其他交互的情况下，请尽量扩大图标热区范围。

四、方形与圆形的定义

虽然我们用过、研究过大量的互联网产品，但也许真的没怎么关注过头像的形状，以当前几个主流的产品为例，QQ、抖音是圆形头像，而微信、钉钉则是方形（圆角）头像，如果真的要分出个胜负，那么很明显，大部分产品使用的都是圆形。方形和圆形到底有什么区别？设计时该如何选择？下面我们就一起来唠一唠。

• 方形头像对照片的空间利用率更高、降低空间损失，圆形通过裁剪让空间更平衡、看起来更精致；
• 方形对四角、中心点均可构成聚焦区域，使用灵活，圆形则边界完美，没有聚焦冲突，可突出核心；
• 古埃及曾认为圆形是神赐予人们的神圣图形，因图形边界完美，能给人公正、信任感，但矩形却能给人一种专业、稳定的感觉；
• 圆形被认为是活泼，方形则显得比较严肃；
• QQ团队曾给出答案，因产品定位就要是给人一种年轻化、活跃的感觉，且人的脸也接近圆形，裁切后更能凸显人的脸部特征（看脸时代），明显使用圆形更适合。微信设计师的说法是图片本来就是方形（扯远了），方形头像能最大程度的降低图片损失，而且微信的定位相对成熟，方形还能给用户一种稳定可靠的感觉，更符合用户习惯，如果一定要用圆形，将头像处理成圆形即可，方/圆兼具；
• ……

说了这么多，依然不知道如何选择，那么笔者将根据一些常用到头像的三个模块给你一些建议：

• 个人中心/主页：如无特别需要，大部分情况下使用圆形，不会出错；
• 消息列表/即时会话：根据产品定位、上述的参考比较后决定，没有明确的要求，使用其中一种形状后，在其他同等级页面统一即可；
• 评论/交流区：直接圆形，没有为什么。头像本来就小，裁切掉无关信息会更聚焦。

五、头像设置步骤

1. 头像来源

用移动端设备上传头像时，来源主要为系统推荐、历史头像、从相册选择、拍照这几种方式，电脑端因设备限制等原因，一般只有系统推荐和上传本地图片。

2. 上传限制

上传图片时，一般会对图片的格式（JPG/PNG/GIF等）、尺寸（宽*高）、文件大小（多少KB/M）作出限制，这些需要给予明确的提示，避免用户因操作多次失败而受挫离开，同时也能避免因用户不知道平台可使用GIF、视频等头像格式，而雪藏了产品的多元化服务。

3. 图片裁剪

因图片来源、拍摄手法不一，针对横图、竖图，系统会贴着边缘（避免压缩/拉伸）先进行一次自动裁剪进行取方，然后用户可自行调整大小，选取最佳位置。

4. 效果预览

需要给用户提供真实的效果预览图，避免用户因操作失误或对处理后的头像不满意再次重复整个更换流程。所见即所得，通过降低用户重复操作的概率也是提升用户满意度的方式之一。

六、引导用户上传头像

1. 文案引导

当产品要求用户组做某件事情时，即便是为用户考虑，也需要给予一个合理的理由，可使用趣味、情感化或鼓励性质的文案引导用户主动上传头像，例如社交类应用“一切都很完美、就差一个帅气的头像了”、“换个好头像会让更多人认识你”等。或者用户在编辑个人信息时给予鼓励“恭喜你，只差最后一步了，换个头像就十分完美了”。

2. 第三方授权

前面讲到过第三方登录的方式，相信这也是对懒癌症患者上传头像最直接粗暴的方式了。

3. 纳入注册流程

部分社交类应用将上传头像作为注册流程中的必选步骤，任何用户都无法跳过，切记这种方式非必要不可滥用/乱用，这相当于对用户注册增加了门槛，任何产品每多一点操作成本，都会有一批用户离开，需根据产品定位以及强制上传头像的重要性来决定，避免得不偿失。

七、结语

「无头像不社交」，在设计界面之前，设计师应该考虑清楚产品社交属性的等级，再来决定头像在界面中的权重、占比，至于如何使用，还需根据产品的实际情况并结合用户头像的基础知识合理的做出判断。

「麻雀最小、五脏俱全」，头像看似一个很简单的UI元素，但在设计过程中需考虑的知识点还是有很多，这就需要我们平时不断的积累、探索，并多多总结，再融合到实际的UI设计中，做出有理有据的设计。

最后，分享一个图片转插画头像的工具：https://newprofilepic.com，非常好用，如果感兴趣就试试吧！

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》头像篇 | 帮你快速掌握头像基础设计知识！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

一、表单的构成

1、表单的组成

按照原子理论，表单应该属于一种“组织”。包括了以下组成部分：

• 标签

主要是用来说明表单数据域的含义和填写内容；当标签无法明确引导用户或者具有一定的内容限制时，需要增加帮助或者说明信息，方便用户更好地填写内容。

• 表单数据域

通常是数据录入型组件，需要用户以填写、选择的方式完成内容输入。

• 操作按钮

用来提交、保存数据信息，完成表单操作。

2、表单的类型

在B端产品审批流程中，不同的用户会面对不同的表单形式。

对于流程发起者，需要填写内容后提交审批，这类表单偏向于任务操作，也是我们最常见、最典型的表单形式。

而对于审批者而言，表单主要是传递信息，审批人依据内容做出审批决策，这类表单偏向于信息展示。由于审批类的表单相对简单，所以我们将主要的精力放在操作型表单上。

二、表单的设计关注点

1、表单布局

表单存在两种布局方式：单列布局和多列布局。

• 单列布局

单列布局信息自上而下，用户视觉动线更加稳定，横向的视觉跨度更短。所以信息阅读和填写的效率更高，是首选的布局方式。但是在长表单场景下，用户需要滚动屏幕才能查看完整的表单信息。

• 多列布局

多列布局下，一屏可以容纳更多信息、屏效更高，有效地避免出现滚动条。对于高频的长表单操作，采用多列布局的方式，可以减少滚动条带来的用户困扰。

当然多列布局表单信息密度也更大。一般为左右两列布局，列数最好不要超过2列，否则会影响用户的填写效率。

常见的搜索表单大都与表格宽度一致，可以容纳3列或4列。主要是搜索关键词与表格一致，业务属性不强，并且表单项没有强制性，用户可以自由填写，不会存在漏填的情况。采用多列布局对用户操作影响不大。

2、标签排列

标签排列方式历来都是设计师比较纠结的问题，常见的标签有3种：左对齐标签、右对齐标签、顶部标签。另外还有内联标签、浮动标签等形式。

先看阅读效率数据。

2006年，有专家就对3种对齐方式进行了眼动仪数据分析。研究结论表明，顶部标签移动到输入框效率最高，只要 50 毫秒；右对齐标签次之，需要 240 毫秒左右；而左对齐需要消耗“500 毫秒”，效率最低。单从效率上来说，肯定首选顶部标签。但是面对不同的场景，需要选择合理的排列方式。

• 顶部标签

（图片来源于网络）

顶部标签的排列方式符合用户自上而下的浏览习惯，标签与输入域联系更加紧密，视觉横向移动距离小。所以信息读取的效率更高。

另外标签单独占据一行空间，信息扩展性更强。问题也显而易见，标签挤占了纵向空间，会增加表单的总体长度。

所以我个人认为，顶部标签更适合信息量不大、简单的表单场景。例如登录、注册等。

• 右对齐标签

（图片来源于网络）

右对齐布局拉近了标签与表单域的距离，并形成固定间距。但是由于标签的长度不同，视线起始点会发生跳跃，从而影响用户的阅读效率。

不过对于普通表单，右对齐标签可以兼顾效率和页面空间，因此在B端产品中应用比较广泛。

• 左对齐标签

（图片来源于网络）

从整体性上来看，左对齐视觉结构性更强，有利于标签信息阅读。用户视线不会受到输入框的干扰，可以非常顺畅地扫视标签，方便用户快速搜寻必填项。

但是由于标签长度不一，为了保证所有标签都可以正常显示，会增加标签与表单域的间距，导致信息读取效率偏低。

左对齐标签可以用在复杂场景中，减缓用户的填写速度，尤其是那些有大量可选输入框，结合必*标识符快速定位必填项。或者在高级设置的场景中，字段信息对用户相对比较陌生时，让用户可以仔细考虑表单中的每个信息项。

• 内联标签

内联标签是将标签放在输入域内显示，标签代替了占位提示文字，告诉用户应该填写什么内容。常见于注册登录页，如下图。

内联标签解决了标签文字过长的问题，并且可以降低表单的视觉信息量。

但是这也带来了另一个问题，就是内置的标签信息会随着内容信息输入而消失。通常仅用于登录页面，因为用户对登录页的内容模式已经非常熟悉了，学习成本很低，不会带给用户困扰。

如果用在其他类型的表单页面，就容易让用户产生疑惑。特别是出错的场景下，信息提醒不到位，很容易增加用户的理解成本和使用难度。

• 浮动标签

浮动标签是指用户在录入时，内部标题（输入性提示信息）进行浮动位移。这在一定程度上弥补了内联标签消失的问题。不过需要额外的开发工作量，并且拓展性不强，不适合作为主要的标签形式应用在业务表单中。

一个系统中最好采用相对一致、稳定的标签排列方式，否则频繁变化的对齐方式也容易让用户无所适从。

三、表单的存在形式

表单信息量可大可小。有的可能只有一个字段，有的可能是包含多层卡片内容，甚至是相互嵌套。不同的表单信息有着不同的存在形式，梳理归纳后，主要有以下5种。

1、即时表单

常见于表格或者详情页面，通过编辑或新增功能触发。即时表单与原有内容保持一致，更强调操作的快捷性。

2、浮层表单

同样是一种轻量化的表单方式，一般用于定向修改特定内容。通常浮层空间较小，不用来承载大量的信息内容。另外浮层紧随修改内容，操作效率更高。

3、弹窗表单

在抽屉组件出现之前，弹窗应该是最为常见的表单交互形式。相比页面跳转，弹窗操作成本更低，但是空间比较受限，应对大表单信息会有一定的难度。另外表单填写时，可能会出现多层弹窗的情况。

4、抽屉

抽屉组件既可以承载较多的表单信息量，又可以和弹窗一样在当前页面完成操作，并且相对于居中弹窗，不会对页面核心内容造成过多遮挡。因此在B端产品中应用越来越广泛。

5、页面

页面表单通常用于信息量较多的场景。一般会增加页头明确告知用户在做什么，同时也要配置返回按钮，方便用户退出表单页面。

以上就是表单基础知识的解析。

下期我们来分析下表单设计的技巧~

原文地址：子牧UXD（公众号）

作者：子牧先生

转载请注明：学UI网》设计基础(6): 表单基础知识解析

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

工业制造场景下的B端软件设计有什么特点？

要了解行业KNOW HOW，光坐在办公室自我分析和信息检索是远远不够的。于是我们实地进入了多家工厂，与用户进行一对多的调研，输出了多份调研报告，整理了工厂用户的一些共性特征及问题。

1. 多角色协同的网状结构

C端场景中的客户就是最终用户，是单线程的线性关系。而在B端场景中，跑通整条链路需要从前期的数据创建，到过程中的生产操作，再到最终数据结果采集和分析。涉及到的用户角色就可能达到十几种，不同行业从业者会带有自己的认知习惯，不同角色之间多诉求也存在较大差异。

2.端侧载体多样化

B端用户触点已由原来中心化的WEB端，扩展到各式各样的终端智能，彼此之间进行着协同的服务。在工业场景中，电脑端作为管理员做工单创建和任务查看等功能的工作后台。手持的扫码智能终端承担着每道工序的过站任务，穿戴设备手表接收任务并给一线工人下派任务，PAD端用来给车间主任查看任务排版和首件检测的载体等。

3.链路长且场景差异大

工业场景的完整使用链路往往都较长，以工厂的一个基础工单流程举例，完成周期从几个小时到几个月不等。每一个链路对应的线下场景也是不同的：有些可以坐在办公室内用电脑完成，有些是站立在车间某个机器上或是一些货物仓库中完成。环境，噪音，光照，用户站立的位置等等都会对信息吸收造成影响，忽略场景做设计，容易出现很多无意义的产品功能。

物联网技术特征下的体验精益化设计

1.真实场景决定一切

在刚开始做工业SaaS设计时，由于对于行业领域了解不够深入，也走过不少弯路。以工单报工举例，我们参考了部分竞品，设计了一套比较通用的报工流程：通过手机获取到工人的工单数据，然后在手机端填写整套的报工流程：点开工单——找到对应工序——填写数据数量——填写和拍摄不良品照片——点击报工按钮——完成报工。

设计完成后，当我们去多家无尘车间调研时发现，手机是不允许被带进车间的，等到工人交接班时再拿出手机去报工，已经是一个非常延时的信息了。其次工人日常会带着硅胶纸套，在使用软件屏幕时是不太方便操作的。同时在工厂内工人的穿着对于感知会有一定影响，所以在这样的场景中手机的报工方案是不会被采用的。

继续观察发现，“扫码终端PDA”是工人每天用的次数最多且非常频繁的手持端，我们通过PDA上“扫码过站”的功能，直接在后台自动判断道用户是否做完某道工序，获取对应人员信息/完成数/良品率等信息后，在后台完成提交。让用户无感知的完成了报工流程。优化后的流程至少节省了用户5个步骤。客户使用后，也非常满意这次报工方式的优化，所以对于行业属性强领域深的，充分调研至关重要。

2.结合多端特征，增大信息感知

想象你来到一个车间，周围冲刺着嘈杂的机械制造声、各类报警设备的闪烁、频繁执行着的机械动作、获取的软件信息受限于眼前这台机器上的屏幕，不同设备的性能不同也进一步导致你在接触信息的效率是在逐渐衰减的。如何能确保自己能在一堆信息中快速获取有效信息并且完成工作呢？

我们将信息分为三类：

(1) “强感知”类：判断为重要状态需要第一时间被察觉的数据。比如设备状态，待办通知，任务计时等。

(2) “可感知”类：容易被查询到的信息，必要的操作功能等。比如扫码操作，过站的数据等。

(3) “无感知”类：非必要且较为繁琐的次要交互行为。这类信息需要被“隐身”，为用户吸收信息减负。比如按键输入替换成扫码输入，手动报工替换由扫码报工等。

以手表举例：作为最贴近用户的穿戴设备，可以配合硬件的振动触感快速传递数据，主要完成“消息下发的接收”，“任务开始的计时”，发生“危险情况的快速上报”等。当后台推送一个任务给用户，在手表桌面会出现任务计时器，当用户逾期未完成，那么任务计时器将提醒用户逾期时间，在顺利完成任务后用户能获得对应的绩效奖励，对于重要信息做强感知的展示，保证工单的实效性和完成率，也能调动用户的积极性。

作为手持扫码终端的PDA：用户的使用场景集中在工序的“扫码过站”上，用户每天扫码次数非常频繁，最多一次高达几百次，我们着重在引导用户使用“批量扫码”过站，通过扫码枪依次扫码进入列表页，一次性扫批量扫入，大幅减低手工操作的频次。过站的状态在PDA上的状态栏采取非常醒目的色系+标识做展示，每个产品的详细信息在同一屏内的下半部分同时呈现出来，让用户易感知到。

3.结合多角色，以任务效率为中心

和物联网场景下C端应用作对比，其用户是单线程的，以单点查看和控制设备为目的，家庭用户需要控制的智能设备数量基本不会太多，如果做了错误的操作，造成的后果相对不会太高。产品功能对于用户来说认知门槛也相对较低。所以在整体体验上对娱乐性要求更高。

再来看看工业场景，用户从D端的开发者到B端管理者、决策人员再到一线工人，角色之间同样是相互影响的，工厂设备数量非常多，一旦操作失误可能会造成不可逆的影响，所以用户对产品的诉求更注重效率的稳定性和操作的正确性。再加上行业属性的复杂程度，对于用户来说上手有一定的使用门槛。

所以在B端场景中，我们定义为以任务效率为中心的设计。对于信息的展示，工业场景需要更关注在重要数据透传上，一定要保证信息是明确，完整且精准的。在设备状态传递上更要保证时效性和高透传性，而对于需要用户操控的区域，需要提供足够的引导和提示，减少误操作的可能性。

不同角色对数据展示的诉求也是不同的，比如在同一个数据分析屏中，对于一线工人，他所关心的是当前这个设备的状态和工单任务任务等具体的数据，车间主任最关心的则是这个车间整体设备是否运行正常及不良品率，而工厂管理层则是关心整个工厂的能耗/人效/产能等。当确定不同用户群体的需求后，针对每一类群体采取对应的数据分层方式，最终完成多套数据展示方案。

在物联网新技术的加持下，制造工艺越来越精益化，工厂职能分工也越加明确，对于过程体验也会有更精细的要求。

从多角色，多端侧，长链路等几个方面，可以看出B与C端很明显的差异性，基于这些物联网的特征，通过精益化设计思路去打磨B端场景，达到较好的用户体验：

(1) 对于不熟悉的行业领域，需要深入理解行业，洞察问题，真实场景决定了产品的最终形态。

(2) 对于端侧的多样化，合理的运用各个端的优势，保证信息传递的有效性，进行结构化的设计.

(3) 对于多角色多场景相互关联的数据网络，针对不同角色的需求做出对应的方案。以用户任务效率为中心。

后续我们也会继续在人，场，设备，数据四个方向，去完善从（设备）上云到（产线）全貌化展示再到（人员）效能的精益化管理，最终（数据）可视化做全方位的数字化升级的理想闭环。

IoT让我们开始重构人与物，物与物的关系， 好的产品体验也就必然需要做到更好的设计品质，更高效的体验流程，并且能在同质化严重的B端产品中，赢得用户认可或好的口碑。

原文地址：AlibabaDesign （公众号）

作者：阿里云loT

转载请注明：学UI网》生产力体验—多端多角色的精益协作

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

RULE 1 断根

「断根」是指将发生错误的原因从根本上排除，不给用户犯错的机会。在交互设计中，最常见的设计方法就是使用置灰 / 禁用效果。

  案例 1    美团外卖对于在休息 / 暂不接单的店铺，除了使用「休息中」的 Tag 进行标注，还使用置灰的效果，让用户对于店铺营业情况一目了然，不会误点进入：

  案例 2     支付宝理财产品阅读协议，在用户勾选前一直会显示「请勾选」，页面的确定按钮在协议签署前为不可点击状态：

案例 3     用户用 Gmail 写邮件时，可以设置邮件为「保密邮件」，收件人将无法进行转发、复制、下载或打印邮件；也可以设定保密邮件的可读时间，到期后邮件内容会自动消失，来确保信息的保密性：

RULE 2 保险

「保险」是指按照顺序运行两个以上的动作才能完成操作，多加一步操作步骤，给用户创造更多的思考机会和时间。在交互设计中的典型用法是增加弹窗、链接等形式提供更多信息，让用户进一步确认。

案例 1     微信转账，连续转给好友同样金额的两笔钱，且第一笔好友未接收，系统会发出提醒，让用户再次确认，避免重复打款：

案例 2     被从微信群踢出的用户，如果再次申请加入该群，该群的管理员可以在申请中查看 ta 曾经在群中的聊天记录，判断 ta 是否适合入群：

案例 3     在一些重要的决策或不可逆的操作行为中，二次弹窗确认尤为常见。比如当用户在填写信息时点击「作废」，系统会给出提示让用户再次考虑：

RULE 3 标示

「标示」是指运用线条粗细、形状、颜色等区别以方便识别，提高易识别度。交互设计中多以颜色鲜亮的小色块、圆点等进行示意。

案例 1     钉钉的图片保存到本地的功能，做了很好的提示，下载过的图片会带有绿色的「对勾」，避免用户多次重复保存图片：

案例 2     微信发朋友圈的分组功能，你可以选择「谁可以看」和「谁不可看」，可以看用的是绿色字，不可以看用的是红色字，很易于区分，不用担心会搞混或错用：

案例 3     钉钉的会议未按时参会的提醒，用红色标签对时间进行重点标示：

案例 4     使用 Sketch 导出同名同格式的文件时，系统会在弹窗中将「取消」作为主按钮的形式呈现，避免用户因为忘记重命名而覆盖之前的导出的同名文件：

案例 5     钉钉和阿里的出差系统打通，当员工提交了出差申请，到了出差的那一天，钉钉上状态会自动切换成 「✈️出差中」，方便其他同事了解你的状态：

案例 6     Google 的标签页，可以被分组，标记颜色和重命名，可以一定程度上缓解因标签页开得太多而找不到的情况：

案例 7     疫情期间，很多小区的大门仅供行人通行，只有个别大门是行人和车辆都可通行。高德地图 App 会给每个小区的门标注好通行权限，方便开车的用户选择合适的门进入小区，不过个人感觉这个信息可以标注得更明显一些：

RULE 4 警告

「警告」是指将不正常或即将要出问题的情况，通过颜色、灯光、声音、动效等明显、特殊的方式进行警告，提醒用户及时修正错误。交互设计可以借鉴工业设计中的报警器等产品的功能，用弹窗、灯光和声音等对用户进行提示。

案例 1     在铁路 12306 上购票时，如果选的列车时间距离现在 1 小时内，会弹出弹窗提示发车时间与现在较近，提醒用户注意行程时间：

案例 2     京东 App 会在用户使用移动网络播放的环境下，提示用户注意流量损耗：

案例 3     上海的买菜 App 在疫情期间菜不好抢，盒马会在你加购每一件商品的过程中，都提示运力不足，让用户再做考虑：

原文链接：长弓小子（公众号）

作者：元尧

转载请注明：学UI网》案例锦囊｜交互设计中「防呆手法」的巧妙应用！

共分为方法和案例两篇。本篇为方法篇。

无论是发现了问题进行集中地优化，还是作为一种优化制度持续优化，优化专项持续的时间都不会太短。为保证顺利进行，在前期需要作出明确的规划。

规划需要结合产品的目标与规划，与产品侧形成合力。所以规划要与产品、技术共同制定。

制定体验规划的五个要素

一般需要明确以下内容：优化范围、问题获取、优化目标、参与人员、时间节点。

体验专项的五个阶段

需要注意的是，规划要清晰、明确、可执行。

可以将整个项目划分为前期启动、问题获取、方案产出、需求落地、项目复盘五个阶段。

每个阶段均需明确：「时间」、「人物」、「任务」、「产出」。

在这个环节，我们需要整理已有的体验问题，并在必要时进行补充调研，对问题有更全面、更细节的认识。

如何获得体验问题？

体验问题通常来自五个方面：用户挖掘、设计走查、竞品参考、老板反馈和产品提供。

如何使用这些方法？

以上方法可以综合使用，例如用户反馈某个功能有问题，可以设计自查看问题是否清晰，可以做用户观察看实际使用情况，可以通过数据分析获取操作细节，也可以参考竞品了解不同的解决方案。

将方法按照使用场景、问题的指向性和结论类型进行分类，大家可以根据具体情况灵活选择：

区分坏点、优化点和需求点

首先我们来明确三个概念：

坏点：有明显体验问题的问题点，体验层面。

优化点：针对一个或多个坏点的解决方案，设计层面。

需求点：一个或多个相关优化点组成的需求点，或目前没有满足的需求，产品层面。

从问题解决角度来说，它们不仅仅是不同阶段的产物：

我们获得问题的最初，坏点、优化点、需求点可能同时出现在各种信息源中，混杂在一起。后续需要把坏点转化为优化点，成为问题解决方案。解决方案再拆分整合成为一个个需求点，进入产品计划，推动落地。

而且对于把握问题的本质，也至关重要：

优化点、需求点，如果追根溯源，都可以对应到体验上的坏点。我们收集到的优化点和需求点，可能并不是当前最好的解决方案，需要挖掘出对应的坏点，制定最优方案。

如何还原为坏点——追问法

只要不断地追问，就可以挖掘出坏点。

例如在审批流程中：

用户：我想要个点一下系统就能发通知给处理人提醒TA审批的功能。（这显然是个需求，需要还原为坏点）

追问：什么情况下要提醒TA审批？

用户：有时候时间紧迫，不审批就耽误事了；有时候虽然不耽误事，可领导没批感觉心里不踏实。

追问：什么时候比较紧迫？

用户：比如考勤，我今天请假，但明天就是考勤截止日了，必须立即批才行。

追问：为什么想要系统发通知？

用户：因为如果我直接提醒老板，我不太好意思，感觉系统提醒能好一些。

ok，至此，我们基本明确了用户的体验坏点：部分紧急流程需要及时去提醒审批，部分流程审批人想尽快结束，但申请人又不想以个人身份去提醒。

这个坏点需要深入洞察审批人未及时审批的原因，再给出解决方案很多，且不一定要采用用户提出的解决方案，而应该综合考虑，选用最佳方案。

归类—推导—转化

1.将问题点归类

分组是为了把同类或者相关的问题点聚合，寻找系统性的解决方案，而不是「头疼医头，脚疼医脚」。

举个例子：

可按照不同页面、控件、功能、流程、系统来进行归类，如：申请表（页面）、目录树（控件）、收藏（功能）、审批单（流程）、导航（系统）。

2.推导出优化方案

这个也是设计师最拿手的议题——「如何解决问题」，即针对一个/组用户痛点去设计方案。这里可以应用平时方案产出的各种推导方法，包括创意方法。

同时应该注意到，问题也许不能仅通过设计手段解决，所以此过程需要产研同学参与，确保方案有效且可实现。

3.转化为具体需求

方案只有转化为具体需求，才能进入产品规划、落地上线。这也是重要的一步。

优化方案和需求的粒度不同：有时候需要把优化方案拆成不同的需求分拆上线，有时候一个需求又能同时涵盖多个优化方案。这需要根据优先价值，结合产品侧的规划进行。

如何判断优化价值

每个问题优化价值是不同的，我们可以从产品侧、用户侧、数据侧三个方面去衡量：

产品侧：看可行性。是否契合产品的中长期目标？是否符合产品的发展节奏？是否易于技术实现？时间资源成本如何？

用户侧：看影响力。是否是用户使用的核心流程、关键页面？影响的用户范围多大？用户角色的权重（主要指B端）是否较大？

设计侧：看价值感。设计的ROI如何？能否体现设计的专业度？能否提升设计的话语权？

设计师虽然主导了体验优化专项，但又不掌握开发资源，如何更好地推动落地呢？需要掌握一些技巧。

推动落地中的四个对齐

对齐是为了及时对齐信息，减少团队中的信息差，使团队成员互通有无。不但可以提升协作效率，还能使大家感到被尊重和需要，使大家拧成一股绳。

四个对齐包括目标对齐、进度对齐、方案对齐和效果对齐。

目标对齐：确保在项目启动和各个阶段产品、设计、技术各方达成统一的目标。可以通过启动会和重要节点会议进行对齐。

进度对齐：项目周期比较长时，需要注意各阶段的进度对齐，掌握进度和风险。方式有排期进度表、定期例会、定期邮件等。

方案对齐：这是比较容易忽略的一点。需要产品、设计、技术甚至用户做方案对齐。我们目标明确，是为了切实解决用户的体验问题的，方案一定要有效，且可以实现。所以要关注方案是否能解决用户问题（方案评估、测试）、是否能够技术实现（方案评审）、方案实现效果（方案验收）。这点做得不好，优化效果就要大打折扣。

效果对齐：上线后需要针对两个效果进行对齐：一是优化效果如何、是否达成了目标（效果评估）。二是项目运行得如何，有什么经验和教训（复盘总结）。及时的团队复盘，有利于大家扬长避短、取得更好的成绩。

形成长期的体验优化机制

对于体验问题，我们不能寄希望于体验优化专项「毕其功于一役」，而是要建立长期的体验优化机制。

包括：定期整理用户反馈、定期走查、定期与产品技术沟通优化计划、阶段性复盘等，建立良好的体验优化通路。

相信看完文章后，大家对「主导和推进体验优化专项」的方法有了一定了解。后续我们将会发布实战篇，分享具体实例。

原文地址： 58UXD（公众号）

作者：环铁艺术家

转载请注明：学UI网》设计驱动！体验UP！高手设计师必备工具包

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

本篇文章将围绕单选、复选、拨动开关三种选项元素的设计细节及使用场景展开分析，希望能帮助新手设计师避开选项设计的误区，为用户打造出更好的操作体验。

一、单选：独一无二

1.什么是单选？

单选按钮最早来源于老式的汽车收音机上的电台频道的切换按键，按下其中的一个按键就成为了被选中状态，其他就会被弹出，用户可通过这种方式快速切换不同的电台。

在UI设计中，单选是指当界面中存在两个或以上的选项时，且各项之间相互排斥，用户仅能在选项列表中选择其中的一个来使用，即便反复选择，最终的结果始终独一无二。单选框有选中、未选中两种状态（极少数不可选），主要通过填充和描边互换的样式将当前状态反馈给用户。

单选是一种较为精简的模式，它至少包含两个选项，为了提升操作效率，需要尽可能的将所有选项展示给用户，无需多余的操作和思考，即能快速完成任务。如果是必填选项，最好提供一个与当前用户较匹配或选中率最大的一个选项作为默认值，即便默认值有误，对用户也不会有什么影响，因为用户本来就需要去操作，可一旦匹配到对应的用户，就能免去这一步的作，且默认值是经过多方面分析、反复推敲后才进行预设，只会是有益无害。

2.单选组件样式

1）按钮式

按钮样式适合用在选项不多、文案不长的场景，可平铺在界面中或以弹窗的方式呈现。例如，购买衣服时，品牌、尺码、颜色都可以设计成按钮样式。

2）圆形组合

未选中都是浅灰色描边的圆形，选中后，Android常见的是描边变主色+内圆点填充，而iOS更多则是描边变填充+对勾图标组合。其实这些不重要，真的没必要纠结是用圆点组合还是对勾组合样式，只要在同一个产品中统一样式即可，用户不会因为这两种表现方式的不同而影响后续的操作。

3）对钩

对勾样式经常出现在弹窗列表选项中，只有选中后才会有“✔”标记，相比圆形组合，给用户的引导性更强。

在单个任务中，首次进入选择页面时，列表中没有任何标记（有默认选项除外），选中条件后，标记对勾的同时，无需其他操作即自动进入下一步任务流程，再次回到选项列表时，系统会标记上次的选择作为参考。另外，这种样式不会太过于局限选项的数量和字数。

4）选择器

通常作为表单项以弹窗的形式出现，适合二级、三级联动选项。例如：选择地址（省/市/区）、日期（年/月/日）、时间（时/分/秒）等选项较多且具有关联性的选项组。

3.单选的使用准则

首先要确保单选组件的可用性，所有单选项需要清晰的呈现给用户，避免嵌套或隐藏二级单选，否则会影响结构的识别性。

其次为确保可读性，单选组件的布局要符合用户认知。选项较少且标签较短时，使用多行多列的按钮式布局比较常见，例如电商APP的商品属性选择等；标签较长则使用圆形图标、对钩样式单列多行显示，例如选择退款原因；联动选项需根据关联的等级数量，在选择器中多列显示，例如三级联动地址，省、市、区三列并行。如果将选项毫无章法的平铺、标签/图标上下排布，会造成视觉动线混乱、内容紧凑及一些不可预知的问题出现。

4.提供默认选项

如果可以的话，尽量给用户提供一个默认选项，这并非随意设定，需要经过多方面分析综合决定。举个例子，你的产品属社交类型，大多数为男性用户，那么将男性设定为默认的性别选择，这类用户就可以直接跳过这一步，节约了大量用户的操作成本，即便面对的是女性用户，这也不影响原本就需要手动选择的步骤。默认选项需合理设定，切不可乱用，否则一些“偷懒”的用户并不会更换默认选项，导致后续数据分析的精准度。

二、复选：循环往复

1.什么是复选？

复选操作不会像单选那样出现信息阻隔，也没有拨动开关那么强的视觉干扰，通常包含一个或多个选项供用户选择，其选项条件不是互斥的，用户可从中选择一项或者多项，具体情况则根据选项条件的限制而定。

1）选择一项

一些设计师将复选理解为多选，且先不论对错，笔者想说明的是，多选只不过是复选的一种选择方式。在真实的设计中，有很多场景是不设限的，我们可以将选中/未选中理解为“是/否、同意/不同意、开启/关闭……”等意思。例如，注册页面中必定存在的「用户服务协议」，单个选项可反复操作；管理系统或B端的批量操作、权限设置等，选择其中的一项也可进入下一步操作流程。

2）选择多项

强制多选一般会设定需选择数量的下限和上限。例如：首次进入某些APP时，需选择个性化定制标签，通常最少不低于3项，最多不超过6项；还有，在填写调查问卷的多项选择时，最少选中两项、不设上限等，这些就是复选中真正意义上的多选。

2.复选的使用准则

相比单选，复选需要配备提交按钮，提交后才会记录被选中的信息。对于批量性的选项操作，复选框的操作效率比拨动开关要高出许多，例如，在某些页面开启/关闭几个权限，每个权限用单独的拨动开关进行控制，完全没问题，但涉及到几十个权限的控制，这种批量操作使用复选框一定是最佳的选择，只要用户能清楚操作之后会发生什么即可。

3.常见的使用场景

1）标签选择

个性化标签选择中最为常见，在标签文字、选项数量较少的情况下，使用外观大小完全相同的标签按钮多列显示，有助于用户浏览，还能节约页面纵向空间，用浅色描边/主色填充或明暗等级来区分选中/未选中状态，部分产品还会在选中的状态上增加一个小图标（✓、+/-），区分会更加明显。这种方式切记标签不能过长，否则可能会导致文字折行或容器内很拥挤，不利于用户阅读。

2）列表选择

当选项过多、标签长短不一时，适合使用列表式选择。WEB端常见的是圆角矩形勾选填充，例如管理系统的商品列表；移动端更多则是原型勾选填充，例如购物车，当然并没有明显的界定，所有页面统一样式即可。

4.未定状态

与单选视觉样式唯一不同的是多了一个未定状态。常见于管理系统或B端，当选项存在多个子级时，只是某些子级被选中，但并未全部选中，这时父级状态尚不确定，即为未定状态。

三、拨动开关：白天与黑夜

1.什么是拨动开关？

拨动开关就像生活中控制灯泡的开关，它是在两个互斥的选项中始终存在默认值、且操作会立即生效的按钮，操作后必定是对立的选项，例如开启/关闭、是/否、同意/不同意等。

2.拨动开关的使用准则

拨动开关必须表意明确，用户在操作之前就能清楚操作后会发生什么，使用时，需遵循以下原则：

• 用于操作后立即生效的场景；
• 标签和按钮是两个分离的视觉焦点，当用户有可能产生疑惑、或标签不足以言明时，需增加辅助文字予以说明；
• 主要用于控制全局，权重较高，针对单个任务流程的控制，请使用单选/复选；
• 默认就是开启/关闭状态，若存在子级，父级关闭的同时将子级隐藏（避免置灰）；
• 当操作有风险时，必须给予明确的提示；
• 避免大面积使用，如果存在太多需要开启/关闭的条件，建议使用复选；

3.背景与文案

拨动开关的背景通常只介于两种状态，关闭状态下为置灰（全服通用），开启后为绿色，也有很多产品将其设定为品牌色，统一颜色样式即可。

辅助文案常见有两种类型，第一种为当前状态反馈，例如：获取设备通知权限“消息推送已开启/关闭”，这种反馈在应用中可灵活运用，尤其是在关闭状态下，可起到一定的引导作用。第二种为标签辅助提示，例如：操作后的好处或风险，告知用户会发生什么，提前让用户有一定的心理预期。

四、单选控件的纠葛

1.单选框vs复选框

是用单选框还是用复选框，似乎是最好界定的，笔者查阅了很多资料，得到的信息是“需选择一个选项用单选、多个选项用复选”，答案出奇的一致，这好像什么都说了（确实如此）、又好像什么都没说（是个设计师都懂），当我们仔细分析之会发现，并非仅仅如此。

在PC端遇到两个对立的选项（如：是/否、同意/不同意、通过/不通过）时，除了用两个单选项之外，也可以使用复选框，尤其是在权限控制中，必定是复选。另外，移动端注册登录流程中，用户服务协议也是最具代表性的复选框（同意/不同意二选一）使用案例。除去这些特殊的使用场景，其他大部分就直接单选。

2.单选框vs拨动开关

仅存在两个选项时，单选与拨动开关的使用，有一些设计师就将其混淆了。笔者曾遇到过这样的设计案例，有产品将性别（男/女）、O2O取货方式（送货上门/到店自取）只有两个选项的任务用拨动开关来呈现，操作后，通过开关上的滑块左右移动+文案辅助来确定当前选中的条件。笔者认为，这种方式不可取，最大的弊端就是在当前状态下，用户并不知道另一个选项是什么，需要通过猜测或试错来确定，无疑让增加了任务的完成难度，也打破了用户对常用操作的固有认知。

至于什么时候需要用拨动开关，上述3-2《拨动开关的使用准则》中有详细说明，除此之外使用单选框，能解决设计中80%的单选与拨动开关的选择性问题。

3.单选框vs下拉列表

选项较少可直接在当前页面用单选框（选择性别）、按钮（标签）呈现，当用户需要在大量的选项中进行选择时，PC端可使用下拉列表，移动端更多使用的是操作栏弹窗或跳转到新页面让用户操作。其实这方面没有明确的界限，需根据使用场景以及选项的属性根据实际情况灵活变动。

五、必备常识和使用技巧

1.选项的几种状态

单选、复选、拨动开关各自都有不同的状态，在设计之前，设计师需要清楚地知道这些状态所代表的含义以及不同的使用场景，避免后续在使用中给用户造成困扰。

2.符合用户认知的控件样式

首先，选项框样式应符合用户认知，不能为了所谓的差异化、个性化打破用户固有认知，而带来额外的认知负担。例如单选/复选常见的是圆形填充+对钩（PC端）、圆角矩形填充+对钩（移动端）两种方式，虽然这并不是唯一，但至少不会出错。虽然鼓励跳出常规的设计思维做出改变，但一切都以不增加用户使用难度、提供更好的用户体验为出发点，不然还不如不变。

3.注意对齐方式

按钮式不用多说，文字跟容器上下左右居中。列表中的对齐方式无非两种，选项框在前，文字和选项框都是左对齐，单选/复选均可采用这种方式；选项框在后，则文字左对齐、选项框右对齐，采用这种方式的单选居多；拨动开关则是全网统一，标签左对齐，开/关右对齐。

4.清晰简短的标签

选项标签需清晰简短、直接表达核心含义，尽量避免否定的表达方式，以免用户产生误解。像拨动开关这种两极分化的选项，当用户不清楚对立的选项内容时，可以使用副标题进行描述，让用户在操作之前有一定的心理预期。

5.批量选择、节约操作成本

虽然都是将选择权交给用户，但面对不同的场景，需提供一个「全选」操作，帮助用户一次完成多个重复的操作，降低操作成本。

例如：B端的内容管理，批量操作能节省很多时间，还能降低因多次重复操作产生的失误概率；C端最具代表性的有购物车、以及初次进入部分应用时的个性化标签选择。

6.触控热区的设定

针对移动端，点击区域切勿直接使用选项框的范围大小，需单独设定热区范围。大家都知道，大拇指在移动端应用中使用频率是最高的，相对来说，要有足够大（非绝对）的操作区域以供手指进行精准交互，以免无效操作或操作失误。需要将文本标签、选项框以及各选项区域均分后四周的留白都作为触动热区，操作起来就会轻松很多。

六、结语

本文笔者主要总结了单选、复选、拨动开关的使用规范及常见问题，不过设计规范只是基于产品本身构建的一个标准，为了约束后续的视觉统一而存在的规范参考。在真实的设计中，这些设计规范并不是唯一，需要根据产品的特点和使用场景进行灵活变动，设计出最适合自身产品的控件才是最重要的。

遵循设计规范只是最基础的标准，遵循的同时跳出规范的束缚才会有创意，这就离不开我们平时的积累，钻研各产品中优秀的设计细节，通过查漏补缺、扬长避短，在其他产品的亮点中找到与自身产品的平衡点并将其融合，这才是我们学习和总结的最终目的。

原文地址：能量眼球

作者：大漠飞鹰CYSJ

转载请注明：学UI网》选项篇 | 单选/复选/拨动开关的使用小技巧！

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

背景

百度搜索作为传统搜索引擎，内容浏览框架与内容消费体验都更符合图文类资源的特点。在视频化趋势下，用户搜索、浏览、消费视频的需求日益增长，原有的浏览框架导致用户在搜索后难以触达视频结果、消费时难以切换不同场景。此外在视频消费体验上还存在播放流畅性不佳、视频品质感较差等问题，用户感知未到达最佳水平。故我们综合百度自身特点与用户使用习惯，从强化认知、提升品质两方面出发，升级视频搜索全链路框架，提升搜索视频体验及品质。

一、升级视频搜索全链路框架

在对百度搜索所有视频场景梳理的过程中，我们发现用户筛选与消费视频的过程中存在筛选效率低、消费不畅快等问题：在综合搜索结果页由于其他资源类型的存在，用户很难畅快消费视频；视频结果页虽能满足用户消费视频的诉求，但该路径的用户认知较弱，操作成本也较高；此外横竖不同形态的视频各有独立的结果页与落地页，消费场景割裂。为强化用户对视频搜索的认知，降低视频触达成本，我们对视频搜索全链路框架进行了升级。

1.【负一楼框架】前置满足，畅快浏览

综合搜索结果页是用户最先触达的场景，为平衡用户畅快浏览视频与消费综合搜索结果的诉求，我们开拓了负一楼平行框架，即上层页面展示综合结果，下层负一楼页面展示视频结果。当用户搜索与视频关联度较高的搜索词时会自动进入负一楼页面，用户可上滑浏览视频，也可上拉或点击上层面板返回综合结果。设计实施过程中，我们围绕“打造可畅快浏览的视频消费框架”的目标，第一步定义页面框架结构，第二步打磨感知体验，第三步辅助用户认知。

1-1 定义框架结构

首先明确页面层级，从下至上分别为视频结果层、综合搜索结果层与全局框架层。接着划定视频结果与综合结果的布局占比，用户消费视频结果的速度与滑动频率均高于综合结果，为保证视频浏览的顺畅感与操作效率，需保证视频占比尽可能更多。所以综合结果面板仅露出tab，不展示搜索结果，让用户的注意力更聚焦于视频内容的同时保证用户可以来去自由。

1-2 打磨感知体验

确定框架结构后我们分别从视觉层与触觉层打磨感知体验。历史实验数据表明，深色系的背景色比浅色系的背景色更能帮助用户聚焦于视频内容本身，从而提升视频消费数量与时长，于是我们在负一楼通过较深的氛围底色带给用户更沉浸的消费感知，同时也与综合结果形成对比差异，加深用户记忆。在手势切换框架的过程中存在触发框架移动的临界值，当拖动位置到达临界值时会产生1次震动反馈，提示用户此时松手后框架自动切换，以降低用户认知成本。

1-3 辅助用户认知

为辅助用户建立对负一楼新框架的认知，我们通过三阶引导在不同时机引导用户进行不同操作。当一个新用户进入负一楼后【引导1】会通过面板上下弹动的效果引导用户上拉面板，帮助用户理解框架结构，引导用户进入综合结果；进入综合结果后【引导2】通过页面自动下拉的效果帮用户认知返回路径；当用户重新进入负一楼且一段时间内无操作【引导3】会引导用户上滑浏览视频。这三个引导紧密配合，有效辅助用户快速建立全新的使用习惯。

2.【五合框架】强化认知，操作提效

为养成用户视频垂直搜索的认知，缩短综合结果页到视频tab的路径，我们将原有的19个tab框架，精简为仅外露5个tab的五合框架，同时视频tab固定在各频道首位，形成强聚焦，减少信息干扰，降低筛选成本；新增横划切tab手势交互，用户在搜索结果页轻松一滑，即可快速触达视频tab。双管齐下降低用户视频搜索成本，养成百度视频搜索认知。

3.【融合框架】横竖融合，场景打通

在不同资源的分发方式上我们也做了一些改变，过去横版视频由【视频结果页】承载，竖版视频由【小视频结果页】承载，需手动点击tab进行切换，而对应的2个落地页也分别独立，互不打通。随着中视频的发展，横竖视频的时长与内容类型越来越接近，消费场景也逐步趋近。而原有框架消费场景割裂，操作成本高，消费路径长，已不足以支撑用户便捷筛选浏览的需求。于是我们将两个独立的tab合并为视频频道下二级tab，并将两个独立的落地页进行融合。

3-1 融合结果页

场景融合后二级tab供用户初步资源筛选；接下来新增排序功能，供用户进一步针对时效、热度筛选；最后tag search供用户深度精细化筛选，最终通过三层递进式筛选得到精准的需求满足。同时加入智能化交互反馈，跟随用户手势预判当前阶段用户诉求，决定二级tab、排序、tag search功能的展开收起。

3-2 融合落地页

结果页通过合并二级tab有效缩短了用户路径，而落地页作为视频消费的主要场景也存在着消费场景割裂的问题。于是我们将原有的两个落地页进行了打通融合，用户可在一个落地页混合浏览视频，此外还拓展了横屏分发新场景，用户在横屏也可上滑浏览推荐视频。经过以上一系列升级，搜索视频的分发效率进一步提升。

二、提升搜索视频体验及品质

百度搜索结果为多类型资源混排构成，随搜索视频化战略转型，视频资源在结果页占比大幅提升，视频既需遵循整页基础设计规范，保障用户搜索体验一致性；同时又需持续打磨，提升视频资源独有的播放体验品质感。所以如何在保障整页消费体验基础上，最大限度的提升视频品质感是我们面对的一大难题。基于此我们采用两步走打法，第一步视频资源播出来，第二步品质体验提起来。

第一步：视频资源播出来

原搜索结果页各类资源采用统一模版结构，资源展示趋同，视频相关正向描述元素不突出，用户快速筛选、识别视频资源的成本较高，视频播放器较小且不支持自动播放，需点击进入落地页观看消费，整体操作成本较高，导致用户消费路径变长，效率降低。我们将问题归纳分为3类，并逐一击破。

1. 强化视频展示

为解决视频展示不突出，用户难以在众多资源中快速识别的问题，我们优化视频资源卡结构，将播放器按照百度搜索栅格规范放至最大化，强化视频展示。

2. 视频自动播放

同时引入视频自动播放能力，将消费场景前置，缩短路径，使用户方便快捷的在当前页观看视频。

3. 信息合理布局

视频能力升级后，多个引入视频载体的业务同步升级。首先我们对引入视频资源的11个业务进行全面摸底，将信息归纳为两大类：1、通用基础信息   2、定制化信息。接下来制定信息展示原则：通用基础信息为必备，保证视频核心信息传达完整性；定制化信息根据各业务需求自选，确认特殊诉求兼容性。最后根据用户观看和使用习惯将功能、信息进行分区，保障用户统一认知，提升多业务引用效率及后续可拓展性。

第二步：品质体验提起来

视频升级为自动播放后，用户对视频播放、浏览体验的要求随之提高，细微的不顺畅也会被肉眼放大为强烈的卡顿感。故此时升级视频播放品质变得至关重要。我们根据用户消费行为，将优化分为两个维度：单一播放和联动浏览。再将两个维度细分为三种场景：1、单一视频在单页面内的播放；2、单一视频跨页面浏览；3、多视频在单页面轮换浏览。最终确认两大优化方向：播放体验流畅性提升、浏览体验顺畅性升级，并制定针对性解法。

1. 播放体验流畅性-信息交互动效升级

数据研究表明，用户观看视频的深入程度，可划分为3个阶段，我们针对不同阶段精准匹配信息交互规则。第一阶段视频未播放，用户在众多结果中粗略筛选，应尽可能全面的展示信息，辅助用户决策。第二阶段视频起播用户开始观看，此时展示操作功能，并突出展示正向信息，吸引用户点击。第三阶段视频播放5秒以上，用户进入沉浸观看状态，此时各类信息退化，保证清爽、沉浸的消费体验。最后增加信息精细化动效，规避卡顿感，保证视频播放流畅性。

2. 浏览体验流畅性

针对单一视频跨页面消费场景，续播精准度和衔接顺畅性至关重要。针对单一页面内多个视频轮换播放，如何在不影响用户浏览其他资源的前提下，保证多视频轮换播放顺畅性也是重中之重。视觉和听觉是用户获取视频内容的感官，所以视频播放画面、声音顺畅性成为了浏览流畅性的关键因素。所以我们从体验视角出发，建立搜索场景各页面播放、声音双联动机制。

2-1 视频播放联动

首先是视频播放联动，我们将视频播放拆分为起播、续播、连播3部分，分析现状并找出核心问题点。由于页面资源混排，视频化未发力前遗留一系列问题：视频起播门槛高、优先播放逻辑混乱、同一视频播放进度各页面不联动，视频消费不连贯等，已严重影响视频搜索体验与品质感。

• 降低起播条件，视频外露比例由70%降低为超过30%，播放器可视区域满足用户可真实观看条件即起播，强化视频搜索认知；
• 升级优先播逻辑，当页面存在多个视频时，播放器外露比例PK，外露比例大的优先播放，符合用户预期保障观看体验；
• 新增手势联动，当页面存在多个外露比例相同的视频时，根据手势滑动方向判断视频播放情况，智能预判用户观看意图；
• 优化续播交互，支持视频暂停在当前帧，二次起播不再展示封面；点击跳转落地页后返回精准续播点击过的视频，提高消费及分发效率；
• 新增自动连播，在纯视频浏览态场景下，当前视频完播后自动连播下一条，减少操作步长保障视频消费流畅性。

2-2 视频声音联动

然后是声音联动，原搜索场景内各页面以及搜索结果页各视频，声音状态各自独立互不影响，而声音作为视频传达的核心内容之一，状态不联动导致用户针对声音频繁重复操作，各场景割裂感强烈，视频浏览体验极差，故在视频搜索场景下升级声音联动机制。

• 分场景定状态：综合搜索结果页为筛选浏览场景默认无声状态，融合落地页为沉浸消费场景默认有声；
• 交互智能响应：用户有对声音的主动交互行为（佩戴耳机、调节物理声音按键、点击声音按钮）后，切换为有声播放；

• 页面声音联动：在综合搜索结果页、视频结果页任一页面调节声音后，页面发生滑动或跳转，声音状态联动跟随。

写在最后

在搜索视频化进击的过程中，我们从体验视角出发，通过对视频搜索全链路框架的升级，强化了用户视频搜索认知，降低了视频触达成本。通过对视频自动播能力升级、播放器信息布局的统一、播放与浏览体验流畅性的打磨，搜索视频品质感全面升级，用户体验也更加细腻、流畅、自然。经过以上一系列优化后，用户浏览消费视频的数量和时长等指标均显著增长。未来视频化方向的角逐会愈发激烈，我们将进一步探索百度搜索自身特色，以期做体验最好的视频搜索。

原文地址：百度MEUX（公众号）

作者：百度APP用户体验

转载请注明：学UI网》视频搜索体验价值论

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司