羅卜世家子:

最近很想好好学一下排版，顺带上字体，常常自哀，为什么我啥也不会~~

软件：

首先想把InDesign搞定，不过进展不顺呀，，

用的是CC中文版，学习方式是『indesign_reference』indesign的中文帮助文档（官网可下），看的头大，需要耐心，如果有环境学就更好了。。。说到InDesign，是因为看了YOYO设计师的文章，对于交互设计的思考很有帮助。

文档在我的百度盘里有，有需要可以下：https://pan.baidu.com/s/1kT2yQN1

里面还有『illustrator_reference』『photoshop_reference』

书籍：

现在在看的书是『众妙之门-网站UI设计之道』，刚入手还没看完，看完再写读书笔记

——————————————————————————————————————————

不过，在搞排版之前，字体问题可以先小小的解决一下：

首先是衬线字体和无衬线字体

以下为（百度百科）

『西方国家字母体系分为两类：serif以及sans serif。

西方国家字母体系分为两类：serif以及sans serif。

serif是有衬线字体，意思是在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。相反的，sans serif就没有这些额外的装饰，而且笔画的粗细差不多。

serif字体容易识别，它强调了每个字母笔画的开始和结束，因此易读性比较高，sans serif则比较醒目。在走文阅读的情况下，适合适用serif字体进行排版，易于换行阅读的识别性，避免发生行间的阅读错误。

—————————————————————————————————

sans serif强调每一个字母，serif更强调于一个单词。

中文字体中的宋体就是一种最标准的serif字体，衬线的特征非常明显。字形结构也和手写的楷书一致。因此宋体一直被做为最适合的正文字体之一。不过由于强调横竖笔画的对比，在远处观看的时候横线就被弱化，导致识别性的下降。』

—————————————————————————————————

特点：

『在传统的正文印刷中，普遍认为衬线体能带来更佳的可读性（相比无衬线体），尤其是在大段落的文章中，衬线增加了阅读时对字母的视觉参照。而无衬线体往往被用在标题、较短的文字段落或者一些通俗读物中。相比严肃正经的衬线体，无衬线体给人一种休闲轻松的感觉。随着现代生活和流行趋势的变化，如今的人们越来越喜欢用无衬线体，因为他们看上去“更干净”。』

—————————————————————————————————

应用：

『有调查显示，欧洲人对于无衬线体的接受度略高于北美，在书籍、报纸和杂志中大段落文字的排版，衬线体始终占据着压倒性的优势。 在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大，在这里非衬线字体分类不做赘述。但是必须保证以下原则：凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。所以衬线字体在设计中占据很重要的位置；以下是衬线字体的具体分类。』

—————————————————————————————————

衬线字体的具体分类：

旧式衬线体（Old style）：Adobe Jenson、Janson、Garamond、Bembo、Goudy Old Style 和 Palatino

过渡衬线体（Transitional）又称巴洛克体：Times Roman、Baskerville

现代衬线体（Modern）：Didot、Bodoni 、Century、Computer Modern

粗衬线（Slab Serif）又称埃及体：Rockwell 、Courier、Clarendon

——————————————————————————————————————————

（维基百科）无衬线体（Sans-serif）专指西文中没有衬线的字体，与汉字等东亚字体中的黑体相对应。与衬线字体相反。

无衬线字体

衬线字体

——————————————————————————————————————————
无衬线字体分类：

• 哥德体：

早期的无衬线字体设计，如Grotesque或 Royal Gothic体。

——————————————————————————————————————————

• 新哥德体（过渡体）：

新哥德体或称为过渡体－－目前所谓的标准无衬线字体，如Helvetica（瑞士体）， Arial和Univers体等等。这些都是最常见的无衬线体。笔画笔直，字体宽度比变化没有比人文主义无衬线体那么明显。由于其平白的外观，过渡无衬线体常被称为“无名的无衬线”体。

Helvetica体

_____________________________________________________________________________________

• 人文主义体：

古典体或称为人文主义体－－（Johnston、Frutiger、Gill Sans、Lucida、Myriad、Optima、Segoe UI、Tahoma、Trebuchet MS、Verdana）。这些字体是无衬线字体中最具书法特色的，有更强烈的笔画粗细变化和可读性。

Frutiger体

____________________________________________________________________________________

• 几何体：

几何体－－（Avant Garde、Century Gothic、Futura、Gotham）。顾名思义，几何无衬线体是基于几何形状的，透过鲜明的直线和圆弧的对比来表达几何图形美感的一种无衬线字体。从大写字母的"O"的几何特征和小写字母"a"的简单构型就可以看出，几何体拥有最现代的外观和感触。Futura体

_____________________________________________________________________________________

其他常用的无衬线字体还包括Akzidenz Grotesk、Franklin Gothic、Lucida Sans。

在中文中，没有衬线的字体通常称为黑体，这时这个词的范畴和无衬线字体（Sans-serif）是类似的。所以在中文字体中常用“黑体”，在西文中常用“无衬线体”的称呼。(LOFTER这个就是黑体吧···)

 无衬线体和粗体

有一种直接将笔画变粗的变体，实际上准确的称呼应该是“粗体”（Bold），但是很多非专业人士习惯上也称为“黑体”，造成了中文指称的混乱。黑体的相反宋体字也可以有粗体，所以不应该和字体的“黑体”混淆。

——————————————————————————————————————————

了解这个基本就差不多了，具体慢慢了解吧，

附上优设的字体设计资源：https://imglf3.lf127.net/img/L3lJcXhPVVNUYlJMaHFyRVQyLzZ6WkFoMHprcUd4cUQrdGs3Q3VsUCswbnBTcTA2N1ZxK253PT0.jpg" smallsrc="https://imglf3.lf127.net/img/L3lJcXhPVVNUYlJMaHFyRVQyLzZ6U1NjT0hvcjAzUFJPZ0pwYzlkMmIybFZaWVFYVXJ4QmlBPT0.jpg" />

https://www.uisdc.com/45-most-wanted-beautiful-free-hand-drawn-fonts

手绘字体我觉得很有用，不过我不是用在电脑上，我用来画在本子上···

—————————————————————————————————

转『栅格化你的网页』

https://ued.taobao.com/blog/2008/09/grid_systems/

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实是一回事。不过从定义上说，栅格更为准确些，从维基百科查到栅格的定义为：栅格设计系统（又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格），是一种平面设计的方法与风格。

栅格系统的设计原理及应用
那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

__________________________________________________________________

W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
下面我们列出当n等于不同数值时W变化的数值表格 ：

从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：

在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……

当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。

呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。（记得补充看淘宝UED的四篇文）

—————————————————————————————————

960px网格系统（https://960.gs/） , 也称 960栅格布局, 数年来作为网页设计人员的最爱, 被用来搭建网站和设计网页布局. 。该无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用。如新浪、网易、搜狐等。

网格系统的缺点

有好就有坏，我们来谈谈缺点。

首先，很多人，尤其是对于新手来说——网格系统会阻碍他们的发挥创造。你会感觉你的灵感被束缚在这些条条框框里面了。如果出现这种状况，我建议你从网格系统中跳出来，用自己的创意去设计，按照自己的经验来排布元素，然后再切出网格系统，想出一个二者结合的两全其美的办法，稍做调整，如果网格系统和你的原创设计出入过大，不能有效协调，那么建议换一个网格系统，或者自己设计一个。

其次，网格系统用起来比较困难，有一定的学习成本，需要有一定的数学基础，你得懂比例，会计算。对于那些数学不好的人来说，网格系统真的是太复杂了。但是我认为，刚开始虽然比较难以上手，但是习惯之后，你会得心应手，设计也将会更加出彩。

      在设计中应用网格系统：

几条小建议：
在设计中使用重叠网格(网格线要可见）：

如果你能喜欢使用CSS网格框架，那就再好不过了，无论是PS还是其他什么程序，将网格设置为叠加，然后锁定。这样设计的时候心中就有数了。

设置参考线：

有了重叠网格之后，设置分栏参考线。这样就能够更清楚的划分边界。

尝试一下有限制的设计

最多16栏，6栏布局最明智。

运动员练习时都绑着沙袋还记得吗，有限制的练习，之后再脱去舒服，跑的更快。
因此，可以试着自我约束一下，练习在限制的条件下进行布局，这样你就能更专注于重点，进步更大。

注意空间问题.

每一栏之间的宽度越大，留给元素的空间越富裕。然而不要忘记垂直方向上的空间布局。是紧密还是充满留白？这需要按情况而定。

      结论

现在你对网格系统已经了解了大概。
可以尝试一下在设计前多做规划，这样网格系统用起来更得心应手，布局更流畅，多想想结构，多想想怎样分栏的布局方式来规划内容。

网格系统是一种好的习惯，也是一种格式化的设计工具。有了它，你能更专注于内容呈递，更专注于强调重点。

（原文地址：webdesign；优设网翻译：@MartinRGB）

—————————————————————————————————

11个创新布局技法

栅格线不是唯一的可选项，这些老手经验丰富，基础扎实，他们懂得怎样去创新，懂得用新颖的设计完成目标。条条大路通罗马，他们会凭借自己的感觉去摸索成功的方式，而最终的效果却更出彩。

左图: 瑞士风格海报 by Josef Müller-Brockmann。右图: 后现代主义风格海报 by Wolfgang Weingart

现代布局栅格线系统是由瑞士设计（又名国际主义平面设计风格）在20世纪早期确立的。

到了70年代，后现代风格影响了瑞士设计风格，瑞士风格一改过去僵化的栅格线系统，换之以更加灵活的栅格线布局。以完成更复杂、装饰更华丽的设计。后现代主义设计师从未抵制过栅格线系统，但是他们打破了限制。

 

左起：Sex Pistol Album cover by Jamie Reid,。Magazine, ‘Emigre’ Spread, ‘Ray Gun’ Magazine cover

还有一些平面设计师以新式风格继续推动着栅格线系统的发展，形成了诸如朋克、新浪潮、数字表现主义等新风格。一些设计师，比如David Carson，完全摒弃了栅格线。更多的是对栅格线系统理解基础上的改良、突破。

时至今日，栅格线系统依然重要。但是不要那么死板，脑子要活一点儿，还有很多设计的技法，尤其是以自由开放而著称的网页设计。

如图: The Amanda Project website, Ed Fella’s website, Kutztown Communications department website,MTV‘s website

你看上面这些网页设计，都使用了栅格线系统，设计师”玩”的比谁都”溜”，他们会根据现有的情况，突破栅格线的限制，在不牺牲可用性的前提下，达到出色的视觉效果。

因此，要想掌握本文的技法，必须要有扎实的基本功，要对栅格线有充分的了解和心得。本文可不是新手向的文章，”要想跑，先会走”。同理，要想改造栅格线，必须先要掌握栅格线基础。什么叫做伟大的设计师？伟大的设计师便是：心中对基础和原则了如指掌，但又不墨守成规，根据实际情况与个人经验，打破规则，完成更美的设计。

废话不多说，看看这些设计师们是如何打破规则的吧。

1. 阶梯状布局

阶梯状的字体布局富有后现代主义气息，配合相关的图像，能够达成与众不同的视觉效果。

2. 适度倾斜

性感的翘臀？性感的翘字？个性十足，遐想连篇。

3.       环绕形布局

更好的图文结合、打造视觉焦点、充分利用空间，挖掘栅格线系统的潜力。

4.       插画元素

栅格式布局太呆板？试着加入一点插画元素吧。让页面看起来更具娱乐性，更好的平衡美学与功能。

5.       重叠

在Frank Chimero的动态个人网站中，他采用了图像重叠的手段，而非传统的栅格线布局。令人印象深刻。

6.       利用页面边缘

不要为了留边距而留边距——可以做点小实验，让文本超出页面边缘，然后用成沓的印刷品来呈递作品。

7.       妙用形状

锐利的矩形配合以文本，看起来像是玻璃碎片，暗含一种暴力、兴奋的因素

8. 不对称设计

不对称设计让人感觉非常自然、淳朴、无修饰。比如说这罐蜂蜜，感觉就很天然。

9.       拼贴画

这则可爱的婚礼邀请函感觉非常人性化、有手工质感，浓厚的拼贴风格。

10.       加入引用

用户对一成不变的阅读节奏感到厌倦怎么办？那就试着打破节奏，给用户一点惊喜，引用就是一个好方法。尤其是在大块大块的文本信息中，加入引用可以适度缓解多栏布局的阅读节奏感，让用户读起来更舒心。

11.       手绘字体

适度添加手绘风格的字体，让你的设计更加有趣，别有风味，而不是一本正经。
这就是突破栅格线布局设计的一些技法，大家可以举一反三，在熟悉基础的前提下，突破原则，也突破自我！

原文地址：99designs
优设网翻译:@MartinRGB

————————————————————————————————

淘宝设计师经验分享：APP的栅格试验

 

这里专门说一下关于WAP App的栅格设计。以下相关都是基于一淘H5和一淘App总结得出。

最近这个超火：
《设计师新宠！交互神器ORIGAMI》
 《FACEBOOK PAPER 中23个的设计细节》

先介绍三个名词：Wap App；Native App；Hybrid App（融合体，H5页面嵌套在Native中），之所以说这三个，是因为它们相互之间的联系在某种程度上制约了Wap App 的栅格设计。下面详细说下栅格试验。

Phone栅格和PC栅格，本质上没有区别，一样的计算方式，无外乎屏幕大小的差别，但这屏幕大小，就有很多细节需要结合手机用户习惯来判断和取舍。

我们试验的Phone栅格都是流体栅格，简单说，就是不定义具体尺寸，而是屏幕占比。

说到屏幕占比，我们需要设定基准屏幕（这个可根据某些具体数据确定，比如我的目标用户群使用的手机屏幕尺寸占比最多的是1136*640，即可定位基准屏幕），这里假定基准屏幕是960*640 。

通常栅格的计算公式 （m+a)*n-a=640-2b  (m 栅格宽；a 槽宽；b 留白宽；n栅格个数）

 

      试验 1

m=40  n=12  a=10  b=25（我们通常定义栅格数目n是2，3，4，6的整数倍，12栅格算是最简单的栅格结构）。

试验1的栅格是沿袭PC的思想，但在后来应用到越来越多的页面时，这种栅格做2，3，4，6等分都很OK，但不做等分时，灵活性就很差，也算是一个致命的缺点，对于视觉设计师来说有很大的局限性。所以不建议在手机上使用12栅格。

 

      试验 2

m=44  n=12  a=8  b=12。

试验2和试验1其实差别不大，栅格数目都是12，也算是相对早期提出的（还没有觉得12栅格的灵活性差），相当于是试验1的优化：一是觉得两边留白宽度25略大，二是可以在一个单位栅格内取到最小的可触摸尺寸44*44。但其实真正应用到界面上时体现的价值并不大。当然后来发现12栅格的弊病后，便一并放弃了。

 

      试验 3

m=18  n=24  a=8  b=12。

24栅格是基于设计的灵活性而提出的。在应用中，无论是等分，还是灵活性，还是前端对于栅格的基数考量上，都相对合理，但依然没有最后选择这种栅格，这就牵扯到开始提到的Hybrid App。

需要应用栅格体系的H5页面，大部分是要嵌套到Native App中，所以要尽量让嵌套页面看起来和原生界面保持统一性，而App 有一个不成文的栅格规定，任何的界面尺寸都要是4DP的倍数，也就是最小栅格单位要是8Px（当然这可能也是没有足够经验的原因，到最后和APP团队沟通后才了解到，所以到试验栅格后期才采用了栅格试验4的方案）。

还是建议大家，如果你设计的WAP不需要配合Native，选择24栅格是相对完美的一种方案。

 

      试验 4

m=8  n=80  a=8*2  b=8*3。

整个界面按8Px的尺寸等分80分，灵活性很好，可以很好匹配Native。但也有不够完美的地方，一是不论对视觉设计师还是前端工程师，应用起来都不方便，计算起来相对麻烦；二是不能3等分和5等分界面，需要在设计和开发时做特殊处理，当然用户是看不出来的。但因为要保持终端的一致性，所以我们对于wap栅格设计采用了栅格4。

试验完毕。希望对大家的日常项目有帮助。

 

原文地址：ued.taobao
作者：正少

—————————————————————————————————

转载结束，以上知识都是开头，要自己做结尾呀~~~