西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
在多人团队中，不同的设计师通常负责不同的流程。 如果没有UI设计规范，不同的设计师会对同一个组件做出不同的规划。 产生大量重复工作，效率比较低。 制定好设计规范和UI KIT后，可以直接使用KIT中的组件快速构建页面，将设计师从基础工作中解放出来，大大提高设计效率。
目录
1. 为什么要建立规范？
二、规范的适用范围
3. 如何建立规范
1、为什么要制定设计规范？
2 增强一致性，打造品牌感
制作并遵循设计规范可以保证整个产品的交互效果、视觉风格以及文案的统一，提高用户体验。
3 减少冗余内容，方便维护和更新
对相似的内容使用相同的组件可以减少输出内容量并减少冗余的控件和代码。 它还易于维护，并且可以在迭代过程中统一更新和应用。
4 促进工作交接
它方便了设计团队和其他团队之间的交接。 如果团队出现人员变动，也方便加入团队的同事通过规范快速熟悉产品，快速上手。
二、规范的适用范围
我在上一篇文章中提到过，如果产品处于启动期，此时最重要的就是吸引第一波用户，让自己活下去。 这个阶段产品会频繁修改验证，迭代速度非常快，整个团队可能都在拼命加班。 在这种情况下，创建设计规范文档显然是对人力资源的浪费，而且即使做到了，在频繁更新的情况下也很难实施。
因此，设计规范文档更适合跨越0-1阶段的产品。 此时产品已经有一定数量的用户使用，团队将会扩大。 这时候我们可以选择制定基本的设计规范，比如网格、配色、字体、图标规范等。对于成熟阶段的产品来说，大版本更新的周期是很长的。 在这个阶段，通常会产生更详细的设计指南、设计原则、做与不做、品牌手册、图标手册等。
3. 如何建立设计规范
电商产品大家都比较熟悉。 即使你不从事这个领域，你在日常生活中也会经常使用它们。 因此，本例中我们以下面的电商APP为例。
制定规范时通常有两种情况：
1. 不计划进行大版本更新的产品
对于版本迭代较小的产品，建立规格只需要在Sketch中对所有设计稿进行分组和分类即可。 简单地根据已有的稿件整理规范，然后对不符合规范的文档进行调整。
2、新版本、新规格
对于需要新版本、建立新版本规范的产品shopify主题，在做设计稿之前，我们需要统一一些基础内容，比如颜色、字体、网格等，然后在设计过程中创建KIT移动ui设计，以进行补充基本规格。
4. 基本规格
1 开发统一网格系统
由于现在一个草稿适用于多种设备，因此我们首先需要确定设计的基线尺寸。 它是基于 iPhone 8 的吗？ 还是iPhone 8P？ 或者1080*1920等等……每个公司的设计稿都有不同的基准。 我们是根据双图来设计的，所以我这里的基准尺寸是375*667，单位是pt。
网格的一种情况是制定网格系统。 对于网格系统，首先必须制定最小设计单元。 比如淘宝的最小单位是3，掌阅的最小单位是4，airbnb的最小单位是6……确定最小设计单位后，界面中所有间距都是最小单位的倍数。
假设我们的最小单位网格是4，那么排版时的水平和垂直间距都是4的倍数，比如8、12、24。
第二种情况是直接建立水平网格系统。 常用的网格是12网格。 12格的优点是可以同时被2、3、4整除，因此可以根据具体需要灵活设计各种模块。 当然，如果产品比较轻量的话，就不需要这么复杂的网格。 您可以根据需要设置6个、4个甚至2个网格等。
2 颜色规格
颜色规格主要表示颜色的色值和使用范围，一般有品牌色、辅助色、基本色、状态色等。如下图所示。
如果产品常用渐变移动ui设计；如何建立移动UI设计规范？，需要注明渐变的角度和渐变色的色值。 如果产品包含夜间模式，还需注明白天和夜间模式下每种颜色对应的色值。 当然，这里的夜间模式是指真实的夜晚，而不是像微博那样直接添加黑色透明蒙版的伪夜间。
额外提醒一下，重要内容和文字内容一定要保证文字的易读性。 WCAG指南指出，文字与背景颜色的对比度需要达到3:1。每个人都可以通过
颜色对比度检查器检查颜色。 我这里的品牌和强调色的对比度是3:1和6.3:1，而辅助色（例如标签）的对比度在2-3之间。
3种字体
字体规范中最需要注意的是提取每个场景所需的字体和字体大小。
需要注意的是，应用场景要标注出来，方便其他人理解。 否则，其他成员将不知道何时使用一级标题，何时使用二级标题。
4 个图标
一般来说，图标分为两种，功能图标和显示图标。
功能图标是为了引导用户理解和操作，需要精确、简洁，方便用户识别其含义。 功能图标通常是消色差的。
展示图标通常是页面入口，多用形状、颜色、纹理的表达来吸引用户的注意力和点击欲望，强调差异性，如各个类别区域的图标、徽章、等级图标等。
一般来说，图标规范会先确定一些基本尺寸，然后对每个页面上的图标尺寸进行梳理、整合，最后确定几个基本尺寸。 例如，这里的基本尺寸是4。相同功能级别的图标应该具有相同的尺寸。
为了保证不同形状的图标在视觉上大小一致，会制作一份图标的基本制作说明。制作说明会统一图标的圆角和笔画粗细； 如果涉及到显示图标，还会有图标视角的选择、颜色的选择、质感如何表达等。
5默认图片
电商APP有大量的产品图片，所以我们也统一了默认的占位图片样式。 因为这里的款式一致，所以我们采用统一规格。 如果有多种默认样式或者其他类型的占位图，需要单独说明。
5. 页面组件
页面组件通常包括导航栏、工具栏、弹出窗口、列表、卡片、空状态等。根据原子设计理念，组件还可以拆分为原子、分子等更小的基本设计组件，例如角标。 、标签、按钮、图像、优惠券、选择器、进度指示器等
除了整理规范外，页面组件通常会整理成一套完整的UI KIT，保存为草图文件以供日常拖放使用，或导入到Libraries中直接调用。 当然，您也可以直接在KIT上记下规格和注意事项。 具体输出格式取决于团队的需求。
由于组成部分内容比较大，需要根据具体产品进行定制。
1 个按钮
按钮一般包括浮动按钮、填充按钮、线框按钮和文本按钮。 其中，浮动按钮的优先级最高，是一个很强的引导按钮。
按钮通常有三种状态，正常状态、点击状态和不可用状态。因此，规范中需要标明这三种状态下按钮的样式，如颜色、阴影、圆角、文字大小等。
另外，还可能存在加载状态。 即点击按钮后，如果有超过1S的数据延迟，通常会考虑触发按钮的加载状态。 加载状态的按钮样式在按钮上显示进度指示器。
2 导航
收集现有页面的导航并对其进行分类。 比如我把它分类为常规标题样式、标签样式、搜索框样式、无标题样式、字母导航……
标题需要注意文字的极限值。 ICON的大小和位置必须考虑最小可点击区域。 这里图标的大小设置为24pt，但热区是44pt，所以要注意间距的设置。 热区不能重叠。
3 个标签
标签通常有多种使用场景。 我们可以对标签进行分组，比如操作标签、内容属性标签、过滤标签等。
然后统一各类标签的样式、文字边距以及适用场景。
4 个弹出窗口
弹出窗口是位于页面内容上方用于提示和通知用户的控件。 它引导用户专注于某项任务，用户可以通过操作关闭该弹出框。 弹出框包括模态（对话框、操作菜单）和非模态（吐司、蛇栏等）两种形式。
模态弹窗需要定义遮罩层的样式（颜色、透明度），以及弹框中的文字说明和按钮。
我以对话框的规格为例。 这是一个没有ICON的二按钮对话框，所以这里我们需要描述标题、正文、按钮和背景遮罩信息，以及字体大小、行距和文本限制值。 、文字颜色、按钮状态等…
另外，组件类规范可以附有常见情况和don’t&do，这将使团队成员更容易理解和防止错误情况。
5 清单
列表由多条等宽线和按照一定模式排列的连续项组成。 列表在一些信息产品中会有更多的组合。 我在这个产品中使用的列表主要是单行列表和双行列表，所以我们整理一下对应的列表类型和需要说明的事项。
六，结论
写这篇文章的初衷是因为我去年年底建立了一个公众号移动ui设计，在Zokuu上发表了一些文章，得到了很多人的认可。 很多粉丝给我私信提出各种问题，也陆续有人问我设计规范如何实现、交互规范是什么等问题。 不过，公司内部文档确实没办法公开分享，所以我想最好还是写一篇专门的文章来详细教大家如何创建移动UI设计规范。
我把这篇文章的基础部分讲得比较详细了，而组件部分则有些总结，主要是组件部分不通用。 你需要根据自己的手稿进行整理和总结。 总结完之后，就可以标记、标准化了。 这部分只是一个列表，所以没有必要展开它……
当然，还有很多内容没有讨论，比如把KIT制作成Libraries，以便在Sketch中统一使用，但我认为这作为一个设计规范的入门教程，目前来说应该足够了。 以后我会在新文章中添加更多内容。
下载规格文件
名称：UI设计规范PDF.zip
格式：PDF
下载：后台回复【4842】下载设计专家（id：shejidaren888）
将此公众号设为星标
不错过任何一个高品质
设计素材、经验、灵感和超强福利
▼
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。