火星网校
如何在APP界面设计中把文字排版做到极致?
发布时间：2024-03-03 13:46:15 浏览量：145次
做ui设计的朋友们，你们一定在设计中碰到排版的吧，根据我的经验，排版是UI设计中最难的部分。它们存在于各种形式并与我们相处了很长的时间。还好我们有许多规则、实践方式与理论可以帮助那些比较难跟上的人。在这篇文章中，我将给你几个实用的提示和技巧让你可以在项目设计中使用。
超越理论的实际案例
虽然排版是一个非常吸引人的主题，但我不会用太理论的东西来烦你。也不会解析字母和连字等等关系，以下我们将直接进入练习。
想想使用者
我们应该记住美学之外我们还有使用者。你正在设计的应用不仅运行在iPhone X上，而是有更多不同的设备…
所以你使用的字体必须灵活。你的字体应该提供各种粗细变化、在特殊符号中的宽度范围，它也必须要渲染地非常好。必须要注意这些方面，确保你的用户不会因你的无知而受苦。好的排版对观看者来说是“没有感觉”的，而不好的排版呈现在屏幕中则会感到非常可怕。
了解是什么原因让字母可读性更高，可以让我们更好的去反省我们应该为我们的界面选择什么样的字体。
一、易辨性(Legibility)
易辨性是我们可以多轻易在一个字体中区分两个字母。这是非常专注在字体、字母与细节的细微排版。当然，这也是最重要的因素之一。不是所有的字体当初被设计出来都是都是容易阅读的。最常见的问题是大写的字母“I”和小写的“L”之间没什么区别。你必须避免这种字体，因为如果使用者在小屏幕上阅读可能会出问题。
X高(X-height)
我们读的字母有95％是小写字母。大小写字母之间比例上越大的字体可读性更高。
字腔(Counters)
我们的字母中还有许多空白。例如看看o、u、d。这些空间被称为字腔，排版专家相信这个空间越大可以帮助我们更容易分辨这个字母。
粗细(Weight)
细的字体通常比较粗的类型的字体更易辨认。粗细和字腔有关，必须考虑到不能去修改文字的形状。
哪一个更容易阅读？
最佳文字笔划粗细约为x-height的18％。
宽比例(Wide Proportion)
字符的宽度相较于它的高度被称为比例。一般来说，比起压缩过的字母，你会想要较宽的字母，因为它有更好的易读性。
第一眼的差别是很微小的
字距(Letter spacing)
没有一个根本的方式来计算字母的间距，但大多数时候越大的文字大小需要更小的字距。字型有时显得太开所以你必须要手动调整间距。对UI设计来说它通常出现在标题时。
再说一次，其实差异非常微小
二、易读性(Readability)
易读性关乎于整体的阅读体验。我们可以轻松扫视文字编排、区分标题、副标题、段落和区块。这样的宏观排版使文字更具视觉吸引力，也令人更想去阅读。这真的是一门艺术，利用对比、颜色、大小、构图和微小的细节成就更好的阅读体验。
衬线字(Serif)对上非衬线字(Sans Serif)
历史告诉我们衬线字更易于辨识。他们在传统印刷中使用了很长的时间，同时也真的提高了大型区块文字的阅读体验。衬线字让我们的视线更容易穿梭于文字间。
但这个原则在网页和手机上则是不一样的。其实有些无衬线字体也是很容易阅读的，且目前视觉设计来说更喜欢简单无装饰的字体。在网页浏览特别是手机上，我们其实可以看到更多的无衬线字体。而且萤幕显示器并不是一张纸，通常我们不会在网络上阅读很长的文章，而在app中更是如此。
在twitter中没有半个衬线字，但在Medium中有衬线字却很合理
但这一切都取决于你的项目内容，以及用户会如何使用您的内容。例如在Medium上我们使用的是衬线字，因为大多数时候你会在Medium上读很长的文章，所以这是一个不错的设计方法。
行高(Line height)
当讲到行距时我非常建议使用黄金比例。
将你的字母大小乘以1.618，你将会得到完美的行高。
如果你是有经验的老手的话，你可以手动调整这个结果。当然，这个规则也有例外，如果必要的话你随时可以打破这个规格。
都是微小的差别，但却大大影响我们的可读性
文字区块的宽度
这就像我们在走在薄冰上。太宽的对于文字区块会让我们的眼睛很难找到下一行文字。但如果太窄的话，眼睛将需要从一条线跳到另一条线，这样会经常打破阅读节奏。我们的潜意识在跳至下一行时会充满活力(只要它不那么频繁)。
为了激励读者并让他们持续阅读，你的每行文字长度应该有50到75个字符。
颜色
这当然取决于你的项目，但在这里我想分享一个技巧。用下面的方式选择你的主要颜色来取代纯灰色(或黑色)：
看粉红三角形的区块
这样会比使用常见的#CCC更独特且更有吸引力。这些小细节将会让你的视觉体验更好。
留白空间
这在满多的书籍和出版物中是一个满大的议题，但是当涉及到排版的话你需要记住这一点：
留白的基本作用是减少让阅读者一次看到这么多数量的文字
这让我们的版面布局更容易快速扫视，并且不会让我们的内容负担太重。白色的空间引导我们的眼睛穿梭在布局中并且创造规则、精细和优雅的感觉。
层级(Hierarchy)
层级关系定义了我们如何阅读内容。它告诉我们如何区分标题、副标题和正文。我们可以透过使用不同的对比度、文字大小、内间距、外间距等来实现这一点。我们必须掌握这一个重要的技巧以获得良好的可读性。
注意细节，日期的颜色和描述的颜色不同，但是一开始很难看出区别。
分隔器(Separators)
将内容分成几个部分的好方法是使用分隔器。目前最流行的是简单的一条线。它是个微小的方式但仍在可读性方面发挥重要的作用。
另一种方式是现在非常流行的卡片式设计。这个方式当内容不相关的时候使用真的很棒。对于常常用大拇指使用手机来说非常的棒，而且也让我们方便扫视整个布局。
重复和节奏
这是UI设计中最耗时的部分。任何重复的元素可以提供一致性，重复的部分可以是位置、文字大小、颜色、内距、外距，一些规则的使用等等。例如我通常让内距/外距的大小为5，所以它看起来会更一致(这是我的规则之一)，「重复」将产生「节奏」。
三、结论
学习排版技巧可以比作是一个迷人的旅程，而且当你的的技能开始进步之后，结果是让人非常满意的。这个技能不是从阅读本篇文章就能获得，而是需要不断学习和不断的动手练习。所以打开你的Sketch或者Photoshop，动手开始创造一些超棒的作品吧！
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
