|
手机端的详情页设计成功与否，直接功效于了商品的成交量。本文从对齐、亲密性、对比和重复四大版面设计的原则切入，细致入微地分析了区别状况下怎样将版面设计的四大原则运用于手机端的详情页。举荐感兴趣的童鞋们阅读学习～ 
关于手机端的详情设计，版式能够说是设计师必要要把握的核心能力，由于详情页是讲制品的仔细内容，仅有恰当的图文排版才可让用户更好的读内容。而说到版式，就必要先提 4 条基本原则，这些原则始终都是版式教程的必讲知识点，有海量文案和书籍都做过仔细介绍，不外按照设计类型的区别会有出入，这儿我就结合手机端的浏览体验，来讲讲 4 原则的运用，版式设计的 4 条原则分别是：对齐、亲密性、对比和重复。 
这是由于美国设计师 Robin Wulliams（罗宾·威廉姆斯）在《写给大众看的设计书》中首次提出，准确讲这 4 条原则更侧重排版设计，能够说几乎所有排版中，都要用到该原则，它是排版“心法”，更加是必须遵循的基本准则，并且 4 条原则都不是孤立存在，一般会结合运用，很少有作品只用其中某条原则。
1、对齐
对齐很好理解，便是将内容用某种对齐规则进行摆列，使它们产生视觉联系，这般画面会显出规整和严谨。如图所示，尽管只是简单的文字对齐，但画面却有显著差异：没对齐的左图文字非常混乱，让人不适；而对齐的右图文字井然有序，便于阅读。 
按照对齐规则区别，平常对齐方式有以下 5 种。 
1.左对齐
左对齐是以左线为基准的对齐，这是最常用的对齐方式，当咱们浏览横向排版的信息时，左对齐更符合视线从左往右的阅读习惯，因此呢广泛用于标题和内文的排版其中。 
2. 居中对齐
居中对齐是以中线为基准的对齐，亦是一种对叫作平衡的布局方式，针对手机端，常用于标题排版，当然有些文字不多的内文偶尔亦会用到，由于手机版面的宽度偏窄，当标题居中对齐后，既不影响阅读，亦能让视觉平衡、舒适。 
3. 上下对齐
上下对齐是让两端以上下线为基准同期对齐，这种对齐最为工整，常用于文字较多的内文排版，如下图，上下对齐能将大段文字变成方形，整齐有序，利于阅读。另一倘若内文配有照片，最好亦和文字两端对齐。 
针对内文的上下对齐，还需重视“避头尾”，避头尾是说文中的标点符号尽可能不出此刻行首或行尾，由于首尾的标点会让文字显现空缺，影响整齐程度。 
其实标题有时亦能上下对齐，经过对齐将文字图形化、块面化，这般能加强画面的形式感，如下图所示。 
4. 右对齐
右对齐是以右线为基准的对齐，这种对齐和咱们视线的移动路径刚好相反，使得阅读没那样方便，因此呢不管标题还是内文，用的都相对较少。如下图，当画面的留白靠右或有特殊的版式需求时，才会用到右对齐。 
5. 顶对齐
顶对齐是以顶端为基准的对齐，这是竖向排版才有的对齐方式，而竖向排版常用于中国风中，虽然阅读不方便，但能表现古典和文艺，能够说顶对齐是国风排版的专属对齐。 
总结一下，针对手机端，标题常用左对齐或居中对齐；而内文若文字偏少用左对齐、偏多则用上下对齐；竖向排版优先顶对齐。但这是通常状况，实质还需按照版面做灵活调节。
最后提下“绝对对齐”和“视觉对齐”，通常咱们都用软件的对齐工具进行对齐，而软件的衡量方式是以元素边界为基准，这是“绝对对齐”，例如下面这段文字用的便是软件工具的“绝对对齐”。 
从理学方向看，上面三行文字已完全对齐，但从视觉方向看却无，咱们会觉得第二行文字“原产地鲜果”偏右了一点点，这是由于字体体积、字形结构的差异让咱们产生“视错觉”，此时要从人眼感知出发，对文字进行适当修正，把“原产地鲜果”往左偏移一点，这般看起来才是对齐的，如下图所示，这便是“视觉对齐”。 
显而易见，设计讲的都是“视觉对齐”，不管文字还是图形，当用软件工具进行“绝对对齐”后，若视觉不齐，那必定要调节至“视觉对齐”。当然详细偏移多少并无固定数值，必须大众多多练习，提高设计感，将眼睛练成最好的测绘工具。
2、亲密性
亲密性指的是文字间的相关性，简单说，便是内容的间距越小则关系越近；而间距越大则关系越疏，这和“格式塔原理”中的“接近性”相一致，通常咱们会将相互靠近的内容当成一个组合，而把彼此远离的内容当成独立模块。如下图所示，左图内容的行间距一致，信息没层级，显出非常冗长，没法快速辨别相关性，不方便于阅读；而右图则经过调节行间距，对信息进行层级的划分，分出了标题、内文和模块，这般读起来一目了然。 
可见亲密性是要咱们经过调节间距来对内容进行归类分组，这般信息才会层级分明、规律清晰，因此呢亲密性又叫“分组”。在实质运用中，常用间距有 4 种，从小到大依次是：字间距、行间距、段间距和模块间距，从文字到模块，它们的间距会越来越大，相关性亦越来越弱，如下图所示。 
1. 字间距
字间距指的是字与字间的距离，在内容排版中，字与字的相关性最强，间距亦最小，不外随着字体减小，字距需逐步增大，即是说字距要按照字体体积即时做出微调，不要只用默认的 0。
通常来讲，标题字体很强，间距要更紧凑，但要避免压缩太多而影响阅读，常规字距在-50— -20；而内文字体较小，间距则要适当宽松，但亦不要过于宽松而影响内容的连贯性，常规数值在20—50，但数值只是参考，不要硬套，核心保准视觉和谐。  
2. 行间距
行间距指的是一行文字的最底部到下行文字最底部的距离，但为了方便调节，平时只需观察行与行间的空白高度就可（以下简叫作“行间空白”）。
在相关性上，行仅次于字，实质排版时，行间空白需大于字间距才可保准内容的易读性，否则会让阅读次序产生混乱，如下图所示。 
和字距同样，行间空白亦需随着字体减小而增大，常规来讲，标题的行间空白最好少于半个字高；而内文的行间空白意见为半个字高到 1 个字高，这般的疏密程度看着舒适透气、阅读流畅。 
3. 段间距
段间距即指段落与段落之间的距离，当内文必须分段时，就要重视调节段距，通常段距需远大于段落的行间空白才行。一样若字体减小，段距还要更大，常规是 2 到 3 个字高，如下图所示，这般内容层次才易区分，排版亦更透气。 
不外手机端因为版面受限，用户又是扫读信息，因此呢详情页的文字都不会太多，因此段间距总体运用较少。
4. 模块间距
模块间距指的是区别模块间的距离，其中模块是泛指，在版面中任何一个相对独立的组合都算一个模块，这儿组合可小可大，详细需按实质排布做灵活划分。但不管大组合还是小组合，都相对独立，因此模块的相关性最弱，间距最大。
如下图，在平常排版中，平常模块间距有主标题和副标题的间距、标题和内文的间距、文字和照片的间距等等，其中间距数值并无详细意见，由于随着版式变化，差异常常很强，最好按照需求和感受灵活而定，但总体来讲，间距要大于字距、行距和段距；另一随着版面缩小，模块间距还要适当增大。 
总之在手机端的排版设计中，运用亲密性便是对内容进行梳理和分层，实现视觉规律化，而调节字/行/段/模块间距则是核心手段。重视这 4 种间距还有一个一起特性，便是随字体减小，间距需逐步增大，这是由于字体越小越显拥挤，此时经过加大间距可增多透气性。
3、对比
关于对比，本书已多次说到，从元素对比、色彩对比再到明暗对比等等，可见设计中对比是无处不在，而本小节说的则是“版式对比”，其本质是让内容之间差异化，形成视觉反差。倘若说“亲密性”是让信息的层次更清晰，那“对比”便是让信息的主次更分明，例如下图中，文字都已左对齐，亦经过间距划分了层次（亲密性），但整体依然规律不清、无重点。 
当我们经过调节字体体积和粗细分出主标题、副标题和内文后，此时文字马上有了主次，视觉亦更具变化和冲击，一个小小改动就有如此效果，可见对比原则的重要性。 
另一平常运用时，对比程度最好剧烈些，尽可能让差异化显著，这般才可明显内容重点，有效传递关键信息，亦让版式更有变化，不至于平淡乏味。那版式对比的方式有那些？其实非常多，能够说只要能改变的地区就能对比，这儿就提平常的 4 种：体积对比、粗细对比、字体对比和色彩对比，这些对比重点侧重文字排版。接下来我会经过一段文字的逐步调节，让大众认识 4 种对比的运用，下面先瞧瞧还未调节的版面示意，图中文字日前只是居中对齐并简单分成为了 2 组，能看到信息无重点，画面亦不协调。 
1. 体积对比
经过改变字体体积形成差异化，重视前面说到“让差异尽可能显著”，此刻用字体体积来讲，便是“大字要更大，小字要更小”，由于反差太小的对比会让主次模棱两可。但在手机端，若画面宽度是 750px（手机端的常规宽度），那最小字体亦尽可能不少于 20pt，否则会识别困难，违背易读性。此刻咱们来调节案例的文字体积，如下图，字体最大的是主标题，其次是副标题，最后才是内文小字，要保准主标和内文的体积有着数倍差距，这般主次才清晰。 
2. 粗细对比
粗细是说字体的笔画粗细，即字重。有些字体会有多种字重，便是为了方便咱们按照区别内容选取合适字重。通常标题要粗，而内文要细，但不停对，只是一个常规用法，可见字体体积和粗细常常会同期运用。如下图，当文字有了粗细变化后，信息层级会进一步加强，视觉亦更平衡。 
3. 字体对比
便是用 2 种以上的字体来形成字形反差，这是形状对比的一种，区别字体的穿插能丰富画面层次、提高设计感，但核心要能按照风格及编排选取类型和气质都匹配的字体。还要重视详情页中，字体数量最好不超过 3 种，若种类太多会让页面过于花哨，反而影响美感和阅读。再回到之前案例，因为画面表现的是科技感和运动风，因此呢将主标题改为“黑体+动感”的“站酷高端黑”，这般主标题更明显、亦更有冲击力。 
4. 色彩对比
色彩对比最直观，亦易出效果，但前提是要选取合适的配色方法。简单说色彩分无彩色和有彩色 2 大类，其中无彩色（黑色、白色、灰色）在文字的排版中非常平常，由于无彩色白费，能让信息呈现清爽明了，因此呢本文的大部分文字都以无彩色为主；当然有彩色在排版中亦必不可少，但非常多时候不宜运用太多，重点做为点缀和无彩色进行搭配。下方法例中，因为背景是深色，因此标题采用高纯度的天蓝色，这般会和主视觉形成呼应，而内文则用浅灰色，内容清晰但不抢标题。 
总之文字用了以上 4 种对比后，版面更加平衡，信息更有层次，主次亦更分明。另一 4 种对比很少单独存在，都是组合运用，如下图，多种对比让文字更有表现力，但切忌运用过度，需按照需求做出适当组合。
体积对比+粗细对比+字体对比+色彩对比 体积对比+粗细对比+色彩对比 体积对比+粗细对比 
截自第1卫天猫旗舰店详情页 
截自美的生活电器天猫旗舰店电压力锅详情页
4、重复
重复是让某些规则或元素在排版时反复运用，核心为了版式更加统1、整体、有序。例如下图中，共有两个版块，单看任何一个，文字排版都无太大问题，但两个衔接一块时，就会发掘标题、内文的体积并不一致，对齐方式亦有两种，这般排版就不统一，缺少整体性和必要相关性。 
当咱们用“重复”作简单调节：统一上下版块的文字体积和对齐方式后，马上就协调非常多，图文排版亦有章可循，整体工整、有条理。 
可见对详情页这种长图而言，因为是多版块组合而成，因此呢“重复原则”就显出尤为重要：事先设定一个排版规则，例如内容的对齐方式、间距疏密、字体选取、体积粗细、色彩搭配等等，而后让每一个版块都在这个大规则下进行编排，这般就能避免杂乱无章，使版面井然有序。
当然“排版重复”除了用于版块间，有时亦用在每一个版块中，例如平常的形状重复，如下图所示，若打算用圆角矩形（左图），那所有形状最好都统一成圆角，包含标题中的色块图形；若是直角矩形（右图），那就统一成直角。这般版面才更整体，亦更协调。 
其实“重复”和“对比”刚好是设计的 2 个对立面：“重复”追求统一，而“对比”则追求变化，看似矛盾，实则相辅相成。能够说版式设计便是一个将统一与变化相互结合的过程。详情页亦同样，用“重复”让版式变的规整有序，再用“对比”来打破太多重复产生的单调感，适当制造差异化。
例如下方法例，虽然都用重复进行了统一编排，但亦用对比使其产生了微妙变化，像左1、左二中图文位置的变化，左三中对齐方式的变化都是为了让重复排版没那样单调乏味。 
截自百雀羚天猫旗舰店护肤套装详情页｜花西子天猫旗舰店蜜粉详情页｜第1卫天猫旗舰店充电线详情页
5、总结
至此版式设计 4 原则（对齐、亲密性、对比、重复）就所有讲完了，正是这些原则让版式变的条理清晰、视觉平衡、便于阅读。若再回看每条原则所展示的案例，会发掘所有案例其实都是几条原则的综合运用，它们没法独立存在，排版时要同期思虑、综合运用，总之忽略任何一条原则都可能让版式显现显著问题。
本文节选自作者书籍《移动端卖货式设计：适配手机屏的电商设计法则与实战应用（上下册）》
作者：卢维贤
源自： https://www.uisdc.com/phone-detail-page-layout-principle
本文由@卢维贤 授权发布于人人都是制品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
| 
发表于 2024-8-12 05:14:34
