手机详情页怎么样卖爆货？先把握经典的版式四原则
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">手机端的详情页设计成功与否，直接<span style="color: black;">功效</span>于了商品的成交量。本文从对齐、亲密性、对比和重复四大版面设计的原则切入，细致入微地分析了<span style="color: black;">区别</span><span style="color: black;">状况</span>下<span style="color: black;">怎样</span>将版面设计的四大原则运用于手机端的详情页。<span style="color: black;">举荐</span>感兴趣的童鞋们阅读学习～</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T6BNwcpEawRwPR~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=ZCgm8y8P0%2BRQ%2BlUdk0FconGLxMQ%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于手机端的详情设计，版式<span style="color: black;">能够</span>说是设计师<span style="color: black;">必要</span>要<span style="color: black;">把握</span>的核心能力，<span style="color: black;">由于</span>详情页是讲<span style="color: black;">制品</span>的<span style="color: black;">仔细</span>内容，<span style="color: black;">仅有</span><span style="color: black;">恰当</span>的图文排版<span style="color: black;">才可</span>让用户更好的读内容。而说到版式，就<span style="color: black;">必要</span>先提 4 条基本原则，这些原则<span style="color: black;">始终</span>都是版式教程的必讲知识点，有<span style="color: black;">海量</span><span style="color: black;">文案</span>和书籍都做过<span style="color: black;">仔细</span>介绍，<span style="color: black;">不外</span><span style="color: black;">按照</span>设计类型的<span style="color: black;">区别</span>会有出入，<span style="color: black;">这儿</span>我就结合手机端的浏览体验，来讲讲 4 原则的运用，版式设计的 4 条原则分别是：<strong style="color: blue;">对齐、亲密性、对比和重复。</strong></p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ewLM0IfTWani~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=JuqtPS%2FBKELKhWrNl2nYthieLu0%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这<span style="color: black;">是由于</span>美国设计师 Robin Wulliams（罗宾·威廉姆斯）在《写给<span style="color: black;">大众</span>看的设计书》中首次提出，准确讲这 4 条原则更侧重排版设计，<span style="color: black;">能够</span>说几乎所有排版中，都要用到该原则，它是排版“心法”，<span style="color: black;">更加是</span><span style="color: black;">必须</span>遵循的<span style="color: black;">基本</span>准则，并且 4 条原则都不是孤立存在，<span style="color: black;">一般</span>会结合<span style="color: black;">运用</span>，很少有作品只用其中某条原则。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>对齐</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对齐很好理解，<span style="color: black;">便是</span>将内容用某种对齐规则进行<span style="color: black;">摆列</span>，使它们产生视觉联系，<span style="color: black;">这般</span>画面会<span style="color: black;">显出</span>规整和严谨。如图所示，尽管只是简单的文字对齐，但画面却有<span style="color: black;">显著</span>差异：没对齐的左图文字非常混乱，让人不适；而对齐的右图文字井然有序，便于阅读。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ewLMf7eQLnKR~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=9zYL3%2FxrjbdknAJf85kGD%2Fnvz8I%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">按照</span>对齐规则<span style="color: black;">区别</span>，<span style="color: black;">平常</span>对齐方式有以下 5 种。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ewLN7GqWvxkc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=x6fdH8qJbujaaJvqNKiv8m4h7uc%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1.左对齐</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">左对齐是以左线为基准的对齐，这是最常用的对齐方式，当<span style="color: black;">咱们</span>浏览横向排版的信息时，左对齐更符合视线从左往右的阅读习惯，<span style="color: black;">因此呢</span>广泛用于标题和内文的排版<span style="color: black;">其中</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ewLNZAl6Oz4y~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=6mf8CrwbcUy5E1TEVtXcF62Ex0U%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 居中对齐</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中对齐是以中线为基准的对齐，<span style="color: black;">亦</span>是一种对<span style="color: black;">叫作</span><span style="color: black;">平衡</span>的布局方式，<span style="color: black;">针对</span>手机端，常用于标题排版，当然有些文字不多的内文偶尔<span style="color: black;">亦</span>会用到，<span style="color: black;">由于</span>手机版面的宽度偏窄，当标题居中对齐后，既不影响阅读，<span style="color: black;">亦</span>能让视觉平衡、舒适。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ewLNyGXqE6Dj~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=7P8anEGo0PNCS15NZ%2FKkYHhHfHY%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. <span style="color: black;">上下</span>对齐</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">上下</span>对齐是让两端以<span style="color: black;">上下</span>线为基准<span style="color: black;">同期</span>对齐，这种对齐最为工整，常用于文字较多的内文排版，如下图，<span style="color: black;">上下</span>对齐能将大段文字变成方形，整齐有序，利于阅读。<span style="color: black;">另一</span><span style="color: black;">倘若</span>内文配有<span style="color: black;">照片</span>，最好<span style="color: black;">亦</span>和文字两端对齐。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex5wT7XYpL6d~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=wbh%2BflMpa5wE5yAxrjMXGUAIkS4%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>内文的<span style="color: black;">上下</span>对齐，还需<span style="color: black;">重视</span>“避头尾”，避头尾是说文中的标点符号<span style="color: black;">尽可能</span>不出<span style="color: black;">此刻</span>行首或行尾，<span style="color: black;">由于</span>首尾的标点会让文字<span style="color: black;">显现</span>空缺，影响整齐程度。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex5yT4bU0k7f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=d2xcXkWMS8v0LYlbKvCY61Lo90Y%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其实标题有时<span style="color: black;">亦</span>能<span style="color: black;">上下</span>对齐，<span style="color: black;">经过</span>对齐将文字图形化、块面化，<span style="color: black;">这般</span>能<span style="color: black;">加强</span>画面的形式感，如下图所示。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex5yquZivYz~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=yU2UWVN5%2BELuX10LhkWfeddJEdc%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 右对齐</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">右对齐是以右线为基准的对齐，这种对齐和<span style="color: black;">咱们</span>视线的移动路径刚好相反，使得阅读没<span style="color: black;">那样</span>方便，<span style="color: black;">因此呢</span>不管标题还是内文，用的都相对较少。如下图，当画面的留白靠右或有特殊的版式需求时，才会用到右对齐。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex5zBPpQjRc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=1CaJ2DKpXNwpRKj%2BVFW3WVg%2BLmI%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5. 顶对齐</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">顶对齐是以顶端为基准的对齐，这是竖向排版才有的对齐方式，而竖向排版常用于中国风中，虽然阅读<span style="color: black;">不方便</span>，但能<span style="color: black;">表现</span>古典和文艺，<span style="color: black;">能够</span>说顶对齐是国风排版的专属对齐。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex5zh8lYWHlV~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=%2B66jjr8R%2FzejQ20DRCIpwz6atTo%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总结一下，<span style="color: black;">针对</span>手机端，标题常用左对齐或居中对齐；而内文若文字偏少用左对齐、偏多则用<span style="color: black;">上下</span>对齐；竖向排版优先顶对齐。但这是<span style="color: black;">通常</span><span style="color: black;">状况</span>，<span style="color: black;">实质</span>还需<span style="color: black;">按照</span>版面做灵活<span style="color: black;">调节</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最后提下“绝对对齐”和“视觉对齐”，<span style="color: black;">通常</span><span style="color: black;">咱们</span>都用软件的对齐工具进行对齐，而软件的衡量方式是以元素边界为基准，这是“绝对对齐”，例如下面这段文字用的<span style="color: black;">便是</span>软件工具的“绝对对齐”。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex6ufIjjgCEY~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=Wmv2sJKBLGiYZhGWX4uYlhlR8gM%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">从<span style="color: black;">理学</span><span style="color: black;">方向</span>看，上面三行文字已完全对齐，但从视觉<span style="color: black;">方向</span>看却<span style="color: black;">无</span>，<span style="color: black;">咱们</span>会觉得第二行文字“原产地鲜果”偏右了一点点，这是<span style="color: black;">由于</span>字体<span style="color: black;">体积</span>、字形结构的差异让<span style="color: black;">咱们</span>产生“视错觉”，此时要从人眼感知出发，对文字进行适当修正，把“原产地鲜果”往左偏移一点，<span style="color: black;">这般</span>看起来才是对齐的，如下图所示，这<span style="color: black;">便是</span>“视觉对齐”。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex6vQCDOSTAs~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=lumbeD2fgyLXeCMQ830lN8vbl2o%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">显而易见，设计讲的都是“视觉对齐”，不管文字还是图形，当用软件工具进行“绝对对齐”后，若视觉不齐，那<span style="color: black;">必定</span>要<span style="color: black;">调节</span>至“视觉对齐”。当然<span style="color: black;">详细</span>偏移多少并无固定数值，<span style="color: black;">必须</span><span style="color: black;">大众</span>多多练习，<span style="color: black;">提高</span>设计感，将眼睛练成最好的<span style="color: black;">测绘</span>工具。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>亲密性</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">亲密性<span style="color: black;">指的是</span>文字间的<span style="color: black;">相关</span>性，简单说，<span style="color: black;">便是</span>内容的间距越小则关系越近；而间距越大则关系越疏，这和“格式塔原理”中的“接近性”相一致，<span style="color: black;">通常</span><span style="color: black;">咱们</span>会将相互靠近的内容当成一个组合，而把彼此远离的内容当成独立模块。如下图所示，左图内容的行间距一致，信息没层级，<span style="color: black;">显出</span>非常冗长，<span style="color: black;">没法</span>快速辨别<span style="color: black;">相关</span>性，<span style="color: black;">不方便</span>于阅读；而右图则<span style="color: black;">经过</span><span style="color: black;">调节</span>行间距，对信息进行层级的划分，分出了标题、内文和模块，<span style="color: black;">这般</span>读起来一目了然。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex6wj9pkbwaJ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=owVyfqhHF%2BciXw0UvJPfjFhLPN4%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">可见亲密性是要<span style="color: black;">咱们</span><span style="color: black;">经过</span><span style="color: black;">调节</span>间距来对内容进行归类分组，<span style="color: black;">这般</span>信息才会层级分明、<span style="color: black;">规律</span>清晰，<span style="color: black;">因此呢</span>亲密性又叫“分组”。在<span style="color: black;">实质</span>运用中，常用间距有 4 种，从小到大依次是：字间距、行间距、段间距和模块间距，从文字到模块，它们的间距会越来越大，<span style="color: black;">相关</span>性<span style="color: black;">亦</span>越来越弱，如下图所示。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex6x9AH2DeOd~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=fTWiE79LpbQ4Aq%2B40lVJ11PCtUY%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. 字间距</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">字间距<span style="color: black;">指的是</span>字与字间的距离，在内容排版中，字与字的<span style="color: black;">相关</span>性最强，间距<span style="color: black;">亦</span>最小，<span style="color: black;">不外</span>随着字体减小，字距需逐步增大，即是说字距要<span style="color: black;">按照</span>字体<span style="color: black;">体积</span><span style="color: black;">即时</span>做出微调，不要只用默认的 0。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">通常</span><span style="color: black;">来讲</span>，标题字体<span style="color: black;">很强</span>，间距要更紧凑，但要避免压缩<span style="color: black;">太多</span>而影响阅读，常规字距在-50— -20；而内文字体较小，间距则要适当宽松，但<span style="color: black;">亦</span>不要过于宽松而影响内容的连贯性，常规数值在20—50，但数值只是参考，不要硬套，核心<span style="color: black;">保准</span>视觉和谐。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex6xtGHgFRLk~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=asTaVBjfvAGCZZRSa0nmMLvMgik%3D" style="width: 50%; margin-bottom: 20px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex7gW7vFIRDJ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=nEk56o4YviHM43h4pSmlLBD3%2BcA%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 行间距</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行间距<span style="color: black;">指的是</span>一行文字的最底部到下行文字最底部的距离，但为了方便<span style="color: black;">调节</span>，平时只需观察行与行间的空白高度<span style="color: black;">就可</span>（以下简<span style="color: black;">叫作</span>“行间空白”）。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">相关</span>性上，行仅次于字，<span style="color: black;">实质</span>排版时，行间空白需大于字间距<span style="color: black;">才可</span><span style="color: black;">保准</span>内容的易读性，否则会让阅读<span style="color: black;">次序</span>产生混乱，如下图所示。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex7hnA9l4bkq~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=QllA3Yx2wtaLFmDd9FYzPiaINgg%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">和字距<span style="color: black;">同样</span>，行间空白<span style="color: black;">亦</span>需随着字体减小而增大，常规<span style="color: black;">来讲</span>，标题的行间空白最好<span style="color: black;">少于</span>半个字高；而内文的行间空白<span style="color: black;">意见</span>为半个字高到 1 个字高，<span style="color: black;">这般</span>的疏密程度看着舒适透气、阅读流畅。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex7iw1CXZb2g~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=MIrvssawTsp0AD0arkWaGy3dj0A%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">3. 段间距</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">段间距即指段落与段落之间的距离，当内文<span style="color: black;">必须</span>分段时，就要<span style="color: black;">重视</span>调节段距，<span style="color: black;">通常</span>段距需远大于段落的行间空白才行。<span style="color: black;">一样</span>若字体减小，段距还要更大，常规是 2 到 3 个字高，如下图所示，<span style="color: black;">这般</span>内容层次才易区分，排版<span style="color: black;">亦</span>更透气。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex7jaDmwi8Jg~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=9WTvDMqvFf0JFFkq764rfevpjCw%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">不外</span>手机端<span style="color: black;">因为</span>版面受限，用户又是扫读信息，<span style="color: black;">因此呢</span>详情页的文字都不会太多，<span style="color: black;">因此</span>段间距总体<span style="color: black;">运用</span>较少。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 模块间距</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">模块间距<span style="color: black;">指的是</span><span style="color: black;">区别</span>模块间的距离，其中模块是泛指，在版面中任何一个相对独立的组合都算一个模块，<span style="color: black;">这儿</span>组合可小可大，<span style="color: black;">详细</span>需按<span style="color: black;">实质</span>排布做灵活划分。但不管大组合还是小组合，都相对独立，<span style="color: black;">因此</span>模块的<span style="color: black;">相关</span>性最弱，间距最大。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如下图，在<span style="color: black;">平常</span>排版中，<span style="color: black;">平常</span>模块间距有主标题和副标题的间距、标题和内文的间距、文字和<span style="color: black;">照片</span>的间距等等，其中间距数值并无<span style="color: black;">详细</span><span style="color: black;">意见</span>，<span style="color: black;">由于</span>随着版式变化，差异<span style="color: black;">常常</span><span style="color: black;">很强</span>，最好<span style="color: black;">按照</span>需求和感受灵活而定，但总体<span style="color: black;">来讲</span>，间距要大于字距、行距和段距；<span style="color: black;">另一</span>随着版面缩小，模块间距还要适当增大。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex8Jw7750gdZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=JDpTZFJyTvRSWG2GupAcdRABVPo%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总之在手机端的排版设计中，运用亲密性<span style="color: black;">便是</span>对内容进行梳理和分层，实现视觉<span style="color: black;">规律</span>化，而调节字/行/段/模块间距则是核心手段。<span style="color: black;">重视</span>这 4 种间距还有一个<span style="color: black;">一起</span>特性，<span style="color: black;">便是</span>随字体减小，间距需<span style="color: black;">逐步</span>增大，这是<span style="color: black;">由于</span>字体越小越显拥挤，<span style="color: black;">此时</span><span style="color: black;">经过</span>加大间距可<span style="color: black;">增多</span>透气性。</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>对比</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">关于对比，本书已多次<span style="color: black;">说到</span>，从元素对比、色彩对比再到明暗对比等等，可见设计中对比是无处不在，而本小节说的则是“版式对比”，其本质是让内容之间差异化，形成视觉反差。<span style="color: black;">倘若</span>说“亲密性”是让信息的层次更清晰，那“对比”<span style="color: black;">便是</span>让信息的主次更分明，例如下图中，文字都已左对齐，<span style="color: black;">亦</span><span style="color: black;">经过</span>间距划分了层次（亲密性），但整体依然<span style="color: black;">规律</span>不清、<span style="color: black;">无</span>重点。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex8L162xdroB~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=TVtgBRW46fahGlst6p1Bd1hRQM8%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当我们<span style="color: black;">经过</span><span style="color: black;">调节</span>字体<span style="color: black;">体积</span>和粗细分出主标题、副标题和内文后，<span style="color: black;">此时</span>文字马上有了主次，视觉<span style="color: black;">亦</span>更具变化和冲击，一个小小改动就有如此效果，可见对比原则的重要性。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex8LW7oFJdgW~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=6nboWMTz%2FTa%2BMQDFgJ0xBHespiA%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span><span style="color: black;">平常</span>运用时，对比程度最好<span style="color: black;">剧烈</span>些，尽可能让差异化<span style="color: black;">显著</span>，<span style="color: black;">这般</span><span style="color: black;">才可</span><span style="color: black;">明显</span>内容重点，有效传递关键信息，<span style="color: black;">亦</span>让版式更有变化，不至于平淡乏味。那版式对比的方式有<span style="color: black;">那些</span>？其实<span style="color: black;">非常多</span>，<span style="color: black;">能够</span>说只要能改变的<span style="color: black;">地区</span>就能对比，<span style="color: black;">这儿</span>就提<span style="color: black;">平常</span>的 4 种：<span style="color: black;">体积</span>对比、粗细对比、字体对比和色彩对比，这些对比<span style="color: black;">重点</span>侧重文字排版。接下来我会<span style="color: black;">经过</span>一段文字的逐步<span style="color: black;">调节</span>，让<span style="color: black;">大众</span><span style="color: black;">认识</span> 4 种对比的<span style="color: black;">运用</span>，下面先<span style="color: black;">瞧瞧</span>还未<span style="color: black;">调节</span>的版面示意，图中文字<span style="color: black;">日前</span>只是居中对齐并简单分<span style="color: black;">成为了</span> 2 组，能看到信息<span style="color: black;">无</span>重点，画面<span style="color: black;">亦</span>不协调。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex8MR9RXEId0~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=eK843Nke9965OctDs%2FziR5UhgLk%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1. <span style="color: black;">体积</span>对比</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>改变字体<span style="color: black;">体积</span>形成差异化，<span style="color: black;">重视</span>前面<span style="color: black;">说到</span>“让差异<span style="color: black;">尽可能</span><span style="color: black;">显著</span>”，<span style="color: black;">此刻</span>用字体<span style="color: black;">体积</span><span style="color: black;">来讲</span>，<span style="color: black;">便是</span>“大字要更大，小字要更小”，<span style="color: black;">由于</span>反差太小的对比会让主次模棱两可。但在手机端，若画面宽度是 750px（手机端的常规宽度），那最小字体<span style="color: black;">亦</span><span style="color: black;">尽可能</span>不<span style="color: black;">少于</span> 20pt，<span style="color: black;">否则</span>会识别困难，违背易读性。<span style="color: black;">此刻</span><span style="color: black;">咱们</span>来<span style="color: black;">调节</span>案例的文字<span style="color: black;">体积</span>，如下图，字体最大的是主标题，其次是副标题，最后才是内文小字，要<span style="color: black;">保准</span>主标和内文的<span style="color: black;">体积</span>有着数倍差距，<span style="color: black;">这般</span>主次才清晰。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9ex8N6AXjCJl~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=XUCHO161A%2FiwqMFMKVvZGTwBJMc%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2. 粗细对比</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">粗细是说字体的笔画粗细，即字重。有些字体会有多种字重，<span style="color: black;">便是</span>为了方便<span style="color: black;">咱们</span><span style="color: black;">按照</span><span style="color: black;">区别</span>内容<span style="color: black;">选取</span>合适字重。<span style="color: black;">通常</span>标题要粗，而内文要细，但<span style="color: black;">不停</span>对，只是一个常规用法，可见字体<span style="color: black;">体积</span>和粗细常常会<span style="color: black;">同期</span><span style="color: black;">运用</span>。如下图，当文字有了粗细变化后，信息层级会进一步加强，视觉<span style="color: black;">亦</span>更<span style="color: black;">平衡</span>。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exqjKAm5wocm~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=QqMITPi95Bh4suht0LuExGSosTA%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3. 字体对比</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">便是</span>用 2 种以上的字体来形成字形反差，这是形状对比的一种，<span style="color: black;">区别</span>字体的穿插能丰富画面层次、<span style="color: black;">提高</span>设计感，但核心要能<span style="color: black;">按照</span>风格及编排<span style="color: black;">选取</span>类型和气质都匹配的字体。还要<span style="color: black;">重视</span>详情页中，字体数量最好不超过 3 种，若种类太多会让页面过于花哨，反而影响美感和阅读。再回到之前案例，<span style="color: black;">因为</span>画面<span style="color: black;">表现</span>的是科技感和运动风，<span style="color: black;">因此呢</span>将主标题改为“黑体+动感”的“站酷高端黑”，<span style="color: black;">这般</span>主标题更<span style="color: black;">明显</span>、<span style="color: black;">亦</span>更有冲击力。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exqkGBbbnnpq~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=E9afAEWMlkEYybkR%2Fv6AjydUNWg%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4. 色彩对比</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">色彩对比最直观，<span style="color: black;">亦</span>易出效果，但前提是要<span style="color: black;">选取</span>合适的配色<span style="color: black;">方法</span>。简单说色彩分无彩色和有彩色 2 大类，其中无彩色（黑色、白色、灰色）在文字的排版中非常<span style="color: black;">平常</span>，<span style="color: black;">由于</span>无彩色<span style="color: black;">白费</span>，能让信息呈现清爽明了，<span style="color: black;">因此呢</span>本文的大部分文字都以无彩色为主；当然有彩色在排版中<span style="color: black;">亦</span>必不可少，但<span style="color: black;">非常多</span>时候不宜<span style="color: black;">运用</span><span style="color: black;">太多</span>，<span style="color: black;">重点</span><span style="color: black;">做为</span>点缀和无彩色进行搭配。下<span style="color: black;">方法</span>例中，<span style="color: black;">因为</span>背景是深色，<span style="color: black;">因此</span>标题采用高纯度的天蓝色，<span style="color: black;">这般</span>会和主视觉形成呼应，而内文则用浅灰色，内容清晰但不抢标题。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exrNj2yWi2vq~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=LMFZMlukAa2YUCVdlCIP7%2FUwoPc%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">总之文字用了以上 4 种对比后，版面更加<span style="color: black;">平衡</span>，信息更有层次，主次<span style="color: black;">亦</span>更分明。<span style="color: black;">另一</span> 4 种对比很少单独存在，都是组合<span style="color: black;">运用</span>，如下图，多种对比让文字更有表现力，但切忌<span style="color: black;">运用</span>过度，需<span style="color: black;">按照</span><span style="color: black;">需求</span>做出适当组合。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">体积</span>对比+粗细对比+字体对比+色彩对比 <span style="color: black;">体积</span>对比+粗细对比+色彩对比 <span style="color: black;">体积</span>对比+粗细对比</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exrOT85Itao3~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=EtO5ZESJfHKC2z9EM0nDFFhtjuY%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">截自<span style="color: black;">第1</span>卫天猫旗舰店详情页</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exrPKSg2sfs~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=faMwOr%2BD94BaAqNPG%2FZSlgGyvAQ%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">截自美的生活电器天猫旗舰店电压力锅详情页</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">4、</span>重复</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">重复是让某些规则或元素在排版时反复<span style="color: black;">运用</span>，核心为了版式更加统<span style="color: black;">1、</span>整体、有序。例如下图中，共有两个版块，单看任何一个，文字排版都无太大问题，但两个衔接<span style="color: black;">一块</span>时，就会<span style="color: black;">发掘</span>标题、内文的<span style="color: black;">体积</span>并不一致，对齐方式<span style="color: black;">亦</span>有两种，<span style="color: black;">这般</span>排版就不统一，缺少整体性和必要<span style="color: black;">相关</span>性。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exrPlIJZK0p5~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=lL1gZkP1Aj9pbLCQX5ZD%2FWSBVn8%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当<span style="color: black;">咱们</span>用“重复”作简单<span style="color: black;">调节</span>：统一上下版块的文字<span style="color: black;">体积</span>和对齐方式后，马上就协调<span style="color: black;">非常多</span>，图文排版<span style="color: black;">亦</span>有章可循，整体工整、有条理。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exrQX8jC4Bna~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=bcp%2FYppUPXlKkPMgJv1jhiGxS3M%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">可见对详情页这种长图而言，<span style="color: black;">因为</span>是多版块组合而成，<span style="color: black;">因此呢</span>“重复原则”就<span style="color: black;">显出</span>尤为重要：事先设定一个排版规则，<span style="color: black;">例如</span>内容的对齐方式、间距疏密、字体<span style="color: black;">选取</span>、<span style="color: black;">体积</span>粗细、色彩搭配等等，<span style="color: black;">而后</span>让<span style="color: black;">每一个</span>版块都在这个大规则下进行编排，<span style="color: black;">这般</span>就能避免杂乱无章，使版面井然有序。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然“排版重复”除了用于版块间，有时<span style="color: black;">亦</span>用在<span style="color: black;">每一个</span>版块中，<span style="color: black;">例如</span><span style="color: black;">平常</span>的形状重复，如下图所示，若打算用圆角矩形（左图），那所有形状最好都统一成圆角，<span style="color: black;">包含</span>标题中的色块图形；若是直角矩形（右图），那就统一成直角。<span style="color: black;">这般</span>版面才更整体，<span style="color: black;">亦</span>更协调。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exs807YSb9iN~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=F6zFXv0sDYZCCn%2BPrfHprlEkQs0%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其实“重复”和“对比”刚好是设计的 2 个对立面：“重复”追求统一，而“对比”则追求变化，看似矛盾，实则相辅相成。<span style="color: black;">能够</span>说版式设计<span style="color: black;">便是</span>一个将统一与变化相互结合的过程。详情页<span style="color: black;">亦</span><span style="color: black;">同样</span>，用“重复”让版式变的规整有序，再用“对比”来打破<span style="color: black;">太多</span>重复产生的单调感，适当制造差异化。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如下<span style="color: black;">方法</span>例，虽然都用重复进行了统一编排，但<span style="color: black;">亦</span>用对比使其产生了微妙变化，像左<span style="color: black;">1、</span>左二中图文位置的变化，左三中对齐方式的变化都是为了让重复排版没<span style="color: black;">那样</span>单调乏味。</p><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/T9exs8c63Jt3rZ~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1723647825&x-signature=lKb43MmMpdQyZ3YdAM0%2BTRK1ZYM%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">截自百雀羚天猫旗舰店护肤套装详情页｜花西子天猫旗舰店蜜粉详情页｜<span style="color: black;">第1</span>卫天猫旗舰店充电线详情页</p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">5、</span>总结</h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">至此版式设计 4 原则（对齐、亲密性、对比、重复）就<span style="color: black;">所有</span>讲完了，正是这些原则让版式变的条理清晰、视觉<span style="color: black;">平衡</span>、便于阅读。若再回看每条原则所展示的案例，会<span style="color: black;">发掘</span>所有案例其实都是几条原则的综合<span style="color: black;">运用</span>，它们<span style="color: black;">没法</span>独立存在，排版时要<span style="color: black;">同期</span><span style="color: black;">思虑</span>、综合<span style="color: black;">运用</span>，总之<span style="color: black;">忽略</span>任何一条原则都可能让版式<span style="color: black;">显现</span><span style="color: black;">显著</span>问题。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文节选自作者书籍《移动端卖货式设计：适配手机屏的电商设计法则与实战应用（上下册）》</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">作者：卢维贤</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">源自</span>：</p>https://www.uisdc.com/phone-detail-page-layout-principle
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由@卢维贤 授权发布于人人都是<span style="color: black;">制品</span>经理，未经许可，禁止转载。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">题图来自Unsplash，基于CC0协议</p>
我完全同意你的看法，期待我们能深入探讨这个问题。 对于这个问题，我有不同的看法...
页:
[1]