课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认真做教育 专心促就业
组件化设计是2018年中被提及很多次的一种设计方法,而今天我们就一起来了解一下,关于组件化设计都有哪些设计库可以使用。
1. Text style
在设计包含大量文本的界面时,许多图层拥有相同的文本属性。将它们保存为 Text Style,即可复用这些文本属性,无需逐一设置。
Text Style 用于设置文字规范,涵盖字体、字号、字重、颜色、字间距、行高² 、段间距等内容。
2. Layer style
将一组风格元素保存为 Layer Style,这些元素便可复用在文档中的任何图层。
Layer Style 用于制作颜色规范,涵盖填充颜色、描边颜色、内外阴影、模糊效果等内容。
3. Symbol
作为 Sketch 的一项主打功能,Symbol 可以在画板、页面甚至其他 Sketch 文件中复用。Sketch 52 后,新功能令 Symbol 更加灵活化、轻量化。
可复用:支持画板、页面、多个文档间的复用
可嵌套:Symbol 内可以嵌套多个 Symbol
可替换:Symbol 可替换为同组的其他 Symbol
4. 英文命名
之所以使用英文命名组件,有以下几点原因:
方便设计师后期修改、整理文件
团队内部易达成共识,方便协作
节约开发成本,减少不必要的沟通与重新切图情况
5. 组件库的构建思路
建立组件库之前,先来谈谈构建思路:解构、拆分、重构。
「 解构 」
通用类设计规范包含:基础规范、图标规范、组件规范,一步,将这三类规范一一解构。例:基础规范解构为文字规范、颜色规范、布局规范…
「 拆分 」
将解构后的规范拆分为基本的元素 Symbol,基础规范与图标规范到这一步就完成了。例:文字规范中,拆分为标题、副标题、正文、辅助文字、标签文字…
「 重构 」
重构或称为 Symbol 嵌套⁵ 。用于制作组件规范,将拆分后的元素 Symbol 组合为模块 Symbol,再将模块 Symbol 组合为组件 Symbol。
6. 利用Symbol组件库建立设计规范
其实,一套优秀的Symbol组件库 = 一套简洁易用的设计规范。组件库中不仅涵盖了常用组件,同时也包含 Text Style 与 Layer Style,三者共同组成了一套设计规范。
【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。