排版是有效设计最重要的组成部分之一。它由影响用户如何查看网络文本的多个方面组成。例如,可读性有助于排列字体,以便用户喜欢阅读内容。强调、空白、接近和对齐的原则有助于视觉层次结构,帮助人们在搜索所需信息时导航而不迷路。
另一个重要方面是字体的选择取决于项目目标和产品标识。排版是项目的灵魂,有时可以弥补缺失的图形或复杂的动画。
当您开始为下一个项目设计排版时,请从问题列表开始。与您的团队成员一起定义并写下您希望用户看到的最重要的想法、产品的情绪以及您想要唤起的情感。掌握了排版的原则,您将知道从哪里开始以及如何实现这些目标。
![](https://img.haomeiwen.com/i7870889/0eebb44ad04731bf.png)
可读性
每个人都知道设计界的传统智慧:在选择字体时应该格外小心,以使设计中的文本看起来可读。还是清晰可辨?或者这些术语——易读性和可读性——是同一个意思吗?
易读性是指字体的设计和字形的形状,并受印刷者的影响。相比之下,可读性更多的是关于读者对文本的感知,以及他们对文本的解读、处理和理解的难易程度。可读性是文案和用户体验作者的责任。然而,文本的排版特征对文本的流畅性和理解力有着深远的影响。
哪些印刷因素会影响可读性?
字号
尺寸越小,字体越难阅读。从可访问性的角度来看,通常建议将正文文本设置为不少于 16 像素。
类型案例
虽然标题和短语(如标题或副标题)与所有大写字母和标题案例相得益彰,但您应该避免将这些案例用于正文。句子大小写对人们来说是最自然的——毕竟,这就是我们学会阅读和写作的方式。
行距(前导)
行距取决于字体的大小。字体越大,行距越大,避免字母重叠。
线长
排长队很难跟上。短线也好不到哪里去。它们太突然了,会影响用户的注意力,迫使他们的眼睛经常来回走动。最佳行长为 45-70 个字符,包括空格。
对比
低文本与背景的对比度会增加眼睛疲劳并显着影响可用性。
![](https://img.haomeiwen.com/i7870889/4742c4b5991ed59c.png)
可扫描性
根据 Nielsen Norman Group 于 1997 年对人们如何在网络上阅读进行的研究,79% 的参与者在访问不熟悉的网站时更喜欢在阅读之前扫描内容。只有 3% 的人逐字阅读文本。[3]扫描可以帮助读者在几秒钟内了解该页面是否值得他们关注,是否可以为他们提供价值。
可扫描性是以允许用户浏览内容、确定页面是否包含他们需要的信息并理解主要信息的方式排列内容的原则。
是什么让文本可扫描?
• 标题和副标题,
• 项目符号和编号列表,
• 短段落,
• 字幕,
• 粗体和斜体格式,
• 阻止报价和拉报价。
![](https://img.haomeiwen.com/i7870889/1688ce0ef9163108.png)
排版情绪
排版不仅仅是呈现文本的工具。它可以增加网站的品牌个性,强化想法,甚至唤起情感。
在 2007 年 Helvetica 纪录片, 英国平面设计师、印刷师和艺术总监内维尔·布罗迪 (Neville Brody) 表示,字体会影响人们对广告信息的情绪反应。
当他们看到垃圾字体的“买这些牛仔裤”的文字时,他们很可能会看到一些地下服装店出售破洞牛仔裤。当同样的信息出现在 Helvetica 中时,许多顾客会想到 The Gap,在那里他们可以找到一条不会让他们在人群中脱颖而出的朴素牛仔裤。
字体帮助设计师设定对产品的期望并补充品牌形象。平板衬线中的标题和徽标引人注目且醒目;无衬线字体看起来简单、直接、可信;与此同时,衬线带有一种传统和经验的感觉。
衬线字体的现代变体,如 Didone,似乎非常适合奢侈品和高级时装和魅力行业。粗细笔触之间的强烈对比、狭窄的孔径和整体优雅、理性的设计有助于品牌想要传达风格、优雅和受人尊敬的感觉。
![](https://img.haomeiwen.com/i7870889/2273f22b724d968b.png)
限制你的字体
在使用字体之前,你应该评估它的风格、易读性、重量、情绪和补充内容的能力。假设您有几个候选人,这里出现了一个问题:您的产品有多少字体足够?
传统观点认为,网站、应用程序或任何其他数字产品应包含不超过 3 种字体。通常,一种具有多种字体样式用于不同目的的字体可以正常工作。太多的字体会造成混乱并使用户迷失方向。此外,保持产品的一致性和平衡视觉层次变得更加困难。
选择字体时,请确保它们具有足够的对比度,但在视觉上保持兼容。例如,简单的无衬线字体更适合正文。它们使您可以放松并尝试使用更独特的标题字体。
避免使用凌乱、难以阅读的字体,并始终以小尺寸测试字体的易读性。
![](https://img.haomeiwen.com/i7870889/c7667dce4b14cc5f.png)
排版比例
传统上,印刷比例是指设计中用于各种类型内容的不同字体大小。在现代用法中,它还可能包括字体粗细、样式和其他将每种文本内容分开的元素。根据 Material Design 类型量表,每个产品应包括 5 个类型类别:
• 标题是最大的文本,范围从 1 到 6。它们应该使用醒目的、富有表现力的字体。
• 字幕(或副标题)比标题小,不应该那么突出。
• 正文是内容的主要文本,通常用于较大的写作部分。衬线和无衬线非常适合这一类别。
• 标题和上划线是最小的文本,应该使用简单易读的字体。
• 按钮或标签文本是按钮、选项卡、对话框和卡片中使用的文本。它通常使用衬线或无衬线以获得更好的易读性,并且可以全部大写。
在设计中使用的字体大小没有神奇的数字。作为起点,您可以使用 16px 的浏览器默认值并使用黄金比例或其他乘数计算下一个字体大小。至于字体样式,请依靠您的和谐感和美感。
正文、标题、副标题和标题之间的明显差异使设计看起来具有凝聚力并增加了其可扫描性,允许用户浏览内容并将标题和副标题用作锚点。
![](https://img.haomeiwen.com/i7870889/11b119881bc039e0.png)
复杂对齐
好的设计不仅仅是选择字体,在页面上放置文本,然后收工。创建一个可靠的排版层次结构来影响用户扫描内容的顺序是很重要的。通常,它取决于字体、字体大小、粗细、大小写、样式、间距、对齐方式和其他基本方面。
传统上,在从左到右的语言中,正文是左对齐的,以提供更高级别的可扫描性。右对齐用于创建平衡或对比,而居中对齐很少见,主要应用于标题。为了产生兴趣并引导用户注意,设计师可以利用复杂的对齐方式——在一个组合中组合多种对齐类型。
这种方法允许设计师打破传统,尝试定位文本元素,如拉引号、标题、标题和正文。结合对比鲜明的字体粗细、大小、间距和样式,您可以创建巧妙的构图来强化产品的信息。
![](https://img.haomeiwen.com/i7870889/1a48055752aa1639.png)
强调
在设计中使用排版意味着在某些时候,设计师需要强调强调重要信息并引起用户的注意。
西方排版中最常见的强调技术包括对字体的修改:斜体、粗体和小型大写字母。不太常用的是更改字母大小写、间距、颜色和其他图形标记,例如星号。
斜体和斜体
斜体(一种使用独特字形的倾斜字体)和斜体(罗马字体的一种倾斜版本)创造了最柔和的强调,尽管程度取决于周围的文本。这种强调方法通常用于书名、外语单词或内部对话。
粗体
粗体文本通常比斜体或斜体具有更强的效果,使用比周围文本更重的重量。
全部大写
所有大写字母都有助于强调副标题、栏目标题,偶尔也会强调运行文本中的单词。
字号
较大的字体适用于数字和印刷设计中的标题和副标题。
颜色
当与字体粗细或大小写更改等其他技术结合使用时,使用颜色强调会产生更强的效果。
强调的方法还包括字母间距、下划线和上划线的变化。
![](https://img.haomeiwen.com/i7870889/0b72e59b9337c530.png)
邻近
邻近原则意味着相关元素彼此靠近放置。反过来,不相关的元素被设置在远处。在组合中安排文本时,设计师使用空白将相关句子分组为段落,确保用户能够识别哪些标题和副标题与哪些段落相关。
此外,接近度是最强大的设计原则之一——它可以压倒颜色或形状的相似性。这意味着即使您对标题和正文使用相同的字体和颜色,但将它们放置得太远,用户可能会认为它们属于不同的组并忽略它们。[7]
![](https://img.haomeiwen.com/i7870889/a3e5ddf4d6298755.png)
空白空间
就像人类没有空气就无法生存一样,设计也离不开空白。留白确保内容的可读性、强调元素、创造平衡并帮助用户更有效地扫描页面。
有两种类型的空白:
• 微空白是字母、文本行、段落、图标和按钮等小元素之间的空间。
• 宏空白是文本和图像等较大元素之间的空间,也指填充和边距。
如果做得好,空白是一种重要的工具,可以帮助用户识别相关的文本组或其他元素(例如,输入标签和段落中的相关输入或句子),还有助于实现简约、干净和美观设计构成
以上内容为转载
网友评论