写给刚入手sketch的程序员们关于如何用sketch更好的布局

#前提

本文不介绍关于布局方面的知识和技巧，因为这些属于交互设计以及ui设计的内容....

（请自行找教程...或者勾搭个设计师..

但是本文会介绍关于sketch中的一些非常微小甚至琐碎的技巧...帮助刚入手的程序员更好的使用sketch进行排版布局....

我也需要预先说明：懂得基本布局并不表示你能很好的进行布局。我会写几个条件判断语句不等于我的代码水平和你一样专业——这样你们就懂了吧www

#首先....你需要看这些...

建议每个人买到sketch以后跟着这个教程去做一次

sketch绘制教程（从02到07）
http://hfwen.zcool.com.cn/

也建议每个人都读一下google design中关于布局的内容：
Metrics & keylines
structure
adaptive-ui.html

其实我个人推荐把整套material design的指南好好读一次...

#我假设你是对于界面设计有一定了解的程序员

假如你经常和ui/ue合作，也听过他们如何解释自己的设计决策，那么一些基本的东西应该相当清楚....

但是我还是建议你看下这个几个系列的post（帮助你整理下思路）

the-7-components-of-design
the-elements-of-design
visual-perception

推荐原因：这个系列较短，内容精要并且有案例解析...

#小技巧传达

——画草稿！要计划布局之前先要搞懂自己需要什么以及大致的异常情况如何处理..比如一条推有字数限制也有操作，这些操作需要放置在哪里...发推的人不仅能看推也能删除推，设计的时候也要预留删除按钮的位置...诸如此类的问题除了学好交互和ui，也需要画草图并且在草图或快速原型的阶段给解决了....

——使用参考线帮助自己对齐..

——半透明的方块（可以借助sketch share style功能控制颜色）帮助自己控制每个区域的网格...相当于用半透明的方块帮助自己把抽象的css（大雾）视觉化出来。比如一个列表项的左右padding是16px....

——layout是个好东西..我个人比较少用密密麻麻的网格进行设计..但是会使用大致的layout进行排版保证左右比例均衡而且快速放置一些要素。

——放大看，缩小看...很多比例和尺寸的问题在缩放后能看得更加清楚...

——为整个artboard蒙上一块动态模糊的面板...这样就能更加清楚自己各个部分对于人眼的第一印象是怎么样的...有些设计师会有反白的办法来看整体区域的明暗程度...

——虽然根据某个比例和固定尺寸去计算间距和行高会出问题，但是有一定的基准（比如字体大小基准和间距基准能为你以后考虑多屏幕分辨率有帮助）。我个人使用4px或是8px作为间距的最小尺寸，按照倍乘上去...至于字体，在1x的情况下12号字几乎是中文字体的最小选择....

——使用symbol多做几个版本试试看.. 界面设计中有很多控件都是可以复用的...比如表单...利用symbol可以多次调整某个控件内的布局...

——利用好artboard特性...做几个相似的版本对比看...每个设计师手上都有一堆废弃的稿件..


#插件推荐

——做标注类：

https://github.com/utom/sketch-measure

https://github.com/tudou527/marketch

——帮助选择图层类

https://github.com/getflourish/Sketch-Style-Inventory

——填充文字类

https://github.com/timuric/Content-generator-sketch-plugin

——控制间距类

https://github.com/pez/sketchdistributor