清醒自主的个人成长

重新设计StevePavlina.com网站 – 第5部分

页面布局

下部分要做的项目内容直接明了。现在是时候来创建所有页面并扩建出整个网站。

此部分工作涉及转移旧网站HTML页面上的内容,将其添加到新的WordPress页面,进行更新,并重新设计格式。

具体内容包括:

以上都是相当轻松的工作,但因工作量挺大,也花了我数周时间。

我在页面布局上做了大量实验,并创建出制作新页面的一些标准布局,从而给整个网站一种连续一致的观感。

我让每个页面都处于WordPress管理之下,使整个网站更易维护。自己还去除了所有原始的手工编码HTML网页,并把它们的旧.htm链接重新指向新页面。

收集反馈

在勤奋创建网站页面期间,我将开发进程中的早期作品版本给一些朋友展示,还在2015年十月中旬参加的WordPress见面会上展示。我觉得网站看起来开始接近发布状态,也收获了一些不错的积极反馈,但自己也能从其他人的反应中,看出仍有更多工作要做。

自己的最大领悟是,我需要改进字体排印。回头看时,等项目进行到此刻才承认字体排印问题,似乎有点愚不可及。在很大程度上,字体排印是我事后才产生的想法。我的所有文字内容主要使用默认设置,其中包括用于主体文本的常见无衬线字体,它很可能是Helvetica字体。

我意识到自己仍有需要学习的大量知识。尽管并无必要相信现已使用的字体有任何问题,我还是决定提升标准,弄清可以做些什么来改进字体排印。

字体排印

我确实不怎么了解字体排印。在我脑中,字体排印就是字体的同义词。另外,我推想选择字体并非那么重要,只要字体在屏幕上看起来没问题,不像人们在婚礼请柬上使用的花式笔迹便可。在我看来,坚持使用常见的网络字体似乎完全没问题。

我是伴随低分辨率显示屏和点阵式打印机成长起来,它们与今天普遍使用的高分辨率显示设备完全不同。我在字体排印方面的意识觉悟,至少可以说是懵懂无知。

我决定自己应该学习字体排印,减少这方面的个人劣势。其他人似乎明显能看出我并未注意到的事情。我猜字体排印应该也没那么难学。毕竟,我不用学会汉字才能搞懂此事。我只需学习如何在更高的知识水平上,处理自己网站的字体排印设计。那能有多难?

结果表明,学习基本的字体排印知识一点都不难。它只是需要花费时间。

去年十月底,我用Google搜索找出字体排印方面的资料,花了2-3天进行研究,每天学习8-10个小时。对于所有看起来对自己项目有用的知识,我都做了笔记。我先寻求理解此事,而非实际应用。

在进行研究的头一小时,我便轻松学到比以往全部所知都要多的字体排印知识。那些知识的确很有道理。基于在几天内有意学习的内容,我便意识到自己确实能在网站的字体排印方面做得更好。

我遇到的最有用网站,是Butterick’s Practical Typography(Butterick的实用字体排印学)。第二喜欢的网站是Web Typography(网站字体排印学)。我全部看完了这两个网站。

无论何时学习新事物,我都发现把新知识与已经理解的某种事物联系起来会很有帮助。我开始把字体排印与时尚知识近似看待。对字体排印的选择,也是自我表达的一种手段。我开始好奇哪种字体给人的感觉会像我一样,如同直接去问:这件衬衣感觉像我的风格吗?

我成长在一个年代较早的网络字体排印世界,那时的统治字体是Arial、Verdana和Times New Roman,所以自己还有许多需要抛弃的旧知识。我了解到,字体排印的概念内容要比字体选择大得多。好的字体排印还会考虑各种字符元素的精确间距、行高、字母间距、标题布局、粗体和斜体的使用、不同字体的平衡处理、项目符号的类型与间距、字行长度,等多得多的内容。说字体排印等同于字体本身,就像在说时尚等同于纺织面料。

随着深入学习字体排印,我意识到自己由于无知,一直犯着大量错误,现在我也终于能看出那些错误之处。我开始用CSS编码进行试验,为标题、字体、字号、页边空白、字母间距等更多细节测试不同的可能选择,通过一点点努力,我也看到了网站的进步提升。

只是举个例子,我学会留意到oblique italics(变倾斜体)与real italics(真正斜体)之间的差别。许多网络字体会采用算法倾斜字母的方式,生成基于原始字体的斜体版本。这种冒充的斜体看起来也没问题,但一套真正的斜体字,看起来会比倾斜普通字体得到的斜体字更漂亮美观。只要字体设计师选择如此,真正的斜体字体还可包含额外的花边装饰。

只有直接在我的网站上观看,而非通过RSS阅读器、电子邮件,或无法应用合适字体的其他网站上观看时,接下来这部分内容才有意义。

请注意这两行Arial字体间的差别:

Arial字体的斜体版本,看起来基本就像正常字体被变斜后的版本。

现在请注意同样两行字在Charter字体下的差异:

你能看出差别吗?Charter字体包含某些带有花边装饰的更美观斜体字。你可以看出特定字母在变成斜体后有着不同的渲染结果;它们并非仅仅是正常字体的变斜字母。请尤其注意a、e、f、i和z等字母的普通版本与斜体版本之间的差异。

有些字体只包含普通版本的基本字体,它们会用算法方式生成其他变体形式,比如斜体、粗体和粗斜体。而更高品质的字体,可能针对每种变体形式,去设计特别版本。斜体字母并非仅仅是将普通字母变斜。粗体字母也不是清一色地加粗正常字母。

在早期网络世界里,使用字号范围在10-12个像素点的无衬线字体十分常见。在普遍使用14寸至17寸低分辨率显示器的年代,这种做法也合情合理。但在如今分辨率更高、屏幕更大的显示设备环境下,主体文本内容使用更大字体才合乎情理,甚至高到25像素点也很正常。

研究过字体排印后,我开始比以往更关注细节,自己也确实沉迷其中。我做过的试验和调校工作,可能有些人会认为多得荒唐。

在选定这个网站使用的字体前,我看过不止600种字体。

我为标题、子标题、菜单标签、页脚链接、按钮说明、表格区域等更多细节,测试过不同的字体、字号和字母间距。有时各种字体间的差异非常微妙。我偶尔要反复查看5-10次,才能弄清两种选项里的哪一个才是最佳选择。我还不时寻求Rachelle的帮助,来获取新鲜的观点视角。

我为主体文本试验了几种不同的字体类型,决定最佳选择是把字体大小基于窗口宽度进行调整。在显示器或笔记本电脑上,当窗口扩展得比内容区域更宽时,主体文本字体最大可以有24个像素点。当窗口宽度缩小时,字体大小会以半点像素的缩进量,逐步朝16个像素点缩小。这种变化完全是通过CSS(层叠样式表)完成。因此,当你扩大或缩小自己浏览器窗口的宽度时,我的网站文字会逐渐改变字体大小,这样即使在小窗口里,网站内容依然可读。

当然,我们也可使用浏览器即时改变字体大小(比如在Mac电脑里同时按下Cmd和减号,以及Cmd和等号,来缩小和放大字体,再同时按下Cmd和0返回正常大小),但很多人都想不到这些做法。

在研究字体排印前,我甚至没注意到有着更大字体的网站会让人更快阅读。我办公桌上用的是27英寸的4K显示屏,有了更大的字体,我可以靠在椅背上更放松地阅读。虽然为小屏设备采用方便移动阅读的字体设计很重要,会有多少人也考虑自己网站在更大显示屏上的视觉效果?谁想在一个27英寸的显示屏上阅读只有10-12像素点的小字体?市面上已有成百上千万的大显示屏,包括更大屏幕的iMac桌面电脑。

我在字体排印方面做了许多小调整,除非有意寻找,否则大多数人永远都不会留意到这些微小之处。例如,我编写了自定义的CSS,用于改变圆点符号和数字符号,从而让它们比主题文本在颜色上看起来稍微淡一点。这种效果可以让人较不注意项目符号,把更多注意力放在文本内容上。为实现这种效果,我不得不移除默认的项目符号,基本上要用CSS重新对它们进行编程。弄清如何做到此事,就是很有意思的挑战。

在网站的其他部分,我有意移除了自己觉得多余,或会增加不必要杂乱观感的项目符号,比如“推荐阅读”网页上的书单部分。

我还改变了引号、代码和表格的外观样式,即使自己几乎很少在文章中用到后两项内容。

正如你很可能已经看到的,当我学习某样新事物时,喜欢完全沉迷其中。连续很多天里,我感觉就像完全在字体排印学里生活与呼吸。这就是我最喜欢的学习方式 — 完全彻底的沉浸式学习。

设计好单篇博客文章

这个网站上需要设计好的最重要页面类型,就是普通的博客文章页面。它是大部分新访客来到网站首先看到的内容,以及读者通常花最多时间的地方。只是为让这类页面看起来正确美观,我便花了数天时间,对每个小细节进行调整,直到自己感觉确实良好。

针对标题和子标题(H1、H2、H3等标题层级),我采用了PT Serif字体。这款俄国人设计的字体是我最喜欢字体之一。我喜欢它在a、c和s字母上的尖钩设计。PT Serif是Google字体集的一部分,可供任何人免费使用。

对于主体文本,我差点也采用PT Serif字体,在设计网站的一段时期里,我一直使用它。但后来我无意中发现Charter字体,自己对它更为喜欢。在我看来,Charter字体的阅读体验更轻松容易一点。Charter并不像PT Serif那样,包含在Google字体集里,我必须把它单独下载并添加到自己网站上。Charter是由Matthew Carter创作的一款免费字体,此人也创作了Verdana和Georgia字体。由于自己曾在旧网站上大量使用Verdana,不知怎地Charter字体看起来也很适合我的新网站。

我还遇过的一个问题是,文章文本的每行宽度该有多少。我知道太长的文本宽度会让人更难阅读,更窄的文字栏可以使人读得更快,但我并不知道理想的行宽。有个网站建议每行45-90个字符比较合适,但那种指导范围太大。做过更多调查后,我发现每行66个字符可以当做理想推荐行宽。我调整了页边空白,直到内容部分的每行宽度在66个字符左右。我感觉这种排版效果看着挺棒,而且发现文字内容很易阅读,于是采用了这种选择。当然这种排版只在足够宽的屏幕上才能显示出来。若我试图在手机小屏幕上适配每行66个字符的排版,就需使用小得荒唐可笑的字体。

特色图片

我知道,如今在博客文章里插入特色图片很常见。这项功能在我开始写博客的2004年还不存在,自己以前创作的所有博客文章也没有特色图片。我的个人观点是,大多数情况下,那些图片都是毫无必要的多余之物。当在其他网站上看到那些图片时,我倾向于觉得它们令人分神和显得幼稚。或许是因为有太多内容作坊喜欢使用诱人照片,我也倾向把特色图片与低品质内容关联起来。

但我能理解为何有些人喜欢使用特色图片。若你对Pinterest或Instagram等图片分享网站感兴趣,这种做法便合乎情理。添加图片也许会使关联文章看起来更漂亮一些。

可能主要的问题是,许多博客作者在选择特色图片时并未太细心,他们过度依赖免费的库存图片。在时间管理文章中插入闹钟图片,或在健身文章里插入随意的慢跑者图片,真会给文章添加任何价值吗?当看见免费库存照片时,我猜想对应的文字内容也同样毫无吸引力,自己会直接点击返回按钮,免得在很可能毫无价值的东西上浪费时间。

在某些情况下,特色图片肯定能增添价值,比如为菜谱博客插入饭菜照片,或为旅行博客插入地点照片。但若博客作者仅仅在事后才想起放上特色图片,我就更愿只看到文字内容本身,因为那种阅读体验更简单快捷。

鉴于我对特色图片的负面印象,还有看到人们普遍的草率使用方式,自己在重新设计网站时,便毫不犹豫地排除了这个选项。我看不出有任何理由,要在网站上添加这些无用事物。与那些看到图片后会想“哇,一张闹钟图片哦!”的读者相比,我更愿吸引那些更聪明的读者。

只有当使用图片恰当合适,会给文章增添价值时,我才会在文章的合理位置插入图片。我喜欢明智审慎地,而非胡乱地使用图片。

空白间距

在整个设计项目里,我必须做的最辛苦工作,就是细心调校每个页面上不同元素间的空白间距。

刚开始这个设计项目时,我并不清楚是否存在一种明智方法,可以调整页面上不同元素间的间距,比如标题、子标题和主体文本间的间距。我直接使用了所有默认设置。

后来我意识到,以主体文本中行高(每行基准线到基准线)的倍数为基础,存在一种调整间距的更精确方法。我把页面的垂直布局,想成在页面上从上到下进行乐曲创作,此时页面的每一行(包括空白行或其他情形),就像作曲时的一个音符。假如音符间的间距恰当,我们就会听到美妙音乐。但若音符出现得过早或过晚,音乐听起来就不太对劲。所以我意识到,如果随意安排不同元素间的间距,那就像随意写作一首歌。最终结果将缺乏和谐效果。

当一首歌听起来不和谐时,我们的耳朵便会感觉受到冒犯。当单个音符出现的位置不当时,我们也能听出其中的差别。

若网页上的各种元素没有和谐的间距安排,最终结果就是,那个页面在视觉上会显得更为复杂。由于网站设计者没有对间距给予太多重视,大多数网页都有这个问题。他们只需解决这一个问题,自己网站的页面就会显得更不复杂,能让读者眼睛感觉更加放松。

我从普通的博客文章页面着手,开始细致调整网页垂直方向上的元素间距,以使各种元素的基准线,都与主体文本行高的整数倍相一致。从页眉到页脚,所有元素的位置都要协调一致。我发现当做完这种改变时,整个页面看起来会比以前更加舒缓。

在一个页面上阅读时,我们的双眼习惯于用相同间隔扫描文字内容。这些不同行内容之间的间距,会建立起特定的扫描节奏。若我们在段落之间,或遇上子标题时出现停顿,而且每种页面元素对应的基准线,刚好与先前建立的扫描节奏相一致,那么双眼自然就能以同样的节奏,继续阅读下一块内容,整个阅读体验将和谐融洽。但当这些页面元素没有落在恰当的相应位置,便会打乱我们的阅读节奏,导致双眼不得不重新做出调整。这种阅读更易让人疲劳,也使页面看起来比正确的样子更加复杂。

间距方面最基本的经验教训,就是若在文本内容的两段间出现空白行,那么上一段的底部基准线到下一段的顶部基准线之间的间距,应当刚好是行高的两倍。若非如此,你便会打乱人们的自然扫描节奏,你的文本内容将比正确的页面布局更难阅读,整个页面看起来也缺乏和谐感受。只要你解决好这一个问题,就会在观看文本并试着阅读时,看出和感觉到前后差别。

对于博客文章页面的文本布局节奏,我采用了下面这种间距方案:

空白行

标题

空白行

日期

空白行

文本

文本

文本

空白行

文本

文本

文本

文本

空白行

空白行

子标题

空白行

文本

文本

文本最后一行

空白行

空白行

阅读相关文章:

空白行

第1个链接

第2个链接

第7个链接

空白行

分割线

上一个链接 / 下一个链接

空白行

所有这些页面元素的基准线都落在主体文本行高的整数倍上。如果行高是33像素点,那么这些页面元素的基准线,就会落在页面垂直方向的33、66、99、132等像素点上。

一旦自己喜欢博客文章的外观结果,我便把这种间距安排应用到网站的其他页面上。我用了大概两周时间,才使每个页面看起来都正确无误。因为自己必须调整众多CSS元素,才能让它们彼此和谐融洽。

当这种新间距安排成为网站默认选择后,有些元素只偏出5个元素点我也能看出,因为那时自己会有不和谐的感觉。例如,当在“产品和工作坊”页面添加侧边栏时,我便感觉某个地方不对劲。问题出在,网站侧边栏里用了稍微更小的字体,行高自然也默认变小。一旦我把行高调整到与主体文本匹配的高度,那种整体和谐感便重新回归。

也许我在此事上有点过于投入,但我确实喜欢最终得到的结果。我的双眼在阅读每个页面时都感觉更轻松舒适。阅读长文也没那么令人疲惫。和谐感替代了不和谐感。即使大多数人永远不会清醒留意到这些细节,我依然感觉很高兴付出如此多努力,为了读者利益做好这些改进。

完成这些额外工作改变了我和自己网站的关系。我经常把旧网站只看成作品内容的容器。我在乎作品的内容,但我不太在乎网站设计。通过付出80%的努力工作来获得那额外的20%价值,我感觉自己与不断进化的网站有了更多联系。它并非只是我放置在外的某样事物。现在我把自己也更多融入其中。这个网站也开始反映出我的某些价值观,比如关爱、和谐和优雅。此种结果让我对整个项目感觉甚至更加美好,提升了我业已高涨的工作热情。我开始比先前更加享受这项工作,并非从回避困难工作,而是从拥抱困难中获得更多享受。

然而不利一面是,这个过程也让我变成某种设计上的势利眼。我现在很难再去看其他网站的页面设计,尤其是杂乱的新闻文章。那些糟糕不和谐的页面设计,会让我毫无阅读兴趣。只是通过一些CSS调整,整个网站的阅读体验就会轻松容易得多。

升级CSS技能

CSS意指层叠样式表(Cascading Style Sheets)。它是用来描述网页上各种元素样式和位置的编码语言。

开始着手这个项目前,我已有不错的CSS编码技能,但在进行这个项目期间,我的CSS技能得到了巨大成长。我不断遇到自己想做的改变,但又不知如何下手。有时我会通过Google搜索直接找到确切解决方案,同时额外学会一些新的CSS编码技巧。其他时候我则必须想出自己的解决方案。

项目进行期间,我学会使用一些自己从未用过的CSS编码,比如:before、:after、:nth-last-child,和:nth-last-of-type选择器。我感觉更有能力用CSS做些创意工作。自己使用它的速度也快了许多。

无论自己何时要去调整页面某部分的样式,我会首先在脑中创造出想要的外观画面。然后再想出如何用CSS代码,让它看起来和自己想要的完全一样。到项目完成时,我通常只用几分钟就能编写出某种正确的外观效果。

我用CSS改变了网站上的几乎所有默认格式,以使整个网站看起来一致和谐。我重新改造了Ninja Form的联系表格,Give页面的捐款表格,Jetpack插件的文章输出布局,还有Simple Yearly Archive插件的存档页面格式。

这也是我的自定义CSS文件几乎长达800行的原因,而且那还是网站主题自带CSS文件以外的附加部分。我还重新组织和评论了CSS文件,从而让它更易维护。

我很享受所有这些细节工作。我喜欢在不知怎么做时,想出编码方案的那种工作挑战。能够面对可以推动自己提升知识和技能的挑战,是种无比精彩的学习体验。此时几乎每天都是一趟学习经历。

查看原文

退出移动版