swing设置组件分割线_【经验教程】UI设计师进阶之组件化设计思维

- 写在前面 -

作为一名合格的UI设计师，必须具备组件化设计思维。Sketch 47 后增加了 Llibraries 的功能,使用Sketch Libraries的好处有两大点：

01 Libraries可供多人及多项目调用，设计师通过Libraries可快速了解规范及制作界面，协同办公提高工作效率

02 规范设计流程，树立组件化设计思维

“2+1”了解Sketch Libraries必备基础知识

「 2步实现Libraries 调用 」

Step 01：新建UI Libraries-01 > 创建symbol > 存储

Step 02：将UI Libraries-01添加到新文件的资源库中即可调用

是不是非常easy呢？?

「1张图熟悉“原子设计理论”」

Brad Frost的《原子设计论》将原子设计拆分为5个不同的阶段：原子 > 分子 > 有机体 > 模板 > 界面。

简单理解就是我们在构建组件库的时候应从颗粒度最小的元素出发，层层递进制作我们的界面。

在设计时，我们可以发现颜色、文字、icon这三大元素在界面中使用频率最高，因此一般我们将其作为组件库的原子元素。当然因为项目的特殊性，某些情况我们也会将背景的不同圆角样式等其他控件样式纳入原子元素，设计师可根据实际情况自行调整。

然后由基础元素构建其他UI组件，比如toast、tooltip、input、btn、form等，最后通过组件样式组合构建我们的界面UI。

制作过UI设计规范小伙伴应该不难理解这点，没有接触的小伙伴可以多看一些相关的设计系统奥。可以参考一些优秀的设计系统来构建自己组件库。

?? [Design Systems大汇总] 

https://github.com/alexpate/awesome-design-systems

原子元素构建

原子元素的构建是Sketch Libraries最基本的点，下面笔者以颜色、文字、icon这三大元素进行实例讲解。

「 创建颜色 / 文字样式 」

(颜色样式创建)

根据制作的规范来确定颜色及文字的样式，将其统一命名并创建外观样式即可。

(文字样式创建)

这里的命名我们遵循功能 -文件夹名称-图层名称的规则。通过“/”来进行分类，sketch会将其作为组的分隔符号。

例：color/grey/name

在设计过程中，先确认界面主要用色，然后调整颜色的变量形成色板组成颜色体系。最后将颜色统一创建样式便可实现快速调用。

(GitHub Primer /Color system)

「 创建icon 」

(创建icon的symbol)

将画好的icon添加颜色，这里的颜色一定是需要调用我们前面创建的颜色样式，后期调用icon时才可以实现颜色替换。

(调用并替换icon样式)

当我们在绘制icon时只需要创建一个基础样式的symbol，不需要把不同颜色的icon都添加为symbol。我们后期在绘制界面时可根据需求替换icon的颜色，这样做可以减少文件内存同时方便我们查找symbols。

 组合样式的构建

相信每个小伙伴都不离开微信，聊天占据了作为宅女的我50%的休闲时间 。

那么了解完基础样式的构建，下面我们将以聊天界面为例，使用Sketch插件Paddy插件及Sketch中的Resizing功能设计组合样式。

「 对话弹出样式组件设计 」

(对话弹出样式组件设计)

对话弹出样式由背景+文字构成，我们确定好制作的样式，选中两个图层利用Paddy插件设置参数即可。

关于Paddy的使用，网上已经有很多相关教程，这里就不作赘述。

?? [教程]

http://www.xueui.cn/tool/automatic-typesetting-plug-in-paddy.html

该方式同时适用于tooltips、tag、tab等组件的样式设计，这会使你操作更加便捷奥。

(Ant Design / Tag)

「 音频弹出样式设计」

(走心的微信聊天界面截图)

聊天时发送音频的长度会根据录音长短而变化。如果当我们做聊天时不想每次都手动调整间距，该如何操作呢？

(对话界面音频弹出样式组件设计)

这里的非常简单，只需要使用Sketch中的Resizing功能即可

因为Resizing主要针对组内图层操作，所以建议在制作symbol时，选中画板并勾选缩放时调整内容大小，这样可以减少画板的打组操作。

在制作时候，因为某些情况不能够完全满足效果，可以在实际操作中，根据情况调节。比如在设计音频弹出框样式时，我在左侧时间下添加了透明的图层以达到横向拉动不变形的效果。

[小声哔哔：太机智了我]

「 调用组件制作界面 」

(界面调用组件示例)

制作好一些组合的symbols，我们就可以通过组件的调用快速的绘制了聊天的界面。通过上述方式，我们还可以根据项目需求制作更复杂的组件样式，比如一些重复出现的列表等。

(界面调用组件示例)

 敲黑板，制作时请记住以下2大点

「 有源可溯 」

大家可以看到示范demo中，每一个元素都是源自我们的UI Libraries，同时利用Resizing进行了样式自适应调整。所以我们要做到设计中的有源可溯，这里的源就是我们的Libraries中的组件及样式。这样做的好处是能够有效的规范我们的设计，同时在有需要调整的时候能够快速调整，提高工作效率。

「 灵活性 」

灵活性是什么呢？

大家可能会想，当我们确定了UI Libraries，就不能调整了吗？

我们设计的过程中，应该先出完所有的组件样式才开始设计吗？

NO，这里我们应该学会弹性设计。

虽然在构建libraries的时候，我们需要遵循逻辑和理性层层递进构建我们的组件库内容。但是在设计的过程中，我们更加需要弹性的设计，根据实际项目情况调整Llibraries。一般来说可以先出一些主界面的样式，确定我们的风格及相关规范，然后再在边制作的时候慢慢完善我们的UI Libraries。要不然脱离项目脱离实际的创建Llibraries并没有意义。

-------------------------  可爱的分割线 (๑•̀_•́๑)  -------------------------

文章参考 ：http://atomicdesign.bradfrost.com/