手机端的详情页设计成功与否，直接作用于了商品的成交量。本文从对齐、亲密性、对比和重复四大版面设计的原则切入，细致入微地分析了不同情况下如何将版面设计的四大原则运用于手机端的详情页。推荐感兴趣的童鞋们阅读学习～
关于手机端的详情设计，版式可以说是设计师必须要掌握的核心能力，因为详情页是讲产品的详细内容，只有合理的图文排版才能让用户更好的读内容。而说到版式，就必须先提 4 条基本原则，这些原则一直都是版式教程的必讲知识点，有大量文章和书籍都做过详细介绍，不过根据设计类型的不同会有出入，这里我就结合手机端的浏览体验，来讲讲 4 原则的运用，版式设计的 4 条原则分别是：对齐、亲密性、对比和重复。
这是由美国设计师 Robin Wulliams（罗宾·威廉姆斯）在《写给大家看的设计书》中首次提出，准确讲这 4 条原则更侧重排版设计，可以说几乎所有排版中，都要用到该原则，它是排版“心法”，更是需要遵循的基础准则，并且 4 条原则都不是孤立存在，通常会结合使用，很少有作品只用其中某条原则。
一、对齐
对齐很好理解，就是将内容用某种对齐规则进行排列，使它们产生视觉联系，这样画面会显得规整和严谨。如图所示，尽管只是简单的文字对齐，但画面却有明显差异：没对齐的左图文字非常混乱，让人不适；而对齐的右图文字井然有序，便于阅读。
根据对齐规则不同，常见对齐方式有以下 5 种。
1 居中对齐
居中对齐是以中线为基准的对齐，也是一种对称均衡的布局方式，对于手机端，常用于标题排版，当然有些文字不多的内文偶尔也会用到，因为手机版面的宽度偏窄，当标题居中对齐后，既不影响阅读，也能让视觉平衡、舒适。
3 右对齐
右对齐是以右线为基准的对齐，这种对齐和我们视线的移动路径刚好相反，使得阅读没那么方便，因此不管标题还是内文，用的都相对较少。如下图，当画面的留白靠右或有特殊的版式需求时，才会用到右对齐。
5 字间距
字间距是指字与字间的距离，在内容排版中，字与字的关联性最强，间距也最小，不过随着字体减小，字距需逐步增大，即是说字距要根据字体大小及时做出微调，不要只用默认的 0。
一般来说，标题字体较大，间距要更紧凑，但要避免压缩过多而影响阅读，常规字距在-50— -20；而内文字体较小，间距则要适当宽松，但也不要过于宽松而影响内容的连贯性，常规数值在20—50，但数值只是参考，不要硬套，核心保证视觉和谐。
2 段间距
段间距即指段落与段落之间的距离，当内文需要分段时，就要注意调节段距，一般段距需远大于段落的行间空白才行。同样若字体减小，段距还要更大，常规是 2 到 3 个字高，如下图所示，这样内容层次才易区分，排版也更透气。
不过手机端由于版面受限，用户又是扫读信息，因此详情页的文字都不会太多，所以段间距总体使用较少。
4 大小对比
通过改变字体大小形成差异化，注意前面提到“让差异尽量明显”，现在用字体大小来说，就是“大字要更大，小字要更小”，因为反差太小的对比会让主次模棱两可。但在手机端，若画面宽度是 750px（手机端的常规宽度），那最小字体也尽量不小于 20pt，不然会识别困难，违背易读性。现在我们来调整案例的文字大小，如下图，字体最大的是主标题，其次是副标题，最后才是内文小字，要保证主标和内文的大小有着数倍差距，这样主次才清晰。
2 字体对比
就是用 2 种以上的字体来形成字形反差，这是形状对比的一种，不同字体的穿插能丰富画面层次、提升设计感，但核心要能根据风格及编排选择类型和气质都匹配的字体。还要注意详情页中，字体数量最好不超过 3 种，若种类太多会让页面过于花哨，反而影响美感和阅读。再回到之前案例，由于画面体现的是科技感和运动风，因此将主标题改为“黑体+动感”的“站酷高端黑”，这样主标题更突出、也更有冲击力。
4uisdc./phone-detail-page-layout-principle
本文由@卢维贤 授权发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于CC0协议
