5种网页设计排版方法:打造最好的阅读体验

  • 发布于:2024-05-03
  • 275 人围观

随着各种网页字体、付费的网页字体服务和现成工具越来越多,字体排版收回了它作为设计皇后的桂冠,成为所有图形和网页设计的关键。

今时今日,许多设计师在设计排版时,主要考虑的本质上还是审美问题。问题是,我们习惯于把字体排版和字体设计当作两种可互换的术语,但实际它们是不同的。在Dribbble上快速看一下“typography”这个标签吧,立马就能发现这个趋势。

完美运用字体设计的诱惑力会影响我们审视字体的方式,小伙,我甚至可以花几个小时让你看看字体设计组合!因为无论是字体排版还是字体设计都拥有共同的视觉概念。如果我们总是在寻找漂亮的字体,这个习惯将让我们远离字体的真正角色和特性,比如通用性、复用性和灵活的设计模式。

我们总是急于尝试最新的OpenType字体特性,用自由连字美化我们的设计,妄想依靠只有部分浏览器支持的css连字符属性来实现此效果。当我们得意的凝视我们的杰作的时候,竟然没有意识到根本没有人会关心这些,甚至是字体排版的达人也不会!当这时我们才意识到了事实情况,那就是文字能够让普通人在不同的设备上阅读和理解才是关键,不论是在视网膜屏的平板电脑上,XP系统的的电脑上还是在智能手机上。

“好的排版不一定能让排版狂人愉悦,却能让阅读更顺畅。”

——Oliver Reichenstein

网络上的大部分文章所针对的都是即时摄入的内容,听起来是否很像“逆金字塔”?在网络大环境下信息交流迅速,所以能适应读者集中精神一小段时间。人们访问网站和应用主要是为了寻找有用信息而不是为了达到阅读上的愉悦。不要误解我:我也喜欢能抓住我注意力的创意排版的标题和栏目,但是同时我们也不能忽视对整理平衡和正文易读性的需求。让我们开始吧!

1)先说重要的:项目调研

只有拥有考究的文字排版和具备从阅读体验出发的易读性的文章,才能被读者最好的消化。如同在设计的其他领域,在做事之前我们需要做一些调查。在研究用户习惯的过程中,我们不仅要发现有用数据,还要从读者的思维来考虑问题,把焦点从我们最大的敌人那里移开——我们的自我膨胀(我也总是在与之战斗)。

你应该也意识到了。电子阅读体验最主要的元素是内容、环境和用户。你可能在每个项目中都涉及到了这3个要素,但是如果你在每个要素上都倾注了排版的效果,那你会发现很贴心的想法和举动,这最终会对整个阅读体验有很大提升。

内容

开始排版设计项目最好的方法是开始阅读。应该每个设计师都能知道这些内容是给谁看的以及它需要怎么传播。但是除了评估内容质量和列出框架元素,我们也需评估其可理解性、阅读时间、目的以及阅读寿命。

涵盖所有排版设计元素

在阅读的过程中,思考下你遇到的结构或元素,并把它们列出来。在开始时这个列表可作为一个简单的样式引导。除了通用的段落、标题、附件等,你也遇到一些不常见的元素,如强调段落、引用段落、强调引用段落,还有现在非常重要的一些元素,如数据表格和图表标题。你需要有足够的字体能覆盖这些元素。

在纯文本链接中,要保证设计覆盖了所有的HTML元素。这时你可以建一些示例HTML和CSS文件并保存为Project-Typogra-phy.html,这些文件包含所需要的元素和规则。这个html文件将会成为这个项目的排版系统基础,在你设计响应式视图时迟早用得上。

评估阅读时间

阅读速度因人而异,大部分成人的阅读速度是每分钟200-250字。这样我们可以把整篇文章的文字数除以250就能轻易算出阅读速度了。如果你的项目有样本文章,你可以把它放进本地安装的内容管理系统里并运行一段脚本预估阅读时间。

预估阅读时间能帮助我们设计段间距,掌握阅读节奏。如果阅读时间太长,我们可以把文章分成小段,或者在关键点处设置一个醒目的引文。

评估可读性和易读性

许多文章都有阅读等级,知道这些标准是很重要的。比如一篇文章如果很复杂,你可以引入一些评论让读者理解文章,或者增加一些脚注。

如果你和一位原作者合作来修改内容和排版,一些工具能让你更容易区分不同版本之间的区别。

其中一个测评是自动易读性指数(API)。API专注于文字和句子数量,使其在实时监测方面发挥重要作用。Flesch–Kincaid难度系数测评是从另一方面来测试,更专注于字节,能实时处理大量密集型任务。

另一个有用性测试是Flesch易读性测试。它是通过单词、句子和字节来衡量的,得分结果可以告诉你这篇文章的难度。大部分语言都它们自己的译本。虽然这个工具在网页设计方面来说是很陌生的,但是出版商和政府机构已经用了很多年了,主要用来评估不同读物的阅读等级。

每篇文章都测试易读性得分是件很令人抓狂的事情,所以我建议使用方便的文章可读性统计工具,一个PHP脚本工具,是我们在做Creative Nights这个项目时研发的。

内容策略,信息架构和缩微本

如果我们跳出排版设计这个话题一会儿,先看看内容策略(计划、掌握内容和定义编辑过程的规则)和信息架构(组织和描述内容的规则),就可以参与一些潜在话题的讨论了。

考虑下内容的生命周期能阻止我们急于排版这一新趋势。下次发表一篇新文章时,就能顺利的阻止编辑因为没有清除为下次重设计而做准备的残留样式而发怒了。

分类标签——由信息架构确定的——会让网页设计者很痛苦,因为导航条或者栏目的空间都是有限制的。我敢打赌,在每个设计师的生涯中,总会试着重命名或者缩短分类名的情况,仅为了适应可利用的空间。当然,我们也常常会减小字号或者选另外一种字体,但是如果所有的方法都失败了,我们就能看看信息架构找最后的解决方法了。

除了文章,我们也必须对一些表单标签、指导说明、小字说明、交互元素(如按钮和链接)和其他不同作用的文本。所有这些小点都叫微缩本,它是有效交互设计的基础成分。

环境

网络标准协议发展迅猛,设计师们设计的网站与 “一个网络”的理想国度联系越来越紧密,无论何处的任何人都可以看到自己设计的网站。虽然每个项目达到如此广泛传播的目的是很难的,但是手机也并不意味着忙碌时只在智能手机上浏览网页。

软件问题

window系统的用户看到的字体都是经过清晰字体渲染引擎处理过的。问题是微调是需要时间的,而且并不是所有字体都能完美渲染。所以测试window系统的浏览器成了常规任务。

截图为16px字号的Verdana, Proxima Nova, Arial, Adelle Sans and Georgia字体(Proxima为18px)在window 7系统上firefox18里的效果。Proxima和Adelle被渲染为网页字体,其他字体怀疑只是OS系统上的默认字体。前5行字体都没有被清晰字体渲染引擎处理过。

当然,记住不同的网页字体服务可能会给你稍有不同的字体。一种字体由一种服务提供可能效果很好,但是由另一种服务提供看起来就只是凑合。我猜测原因或许是因为缺少时间投资——字体没有足够的时间来完成渲染,当然也可能是因为缺乏字体渲染专家。

幸好网页字体服务商一直在提高字体质量,相信最后每个人电脑上的字体都会变漂亮的。因为许多工作都需要维持合适的字体,我鼓励你买一些字体并订阅付费网页托管计划,这些举动能推动字体渲染优化的步伐。

如果支持window用户对你来说是项很艰巨的任务那么想想手动微调的字体,比如TheSans Office,来自LucasFonts(他们因痴迷于字体渲染优化而闻名)或者大量为微软office应用而设计的字体(它们的名字通常包含“Com”,“Offc”或“Office”)。如果想在旧的window系统用一种特殊字体是非常麻烦的事情,还是用已经过测试和验证的Arial, Georgia 和Verdana字体吧。

如果想知道更多关于字体渲染的信息,请阅读Tim Ahrens写的细看字体渲染。

万企互联