首页 > 建站资源 > 网站优化 > UI设计:如何实现完美的文本排版设计?

UI设计:如何实现完美的文本排版设计?

时间:2017-10-24    来源:thomas

一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里。这个信息资源无穷尽的手机网络世界,是设计师和开发者们在不停的探索中一路一步精心打造。如何进一步美化这个世界,优化用户体验?如何在手机有限的屏幕上呈现清晰的UI和UX?这里太多因素需要考虑,文本排版设计就是其中不可或缺的一部分。今天,我将从文本排版设计角度出发,谈谈如何实现完美的手机UI界面。

首先,有必要了解一下基础知识。

国内一些设计师,或者开发人员,可能从来都没有接触过文本排版设计的培训或学习。

1,什么是文本排版?

“文本排版,“又称“文字设计”,是一种涉及对字体、字号、缩进、行间距、字符间距进行设计、安排等方法来进行排版的一种工艺。在数码技术普及之前,文本排版是一项专业的工作,数码时代的来临使字体排印不像从前仅由排字印刷方面的技术工人完成,而更被图形艺术家、艺术指导、文书人员甚至儿童广泛使用。”

---维基百科

2,为什么文本版排版在手机端设计中很重要?

手机端设计比网页设计要求更精致细腻,这个方寸之间的屏幕上,每个元素的选择都更加谨慎,不仅美观,更要实用。用户对手机端文本排版设计的体验要求也更高,于设计师而言,让用户能满足于手机的文本排版设计是极具挑战性的。

想象一下,一个完全没有任何文字的手机网页是怎样的呢?不现实吧。同样,在手机界面上随意的放置文本元素,会有意义吗?能实现有效的UI和UX吗?虽然图片和视频极具动态也丰富多彩,但用户仍然需要通过文本获取信息。这不仅仅是一种习惯,文字本身也能传达其它元素无法传达的信息。优秀的手机排版设计,不会让用户产生视疲劳,而应该让用户能轻松获取信息,实现人机有效互动。

那么,文本排版设计的奥秘究竟有哪些呢?如何通过文本排版设计实现完美UI呢?

通常,文本排版设计包括但不限于以下元素。另外,需谨记:手机设计日新月异,手机文本排版设计当然也在与时俱进。我们既要尊重现有规则,但也要保持创新和探索。

以iPhone的文本排版设计为例。在最新的iOS11 中,做出了以下更新:

1)增加文本大小和权重:提高可读性。

2)提供较大字号和标准动态尺寸字号,适用于具有辅助性功能需求的用户。

接下来,我逐一讲解如何设计优秀的手机端文本排版:

1. 字体

1)字体选择

字体选择常常被错误对待,要么直接忽视,要么简单地从字体库中任意挑选一款。实际上,不同类型的文本内容需要使用不同的字体,字体可以表达内心感觉和心理需求。试想,使用浓密生硬的字体在女性色彩的读物内容里,是不是显得格格不入?相反,你应该选择比较细腻和柔和的字体。生硬浓重的字体往往更具刚硬气质。

另一方面,过度花哨好看的字体在手机屏幕上可能很难辨认。手机端的UI要求简单而干净,使用同种风格的字体是保持界面清爽的关键。避免单调,您可以选择一种辅助字体与主要字体形成对比。这种情况下,界面的字体数量要控制在 2 到 3 种,多则混乱。

2)字体大小

手机屏幕有限,字体大小至关重要。如果你只是在手机屏幕上使用微小字体来解决,那就真是一个笑话了。虽然用户可以缩放文本来改变字体大小,从而提升可读性,但这绝不是设计师偷懒的借口。这多出的操作,本就违背用户体验。字体过小看不清,还会损伤用户的眼睛,花费更多的时间阅读;而较大的字体又会迅速吃掉屏幕,并破坏阅读连贯性。

那怎样是适当的字体尺寸?

对于iOS,使用至少11sp的字体大小,而对于Android,请选择14 sp为主文本。请注意,这是主文本通常使用的标准,不是强行的唯一标准。此外,在设计手机端字体大小时,需要留意设计字体大小要比常规、使用在桌面端的略大一些。

2. 间距

1) 行间距

行间距是一排文字和另一排文字之间的空间。手机屏幕较小,所以行间距通常比桌面版本小。设置行间距时,需要在手机端设置比桌面端小的值。过宽或过窄的行间距都会破坏手机UI界面,降低可读性。许多人认为,1.4em是标准的行间距,但在手机屏幕上,仍然有显得几分紧密,用户可能会感到文字仿佛在收紧。在设计上,标准的行间距应该是字体大小的120%。另外, 如果文本的长度越短,那么它对行间距宽度的要求也会降低。

2) 字间距

字间距是两个文字之间的间距。这是手机排版中的一个很小的因素,但值得关注。你可能会认为,在一个段落里,字距调整可能不是一个必要问题。但如果您足够细心,您可能会注意到,这通常出现在英文文本中,大写字母与小写字母之间的空间和两个小写字母之间的空间不尽相同。这会造成一定的视觉失调,破坏美感。

3) 全文本字间距

上面不是刚提了字距吗?这里是否重复了呢?当然不是,字距在两个文字间和全文本的字间距并不是完全一样的概念。这两者往往可能会使设计师产生迷惑,但它们类似却不同。这里的字间距是所有字符和文本的字间距。有效的字间距会使文本更易读。通常,字体使用时可以适当调整页面字距,因此你不需要过多的关注。但如果你注意这一点,也许会对设计大有裨益。通常,大文本需要更少的字距,而稀疏的文本要求更宽的字距。

3. 行长

行长也是手机排版中的一个重要尺度要求。文本行的长度可能会影响整个排版。桌面屏幕的行长势必会超出手机屏幕边框。在手机排版中,每行上的字符数量,字体大小和行长度都紧密相连,互相影响和牵制。合理的布局这些要素是可读性的关键。通常,一行保留30- 40 个字符数时比较合理的选择。

4. 留白

留白在设计中无处不在。留白可以带来自由和放松的感觉。手机排版留白主要包含:行间距,边距,段落空间。手机排版中的适当空间可以帮助用户更好阅读文本,提升界面美感。设计师可以考虑从页面10%到20%的范围开始留白。但不要留白区域太大,手机屏幕有限。

5. 层次结构

层次结构是强调整个文本的关键元素,并能产生对比度。但手机排版中的层次结构比通常web界面层次简洁,通常Web界面拥有 3 个级别。而手机屏幕的空间有限,所以很多设计师只应用了 2 个层次:标题和文本主题。标题是抓住读者眼球,而文本传达可读性。保留标题和主题这两个结构层次,这也是手机设计的一个趋势。这可以使手机UI简洁,并保持对比度和层次感。

相关推荐
为什么你爱用的App,都用卡片式设计?优势在哪?
手淘首屏设计是如何用户逛得停不下来?
版式设计中的那些小细节不容忽视
产品设计:帮助中心到底应该怎样改版?
设计干货:网站字体排版设计的10个基本规则
APP设计教程:UI界面中的版式设计理论
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
2017版“我的淘宝”可能是迄今为止最懂你的设计
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
老年用户的体验思考:如何保证界面适合阅读
UI界面设计:空心图标是否比实心图标难以识别?
24个UI案例对比 教你如何提升APP设计品质
怎么做才能防止用户对界面优化的不满?
交互设计优化:什么是界面设计?
在UI设计中如何科学地提高文本可读性?
干货:移动端响应式的7种UI布局解析
9个UI界面设计灵感来源的网站推荐
网页设计必读!125个小优化提升网页可用性(三)
国内人气最高的百度首页,原来背后的设计过程是这样的!
Axure实例:制作一个通用的移动端内容滚动区
以简书的网站改版为例,浅谈产品如何完成友好迭代
想要设计一个完美的搜索框 你需要注意这9个要素
制作完美搜索框的9个要素设计原则
探探和Linkedin都用的卡片设计 怎样才有好的体验?
想让网页可读性更强?你得善用这个 F 式布局
APP设计教程:特殊情况下如何处理加载页面?

精彩推荐

热门教程