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

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

一、错误提示

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

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

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咨询、用户体验公司、软件界面设计公司