如何输出一份完整的 UI 组件和设计规范

    为了方便前端同学开发和避免设计同学的重复工作，在 sketch 中把需要重复使用的设计属性都建成了组件。下面是根据之前做的一个项目整理出来的规范。如有变化需要设计同学及时更新和维护。 欢迎交流。

补充：所有组件中前端同学不可测量的间距都需要进行标注或用透明背景来区分。

可参考资料

http://sketch.im/video/34 组件的复用讲解

http://sketch.im/video/40 智能缩放功能讲解

http://sketch.im/video/43 Sketch 47 Libraries 使用教程

文件所在所在位置： 

 

基础组件

一、色彩的整理

  页面中所有色彩都列出整理两套。一套给前端同学看，一套自用。

（1）给前端同学看的如图 1-1-1，包括颜色命名、具体色值、在高保真视觉稿中的具体应用名称。

图 1-1-1

（2）自用的如图 1-2-1，组件命名为“填充色/颜色、在页面中具体应用名称”，加上在页面中具体应用名称是为了在使用时一目了然。 

应用：你所需要替换色彩的组件中，例如：icon、button 中。

 

图 1-2-1

二、文字的整理

（1）字体的整理，如图 2-1-1 。

图 2-1-1

（2）文字的应用。结构包括：名称、在页面中应用的例子、字体、属性、大小、色彩。如图 2-2-1 。

图 2-2-1

三、icon 组件

一共分为两套 icon ，一套给前端同学看，一套自用。（特殊 icon ，例如某个特有的icon可分一套放在 “export icons/icon“ 组件中 ）。

也可用 iconfont ，具体可参考 https://ant.design/components/icon-cn/ 

1.尺寸规范

尺寸要求都在24*24以内以图 3-1-1 内的形状为参考线。

图 3-1-1

2.icon 内部格式

（1）给前端同学提供的 icon

命名: 组件命名为 “export icons/icon 名称 ”

内部结构：所有图形合并成一个图形（如图3-2-1），颜色统一为灰色（例如：#999999），要求除了填充颜色无任何属性。

图 3-2-1

（2）设计师自用的 icon

命名：组件命名为 “icon/icon 名称 ” 或者 “button/button 名称”

内部结构：填充颜色作为组件，icon 作为底层蒙版，这样可以灵活更改 icon 的颜色（如图 3-2-2）。

图 3-2-2

3.icon 样式

在设计中 icon 的样式可按照分类来建立组件。

结构：icon+样式。大小可根据自己所需调整。如图 3-3-1。

图 3-3-1

四、button 组件

button 种类和状态（默认、hover、点击、加载中、不可点）如图： 4-1-1。

图 4-1-1

其他类似 icon 的 button 组件规范可参考 icon 组件。

五、输入框组件

包含输入框基础组件和组件的应用。

（1）输入框基础组件

命名：输入框/状态

状态：默认、输入时、输入完成、错误、不可输入。

结构：文字部分、输入线框部分、错误部分。如图 5-1-1。

图 5-1-1

（2）输入框基础组件的应用

结构：输入框组件和文字、icon、图片等结合使用。（可直接切换输入状态节省设计时间和避免重复设计。）

图 5-2-1

补充：用了随意缩放功能来固定输入框组件内部文字的位置，可随意拉长缩短输入框长度。如图5-2-2。

图 5-2-2

六、list 组件

所有需要给前端同学看的 list 样式状态放在一起，并进行标注（类似 list 可在跟前端同学沟通好的情况下标注第一个，并隐藏标注组，方便设计同学使用和前端查看）。如图 6-1-1。

图 6-1-1

其他根据设计页面所需同类 list 组件可根据自己习惯单独展示，不影响前端同学查看 list 组件又方便设计自用。

七、下拉菜单组件

结构：背景、下拉菜单默认状态展示、下拉菜单选中状态展示。

把背景和选择状态都做成了组件，好处是更加灵活的使用下拉菜单组件（可根据选项数量和宽度来调整）。文字部分也用了智能缩放。需特殊注意的在组件中表达不出的可在组件旁边进行标注。如图 7-1-1。

图 7-1-1

应用：把不同情况的应用方式都整理出来，有需要注意的地方进行标注。如图 7-1-2

 

图 7-1-2

八、进度条、参考线

1.进度条

结构：进度、进度背景。（进度包括填充色和进度底色，填充色的宽高为进度的最大宽高）如图 8-1-1。

图 8-1-1

应用：需要进度条的地方，如卡片、列表、操作步骤。可灵活改变色彩、宽、高。

2.参考线

结构：详情可参考进度。如图 8-2-1。

 

图 8-1-1

九、表格

结构：标题栏、list、标注。如图 9-1-1。

图 9-1-1

十、TAB 导航

状态：选中、默认。文字部分和在整体宽高中水平垂直居中对齐。可改变组件宽高，此组件宽高为最大宽度并智能缩放文字和底部线。如图 10-1-1

图 10-1-1

十一、弹窗

分为两个尺寸的弹窗，内容区域宽度低于 300px 时用小尺寸弹窗，其他用大尺寸弹窗。

结构：标题、内容区域、底部区域。

应用：在页面中应用时内容区域需要加个透明背景以便前端同学测量间距。

整体页面可选择有无底部区域，可随意调整宽高。如图 11-1-1。

图 11-1-1

十二、阴影

阴影 1 （图 12-1-1）

色彩：黑色，不透明度 8% 。

属性：0 2 6 0 和 0 2 4 0 。

应用：应用于顶部导航栏、展开下拉菜单、提示信息、退出和修改密码背景。

图 12-1-1

阴影 2 （图 12-2-1）

色彩：黑色，不透明度 16% 。

属性：0 2 6 0 和 0 2 4 0 。

应用：弹窗区域背景。

图 12-2-1

特殊组件

一、卡片

卡片整体由多个组建组成，可替换内容都为单独组建，方便切换为卡片不同状态，命名、分组可参考图片 13-1-1 。

图 13-1-1

二、成功、失败

全局提示（点击下一步或保存之后）如图 14-1-1 左侧，右侧为弹窗内操作提示。

图 14-1-1

 

最后：觉得对你有帮助的就赞一个呗～ :grin: