视觉设计文档的整理规范

今天小编为大家分享一篇来自金山办公用户体验中心KSO UEC的内部设计经验分享—视觉设计文档的整理规范！

本文适合初级产品及运营设计师阅读，文章规范了设计师工作文档及设计文件图的整理以及命名规则，可以极大的提高团队协作效率。

整洁的工作文档不但有利于提高团队工作效率，还可以体现设计师的专业程度。

1、文档整理规范

养成文档整理习惯，遵循部门文档整理规范，有利于提高团队协作效率。

2、图层整理规范

良好的图层管理可以提高修改设计方案的效率，还能反应设计思路是否清晰

3、图层命名规范

严谨的图层命名方式可以大大降低设计与研发团队的沟通成本

文档整理规范

文档整理是基础中的基础，任何设计师进入工作第一步都应该养成良好的文档整理习惯，遵循部门文档整理规范，有利于提高团队协作效率，在备份文件的时候也会非常方便。

目录命名规则

1、首先，在本地硬盘上根目录创建Project／Resource／私人 三个大文件夹。

2、将工作文件放置在在Project文件夹下，每个项目按照文件创建时间，新建一个二级目录作为项目目录，命名规则为“创建时间（月日）+项目名称+版本号+功能名称”，例如“0918KSOUEC文件整理规范1.0文件整理规范” 。

3、在具体项目录下，存储具体的产品设计文档三级目录文件夹。常见的文件夹有：设计需求“PRD”／设计文件“Design”／切图资源“Assets”／设计参考“Resource”，三级目录之下直接存放设计文件。

4、到年底完成最后一个项目后，把该年所有设计项目文件归类到Project目录下以该年份命名的目录中，例如“2017工作备份”

文件命名规则

关于设计文件的命名规则，PSD产品设计中一般情况为“序号（对应交互设计和产品需求文档里的界面序号）+具体界面名称+特殊标示+创建时间”，例如“01查词展开0305”

Sketch文件要做到一个版本的项目需求对应一个源文件，命名规则一般为“需求名称+版本号+功能名称+创建时间”，例如“金山词霸V10.0_0918”数字中间用下划线隔开

图层整理规范

良好的图层管理可以提高修改设计方案的效率，还能反应设计思路是否清晰。很多资深的设计师往往有良好的图层整理习惯，这也是从侧面能检查设计师所处阶段的一种方式。

概述

图层整理的原则是所有图层都必须归属于某个目录组织结构。产品设计中，目录的组织结构与构成界面的控件，功能模块，以及代码结构一一对应。运营设计中，目录组织结构则体现了元素之间的基本构成关系以及运营内容组织关系。

产品设计图层整理原则

• 图层文件第一级目录为具体界面对应功能模块，命名规则参考交互设计模块命名或者下文《控件词表》

• 第二级目录为该功能模块下具体控件组／图标／文本

• 第三级目录为该控件组下的具体控件和组件

• 注意图层顺序需要符合人阅读习惯，图层文件夹从上倒下按照Z字阅读的顺序排列。

运营设计图层整理原则

• 图层文件第一级目录为具体落地页/海报/banner下的不同内容模块

• 第二级目录为该内容模块下具体的标题组/插图/各种特殊效果组合

注意

• 请在完成设计文档后删除不必要的图层

• 控件/图片组不同状态请用色标标示出来并隐藏，除此之外请不要有其他隐藏图层

• 相关联的图层请打好链接

• 全局控件/图片组请使用智能对象/symbol（具体使用原则请见uec相关分享文章）

图层图片命名规范

严谨的图层命名方式可以大大降低设计与研发团队的沟通成本。面对混乱命名图片，再好合作的设计师和研发也会失去耐心，好的习惯能够让设计师把时间投入到有意义的创作上去。

图层图片命名规则

• 概述

UEC在所有的项目中需使用相同命名规则，并且图层与切图保持相同命名，这样既能够方便研发，也便于设计师合作。

图层和切图具体命名规则：

所属类型_所属位置/页面_属性_状态

• 所属类型

任何图片都有一个归属类别，如：

bg（background） btn（button） icn（icon） img（image）

• 所属位置／页面（切图专属信息）

方便设计师理解该切图所归属的页面文件位置，如

bg_help btn_home icn_global

(global表示该图片是一个全局使用的图片)

• 属性

属性指的是一个图片表达的含义，比如一个首页上表达创建／删除的btn可以命名为：

btn_home_new btn_home_delet

• 状态

当图层／图片为控件时，一般还会存在不同状态，如：

btn_home_new_default btn_home_new_highlighted

• 注意

• 原则上命名采用英文单词，单词中间用下划线隔开。具体的命名词组可以参考下一页《控件词表》

• 图层命名中可以省去所属位置／页面 一项

所属类型词表

• 注意

括号中表示的是常用的几种控件的缩写，当词表中没有对应缩写时可直接使用全称。此处的控件基本包含APP设计中常见控件，特殊自定义控件设计师可以根据需求自定义命名。此处为产品设计中常见的控件类型。具体每种控件的解释，用法，以及使用条件可以参考具体的交互设计以及各平台视觉设计规范。

所属位置词表

• APP

App切图依靠界面名称体现出该切图所属界面，具体参考该项目对应的交互设计文档，例如：btn_home_new_default 表示这张btn切图属于home界面。

另外，当一张切图全局使用的时候，可以使用_global命名。例如：icn_global

• Web

Web切图原理与APP切图一致，除此之外，考虑到Web页面较大，如果只使用页面名称比较难以定位，此处可以借用Web开发中的div基础标签来体现切图所属页面和位置。例如：btn_home_head_new_default表示这张btn切图属于home页面头部的位置。

常见的web位置有：head，body，slide，foot，只要定位到大概位置即可。

• 注意

此处只列举了APP的Web的设计中常见的切图命名规则，运营设计落地页，H5页面可以类比APP设计，桌面端可以类比Web设计。

建议切图最终确认后输出前统一做命名整理，不建议前期在命名上花费太多时间和精力。

属性／状态词表

• 属性

属性用来表示该切图所属控件的功能，具体命名请参考交互设计。例如：btn_home_new_default 表示这张btn切图的功能是创建。

• 状态

当该切图／图层是一个控件时，因为需要作出控件不同状态，所以要给每个状态一个专属名称

例如：btn_home_head_new_default表示这张切图／图层表示普通状态的btn。

常见的控件状态有：

default／highlighted／pressed／selected／disable

• 注意

属性的命名规则主要参考交互设计文档，没有固定的词表，但是在命名中尽量使用含义明确的英文单词，尽量避免中文，汉语拼音，寓意不明的词组，否则就失去了规范命名的意义。

产品设计图层命名实例

注意产品设计图层命名侧重体现控件和功能模块的从属关系，图层元件之间的关系，以及图像元素的归属及状态。

原则上图层文件夹顺序从上到下与界面控件从上到下一一对应，但注意特殊情况需要特殊处理。

建议在设计初期初步整理图层之间的关系，最终整理文件时对命名做处理。

运营设计图层命名实例

注意单页运营设计（如海报/banner）图层命名相对简单，因为不存在多个页面共存，不需要强调图片所属位置，一般来说体现出图层类型，状态即可。

原则上图层文件夹顺序从上到下与界面控件从上到下一一对应，但注意特殊情况需要特殊处理。

建议在设计初期初步整理图层之间的关系，最终整理文件时对命名做处理。

作者：金山办公用户体验中心_北京

UI中国主页：http://i.ui.cn/ucenter/1090324.html

拓展阅读：

你知道你的视觉设计方案为啥不能过审吗？

什么样的设计需求和交互设计文档才能过审？

“为什么我做的banner这么丑？”其实这里大有学问。

–关于我们—

UI中国 专业用户体验设计平台

主站：www.ui.cn

新浪微博：@UI中国

合作请加微信：18931333875

原文始发于微信公众号（UI头条）：视觉设计文档的整理规范—湖南长沙UI、交互设计