神器来相助,网页排版类工具推荐

排版以练为主,以看为辅。找到了从哪看,怎么做,剩下的就是多模仿、多借鉴、多尝试,最终形成自己的风格,并将它融入自己的设计。

 

关于看,虽然说是辅,但还是要量大,看的精品。看这类专题作品不用瞎找,去花瓣就足够了。找到你认为特别喜欢的、符合你品味的、行业相关的图,看看是谁采集的,如果画板专题也对的上,关注这画板就好啦。

传送门:花瓣网_排版

 

关于练,这里主要推荐辅助工具。初期尽量能排得标准,排得讲道理,那有一些工具帮忙是不错的。这里的工具基本都是UX用的,网站方面的排版工具,但道理是相通的嘛。

在网站排版方面,有很多工具可供选择,这里推荐一些个人认为最使用最赞的(免费)。当然,在此之前请牢记两点:

  1. 工具可以帮你完成设计,不能替你完成设计。
  2. 双手是你最好的工具,多思考实践才是真

 

01.字体排版工具

不同字体之间,不需要遵循固定的比例关系,但是字体样式和层级表现必须和整个页面匹配。

55720685 - design, sharing - 神器来相助,网页排版类工具推荐

Modularscale截图

在进行网页字体排版时,可以尝试Modularscale,一款很容易上手的工具。这款工具可以帮助你确定和对比各个层级字体的大小和样式,并且可以直接复制对应的CSS代码,美滋滋。

这个工具就是专门缩放字体用的,非常简洁。右边有与帮助按钮,不会操作可以参考。

89347771 - design, sharing - 神器来相助,网页排版类工具推荐

Type Scale截图

一款类似的工具是Type Scale,更加方便。你可以先设置一个基础字号(一般浏览器用16px),然后设置比例关系,就会自动为你生成一套字体样式,想用黄金比例什么的都可以轻松实现。

使用Type Scale的时候,你可以随时切换当前字体为任意字体。字体服务由谷歌字体提供,现在已经有中国谷歌字体服务器了,上述的你没法打开也没关系。

88095872 - design, sharing - 神器来相助,网页排版类工具推荐

Typetester截图

Typetester的优势是可以设置段落样式,你可以设置字体、间距等等数值,并且你可以同屏查看多个组合,让你可以对比它们。Typetester还可以用于行高测试,有条件也可以用CSS Leading,注意后者有盾墙。

用这东西的好处就是,你不需要自己敲CSS就可以看到段落的展现效果。上述的这些工具不仅实用,拿来学习也很赞。

 

02.在线网格生成

网格系统对排版来说很重要,可以用它快速规划布局并使得布局工整有序。

但CSS网格文件一般是独立的,会造成额外的HTTP请求,对站长来说,低请求数就是打开速度,打开速度就是命根子。所以在线网格生成工具就很有用了。即便是做平面或者UI,这东西也非常方便!

47791473 - design, sharing - 神器来相助,网页排版类工具推荐

Gridpak截图

你能想象的网格生成工具所具备的功能,Gridpak都有,但你需要为它准备个加速器。输入行数、列数、行尺寸、间距等控制方式都可以,在改变最大宽度的情况下,可以等比例挤压容器内的网格,这个功能在做交互的时候非常有用。

Gridpak生成的是zip压缩文件,内含一个CSS,并且包括可选的SCSS和LESS文件。这个工具不是很好上手,需要练一练。

1058701 - design, sharing - 神器来相助,网页排版类工具推荐

Responsify截图

响应式设计还可以选择这个叫做Responsify的网格工具。它可以在屏幕上盖一层网格,非常直观。并且也可以生成HTML加CSS的响应式模板,但一般来说没必要下载,只是拿来观察版面的网格排布就可以了。

这类工具还有不少,上面几款不满意可以试一下这些:GridulatorGridKitGridCalculator Responsive PX

 

03.黄金分割工具

我们都知道0.618,黄金分割是和谐的象征,是排版的圣杯。黄金分割无处不在,黄金分割正升华为神……虽然黄金分割不是万能的,但你需要对这个拥有古典之美的数字有所认识,2400多年的岁月为它正名。

16132059 - design, sharing - 神器来相助,网页排版类工具推荐

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(刚发现这个工具维护更新去了,可以先关注着,可以尽早参加内测),这个小工具可以在线查看和测试页面比例。如果你有时间可以多拿几个网站试试,也是很好的观察方法。

97283133 - design, sharing - 神器来相助,网页排版类工具推荐

UX Triggers检测NYTime的截图

Adobe的用户可以选择用标准文件来实现在Photoshop内部直接进行比例测试:Golden Ratio: Free PSD

91326041 - design, sharing - 神器来相助,网页排版类工具推荐

黄金比例计算器的截图

Miniwebtool为我们提供了黄金比例计算器,可以帮助计算黄金比例的数值组合。原理是按照a+b:a=a:b的公式计算。任意给出一个数值,剩下的就可以帮你完成。

不要被代数吓怕了,它只是黄金比例的一种表示而已,可以为你节省计算时间。

94410109 - design, sharing - 神器来相助,网页排版类工具推荐

Golden Rectangle Calc截图

希望获得更多比例组合,可以使用Golden Rectangle Calc。上图的这些正方形,就是由根据分割原理组成的一套数值构成的。

通过这个工具你可以观察水平和垂直部分的比例关系。上面的木制纹理如果你感觉太乱,也可以换成纯色。

另外,关于黄金比例,推荐一篇分析:Examples of Golden Ratio Principles,大量案例,读英文有困难看图也是可以的。

 

部分参考:Jerry Cao From UNPin

整理/翻译:卡米雷特

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注