一网学是国内最早从事远程培训的机构，是最好的淘宝美工培训基地。创新的模式让在职人员能够工作学习两不误，省去了家里培训点来回跑的时间。让二三线以及偏远地区的设计爱好者能足不出户也享受来自一线城市专业老师的培训。远程教学可以把上课内容全程录制，这样方便学员课后反复复习，从而让学员队老师讲解的内容真正做到百分之百的掌握。
       1. 样式指南
样式指南明确了一个设计项目中每个元素的样式。它基本上是开发者最普遍的样式手册。在这个文档中，颜色、字体、表格、列表项、图标使用、分隔线和其他元素都有详尽的定义。一旦你创建好并设立了每种元素的相应规范，就可以拖放使用了。
提示：为元素命名。尽管开发者最终可能会用不同的class名，当谈论某个元素时也会非常有用。比如说，你给一个有渐变色导航栏的网站设计了不同主题。说#主配色-#第二配色总比说这些颜色的名字好。
2. 组件文档
在许多方面，这个文档与样式指南完全相同，却是另一个层次的东西。组件是指类似于登录框、轮播图、旋转木马、页头、页尾等等。
这不同于通常意义的样式指南，这个文档有助于在整个设计过程中保持一致性。它能使开发者更轻易地辨认出重复的元素，使流程加速。
从上面可以看出，在设计响应式项目时，将每个元素的“表现”包含进来是有好处的。再说，通常开发们不会关注这些事情（也不该由他们来关注）。
相信我，若你不强调一下cta文字在移动端要居中显示，他们就不会注意。
一旦完成，拖放这些组件，确保从一开始就定下规范，防止最终样品陷入无休无止的调整：内边距、颜色和字号。
*提示：将组件导出成独立的.psb文件。这么做有个很大优势，你的客户决定改稿时，你只需要更新特定的几个.psb文件。确实很节省时间。
3. 标注文档
最后一步是页面标注。既然已经定好了元素和组件的样式。唯一剩下的就是引用这些组件，定义外边距（名称和间距）。
像下面这样将其分解真的很有帮助，我们之前把这种方法用在adidas网上商城和同等规模的平台上：
分别导出多个页面用到的组件。
导出页面。
两种导出方式中，我都用了3套图层复合，可以轻松完成导出：
popup_normal.jpg
popup_naming.jpg
popup_spacing.jpg
我知道这一切看起来很辛苦，但作为交互设计师，它至关重要。
所幸，有些很棒的插件可以帮你节省一些时间。specking就是其中之一。这个工具可以标注之前提到的所有东西，不过我更爱用它来标注间距和标签。
一网学( ywxue.com )，我的未来我设计。

---

深圳市一网学教育咨询有限公司

13607348476