关于手机端的详情设计,版式可以说是设计师必须要掌握的核心能力,因为详情页是讲产品的详细内容,只有合理的图文排版才能让用户更好的读内容。而说到版式,就必须先提 4 条基本原则,这些原则一直都是版式教程的必讲知识点,有大量文章和书籍都做过详细介绍,不过根据设计类型的不同会有出入,这里我就结合手机端的浏览体验,来讲讲 4 原则的运用,版式设计的 4 条原则分别是:对齐、亲密性、对比和重复。

手机详情页如何卖爆货?先掌握经典的版式四原则!

这是由美国设计师 Robin Wulliams(罗宾·威廉姆斯)在《写给大家看的设计书》中首次提出,准确讲这 4 条原则更侧重排版设计,可以说几乎所有排版中,都要用到该原则,它是排版“心法”,更是需要遵循的基础准则,并且 4 条原则都不是孤立存在,通常会结合使用,很少有作品只用其中某条原则。

对齐

对齐很好理解,就是将内容用某种对齐规则进行排列,使它们产生视觉联系,这样画面会显得规整和严谨。如图所示,尽管只是简单的文字对齐,但画面却有明显差异:没对齐的左图文字非常混乱,让人不适;而对齐的右图文字井然有序,便于阅读。

手机详情页如何卖爆货?先掌握经典的版式四原则!

根据对齐规则不同,常见对齐方式有以下 5 种。

手机详情页如何卖爆货?先掌握经典的版式四原则!

1. 左对齐

左对齐是以左线为基准的对齐,这是最常用的对齐方式,当我们浏览横向排版的信息时,左对齐更符合视线从左往右的阅读习惯,因此广泛用于标题和内文的排版当中。

手机详情页如何卖爆货?先掌握经典的版式四原则!

2. 居中对齐

居中对齐是以中线为基准的对齐,也是一种对称均衡的布局方式,对于手机端,常用于标题排版,当然有些文字不多的内文偶尔也会用到,因为手机版面的宽度偏窄,当标题居中对齐后,既不影响阅读,也能让视觉平衡、舒适。

手机详情页如何卖爆货?先掌握经典的版式四原则!

3. 左右对齐

左右对齐是让两端以左右线为基准同时对齐,这种对齐最为工整,常用于文字较多的内文排版,如下图,左右对齐能将大段文字变成方形,整齐有序,利于阅读。另外如果内文配有图片,最好也和文字两端对齐。

手机详情页如何卖爆货?先掌握经典的版式四原则!

对于内文的左右对齐,还需注意“避头尾”,避头尾是说文中的标点符号尽量不出现在行首或行尾,因为首尾的标点会让文字出现空缺,影响整齐程度。

手机详情页如何卖爆货?先掌握经典的版式四原则!

其实标题有时也能左右对齐,通过对齐将文字图形化、块面化,这样能增强画面的形式感,如下图所示。

手机详情页如何卖爆货?先掌握经典的版式四原则!

4. 右对齐

右对齐是以右线为基准的对齐,这种对齐和我们视线的移动路径刚好相反,使得阅读没那么方便,因此不管标题还是内文,用的都相对较少。如下图,当画面的留白靠右或有特殊的版式需求时,才会用到右对齐。

手机详情页如何卖爆货?先掌握经典的版式四原则!

5. 顶对齐

顶对齐是以顶端为基准的对齐,这是竖向排版才有的对齐方式,而竖向排版常用于中国风中,虽然阅读不便,但能体现古典和文艺,可以说顶对齐是国风排版的专属对齐。

手机详情页如何卖爆货?先掌握经典的版式四原则!

总结一下,对于手机端,标题常用左对齐或居中对齐;而内文若文字偏少用左对齐、偏多则用左右对齐;竖向排版优先顶对齐。但这是一般情况,实际还需根据版面做灵活调整。

最后提下“绝对对齐”和“视觉对齐”,一般我们都用软件的对齐工具进行对齐,而软件的衡量方式是以元素边界为基准,这是“绝对对齐”,例如下面这段文字用的就是软件工具的“绝对对齐”。

手机详情页如何卖爆货?先掌握经典的版式四原则!

从物理角度看,上面三行文字已完全对齐,但从视觉角度看却没有,我们会觉得第二行文字“原产地鲜果”偏右了一点点,这是因为字体大小、字形结构的差异让我们产生“视错觉”,此时要从人眼感知出发,对文字进行适当修正,把“原产地鲜果”往左偏移一点,这样看起来才是对齐的,如下图所示,这就是“视觉对齐”。

手机详情页如何卖爆货?先掌握经典的版式四原则!

显而易见,设计讲的都是“视觉对齐”,不管文字还是图形,当用软件工具进行“绝对对齐”后,若视觉不齐,那一定要调整至“视觉对齐”。当然具体偏移多少并无固定数值,需要大家多多练习,提升设计感,将眼睛练成最好的测量工具。

亲密性

亲密性是指文字间的关联性,简单说,就是内容的间距越小则关系越近;而间距越大则关系越疏,这和“格式塔原理”中的“接近性”相一致,一般我们会将相互靠近的内容当成一个组合,而把彼此远离的内容当成独立模块。如下图所示,左图内容的行间距一致,信息没层级,显得非常冗长,无法快速辨别关联性,不便于阅读;而右图则通过调整行间距,对信息进行层级的划分,分出了标题、内文和模块,这样读起来一目了然。

手机详情页如何卖爆货?先掌握经典的版式四原则!

可见亲密性是要我们通过调整间距来对内容进行归类分组,这样信息才会层级分明、逻辑清晰,因此亲密性又叫“分组”。在实际运用中,常用间距有 4 种,从小到大依次是:字间距、行间距、段间距和模块间距,从文字到模块,它们的间距会越来越大,关联性也越来越弱,如下图所示。

手机详情页如何卖爆货?先掌握经典的版式四原则!

1. 字间距

字间距是指字与字间的距离,在内容排版中,字与字的关联性最强,间距也最小,不过随着字体减小,字距需逐步增大,即是说字距要根据字体大小及时做出微调,不要只用默认的 0。

一般来说,标题字体较大,间距要更紧凑,但要避免压缩过多而影响阅读,常规字距在-50— -20;而内文字体较小,间距则要适当宽松,但也不要过于宽松而影响内容的连贯性,常规数值在20—50,但数值只是参考,不要硬套,核心保证视觉和谐。

手机详情页如何卖爆货?先掌握经典的版式四原则!

但有时为强化版面的形式感,也会刻意增加字距,使其非常宽松,这时更多是考虑视觉美感而非易读性。

手机详情页如何卖爆货?先掌握经典的版式四原则!

2. 行间距

行间距是指一行文字的最底部到下行文字最底部的距离,但为了方便调整,平时只需观察行与行间的空白高度即可(以下简称“行间空白”)。

手机详情页如何卖爆货?先掌握经典的版式四原则!

在关联性上,行仅次于字,实际排版时,行间空白需大于字间距才能保证内容的易读性,否则会让阅读顺序产生混乱,如下图所示。

手机详情页如何卖爆货?先掌握经典的版式四原则!

和字距一样,行间空白也需随着字体减小而增大,常规来说,标题的行间空白最好小于半个字高;而内文的行间空白建议为半个字高到 1 个字高,这样的疏密程度看着舒适透气、阅读流畅。

手机详情页如何卖爆货?先掌握经典的版式四原则!

3. 段间距

段间距即指段落与段落之间的距离,当内文需要分段时,就要注意调节段距,一般段距需远大于段落的行间空白才行。同样若字体减小,段距还要更大,常规是 2 到 3 个字高,如下图所示,这样内容层次才易区分,排版也更透气。

手机详情页如何卖爆货?先掌握经典的版式四原则!

不过手机端由于版面受限,用户又是扫读信息,因此详情页的文字都不会太多,所以段间距总体使用较少。

4. 模块间距

模块间距是指不同模块间的距离,其中模块是泛指,在版面中任何一个相对独立的组合都算一个模块,这里组合可小可大,具体需按实际排布做灵活划分。但不管大组合还是小组合,都相对独立,所以模块的关联性最弱,间距最大。

如下图,在日常排版中,常见模块间距有主标题和副标题的间距、标题和内文的间距、文字和图片的间距等等,其中间距数值并无具体建议,因为随着版式变化,差异往往较大,最好根据需求和感受灵活而定,但总体来说,间距要大于字距、行距和段距;另外随着版面缩小,模块间距还要适当增大。

手机详情页如何卖爆货?先掌握经典的版式四原则!

总之在手机端的排版设计中,运用亲密性就是对内容进行梳理和分层,实现视觉逻辑化,而调节字/行/段/模块间距则是核心手段。注意这 4 种间距还有一个共同特性,就是随字体减小,间距需逐渐增大,这是因为字体越小越显拥挤,这时通过加大间距可增加透气性。

对比

关于对比,本书已多次提到,从元素对比、色彩对比再到明暗对比等等,可见设计中对比是无处不在,而本小节说的则是“版式对比”,其本质是让内容之间差异化,形成视觉反差。如果说“亲密性”是让信息的层次更清晰,那“对比”就是让信息的主次更分明,例如下图中,文字都已左对齐,也通过间距划分了层次(亲密性),但整体依然逻辑不清、没有重点。

手机详情页如何卖爆货?先掌握经典的版式四原则!

当我们通过调整字体大小和粗细分出主标题、副标题和内文后,这时文字马上有了主次,视觉也更具变化和冲击,一个小小改动就有如此效果,可见对比原则的重要性。

手机详情页如何卖爆货?先掌握经典的版式四原则!

另外日常运用时,对比程度最好强烈些,尽可能让差异化明显,这样才能突出内容重点,有效传递关键信息,也让版式更有变化,不至于平淡乏味。那版式对比的方式有哪些?其实很多,可以说只要能改变的地方就能对比,这里就提常见的 4 种:大小对比、粗细对比、字体对比和色彩对比,这些对比主要侧重文字排版。接下来我会通过一段文字的逐步调整,让大家了解 4 种对比的使用,下面先看看还未调整的版面示意,图中文字目前只是居中对齐并简单分成了 2 组,能看到信息没有重点,画面也不协调。

手机详情页如何卖爆货?先掌握经典的版式四原则!

1. 大小对比

通过改变字体大小形成差异化,注意前面提到“让差异尽量明显”,现在用字体大小来说,就是“大字要更大,小字要更小”,因为反差太小的对比会让主次模棱两可。但在手机端,若画面宽度是 750px(手机端的常规宽度),那最小字体也尽量不小于 20pt,不然会识别困难,违背易读性。现在我们来调整案例的文字大小,如下图,字体最大的是主标题,其次是副标题,最后才是内文小字,要保证主标和内文的大小有着数倍差距,这样主次才清晰。

手机详情页如何卖爆货?先掌握经典的版式四原则!

2. 粗细对比

粗细是说字体的笔画粗细,即字重。有些字体会有多种字重,就是为了方便我们根据不同内容选择合适字重。一般标题要粗,而内文要细,但不绝对,只是一个常规用法,可见字体大小和粗细常常会同时使用。如下图,当文字有了粗细变化后,信息层级会进一步加强,视觉也更均衡。

手机详情页如何卖爆货?先掌握经典的版式四原则!

3. 字体对比

就是用 2 种以上的字体来形成字形反差,这是形状对比的一种,不同字体的穿插能丰富画面层次、提升设计感,但核心要能根据风格及编排选择类型和气质都匹配的字体。还要注意详情页中,字体数量最好不超过 3 种,若种类太多会让页面过于花哨,反而影响美感和阅读。再回到之前案例,由于画面体现的是科技感和运动风,因此将主标题改为“黑体+动感”的“站酷高端黑”,这样主标题更突出、也更有冲击力。

手机详情页如何卖爆货?先掌握经典的版式四原则!

4. 色彩对比

色彩对比最直观,也易出效果,但前提是要选择合适的配色方案。简单说色彩分无彩色和有彩色 2 大类,其中无彩色(黑色、白色、灰色)在文字的排版中非常常见,因为无彩色白搭,能让信息呈现清爽明了,因此本文的大部分文字都以无彩色为主;当然有彩色在排版中也必不可少,但很多时候不宜使用过多,主要作为点缀和无彩色进行搭配。下方案例中,由于背景是深色,所以标题采用高纯度的天蓝色,这样会和主视觉形成呼应,而内文则用浅灰色,内容清晰但不抢标题。

手机详情页如何卖爆货?先掌握经典的版式四原则!

总之文字用了以上 4 种对比后,版面更加均衡,信息更有层次,主次也更分明。另外 4 种对比很少单独存在,都是组合使用,如下图,多种对比让文字更有表现力,但切忌使用过度,需根据要求做出适当组合。

大小对比+粗细对比+字体对比+色彩对比 大小对比+粗细对比+色彩对比 大小对比+粗细对比

手机详情页如何卖爆货?先掌握经典的版式四原则!

截自第一卫天猫旗舰店手机壳详情页   截自第一卫天猫旗舰店充电线详情页

手机详情页如何卖爆货?先掌握经典的版式四原则!

截自美的生活电器天猫旗舰店电压力锅详情页

重复

重复是让某些规则或元素在排版时反复使用,核心为了版式更加统一、整体、有序。例如下图中,共有两个版块,单看任何一个,文字排版都无太大问题,但两个衔接一起时,就会发现标题、内文的大小并不一致,对齐方式也有两种,这样排版就不统一,缺少整体性和必要关联性。

手机详情页如何卖爆货?先掌握经典的版式四原则!

当我们用“重复”作简单调整:统一上下版块的文字大小和对齐方式后,马上就协调很多,图文排版也有章可循,整体工整、有条理。

手机详情页如何卖爆货?先掌握经典的版式四原则!

可见对详情页这种长图而言,由于是多版块组合而成,因此“重复原则”就显得尤为重要:事先设定一个排版规则,比如内容的对齐方式、间距疏密、字体选择、大小粗细、色彩搭配等等,然后让每个版块都在这个大规则下进行编排,这样就能避免杂乱无章,使版面井然有序。

当然“排版重复”除了用于版块间,有时也用在每个版块中,比如常见的形状重复,如下图所示,若打算用圆角矩形(左图),那所有形状最好都统一成圆角,包括标题中的色块图形;若是直角矩形(右图),那就统一成直角。这样版面才更整体,也更协调。

手机详情页如何卖爆货?先掌握经典的版式四原则!

其实“重复”和“对比”刚好是设计的 2 个对立面:“重复”追求统一,而“对比”则追求变化,看似矛盾,实则相辅相成。可以说版式设计就是一个将统一与变化相互结合的过程。详情页也一样,用“重复”让版式变的规整有序,再用“对比”来打破过多重复产生的单调感,适当制造差异化。

例如下方案例,虽然都用重复进行了统一编排,但也用对比使其产生了微妙变化,像左一、左二中图文位置的变化,左三中对齐方式的变化都是为了让重复排版没那么单调乏味。

手机详情页如何卖爆货?先掌握经典的版式四原则!

截自百雀羚天猫旗舰店护肤套装详情页 截自花西子天猫旗舰店蜜粉详情页 截自第一卫天猫旗舰店充电线详情页

总结

至此版式设计 4 原则(对齐、亲密性、对比、重复)就全部讲完了,正是这些原则让版式变的条理清晰、视觉均衡、便于阅读。若再回看每条原则所展示的案例,会发现所有案例其实都是几条原则的综合使用,它们无法独立存在,排版时要同时考虑、综合使用,总之忽视任何一条原则都可能让版式出现明显问题。

本文节选自《移动端卖货式设计:适配手机屏的电商设计法则与实战应用(上下册)》,这本书是作者12年经验的沉淀,656页干货内容搭配22小时案例讲解视频,只教你做移动端能卖货的有效设计 👉🏻 https://detail.tmall.com/item.htm

点赞 71
收藏 214

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。

收藏