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

.space-betw {
-webkit-box-pack: justify;
-moz-box-pack: justify;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
}

- (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};
}

在印刷与桌面端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中常见的段落文字对不齐,对不准的老问题。

后记

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

 

作者:poorfish

原文地址:http://www.ui.cn/detail/72212.html

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31177/

(0)
CatherineCatherine
上一篇 2017-05-31 18:17
下一篇 2017-05-31 20:25

相关推荐

  • 【招聘】在专注用户体验的公司上班是什么体验?

    随着艾体验业务范围的逐渐扩大以及合作伙伴不断增长,我司也开始扩充人力啦!我们是谁?艾体验是一家为需求企业提供更具商业价值和科技未来的产品“大设计”服务公司!(base in天府五街菁蓉国际广场)作为一家“大设计”公司,时常需要对外提供高端产品体验咨询服务,创新前沿人机交互解决方案研发,并且不断沉淀分享产品干货。而成为“我们”的将是这样一群人:这群人,热爱互联网和产品,同时也热衷于观察生活,不放过身边的任何一个小细节;这群人,贯彻着生命不...

    2018-02-26
  • 2018年04月07招聘岗位

    诚聘:通辽澳鼎医疗器械公司诚聘:工作人员要求:40岁到50岁之间的女性,能长期工作的,有爱心,有孝心,家庭没有负担的,高中以上文化程度,语言表达能力好待遇:中午有工作午餐,每个周日休息,节假日休息,基本工资1800元,满勤奖200元,年底奖金不少于12000元。联系人:闫经理。联系电话,15247572846,15374967717不能长期工作的勿扰!招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,157...

    2018-04-08
  • 为了色盲用户的友好体验,你应该注意五点

    世界范围内,每12个男性中有1名男性、每200名女性中有1名女性受色盲或者色觉缺失(CVD)的影响。这意味着每100个web或app用户中,至少有8个人的实际体验和你的预期有很大差别。如何确保你的设计对这些用户也有足够的吸引力?我们会在本文提出一些方法帮助大家。别急着满带恐慌地投奔你的设计团队,先来看看我们列出的色彩可用性设计的几项重要事项。

    2017-05-05
  • Facebook 改变「点赞」背后的故事

    Facebook 在上段时间做出了一个改变,堪称是最近科技界的最重磅的新闻之一,那就是他们改变了自己实施已达 7 年的「赞」的功能,增加了 5 种新的回复选择。从某种程度上说,这是 Facebook 近几年在自身产品设计上迈…

    IxD案例 2016-03-03
  • 干货推荐|数据可视化的五个步骤

    数据被称作是最新的商业原材料「21世纪的石油」。商业领域、研究领域、技术发展领域使用的数据总量非常巨大,并持续增长。就Elsevier而言,每年从ScienceDirect下载的文章有7亿篇,Scopus上的机构档案有8万个、研究人员档案有 1 千 3 百万,Mendeley上的研究人员档案有 3 百万。对于用户来说,从这个数据海洋中抓到关键信息越来越难。

    2017-05-29
  • 双11期间,阿里巴巴UED的设计师都在做什么?

    双11 忍不住剁手的冲动?因为你所有的购物喜好,心理,行为和最终的选择,都被一个神秘组织认真研究过。今天我们拉开幕布,看看这个叫阿里巴巴UED的顶尖设计团队。在11月11日这个日子的前后一段时间,当你发现如下症状之一:当你被机场、地铁、公交站牌和网页里频繁出现的双11提醒,感觉重要的时刻就要来临;当你心跳加速,不管什么都先放到购物车里再说;当你最终等待在11号这天的凌晨用风一样的速度支付成功,并长吁一口气;当你认为一切都那么的简单、自然...

    2018-01-31
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 想做动效,可是你的需求写清楚了么?

    精美的动画对于提升产品体验有很大帮助,如促进用户理解功能,缓解用户情绪,调动用户积极心理,为产品提供亮点等等。诸如此类的文章相信各位已经看过不少了,不少人已经开始越来越重视动效在产品中的应用了,还没有看过的同学不用急,谷歌官方的动效指南讲解得很详细,建议只看这个就够了,配合一些动画理解起来更容易。说明:

    1.优化直播间分享面板,增加特效

    2.当用户点击分享按钮时(*包括传统直播间主播面板的分享按钮和上方分享按钮,手机直播间的分享按钮*),从下方弹出分享面板,逐个弹出分享icon,并淡入显示分享奖励。

    3.用户关闭分享面板时,分享icon从右到左依次下落淡化消失
    相关参数:

    1.分享面板减速弹出,运动时间225ms
    2.分享icon从左到右依次弹出,运动时间225ms。带有奖励图标的,当对应分享icon弹出后,分享图标淡入显示(时间225ms),第二个图标比第一个迟100ms开始运动

    eg:如图第一个为qq图标,当用户点击分享按钮,分享面板弹出后,qq图标开始弹出(时间225ms),100ms后第二个图标(qq空间)弹出,当qq图标完全弹出时,淡入显示分享奖励图标,时间225ms。
    3.分享icon从右往左依次收回,分享面板收回,所有运动的时间减少30毫秒,如分享面板收回时间195ms,分享icon收回时间195ms。

    andorid端动画曲线采用系统自带:AccelerateDecelerateInterpolator(在动画开始与结束的地方速率改变比较慢,在中间的时候加速)

    iOS端动画采用系统自带:kCAMediaTimingFunctionEaseInEaseOut (在动画开始和结束的时候速度稍慢些)
    具体效果可参考附件视频

    2017-05-08
  • 译文 | 车载系统交互设计畅想Part3:主动性辅助面板-场景式车载助理

    在第一篇章中,我通过对智能汽车车载中控仪表的重新设计来减少驾驶中过多信息对驾驶员的注意力干扰。我的设计思路是通过多维度的交互操作来帮助驾驶员完成一些简单的操作任务,同时保证双手不离开方向盘。通过更多最对新手驾驶员的采访研究与测试,我又在第二章节中针对消除驾驶过程中的焦虑情绪做了分析与方案设计。在本章节中,我试图总结前两章节的研究发现,并设计一套针对智能驾驶的主动控制系统。

    2017-04-30
  • 阿里干货!如何使用通用研究思维做用户研究?

    在开始讲述之前,先提两个业内用研人士经常会被问到的问题,①为什么要做用研?②用研能为业务做些什么呢?为了回答这两个问题,我将自己从事分析行业多年的战略规划法、业务分析法、用户研究方法等贯通起来,形成了以下的一些方式方法,即通用思维在用户研究中的应用。方法无边界,融会贯通将使方法更加行之有效,希望以下内容能给大家一些启发和思考。

    2017-05-29