0.没有Guideline的时候我是怎么干活的？

这个App分为User Mode和Driver Mode，在做完User Mode后我去搞了其他项目，大约2周之后回来做了Driver Mode，此时之前做的Mockup已经忘光，于是新建了一个Canvas，所有东西重新设计，我能记得一些模块我好像做过类似的，有时候会打开原来的文件看看，然后根据当下的心情改一改。比如上图中左边的Form部分和右边的Form部分完全不一样，右边这张Mockup里面Form是Flat风，上面的Icon却还带着拟物化的阴影/渐变/透明。当时肤浅的认为，设计师只要保证最终成品的效果出色即可，不用管中间的制作流程中是否存在太多的重复性工作，样式是否统一，更不会去管前端实现的时候是否有难度之类的事，我也不做标注，不和前端沟通，就把设计图一扔，觉得，这么简单，大家应该都懂的吧，然后就干别的去了。结果就是，最终效果和设计的完全不一样,感觉前端像是跳过Mockup直接按Wireframe实现的，所以自己设计的那部分，白做：）

1.第一份Guideline

老板当时说，希望我们所有的产品都使用一套样式，这套样式是老板自己设计的，简约又萌萌哒，叫EggShell，最早应用在devo.ps上,他是直接在Editor里写出来的，我负责了其中的Icon制作。IconSet共69枚，在16px,24px,32px,48px的描边粗细需一致，一个图案其实需要做4种线宽，所以对我来说需要制作276枚图标，还好Sketch可以批量导出PNG和SVG，否则我就会像车间女工一样重复劳作，当时Sketch还没有出3，而2的Bug其实非常多，在矢量制作上远不如AI好用，我基本是在AI里做完再放倒Sketch里，后来有16个专门针对Github的图标是直接在Sketch里完成的，转曲时的Bug也是醉了。

剩下的所有UI,没有设计稿，也没有文档可以看，我在做其他项目的时候，每遇到相同的模块，就要到devo.ps里翻半天，很麻烦，于是我在Sketch里把devo.ps里所有基本的UI元素整理了一遍，颜色，字体，表单，按钮，表格等。一开始没经验不知道自己到底需要什么，在Pinterest/Dribbble上看到别人Guideline里放什么我就放什么，可是具体怎么用，为什么别人要放这些元素，如何制定其中的规则，如何延伸，完全不清楚。

2.Sketch的Symbol与Share Style

在做WRI-Global Water Flood Analyzer时，我虽然意识到了做Guideline的重要性，但是做Guideline是个前期耗时耗力的事，再加上缺少经验，在没有拿到Wireframe和prototype之前，我实在不知道哪些元素使用频率高得足以整合成一类作为规范使用。小到Input Field的高度设置，是做48px大一点看起来舒服点，还是做36px这样长一点的表格也可以排一栏塞进一页里。

没有头绪，索性放弃专门做一个Guideline，而是用Sketch的Symbol和Share Style去绑定可以共享样式的同类UI元素

最后把所有Share style和Symbol单独拎出来放到一个Art board里，就是一份现成的Guideline啦，这样先做页面后做Guideline的方式真的比较适合我这种新手。

3.从Google Material中学到的

之后Google推出了Material的Guideline，我们把它应用在CSViz的UI上，由于CSViz是功能较多的Web App,所以我们并没有加入太多Material的动态，怕太多动效会影响性能，所以主要是提取Material的Depth Shadows概念，内容的展示有主次，功能的排布也有主次，用阴影在2D平面中制造虚拟的前后透视关系，可以更好的突出主次层级，这一点特别适合CSViz。

以上是Guideline#0摸索期，之后再整理下Guideline的#1的内容，做配图真累。

这里有一份公司的EN版本，市场部同事帮写的Designing UI Guidelines
希望大家关注我的知乎专栏Work harder