掌握这8个特征，教你快速分辨B端优秀界面和飞机稿的区别！

今天的主题是关于 B 端初级设计师作品集中普遍存在的一个问题 —— 作品中飞机稿浓度过高，这会让作品集显得非常的失真、学生气、不专业，从而使获得的评价急剧降低。

更多作品集设计技巧：

所以从一开始认识这个问题，才不会花大量的时间输出无效的结果，提高作品的整体质量。

B 端飞机稿的特征识别

飞机稿在过去是对非正式使用的概念稿、练习稿的统称，是广告公司比稿中放飞自我的方案，相对来说是一种中性词。而在今天的 UI 行业中，飞机稿是指无法被前端实现的外行的、表面的、异想天开的界面设计案例，带有明显的贬义。

要牢记一点，飞机稿不是对 “没有上线的”或 “非真实项目” 的界面称谓，而是指那些完全就不符合真实项目需求，一看就无法上线的 “外行的” 的设计。

当我们准备作品集项目时，往往都要对原界面做出大量的修改优化，所以不管它们原来有没有上线，都很容易做出“飞机稿”，让项目的观感大打折扣。所以，想要避免这个问题，就要先了解飞机稿的主要特征有哪些。

1. 大圆角的使用

第一个最常见也最显著的特征，就是大圆角的使用，即界面中的大小模块都大量使用超过 12px 的大圆角，使得页面看起来非常的圆润。

圆角是最容易塑造风格的设计细节，但问题是 B 端界面多数应用在比较严肃的场景，过大的圆角会让整个界面的观感变得“卡通”、“可爱”、“诙谐”，和使用场景格格不入。而且大圆角设计风格需要比较多的留白，自然对信息的承载量是很低的，也非常不适用信息较为密集的管理系统。

在B端设计中，大圆角属于可以完全避免的设计要素，能用的场景非常少，但是不用就不会出错。所以推荐吧圆角全部控制在 4px 左右是最安全且理想的。

2. 非主流配色

这个意思就是使用的配色完全和行业特征脱轨，虽然它们可能看起来视觉效果还不错，但明显不适用于相关的场景。

政治正确上来说 UI 设计中色彩是不受限的，但现实世界里B端行业对配色却有一种隐性的约束，因为 B 端产品本质上是一种商业工具，而工具就会遵循一定的行业标准。比如回想螺丝刀、钳子、扳手等工具，是不是主要的配色就那几种，我们不会把它和彩虹糖的色彩联系到一起。

B 端的配色不能往一种非常个性化、平面品牌化的方向发展，因为过大的差异对真实的用户只会带来困扰（你打开新买的工具箱里出现彩虹糖配色的螺丝刀和钳子等）而不是惊喜。

3. 插画/3D 元素滥用

就是在 B 端界面中加入了非常显眼的插画或者 3D 元素，而它们对产品使用没有什么实际的加成。

在一些大型 SaaS 项目中，确实会有加入插画或者 3D 元素的需求，那是因为大型 SaaS 是需要做营销来刺激用户消费的，所以设计一些吸引眼球的营销元素是有客观要求的。

除此之外，用户在实际使用 B 端产品的过程是不太想看到和目标不相关的视觉元素的，就像我们在进行 Mac 或 Windows 的操作过程中，弹出大量卡通或 3D 图形只会让你觉得厌烦。所以对于非 SaaS 营销类元素，不要额外添加一些没有实际作用且非常显眼的插画或 3D 元素。

4. 复杂的视觉细节效果

即增加了一些包含丰富视觉样式的细节，比如玻璃效果、轻拟物、液态玻璃等，这些样式的加入可以让界面的展示效果看起来更有“设计感”，但它们同样在实际项目中缺乏正面反馈，除了用户不感兴趣外，还会额外增加开发成本。

过于复杂的视觉效果都需要前端开发的技术支持，多数效果往往无法被实现出来，而另一部分也要在真实项目中有充分的理由才会去设计和实施，如果设计出这类效果，很容易在面试环节被问它的实现过程，怎么给前端切图的，实现的效果如何等。

所以没有在项目中落地或想得清楚实现方式的效果，就不要轻易添加。

5. 浮夸的图表设计

浮夸的图表就是完全不符合正常样式多了很多额外装饰的图表，反而影响了我们查看图表的目标和效率。

图表一直是表盘页中最重要的部分，但图表存在的意义不是一个视觉装饰，而是对数据的图形化展示。做图表是要想清楚用户想看到数据怎么表现出来，而不是只让它变得“酷炫”。

同时，多数项目的图表都是使用开源库搭建的，复杂的图表样式意味着要独立开发，这在正常项目中是基本不可能的。所以还是会出现做了这种设计，在面试环节就会被追问，制造不必要的麻烦。

要把图表当成一个用来查看的对象，而不是欣赏的对象。尽量使用朴实、详尽一点的设计远比浮夸的视觉造型看起来更落地更专业。

6. 空洞的字段信息

这里指的是界面中包含的信息量很少，且关键字段信息缺失或使用就完全不符合页面的实际需要，看起来就像编的。

作为专业的工具，B 端产品中包含的信息应该都是实际业务场景中需要的。如果展示的信息都是一些非常基础、不相关的，那么立马就会产生不是真实项目的认识。

尤其在表盘页和表格页，即使真实项目中填写的字段信息少，也建议自己多做一些补充。而补充的方式可以从同类型的其它页面中挖掘。在合理字段应用上投入足够的时间，远比扣视觉效果重要。

7. 激进的页面框架

页面框架即页面的布局形式，有一些飞机稿的设计会过度追求差异性，从而设计出完全不同的页面构造，比如导航栏做在右侧，工具栏做左下角，内置页面标签做垂直的等的等等。

这种设计可能对外行会有很大的吸引力，但内行都会知道主流的框架形式是经过验证行程的，太激进的设计如果没有实际反馈或数据验证，是无法说服他们的。

8. 复杂的交互动效

部分新人会被一些酷炫的 B 端页面动效吸引，所以也会自己制作这样的效果加入在线展示中（PDF 放不了）。

在 B 端开发特殊的动效是非常奢侈的事情，因为开发资源非常有效，而复杂的动效做起来又很麻烦。除了麻烦外，还是回到老的问题上，那就是用户想不想看见这些动效。

当动效作为一个视频观看的时候，我们可能觉得很有意思有高大上，但当你真正高频去操作这些界面，每次加载界面后一堆组件的动效轮番进行轰炸，你就必然会厌恶这些效果。所以网上酷炫的B端页面特效一大堆，很多特效也不是做不出来，但没有一个成熟的项目会这么做，原因就是用户和市场都不需要它们。

所以项目本身设计过程中没有出现要用动效表达的交互，就不要强行加动效，尤其是表盘页的组件加载或图表的加载动效。

以上就是对 B 端界面常见飞机稿设计细节的解释，你们可以随意找个 B 端界面收集比较多的花瓣画板看一遍，能不能一眼分辨出哪些案例是飞机稿，以及它们为什么是飞机稿：

结尾

产生飞机稿的核心原因，来自于设计师对 B 端界面认知的不足，我们把它们当成拿来 “看” 的平面图，而不是拿来"用"的可交互软件界面。

新人先学会识别什么是飞机稿，才不会陷入到这些没有实际价值的方向去学习或实践。至于该怎么做出专业、可用的界面，就是我们后面讨论的话题。

我们下篇再贱~

欢迎关注作者的微信公众号：「超人的电话亭」