合作咨询

一、全文速览图

虽然 AI 的增长速度很快，绘图能力持续在加强，但它们生成的界面始终只能满足“洋人”的市场，而我国的 UI 视觉发展却走出了一条独立的路线，不仅当前的 AI 做不好，国外的 UI 设计师直接上手也做不来（也和他们的水平有关）。

但这不是 AI 和国外设计师的问题，而是国内初学者的问题，因为缺乏这种组件设计能力，是很难应对进阶设计需求的，也无法适配大厂的相关工作岗位。

所以我们今天就要围绕一个练习案例，来解释组件设计的不同模式和进阶设计要点是什么。

二、组件的基本框架与样式

在 UI 设计发展的过程中，形成了各式各样的组件，有的组件已经成为界面设计中的基建，有明确的命名和设计样式，比如瓷片区、提示弹窗、动态卡片、用户列表、底部导航栏等。

还有一些组件是“临时工”，它们可能也经常出现在我们的视野里，但没有固定的命名，也没有完全固定的设计样式，比如专题模块、横向列表、会员卡片、排行榜等等。

在界面设计过程中，设计基础的组件，就是重新“临摹”一遍它们，而设计这些没有固定样式的组件，才是真正的“创作”过程。因为没有完全一致的参照标准，就需要设计师自己做出判断和构思，完成最终的设计。

特殊组件样式的设计，就是 UI 设计初学者前期最大的挑战（没有之一）。

想要提升组件设计的能力，包含三个步骤：

1. 大量收集组件的案例并进行归类

2. 掌握正确的组件框架设计方法

3. 掌握更多丰富视觉细节的设计思路

第一个步骤容易理解，就是多收集组件设计案例，然后整理到自己的花瓣或 Eagle 中。它的核心目标是增加我们对组件的认识和眼界，毕竟在设计过程中设计自己没有见过的东西是很困难的，所以积累得越多，设计起来也就越高效。

第二个步骤就进入到最关键的阶段，因为特殊组件虽然有极大的设计发挥空间，但不代表组件就得设计成那个样子。我们可以把组件的设计分为两个大类，一种是非常简约、基础的设计类型，另一种则是复杂、花哨的类型。

简约的设计虽然看起来简单，但不代表它们就没有门槛，如果不经过专业的训练同样设计不好。而能做好这种组件的设计就意味着能保证界面视觉的下限，虽然可能不出彩，但不会出错。

简约的组件设计主要关注以下要点：

1. 对内容元素进行正确、合理的排版

2. 使用合理的元素尺寸和字体参数

3. 使用合理且统一的内/外间距

4. 选用合理优质的图标和图片素材

简单来说就是把元素以合理的尺寸、参数、间距，摆放到合理的位置，并添加合理的图标和图片素材。这么说可能不好理解，我们就以一个学员的作业练习为例，来做个简单的演示。

下面是练习的界面原图：

视觉的问题分析起来有很多，但只分析表层问题作用不大，核心问题就是组件的基础设计质量不足，引发整体页面的效果不佳。

所以我们以最基础的组件设计标准来优化它，重新调节元素的尺寸、参数、间距，来获得一个最基础的调整结果。

顶部组件优化：

会员开卡卡片优化：

特效推荐模块优化：

今日特卖模块优化：

商品卡片列表优化：

最终对比：

组件只要能按标准要求进行输出，即使不花哨，界面的视觉效果也一定会是及格的。但如果这个标准没达到，那么往上面叠加任何多余的效果、创意、图形都是错的……

三、组件的进阶设计思路

组件做得花哨的原因，是简约的设计过于平淡，不足以获得用户的关注，所以要往花哨、不规则、非常规的方向去做，才能更好地吸引用户的注意力（国内的互联网产品运营本质上都是在争夺用户的注意力）。

这种设计模式使用的就是逆向思维。即常规情况下应该如何做设计的，在当前场景就偏不那么做，用充满反骨的逻辑去破坏、挑战原有的模式。这是整个设计行业的通用思考逻辑，但都需要建立在具备一定基础的情况下才适合使用，否则设计师根本不知道自己在破坏和挑战什么。

回到组件设计中，如果我们要使用逆向思维来完成设计，那么核心的优化点可以总结成 6 个方向：

1. 边缘轮廓的异形处理

2. 特殊字体标题的应用

3. 悬浮标签/图标元素应用

4. 镂空突出的图片元素

5. 渐变和图片背景应用

6. 特殊视觉效果的添加

方向 1：边缘轮廓的异形处理

轮廓异形指的就是图形的轮廓没按正常的情况使用，比如一个矩形四条边是直线且有四个直角，异形处理可以让其中的一个边添加弧度，或是把某个角给削掉或凹进去。

比如会员开卡的卡片，包含了内外两层矩形，我们可以把外矩形右上角做成凹陷形状，并添加其它视觉装饰元素，在内矩形上方添加一个箭头，就是异形化的处理。

方向 2：特殊字体标题的应用

就是使用非系统自带的特殊字体来做标题，这类字体通常是设计感比较强的标题型字体，可能用的是现成字库也可能是自己设计的，会比用默认字体更突出。

所以我们在这个组件内就使用官方自己的 VI 用字，作为卡片的标题。

方向 3：悬浮标签/图标元素应用

常规 UI 元素的排列是横平竖直的，而悬浮元素是可以跳出这个要求的，所以一些比较小的元素如标签、图标等，就可以让它们悬浮且旋转起来，制造更强的视觉冲突。

在这个案例中，我们在按钮上方添加一个优惠信息的小标签，而不是直接写进按钮标题内。

方向 4：镂空突出的图片元素

常规的图片通常是填充在一个矩形、圆形内，但我们可以选择把图片背景移除，然后让图片内的主体元素故意突破矩形或者圆形的限制，形成更好的空间感。

在这个组件内，每个卖点图标虽然是圆的，但里面的图标图形可以突破边缘展示出来。

方向 5：渐变和图片背景的应用

简约的 UI 设计肯定是以纯色填充为主，但想要视觉效果丰富，我们就可以添加渐变或者背景图片进去。而渐变的添加肯定不是就给两个颜色用简单的过渡，使用图片也不会就随便贴张摄影图再给个透明度…

针对组件的外矩形，我们就可以一起添加背景色和图片元素，来组合成更细腻的效果。

方向 6：特殊视觉效果的添加

特殊视觉效果就是非扁平的其它特效，如拟物、轻拟物、毛玻璃、玻璃拟态、3D、2.5D、动态模糊、水晶质感等，都是特殊的 UI 视觉效果，可以选择适合的元素进行添加，增加画面的丰富感。

在这个案例中，我们对内卡片做了透明度渐变和背景模糊效果，以及增加了顶部的高光，同时也给按钮添加了一定的轻拟物效果，来提升视觉的质感。

时间关系，这个组件设计的初步修改也就做完了。除了以上提到的最常见的 6 种设计方法外，还有很多其它的技巧可以尝试，这需要靠大家自己去挖掘了。进阶组件的设计更偏向平面设计，有无穷无尽的技巧和创意可以实施，但效果好不好要靠设计师自己把握。

在前期，能熟练运用这 6 个技巧就足够了，而掌握它们最快的方法，就是收集相关案例并临摹它们。

四、结尾

组件设计还是最考验 UI 设计师基础能力的部分，这部分能力 AI 替代不了。

在目前的市场环境里，初学者开始过度依赖 AI 的背景下，反而可以让具备古法做图能力的设计师更有竞争力。毕竟他们用 AI 做的事情你也能做，而你能画的界面他们画不明白……

图文来源于网络，侵删。