那些在移动端排版设计中被忽略的原则

/
25十二2017

那些在移动端排版设计中被忽略的原则

  • By ZesMob
  • 1 标签
  • 围观:56 次

 

      设计中除了不能绕过的字号、字重、字间距、颜色反差以外,还有两个大家易忽略的原则:栅格系统和对齐方式。

Lofter、Zaker这些知名APP都曾因文字排版和对齐不当受到诟病。而这些能提高用户体验的方面,通过后台设定和写入代码就能轻松实现。

Message Phone Template

大小反差

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

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

字重

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

pasted-69mage-2

字间距

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

颜色反差

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

栅格系统

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

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

110022edssjjjdahzllgjx

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

105449t1wiki97zum6uway

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

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

105452xddd7auhza60z0u2

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

对齐

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

105455r2r4jojb344jcm43

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

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

 



上一篇:
COMMENTS