移动端文字与排版设计的六个原则

原文链接：http://www.cocoachina.com/design/20151021/13840.html

在印刷与桌面端Web的传统领域我们有很成熟的文字排版经验，在移动时代，这些经验很多依然有效，但因显示设备与使用环境发生了变化，也给带来了不少变化……

在印刷与桌面端Web这些传统领域，我们已经有了很成熟的文字排版经验。随着移动时代的到来，APP的界面设计，加上网站越来越多地转身为响应式设计以适应多种显示设备，这些经验很多依然有效，但因为显示设备与使用环境发生了变化，也给文字排版带来了变化。

大小反差

在桌面端我们可能会采用字号差异较大的文字组合，移动端屏幕较小，容纳的文字也较少，同等的字号差异在小屏幕上的感受会被放大。

原因是我们在使用这两种设备时的观看距离不同，桌面端我们的眼睛离屏幕较远，而在移动端则相反，因此我们应该在移动端使用较小的字号反差。

字重

不要使用PS中的文本加粗，它不仅破坏字体本身的美感，还改变了文字原本的字宽而影响段落内文字的对齐。合理的方式是使用字体本身的字重来控制，比如苹方、STHeiti、Helvetica Neue等字体本身提供Light、Regular、Medium等两三种甚至更多的字重选择。

字间距

不要轻易改变字体默认的字间距，字体设计师已经充分考虑了这款字体所适合的字间距，如果不满意可以更换字体。

颜色反差

移动设备使用环境复杂多变而不局限在室内，可能在室外，甚至暴露在强烈的阳光下，应确保文字在背景中不会识别困难，即使是色弱者也可以正常阅读。WCAG 2.0中建议的两者颜色反差比应该高于4.5:1（AA级），才能确保更多人及环境都可以轻松阅读。Sketch中有一个插件Color Contrast Analyser可以方便的检测这个比值，你可以使用在线检测工具Colour Contrast Check。

栅格系统

小屏幕上，一些桌面端无关大雅的间距不等问题会变得突出。

Lofter是网易一款精品优雅的App，但其文章正文界面却略有瑕疵：

可以看到段落右侧与卡片的间距明显大于左侧。造成这个问题的原因是设计时对文本框的宽度与文字大小之间在关系考虑不周全，导致文字并不能完美地填充满文本框。

上图为iPhone5中此界面的放大效果并加上了辅助线，仔细观察，去除黄色部分各20px的间距后，文本框宽度是558px，而正文使用的字号是30px，所以行末留下18px的空余空间。如果字号定为31px，则刚好可以放下18个字后填满558px像素的文本框。

当然31px的字号在实际环境中可能并不是一个最合理的字号设定，因为它并不能被整除使用到@1x的iOS开发环境。在实际设计中，可以先设定一个栅格系统，以iPhone5为例，定义最小栅格为8x8px的话，得到如下一个栅格图：

以8为基本单位，把所有字号、文本框宽度设定为8的倍数，这样我们就可以确保汉字始终保持对齐。

对齐

“...所有的元素都是正方體。但是從二十世紀開始使用標點後，到了現代桌上出版時代，許多排版工具軟體都直接套用來自日本的「禁則處理」—即避頭尾點；加上與西方文字混排的狀況越來越多，以至於無法做到縱橫對齊的基礎。但是至少段落的頭尾還是需要對齊。這就是為什麼對齊對電子書與長文章來說十分重要的原因。”

——董福興《簡單做好中文排版》

在英文的段落排版中，通常是左侧对齐，而让右侧自然形成起伏边（rag）。对中文排版与阅读习惯而言则相反，段落的头尾对齐尤其重要。

先来看一个反例：

这是Zaker的新闻正文的表现，在夹杂了数字或英文字母字符的情况下，原本中文的整齐排列被打乱了，右侧严重参差不齐，非常难看。

看看同一篇文章其它App是怎么处理的：

左边是网易云阅读，右边是网易新闻。两者的处理方式类似，都是通过程序的设置，微调文字的间距以补足右边存大的空白，区别是当标点出现在行末时，网易云阅读将标点外置，而网易新闻将标点放在了内部。

文字的对齐方式，可以用简单的代码实现：

Web App中，使用CSS类中指定justify属性值控制即可，以下为兼容性较佳的方案

.space-betw {

-webkit-box-pack: justify;

-moz-box-pack: justify;

-ms-flex-pack: justify;

-webkit-justify-content: space-between;

justify-content: space-between;

}

原生iOS中，需为字符串对象设置NSTextAlignmentJustified值

- (NSDictionary *)demoTextAttributes {

NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new ];

ps.alignment = NSTextAlignmentJustified;

// here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.

return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};

}

这个方法，结合之前我们通过栅格系统对字号和文本容器宽度的规范定义，终于可以避免App中常见的段落文字对不齐，对不准的老问题。

后记

以上是实际工作中的经验总结，移动平台、硬件设备、字体本身都在不断变化，相应的设计方法也不会永远一成不变，但总的原则是不变的，那就是让内容更易读。

移动端文字与排版设计的六个原则相关推荐

ui设计移动端字体适配_移动端UI界面设计：APP字体排版设计的七个原则
再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP字体设计的人还真的不多.不信,我们往下看看这个7个移动端字体设计原则吧! 1. 留足空间与普遍观点恰好相反 ...
移动端UI界面设计：APP字体排版设计的七个原则
移动端UI界面设计:APP字体排版设计的七个原则发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...
20P18 Pr预设模板300个现代商务婚礼简洁迷你创意文字标题排版设计动画
20P18 Pr预设模板300个现代商务婚礼简洁迷你创意文字标题排版设计动画预设信息: 适用软件:Premiere Pro CC 2019 或更高版本分辨率:无限制使用插件:无需外置插件模板格 ...
文字如何实现完美UI？文本排版设计告诉你
2019独角兽企业重金招聘Python工程师标准>>> 一部手机,电量充足,网络通畅,就足以让我们打发一天的时光,尽情沉浸在手机时代的缤纷世界里.这个信息资源无穷尽的手机网络世界,是 ...
排版设计常用术语和常识
本篇文章主要介绍排版设计过程中涉及到专用术语介绍,对于从事出版工作及设计工作的人士来说掌握这些尤为重要,下面就让我们一起来了解.掌握这些知识吧! ∷ 封面(又称封一.前封面.封皮.书面) 封面印有书 ...
【CSS】【13】文字的排版
本例讲解如何设置如下的文字样式,通过这个设置来了解文字的排版,效果图: 一.HTML内容: <h1><桃姐>简介</h1> <div> <p ...
怎么使图表居中显示_文字怎么排版又精美又好看？
大家好,我是广邕君~ 前几天我新开的星球里面有一个小伙伴问我"文字怎么排版又精美又好看?" 当时我思考一会回了一段话,下面有截图: 后面我又认真的整理一下,所以有了今天的这篇分享, ...
走向ASP.NET架构设计-第六章-服务层设计(中篇)
走向ASP.NET架构设计-第六章-服务层设计(中篇) 前言:上一篇文章介绍了一些服务层的基本知识,而且也简要的介绍了SOA的有关知识,本篇主要是介绍在服务层可以采用的一些模式. 本篇议题如下: F ...
《众妙之门——网页排版设计制胜秘诀》——3.4 展现品牌视觉的同时保持网页的可读性...
本节书摘来自异步社区<众妙之门--网页排版设计制胜秘诀>一书中的第3章,第3.4节,作者: [德]Smashing Magazine 译者: 侯景艳 , 范辰更多章节内容可以访问云栖社区 ...

移动端文字与排版设计的六个原则

移动端文字与排版设计的六个原则相关推荐

最新文章

热门文章