前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >文字如何实现完美UI?文本排版设计告诉你

文字如何实现完美UI?文本排版设计告诉你

作者头像
奔跑的小鹿
发布于 2018-03-16 07:56:01
发布于 2018-03-16 07:56:01
2.7K0
举报
文章被收录于专栏:无原型不设计无原型不设计

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

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

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

1,什么是文本排版?

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

---维基百科

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

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

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

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

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

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

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简洁,并保持对比度和层次感。

6. 对比度

在手机屏幕上,文本数量远远小于Web界面,于是同等设置的对比值,在手机界面上会放大。手机文本排版设计的对比度问题,最大的原则就是削弱对比。如果你在小屏幕上使用环境光度和短字体,不但没有帮到用户,还会让他们产生头疼晕眩的感觉。颜色选择对对比度影响很大,更糟的例子,红色文字与绿色背景。此外,字体大小也是对比度的一大考虑。当设置层次结构时,不要太过火,标题的字体大小不能太大于文本主体。最后,留白和文本部分也可以形成一种微弱的对比。

7. 功能性

保持平衡美观的UI是远远不够的,功能也是同等重要的。手机文本设计还要产生实际的作用,比如满足我们的一些操作,像购买产品,下订单或预订机票。文本需要清晰指示用户能做什?接下来可以做什么?确保用户可以轻松地执行操作。功能性文本需要突出,可点击的元素应该足够大,以便用户可以点击它们。

8. 对齐

通常,文本对齐方式有4种:左,右,中或两端对齐。哪一种在手机排版中更好?

关键是要保持舒适清晰的边距。左中右三种方式都可以保留边距,而两端对齐在左右两侧都没有边距。此外,两端对齐文本会导致不一致的字间距,最坏的情况还会导致一行中的几个单词紧紧凑在一起。对于文本主体而言,两端对齐是不明智的选择。

左侧对齐是其余3种对齐方式里的最佳选择。它可能产生右边缘边距,留下空间,左对齐可以使用户的目光从一行文字连贯到下一行文字,提供一个整齐的初始点。

然而,有些设计师认为混合对齐方式可以更好的实现和谐的UI。看下面的界面:

文本主体内容多,使用左侧对齐;而标题或短行文本,居中对齐也是很好的选择。

9. 字型和品牌

同一款app或系统,建议使用单个字型并演变几种不同字体变体和不同尺寸。混合几个不同的字型会使您的界面看起来分散和混乱。通常,品牌或应用程序拥有自己的预设字型。苹果使用San Francisco, 诺基亚使用Nokia Pure,Google Android使用Roboto。

苹果根据产品功能选择字体。例如, iOS 7使用了(Pro)Light,iOS 9使用SF-UI,而在iOS 10中,San Francisco的字体版本是SF UI Text 和 SF UI Display。

10. 文本样式

尽可能使用内置文本样式。内置的文字样式可让您以视觉上独特的方式表达内容,同时保持最佳的易读性。这些风格基于系统字体,并且你可以利用关键的排版功能,例如动态类型,可自动调整每种字体大小的字距和行距。

11. 响应式设计

手机设备有不同的尺寸。响应式设计也已经应用于手机设计。响应式排版成必将为这一趋势的重要因素。上述所有元素,任何错误使用可能会破坏整体手机UI设计。设计师需要考虑手机排版在不同设备上的外观。

12. 原型设计

文版排版设计在很多设计范围类都至关重要,原型设计中也是必不可少,优秀的文本排版,能够和其他元素组件共同服务于干净的UI界面。但在原型设计中,文本不需要具备真正的意义。在 XCode 中调整代码,在 Sketch 中修改设计都太慢太麻烦了,不妨试试国内最优秀的原型设计工具Mockplus,Mockplus 自带了大量标准组件,你可以直接通过 Drag & Drop 的方式来快速布局你的页面,文本组件有单行文本和多行文本的组件,并可对其进行例如颜色,尺寸,对其方式,字体选择等各种属性设置,并且可以添加交互。新版本加入了文本数据填充功能,可对文本内容进行单个和批量填充,十分便捷。此外,你可以直接手机上直接查看,是否具有较高的可读性。

以上就是涉及手机文本排版的主要内容。手机文本排版是保证手机页面可读性的关键,如果用户在你的手机界面因为差强人意的可读性而使全部的设计付之一炬,实在是非常可惜的。要想设计出完美的手机端文本排版,利用现有规则是不错的选择,但不要忘记新的关注新趋势,文本排版设计在2018年肯定会获得更多的关注。设计师斯蒂芬· 佩里曾经声称2017年文本排版设计将风格将会是bold typography,的确如此。在2018年,Minimalistic或许会席卷而来。我们拭目以待。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
移动端UI界面设计之APP字体排版原则| 萧蕊冰
今天介绍的是移动端UI界面设计的有关APP字体排版原则的内容。除了电脑端的网站UI设计,移动端的界面设计也是UI设计中的一个重要部分,毕竟我们每个人平时身上带着的肯定有手机。今天萧蕊冰就介绍一下关于移动端UI界面设计的app字体的排版相关内容,感兴趣的可以接着往下看。
萧蕊冰
2020/06/18
2.1K0
移动端UI界面设计之APP字体排版原则| 萧蕊冰
设计进阶必读 | 如何提升界面设计的可读性?
再动人心魄的故事,如果无法以清晰易懂的方式讲给读者,读者永远也不可能被你的故事吸引。同样地,对设计师而言,无论你的设计多么用心,如果可读性无法保障,用户也绝对不会有非常愉快的用户体验。
用户5009027
2019/12/09
2K0
设计进阶必读 | 如何提升界面设计的可读性?
16个小的UI设计规则却能产生巨大的影响
快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群,一起找bug,另外新版作图神器已上线 https://cube.waixingyun.cn/home
前端小智@大迁世界
2023/07/09
4610
16个小的UI设计规则却能产生巨大的影响
前端程序员要懂的 UI 设计知识
作为一个前端工程师,如果你对 HTML 和 CSS 有基本的了解,并希望在浏览器中创建美观的用户界面,那就别到处乱找资料了!在本文中,你将通过了解以下七个基本知识来提高 UI 设计技能:
疯狂的技术宅
2020/02/26
1.2K0
前端程序员要懂的 UI 设计知识
创意网页排版设计和教程分享,打造 “视”不可挡的网页设计
网页中超过95%以上的信息都是通过文字的形式呈现。 然而,页面文字并非毫无章法的随意呈现。事实上,更具可读性、视觉效果以及独特排版和布局的网页文本设计,更能吸引用户,提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。
奔跑的小鹿
2019/01/24
1.9K0
创意网页排版设计和教程分享,打造 “视”不可挡的网页设计
Refactoring UI
Cellinlab
2023/09/17
1.2K0
Refactoring UI
[菜鸟致敬⑨] 排版建议
最近有关注诸多大佬的博客亦或微信公众号,也时常阅读一些好的文章,它们的排版风格亦是各不相同。大概是大佬都专注于叠代码的缘故,对于文章的排版好坏可能抱着得过且过的态度,有部分的文章排版实在不堪入目。文章无过,希望大佬们能够听一下我的排版建议。
福贵
2018/07/25
1.2K0
[菜鸟致敬⑨] 排版建议
创建华丽 UI 的 7条规则  第二部分 (2019年更新)
如果想成为一名优秀的 UI 设计师,必须学会如何以一种吸引人的方式将文本放置于图像之上。每个优秀的 UI 设计师在这个方面都能做得很好,相反的糟糕的 UI 设计师都处理的很差,或者根本不处理。不管你是优秀还是平庸的设计师,阅读这篇文章后,多多少少对你都有帮助。
前端小智@大迁世界
2019/03/15
1.2K0
创建华丽 UI 的 7条规则  第二部分 (2019年更新)
UI技巧 | 用户界面设计的10个小技巧
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
用户1730674
2020/05/22
1.5K0
UI技巧 | 用户界面设计的10个小技巧
勿套“公式”!谈谈UI设计中的字号,间距,大小等规律
静电说:新手在学习UI设计过程中,通常会陷入到一个误区中,就是把UI设计当算术题来做。比如经常会有同学问:UI界面中的字号最小是多少?UI界面模块中的间距有没有什么规则可以遵循?是不是一定要4的倍数?UI界面左右留白多少才合适,有规范吗?按钮的圆角多少才合适?
用户5009027
2020/09/01
4.8K0
五大UI设计中的版式原理和技巧,你知道吗?
如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在。今天就带着大家一起从以下5个方面来探究下UI设计中的版式编排。
用户5009027
2019/06/03
8150
52.HarmonyOS NEXT 登录模块开发教程(六):UI设计与用户体验优化
在前五篇教程中,我们介绍了 HarmonyOS NEXT 登录模块的整体架构、模态窗口的实现原理、一键登录页面的实现、短信验证码登录的实现、状态管理和数据绑定机制以及安全性考虑。本篇教程将深入讲解登录模块的 UI 设计和用户体验优化,帮助开发者构建美观且易用的登录界面。
全栈若城
2025/03/13
1920
「Adobe国际认证」再优秀的设计师,也无法避免的 9 个,平面设计错误!
基本上,它要么吸引用户的注意力,要么无法保持比短暂的一瞥更长的时间。但是,作为营销人员,当您需要创建设计时,您会遇到多种情况。在这里,您需要注意创建清晰、整洁且有吸引力的设计。
IT胶囊
2021/07/13
6030
29.[HarmonyOS NEXT Column案例七(下)] 弹性内容与固定底栏:详情页的高级布局技巧
在上一篇教程中,我们介绍了详情页的整体布局结构和顶部标题栏的实现。本篇教程将继续深入探讨DetailPage组件的中间内容区域和底部按钮栏的实现,重点讲解Flex布局的使用、文本溢出处理以及按钮样式设计等高级布局技巧。通过这些技巧,我们可以创建一个既美观又实用的详情页面,提升用户体验。
全栈若城
2025/06/01
680
29.[HarmonyOS NEXT Column案例七(下)] 弹性内容与固定底栏:详情页的高级布局技巧
42.[HarmonyOS NEXT Row案例十] 精美图文混排卡片:左图标与右文本的完美结合
在移动应用界面设计中,图文混排卡片是一种常见且实用的UI组件,它通过将图标和文本组合在一起,以简洁明了的方式呈现信息。本教程将详细讲解如何使用HarmonyOS NEXT的Row组件创建一个精美的图文混排卡片,实现左侧图标与右侧多行文本的布局效果。
全栈若城
2025/06/02
970
42.[HarmonyOS NEXT Row案例十] 精美图文混排卡片:左图标与右文本的完美结合
【总结】移动应用界面设计的尺寸设置及规范
刚接触移动应用的界面设计,最先跳入脑海的疑问是:画布尺寸设计多大(特别是Android)、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现? 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索,来分享移动应用界面设计中的尺寸规范等问题,希望能给移动端的新手设计师些许指引。若有不当之处,欢迎斧正。
李维亮
2021/07/09
3.9K0
【总结】移动应用界面设计的尺寸设置及规范
《精通CSS》第4章 网页排版
或许大家会觉得排版都是设计师的工作,前端开发按照已经排版好的设计稿复原就行。当然,这样理解也没有太大问题,但是过于依赖于设计师往往会限制我们的脚步。作为前端开发,对于排版我们要有自己的认知,而且更好地理解 CSS 中关于网页排版的技术,我们也能更得心应手地还原设计稿。
歪马
2020/04/07
1.5K0
《精通CSS》第4章 网页排版
为什么大家都爱极简主义设计
简约并不意味着原始,这是两个截然不同的概念。而极简主义设计种大量的留白也并不等同于空。
宇相
2018/08/06
7340
为什么大家都爱极简主义设计
【知识】Latex中的em/pt/mm等长度单位及使用场景
在LaTeX中,em、pt、mm等都是长度单位,用于定义文档中元素的尺寸,比如字体大小、页面边距、间距等。下面是一些常见的LaTeX长度单位和它们的含义:
小锋学长生活大爆炸
2024/04/26
1.2K0
字体是网页设计中最重要的细节
一个非创意性质的网页,最重要的内容,就是文字。出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节,往往是非常重要的细节。
Denis
2023/04/14
9030
字体是网页设计中最重要的细节
推荐阅读
相关推荐
移动端UI界面设计之APP字体排版原则| 萧蕊冰
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档