排版:原则、方针和常见错误

网站排版的基本概念:

1.清晰度

清晰度受字体设计、屏幕优化和微观版式影响。大写字母会比小写字母更难以扫读,正体字比斜体字更容易识别。正文文本和背景合适的对比会提高清晰度,适宜的行宽和行高也能提高清晰度。

2.可读性

可读性受布局、内容块的摆放和独立栏目的展现影响。
1.行宽(每行文本的长度):西文45-75个字符为最值得推荐的阅读长度。一般66个字符为最佳。
hhsdfasdfg,jdskdfgasf,doeksjdjfk,sjahsjfkdl,sjahshdjfk,sjdhfkajsh,zmsndx(这一行为66个字母,一个字母占一个字符,汉字占两个字符)
2.行高(一行文本的垂直高度):行高是两个连续文本之间的距离,或两行文字基线间的距离。

  • 一般,行高会设置成字体的1.5倍。
  • 行宽越大,行高也应该越高。
  • 无衬线字体比衬线字体需要更大的行高。
  • 页眉比正文需要更少的行宽。
  • 粗字体比细字体需要更大的行高。

3.字间距,即字母或汉字之间的距离,也是文本块的额密度。
letter-spacing

  • 可以根据行宽进行调整。
  • 字符间距经常用来突出副标题。
  • 行宽越长,字间距也需要相应增加。
  • 一些衬线字体的字符有时可能会重叠,即所谓的连字,如:AV,ft,co,并检查是否能分辨出vv和w的区别,即使是最小程度的不清晰,也会使文字完全不可读。

4.单词间距:单词之间的间距,可以根据行宽和行高进行调整。
word-spacing

  • 行越短,单词间距越小。

3.空白是最好的间隙

空白使正文的连续文本能够呼吸,并帮助读者获取网站传递的信息。
空白页被称作“负空隙”,是构图中元素之间的空隙,或者设计中没有被使用的部分,包括图形、外边距、页面和分栏(宏观空白)之间的空白,以及文本行之间、单词之间和图片标题之间(微观空白)的空白。
空白并不一定是白色的(空白这个词出自印刷领域,白纸即代表了空白。)
空白提供了线索和定位,有助于产生自然的、令人满意的阅读体验。

1.活动空白:
把用户注意力从一个元素引导到另一个元素,组织布局并帮助简历信息结构的空白。

2.非活动空白:
把文本规划成块的空白。

image.png

空白起了主导作用,突出了所展示产品的质量。

4.排版和网格

由一系列垂直和水平的轴线构成的二维结构,用来使内容结构化。
网格可以作为设计师以一种合理的、自觉的、自然的方式组织文本和图片的支架。
会产生韵律、秩序和连贯,经常被设计师用来更好地预见信息将放置在哪里,以及使创意变得理性化。
网格可以使图像元素排版快速而有序地结合。

YUI grids css栅格框架中的一种

能更容易地使用网格开发网站,与此类似的还有Blueprint、Typogridphy(基于960.gs)、YAML和Bootstrap

不是靠直觉来决定设计元素该放置在哪里,网格在一个固定的二维结构中,允许元素精确地定位。
基于网格进行设计时,通常从空白画布或白纸开始,为寻找合适的网格,一般用布局规则和公式(黄金分割、三分法等)来把白纸分成适宜的部分,并且选择内在的、令人满意的页面和分栏比例。

三分法:

  • 在摄影三分法中,摄影师需要将场景用两条竖线和两条横线分割,就如同是书写中文的“井”字。这样就可以得到4个交叉点,然后再将需要表现的重点放置在4个交叉点中的一个即可。
  • 在网页中,三分法构图是指把画面横分三分,每一分中心都可放置主体形态,这种构图适宜多形态平行焦点的主体。


黄金分割法:
1.618 : 1 = 1 : 0.618 = 黄金分割比例

黄金分割可能是最常用的网格布局方式,对固定布局(px)、流动布局(%)和弹性布局(em)同样适用。

垂直节奏:
排版中的空隙,一些比例合适的间隔。增加了网页的韵律、体现排版中的和谐。

维持垂直节奏的关键是行高,即两条基线之间的距离。行高设定了整个文本流中的网格,合理的行高有利于顺畅的阅读。
垂直节奏和字体大小有关,使用相对单位em值作为行高,可以维持页面布局中的平衡,而不用管字体的大小、样式和种类。

(挖坑在这里!!!!有关文字排版一个很重要的知识点,可是怎么尝试都跟书上描述的不对啊,得重新单独阅读。)
可以参考:怎样让你的网页有垂直阅读节奏

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,741评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,630评论 0 30
  • 01 前几天又看到小学生跳楼的新闻,看后细想极恐,于是在闺蜜妈妈群里讨论也炸了锅。 我们都觉得自己那么的爱孩子,可...
    妮妮小屋阅读 700评论 2 6
  • 进入深秋的一个周末下午,该死的淫雨从早上就开始下个不停,加上清凉的秋风呼呼的刮着,马路两边的枫叶摆脱不了这狂虐的折...
    伟嘉豪阅读 778评论 0 2
  • (2) 麦烁摊开从汤晓瑶桌子里拿来的小说,专注地趴在窗台上面津津有味地读了起来,午后...
    春风小小僧阅读 180评论 2 1