- 设计理论 -

APP排版设计--内容超多时的杀手锏

作者:Quines·QQQ 原文出处:海盐社
2018-07-20

17.jpeg

随着移动互联网时代的到来,越来越多的信息内容需要在我们的App上展示,这就对我们的文字排版能力有了很高的要求。今天就来和大家分享一下,我的几个应对技巧。

目录

对齐方式--使整体整洁方便阅读

字体--使重点清晰

间距--使阅读舒适度

误区

总结

参考链接


对齐方式--使整体整洁方便阅读

对齐的意识是一个设计师需要具备的基本条件之一。当别人说,“这里没有对齐“的言下之意其实就是页面很乱,看起来不舒服。我们都习惯于有序的事物,对齐会让人从视觉上产生安全感。

屏幕快照 2018-07-20 下午4.41.37.png

左对齐

因为我们大多数的用户的阅读习惯是从左向右的,就造成了左对齐。左对齐是排版设计中最常见的方式,也是阅读最舒服的对齐方式之一。

优势:符合阅读习惯

劣势:视觉效果普通

屏幕快照 2018-07-20 下午4.41.58.png

右对齐

右对齐,只有在文本排列合理的情况下才能使用。

右对齐常用于的在一些小的细节中,比如登陆注册界面、底部导航区块等。

优势:是文章更有层次,刺激阅读兴趣

劣势:就会增加惹眼的污染信息,影响用户的阅读速度

640-2.jpeg

居中

许多非专业设计师倾向于居中对齐原则,同时认为是合理的,这样就导致文本段落难以阅读。

居中对齐是进几年随着html5流行起来,越来越多设计师用居中对齐作为一些区块内容展示的方式。可以看到,在许多产品介绍页面,文字用得比较多的是这种居中对齐。

优势:集中表达信息,增加页面层次感

劣势:不适用于太多文字内容

文章的对齐方式也不外乎上面三种,左对齐是最常见的;居中对齐常出现在内容不多h5页面的;右对齐文字出现的频率小一点,不会以大篇幅出现,大部分在登陆注册或是产品详情界面中常见。

字体--使重点清晰

640-3.jpeg

字体大小

我们可以通过字体的大小区分文章的标题和内容,让文章有初步的重点划分。文字的大小要根据它的作用灵活设定。在做排版设计时,首先要确定正文字体大小,保证用户可以无障碍阅读,然后根据它的大小,来调节平衡决定各个标题以及注释文字大小。

比如,标题的字号最大,解说注释的字号最小,内容字号适中。

640-4.jpeg

字体颜色

色彩虽然选择具导向型,能帮助我们突破传统思维,但是我们在做内容页设计的时候,更要确定的是阅读的舒适性。我们要确保突出内容的同时,字体颜色的不超过3种,以保证页面信息的表达准确。

640-5.jpeg

字重

字重,是每个字体自带的文字福利。在内容页,我们可以通过字重,来实现关键字突出的效果。

这里要注意的是,我们在进行内容排版的时,不要使用PS中的文本加粗。这种增加字重的方式,会改变文字原本的字宽,造成段落内文字的无法对齐。

合理的方式是使用字体本身的字重来控制,比如苹方字体本身提供Light、Regular、Medium等两三种甚至更多的字重。

间距--使阅读舒适

640-6.jpeg

字间距

平面排版的时候字间距的微调可以使页面更统一,原因是平面设计并不讲究像素,而将就能否最快的给用户留下印象。但是在App中并不是这样,内容页中字间距调整的主要目的,是确保用户的阅读舒适无障碍。

如图,为了做到页面对齐让字间距过紧密,尤其是在长句子或段落中,会让用户很快产生阅读疲劳,个糟糕的字间距调整可以瞬间毁掉整个设计。

所以我们要记住一点,在做内容页排版的时候,不要轻易改变字体默认的字间距,字体设计师已经充分考虑了这款字体所适合的字间距,如果不满意可以更换字体。

640-7.jpeg

行间距(配图-很近的行)

行间距对文章的易读性有很大的影响。过大的行间距会给用户以分段的错句,也会加长页面的长度,增加划页次数;过小的行间距,会造成视觉误差产生错行或视觉疲劳等不良阅读体验。

正文行高基本应该设定为,正文文字大小的1.5倍-2倍。

640-8.jpeg

段间距(分割线/留白)

1.分割线

分割线也是很常见的控制段落间距的方式之一。很早前就流行在设计圈,最近站酷上也有人分享了类似这些框或者方形元素的在设计排版中的作用。

640-9.jpeg

1.留白

是独特而且有价值的工具,巧妙利用留白可以产生一些独特的效果。它有助于用户把更多的注意力放在一个特定部分,留白可以使设计具有呼吸感,让各个设计模块之间更加稳定。

留白虽然没有添加任何新元素,但是留白设计可以表达多种含义。

常见误区

640-10.jpeg

1.字体种类太多

设计师在进行字体排版设计过程中,尤其是新手设计师,常见的错误是使用太多的字体。

在做内容排版时,一定要限制你的字体在两到三种以内。尽量不要在文章段落中使用两种非常相近的字体,去突出重点,这会让读者认为是你粗心使用了错误的字体。

640-11.jpeg

2.文本背景加还是不加

内容页排版要记得,不论你怎样设计,都要确保人们可以很容易读到你的信息。比如,在深色背景上,使用颜色相近的深色文字就是不可取的。你可以做出一个令人惊艳的设计效果,但是如果你的文字难以阅读,所有的努力都将是徒劳的。

640-12.jpeg

3.字色太多

字色太多不但会影响读者对文章阅读体验,也会打乱一些既定设计规范。很多时候有颜色的字不但代表着重点也代表着可点击链接。我们在做设计时,不但要关注字色和应用配色方案整体是否协调,更要注意字色的常规设计规范。

总结

在接收到长篇文案的需求时,我们可以先给文案分层次、划重点,找到一些主要信息进行突出设计。让用户一目了然文章的框架,做到粗略阅读也能够明白在说什么;然后进行内容排版设计的细节调整,让用户能有耐心看完并不觉得疲劳。

参考链接

https://www.jianshu.com/p/0843ecb83644《移动端文字与排版设计的六个原则》

https://zhuanlan.zhihu.com/p/29420828《完美排版的10条秘诀,写给大家看的排版规则》

18.jpeg

海盐社.jpeg

喜欢就分享
精选评论