编者按：专业的网站开发设计师在每个项目开始以前就会创建一套设计指南与标准，如新概念科技（上海网站开发）所说，这样子可以优化工作流程，使设计保持统一，是每个严谨的设计该有的职业态度，也是成为专业设计师的奠基石之一。噢，对了，文中咋们还推荐了好多实用方便的利器帮你创建这样子一个指南呦。

【专业级好文】
《涨姿势！值得清楚的交互设计五大支柱》
《上手可用！提高网站阅读体验的设计诀窍》

尽管做法不尽相同，一组指南总是所有项目较重要的起点之一。为每个项目创建指南（即使它原本没有）可以优化你的工作流程，也能使你的设计保持统一，并有望采取正确的开发方法。这的确是上海网站制作师的责任。你不能怪开发者没有你那样的像素眼。你得指导他们。

从创建3种主要类型的文档开始。

1. 样式指南
2. 组件文档
3. 页面标注

这套流程不推荐兼任前端开发的设计师采用。假如是这种情况，你必须要多做一步，通过代码写出的风格指南和组件，创建一个单独的平台。你乃至会想在第二步就开始编写代码，省去剩余的流程。

1. 样式指南

样式指南明确了一个网站制作项目中每个元素的样式。它几乎是开发者较普遍的样式手册。在这样的文档中，颜色、字体、表格、列表项、图标使用、分隔线和其他元素都有详尽的定义。一旦你创建好并设立了每种元素的相应规范，就可以拖放使用了。

【提示】：为元素命名。尽管开发者较终可能会用不同的class名，当谈论某个元素时也会特别有用。比如说，你给一个有渐变色导航栏的网站制作了不同主题。说#主配色- #第二配色总比说这些颜色的名字好。

2. 组件文档

在很多方面，这样的文档与样式指南有效相同，却是另一个层次的东西。组件是指类似于登录框、轮播图、旋转木马、页头、页尾等等。这不同于通常意义的样式指南，这样的文档有助于在整个网站开发过程中保持一致性。它能使开发者更轻易地辨认出重复的元素，使流程加速。从上面可以看出，在设计响应式项目时，将每个元素的“表现”包含进来是有好处的。再说，通常开发们不可能关注这些事情（也不该由他们来关注）。相信我，若你不强调一下文字在网站开发中要居中显示，他们就不可能注意。一旦完成，拖放这些组件，从一开始就定下规范，防止较终样品陷入无休无止的调整：内边距、颜色和字号。

3. 标注文档

较后一步是页面标注。既然已经定好了元素和组件的样式。先进剩下的便是引用这些组件，定义外边距（名称和间距）。

像下边这样子将其分解真的很有赞助，咋们以前把这种方法用在adidas网上商城和同等规模的平台上：

1. 分别导出多个页面用到的组件。
2. 导出页面。

我知道这一切看起来很辛苦，但作为上海网站开发设计师，它至关重要。