视觉设计（APP UI）规范文档怎么写？

在创业公司工作的这几年中，很多工作都要涉及到视觉设计，但一般公司不会那么细，在我脑海中分为三种：

1.平面设计师： 限于2d广告设计，比如名片、海报、宣传画册、单页等等，做出来的UI可执行性很低，很多和原生系统相斥，工程师会很头疼。无规范可言。

2.UI设计师：限于软件UI的设计，一般的工程师拿到设计文件执行起来没有很大难度，但是做出来的平面没有创意，从技术上来看一般，想要让人眼前一亮或是加上营销的想法很难。无规范可言。

3.视觉设计师：有很好的审美观念，有平面设计大作，针对不同场所，不同功能的设计有自己独特的见解与经验；有3D设计经验，一般都有家居、建筑设计经验；对于不同系统的软件UI与UE都有研究，并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。 对于每一个公司或项目群都有其规范文档。

然而我就遇到过第一种，请不起第二种和第三种，平面压力很大导致辞职的较多，交接工作时我是来一个又要和他重新说一遍，一直觉得应该出个文档，看完之后能够马上上手的那种，现在才知道原来是叫做视觉设计规范文档

前言：

注明使用版本、设计操作系统、与开发时要说明的

作用：

1.指导分工协作

2.避免重复工作

3.视觉统一 ，形象加分

4.让思路更加清晰，工作更加高效

协调人员：

视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试

内容：

色调：确认主题色、组件色

字号：根据实际用途与场景适配，以实际效果良好为准，确定一个适合值即可。

通用组件样式：将整个UI设计中能够通用的组件统一风格，比如：对话框，提示框，确认信息框等

不同状态下组件样式：不同状态下的组件样式一般为相同的，针对使用场景以实际效果为准

间距：框架中的间距、元素与元素之间的间距

图片规范：不同页面、位置、图片的尺寸、颜色等等参数要求

不同适用版本：平板、手机、电脑等不同版本

整体框架修饰：将整体框架固定，作为模板往里填，有利于掌控整体风格

不同级别子页面风格：不同子界面的设计可以完全放给下个设计师，有需要也可以进行限制

示例：

第一步确定清晰的流程与思路

流程图

第二步：

适配尺寸：android、ios不同系统、不同设备    表格或结构图表现

可参考 android尺寸等规范参考

要注意的是：

    anrdoid 要切图，将图标和图片元素切为hdpi、xhdpi、xxhdpi三套，放入三个文件夹中打包

    ios要切图，将图标和图片元素切为@2x,@3x两套，放入两个文件夹中打包

第三步：

 确认主题色与元素色

在appstyle系统统一默认配色中设置为主题色

在其他元素比如：分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等

第四步：

文字

苹果常用字体点这里！

不同地方、用途中文字的字体、字号

第五步：

图标

统一的尺寸，特殊用途的注明、不同状态的请附加

第六步：

按钮

按钮的样式与不同状态的样式、尺寸

悬浮按钮56dp，普通按钮48dp

第七步：

公共控件

比如对话框

第八步：

模块

确定某个模块的风格

列表模块

第九步：

布局

确定大致布局风格

一次性不能将规范全都覆盖到位，可以不断的添加并注明添加人和时间，经过设计部审核才能生效发布。