视觉设计-文字编排的易读性

6599301775261335767 (1)

视觉设计工作中,大家总习惯将重点放在图标和色彩上。但实际上,作为一个阅读类app,思考如何让文章更易于阅读是和图形、色彩处理同等甚至更为重要。

设计工作中,如果有100个人就会有100种设计理论,我认为并不能总结出一条绝对正确的理论。但是,如果完全没有什么设计理论的话,貌似会使设计显得很奇怪。比如,经常会看到这种书籍(图1),一行文字过长而订口的空白又处理得不太合适。只要看到这样的设计,马上就会想到“这里好像没有规则啊”,还会让人产生“这本书的设计师好像不读书啊”这样的感觉。在阅读过程中哪怕只有一些地方令人难以理解,也会让人精神不集中,不能彻底关注文章本身。如果是一个读书的人,他自己看看这样的设计,自己也会感到这种方式不便于阅读啊。所以我认为电子书的阅读感受也是这样,要做出理想的版面,作为设计者需要站在读者的角度考虑,应该寻找对于自己来说便于阅读的排版。因此,也借此机会来整理出网易云阅读产品中,书籍正文文字排版的相关规则。

视觉设计-文字编排的易读性

设定内容区域

首先在书籍编排过程中,设定页面四周的余白来安排页面的排版。页边空白的大小不同,排版效果给读者带来的印象也会发生变化,因此需要适当地进行处理。虽然纸质书籍已经有了莫里斯所提倡的版面设定理论,但是这些理论并不适合于显示在硬件设备上。因此我们需要根据不同的媒体特点来进行处理。如图(2) 有颜色的部分是版面,abcd版面标准的设定通常是按照1:1.2:1:1.7的比例来进行设计
视觉设计-文字编排的易读性

字体大小设置

其次是文字的字体大小,标题的字号要大,解说注释的字号要小,文字的大小要根据它的作用灵活设定。在版面设计中,首先要确定正文字体大小,只有确定了正文字体大小,才能根据它来调节平衡,决定大标题,小标题以及注释文字大小。
下图是适用于一般文章正文文字大小的图例。即便是相同大小的文字,字体不同看起来大小也不一样。而且选择文字大小时,需要考虑文章的阅读方式,比如,是在大屏幕机器还是小屏幕。(图3-4)
视觉设计-文字编排的易读性

行对齐

排版中重要的一条,是把应该对齐的部分对齐,例如每一个段落的字行对齐,就是把行的位置进行对齐使其一致的方法。行头对齐是所有行均在行头对齐的方法(图5)虽说这种用法使得行尾不齐整,但方便文章的停顿部分换行,适用于散文、诗歌等表现韵味的文字版式。但是,对于编排长篇文章时,选择左右对齐更能体现条理性。由于换行的位置都相同,阅读行头或换行的时候视线能够平缓流畅地移动。
视觉设计-文字编排的易读性

文字留白

使文章易读的排版方法多种多样,下面说说简单的方法“留白”留白就是在版面中留出空余的空间。
编排文章时,最小的留白是文字里的空白,根据文字的形状,字中有很多小的空白,留白的大小依据字体或者文章内容上汉字及英文的多少而改变。其他比文字中的空白大的留白,是文字与文字之间字间隔的空白、以及行与行之间的空白,段与段之间的空白,留白的面积大小要遵循上述顺序。在文章中如果这个顺序颠倒或者混乱,就会变得不易阅读。
视觉设计-文字编排的易读性
整理好依次顺序后,再要检查编排后的文字是否严格按照这个顺序进行设计。不过在实际排版时没有必要把它们的大小都分别测出来。重要的是用眼观察外观来判断留白大小是否合适。

行间距的设定

行高,行间距的大小对文章的易读性有很大的影响。行与行之间拉得过开,从一行末尾移动到下一行开头,视线的移动距离过长增加了阅读难度。相反,行与行之间贴得过紧,上下挨得过紧影响了视线的移动,让人不知道正在阅读哪一行(图12)。正文最恰当的行高,基本应该设定为其文章中文字大小的两倍。例如文字大小为8px的文章,就应该把行高设定为16px(图13)
视觉设计-文字编排的易读性
但是根据文章使用的字体不同,行高使用的值也会发生改变。比如宋体文章的行高要比黑体的行高大一些,相反黑体的行高要稍微小一些,这样的设定更易于阅读
视觉设计-文字编排的易读性

另外正文以外的大标题,小标题和引导语类的短文章,一般要把行高设定得稍微窄一些。大标题或题目的部分,因为字号较大,若文字间隔太大太松散会影响阅读。因为若把引导语的行高设定过宽,这段文字难以被认为是一个整体。因此需要配合文字版式,挤紧字与字之间隙,这样会让版面看起来紧凑扎实。

视觉设计-文字编排的易读性
我们在设计工作中,头脑中往往会存有某种标准,并且会以之作为排版工作的标准。但是实际工作中总会有些具体情况,例如对于对话较多的原创类书箱而言,行距稍微小一些也没关系,而对于出版类书箱这样段文字较多,或者论文这样比较晦涩的内容来说,行距大一些会比较便于阅读。当然读者的年龄也是很重要的问题。像这样的观点还是与自己的阅读经验直接相关的。

保持足够的段间距

段落与段落之间必须有一定的距离。如果这种距离不够,那么读者从字行末尾折回,移向下一行视线就会与移向下一段的视线发生冲撞,从而导致阅读无法顺利地进行。而且,如果段落之间的距离过远,也会有造成段落之间的关系联系不强的弊端,因此设定合适的段间距是很重要的。
作为保证文章易读性的标准,将段间距设为大约两个文字的大小是一种通常的作法。也就是说,当正文的文段以12p文字排版时,段间距就是24px。当然,这个标准也并不是绝对的,有时候也可以通过刻意地设定狭窄的段间距,给读者带来内容紧凑的印象。
视觉设计-文字编排的易读性
我们的书籍排版是以像素尺寸的形式显示在硬件设备上。所以我们要确保设计出来的文本尽可能的易读,无论读者所处的空间、时间有何种变化。我们要尽可能透彻地了解,作出明智的决定,并且建立规范的设计规则。

特殊符号的处理

和构成简单、只需处理字母的西方文字相比,中文汉字中,众多“符号”不规则地混在一起,构成非常复杂。因此,为了使这些繁杂的要素配置得整洁美观,需要在开始排版之前,预先制定“段落样式”的设计排版规则。
例如中文和英文混排的文章,为使中文和英文和谐自然地结合,需要把英文的字号设定得比中文字号大一些。还有左右对齐文章,必须决定是否把标点“悬吊”在对齐线之内。再有标点、记号,若放在行头或者行尾,文章就会变得不易阅读。为了防止这些发生,必须进行避头尾的设置。制定好上述详细的规则,就会将文章编排得美观协调。
视觉设计-文字编排的易读性

版面设计也会随着时代的不同而发生变化。

有时候即使运用了这些相同的理论所进行的编排设计,也会出现“看起来不错啊”和“只不过是简单的排列而已”这样两种情况。设计还是会体现出时代的要求的。当然读者年龄层也是非常重要的影响因素。

网易云阅读页面元素的使用方法,风格,使用的字体样式等问题,已经有一些固定的规则了。但是,这些惯用的字体每隔一段时间都会发生一些变化,虽然幅度并不是十分明显,但仍然是在逐渐发生着变化的。因为作为版面设计的条件而言,如果视觉上没有任何新鲜的东西也是不行的。在对这些所使用的颜色以及文字的组合方式等问题细微地改变过程中,存在着无限的正确处理的可能。方法总是有很多,所以我们也一直在寻找最舒适易读的阅读编排方式。

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/158/

(0)
iouedioued
上一篇 2014-09-07 17:14
下一篇 2014-09-08 22:41

相关推荐

  • 交互设计|回复评论功能设计

    力匕小2在思考简单可行的产品方法论阝勹廴匚之前已经写过两篇有关评论的文章了,最近再次设计评论功能,发现“回复评论”的交互设计也有很多细节值得体会,而之前的两篇文章没有提到,所以这篇文章就来分享下“回复评论”的交互设计。我们首先来看下几种评论的展示位置。1. 内容详情页展示全部评论内容如果你的内容比较单一,比如就是一篇文章,而评论内容又比较丰富,浏览性又很高,那么评论内容可以完全展示在内容下方,比如微博的每条微博详情页,今日头条、36氪、...

    2018-03-02
  • 跨终端体验设计,绕不开的用户槛儿

      随着平板电脑的普及,越来越多的手机端APP将自己的应用拓展到Pad端,来为用户提供更丰富的多终端体验。此前一些设计师从视觉设计的角度探讨了多终端产品的设计,作为一枚用研,除了视觉体验,我们会更多地去…

    2015-04-18
  • 别骂携程了,来看看Booking上如出一辙的“暗黑套路” 【UXRen译#182】

    作者:Roman Cheplyaka   |  翻译:林龙飞,校审:天蛙   近来,有很多网站和应用的设计者会诱导你做他们想做的。以下是来自timewellspent.io的例子: Youtube自动播放更多的视频来把用户留住; Instagram使用无限…

    交互专题 2017-10-25
  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26
  • 图片优化的那些工具

    图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、 image…

    2014-11-06
  • 阿里交互新手小记 | 交互工作流程的梳理

    头疼就是脑子里有什么正在激烈地进行改变,可能就是你从困难上学会的东西。—— 写这篇文章的人

    2017-05-23
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 设计要以人为本,用户的目标才是最重要的!

    来源:简书 作者:老D   为什么需要计原则? 设计原则其实就是对一些设计过程中基于人类的认知规律对设计做出的一些指导性原则,并且对已经成为行业共识的设计经验做个总结,用来指导设计师界定问题、提高效率。 …

    2014-09-27
  • 界面框架与内容控件总结

    UI设计中一项很基本的工作就是界面设计,但是,如果一开始就是从界面这个概念去入手的话,往往会觉得无从谈起。所以,我会一个界面拆分成几个模块:框架、导航和内容。然后根据每个模块的特征去选择适合的展示方式,然后再拼凑成一个完整的界面。

    2017-05-29
  • 如何避免交互设计中的「刻板印象 」

    之所以有“刻板印象”,是因为有categorical thinking(类别型思维),它往往使我们产生对事物的固有看法和理解,是在看到某些特定人、事、物时第一时间想到的,这些就形成了“刻板印象”。那到底该如何避免它的消极作…

    2017-08-01