发布时间：2020-12-19 分类： 行业动态
这是一种简单快速的制定规格的方法，已在公司内部实施并且非常可行。适合中小型团队。
与材料设计/ANT设计等良好的设计规范一样。
这里主要是关于如何快速创建设计规范。附件与项目文件和草图插件。规范中使用的材料不是工作设计界面，但不影响内容。这里没有详细描述设计规范的好处。
分析过去的痛点
摘要：规范的实现困难，效果低得多，通信成本增加，初衷偏离。
问题场景
一家公司拥有30名设计师，4名前端开发团队和PDF规范。有趣的是，设计师的设计草图高度，字体大小和颜色使用有很多个人习惯。有时你可以重复现有的控件。然后开发爸爸，同样可重复使用的导航栏，侧边栏等，已经反复编写代码。在小型团队之间，他们有自己的控制库，可以在UI被接受时解决，但这会增加成本。
我们可以减少这些问题吗？有了这些问题，我也会探索一些经验。这是我真正想要分享的内容。
首先确保团队已经在使用Sketch。为何使用Sketch？在这个问题上，主要原因是效率高。
先出设计草案是否首先超出规范？
我的大多数朋友都很困惑，我很困惑。但是，你还没有设计它。你怎么知道你真正想要的颜色？我在这里推荐的是一些设计草案出来然后做规范，然后慢慢改进。
您说如果公司已经标准化，可以做什么，那么规范可以以不同的方式呈现。
规格生产
这主要基于iOS设计草案。说到Android，如果你想要精确，你需要2个设计草案和2个设计规范。
这是Sketch制作的设计稿。我只是做一个设置。
视觉规范
颜色：界面颜色/背景颜色/文字颜色/线条颜色
字体大小：标题词/文本/辅助词
行高
间距
关于小伙伴有疑问，上面的C1/C2代码是什么意思？
此代码主要是为了方便前端开发人员构建UI库。例如，我们的设计草图的间距为20px，开发时可能是20px，它计算的单位不在一个通道中。如果J2代码用于表示间距值，那么无论单位是什么，至少间距大小是一致的。当开发询问设计师某处有多少空间时，你可以告诉他它是J2，然后开发就会知道，哦，20dp。
互动风格
点击表现
组件库
元素图层：按钮
组件层：可以直接重用
例如，我们已经完成了规范的设计，如何使用它？
需要分为2个方向，一个是UI，另一个是前端。
使用设计师规范
您可以直接在草图上复制样式，也可以直接复制Command C + V.您还可以调用其他同事的画板并将其导入您自己的机器中。
插件名称称为草图调色板。它可以在线搜索，可以下载。
前端开发规范用法
如果他们没有草图，他们可以使用插件Marketch导出html格式。
导出后，使用浏览器打开index.html。
这个演示文稿比PDF文件好吗？左侧是类别，右侧是相关属性。您也可以直接下载一些图标。
当设计规范建立时，开发人员还构建了自己的UI库，然后继续推进没有统一风格的小尾巴。
如果您想稍后迭代设计草稿该怎么办？
只是做一个类似的文档。有很多方法，我相信每个人都可以解决它。
