神器来相助，网页排版类工具推荐
排版以练为主，以看为辅。找到了从哪看，怎么做，剩下的就是多模仿、多借鉴、多尝试，最终形成自己的风格，并将它融入自己的设计。
关于看，虽然说是辅，但还是要量大，看的精品。看这类专题作品不用瞎找，去花瓣就足够了。找到你认为特别喜欢的、符合你品味的、行业相关的图，看看是谁采集的，如果画板专题也对的上，关注这画板就好啦。
传送门：花瓣网_排版
关于练，这里主要推荐辅助工具。初期尽量能排得标准，排得讲道理，那有一些工具帮忙是不错的。这里的工具基本都是UX用的，网站方面的排版工具，但道理是相通的嘛。
在网站排版方面，有很多工具可供选择，这里推荐一些个人认为最使用最赞的（免费）。当然，在此之前请牢记两点：
- 工具可以帮你完成设计，不能替你完成设计。
- 双手是你最好的工具，多思考实践才是真
01.字体排版工具
不同字体之间，不需要遵循固定的比例关系，但是字体样式和层级表现必须和整个页面匹配。
Modularscale截图
在进行网页字体排版时，可以尝试Modularscale，一款很容易上手的工具。这款工具可以帮助你确定和对比各个层级字体的大小和样式，并且可以直接复制对应的CSS代码，美滋滋。
这个工具就是专门缩放字体用的，非常简洁。右边有与帮助按钮，不会操作可以参考。
Type Scale截图
一款类似的工具是Type Scale，更加方便。你可以先设置一个基础字号（一般浏览器用16px），然后设置比例关系，就会自动为你生成一套字体样式，想用黄金比例什么的都可以轻松实现。
使用Type Scale的时候，你可以随时切换当前字体为任意字体。字体服务由谷歌字体提供，现在已经有中国谷歌字体服务器了，上述的你没法打开也没关系。
Typetester截图
Typetester的优势是可以设置段落样式，你可以设置字体、间距等等数值，并且你可以同屏查看多个组合，让你可以对比它们。Typetester还可以用于行高测试，有条件也可以用CSS Leading，注意后者有盾墙。
用这东西的好处就是，你不需要自己敲CSS就可以看到段落的展现效果。上述的这些工具不仅实用，拿来学习也很赞。
02.在线网格生成
网格系统对排版来说很重要，可以用它快速规划布局并使得布局工整有序。
但CSS网格文件一般是独立的，会造成额外的HTTP请求，对站长来说，低请求数就是打开速度，打开速度就是命根子。所以在线网格生成工具就很有用了。即便是做平面或者UI，这东西也非常方便！
Gridpak截图
你能想象的网格生成工具所具备的功能，Gridpak都有，但你需要为它准备个加速器。输入行数、列数、行尺寸、间距等控制方式都可以，在改变最大宽度的情况下，可以等比例挤压容器内的网格，这个功能在做交互的时候非常有用。
Gridpak生成的是zip压缩文件，内含一个CSS，并且包括可选的SCSS和LESS文件。这个工具不是很好上手，需要练一练。
Responsify截图
响应式设计还可以选择这个叫做Responsify的网格工具。它可以在屏幕上盖一层网格，非常直观。并且也可以生成HTML加CSS的响应式模板，但一般来说没必要下载，只是拿来观察版面的网格排布就可以了。
这类工具还有不少，上面几款不满意可以试一下这些：Gridulator、GridKit、GridCalculator、 、Responsive PX。
03.黄金分割工具
我们都知道0.618，黄金分割是和谐的象征，是排版的圣杯。黄金分割无处不在，黄金分割正升华为神……虽然黄金分割不是万能的，但你需要对这个拥有古典之美的数字有所认识，2400多年的岁月为它正名。
Cartoonnetwork截图
黄金分割在观察的，可以沿着螺线，由小到大绘制，将整个页面成比例地划分，就像上图这样。这只是一种模式，你可以只用于页面的特定部分，并且不是所有排版都是按照这种感觉来的。
一般来说，这张黄金分割的页面，螺线从最外圈向内，所经过的内容区域应该是越来越重要的。还是拿上面的图来说，螺线中间经过了主要推荐的大图，而末尾部分经过了导航模块。
具体用法你可以参考一些教程：
Hongkiat的教程：http://www.hongkiat.com/blog/golden-ratio-in-moden-designs/
Tuts的教程：https://code.tutsplus.com/tutorials/the-golden-ratio-in-web-design–net-2272
Smashing杂志的教程：https://www.smashingmagazine.com/2008/05/applying-divine-proportion-to-web-design/
（有空的话我会近期翻译一些）
然后我们继续推荐工具，黄金分割可以尝试UX Trggers（刚发现这个工具维护更新去了，可以先关注着，可以尽早参加内测），这个小工具可以在线查看和测试页面比例。如果你有时间可以多拿几个网站试试，也是很好的观察方法。
UX Triggers检测NYTime的截图
Adobe的用户可以选择用标准文件来实现在Photoshop内部直接进行比例测试：Golden Ratio: Free PSD。
黄金比例计算器的截图
Miniwebtool为我们提供了黄金比例计算器，可以帮助计算黄金比例的数值组合。原理是按照a+b:a=a:b的公式计算。任意给出一个数值，剩下的就可以帮你完成。
不要被代数吓怕了，它只是黄金比例的一种表示而已，可以为你节省计算时间。
Golden Rectangle Calc截图
希望获得更多比例组合，可以使用Golden Rectangle Calc。上图的这些正方形，就是由根据分割原理组成的一套数值构成的。
通过这个工具你可以观察水平和垂直部分的比例关系。上面的木制纹理如果你感觉太乱，也可以换成纯色。
另外，关于黄金比例，推荐一篇分析：Examples of Golden Ratio Principles，大量案例，读英文有困难看图也是可以的。
部分参考：Jerry Cao From UNPin
整理/翻译：卡米雷特
