如何让画面更精致？注意这6个版式细节

让我们来谈谈在设计手机详细信息页面时经常使用的一些小排版细节。由于手机布局有限，用户浏览时间短，图形排版不宜过于复杂。它应该主要是清晰的呈现。简洁明了是目前的主流。排版越简洁，对细节的要求就越高，影响就越直观。

事实上，细节包含的范围很广，本文想说的是“细节元素”，即通过添加一些装饰元素来增加布局的细节，而常用元素是分开的 2 类，共 6 如下图所示，第一类是几何图形：点、线和面；第二类是具体图形：图标、英语和数字。事实上，具体图形是几何图形的具体体现。多种元素通常同时用于详细信息。正是这些元素的结合使图片更加精致。

几何图形

从广义上讲，点、线、表面是平面构成形式中最基本的元素。可以说，平面中的所有视觉最终都可以归类为三者的不同组合，点、线、表面的确定也是相对的。例如，机场的飞机比机场占很大比例，所以它们可以被视为表面；与广阔的蓝天相比，天空中的飞机几乎被忽略了，所以它们只能被视为一个点。例如，我们在排版前绘制的一些布局结构图是点、线、表面的排列组合，形成了各种结构，排版是结构上图形的有序填充。

然而，本文所说的是狭义上的点、线、面。所谓狭义，是指设计中直观地代表图形的点、线、面。让我们来谈谈细节 3 如何在布局中使用图形？

1. 点

点是几何图形最基本的组成部分，也是形式中最小的单位。从视觉定义开始，所有图形都可以缩小到一定程度的“点”，所以点有很多形状，不仅限于圆，下面列出了细节页面常用的“点”，除了最直观的圆，三角形和钻石，它们可以有表面或线的变化，这些变化会给人不同的视觉感受。

在手机细节中，由于确定为“点”，显示面积通常很小，通常作为一个小图形元素穿插其中，主要发挥装饰作用。当图片和文本安排完成后，如果布局仍然单调，则可以适当添加一些“点”元素。有了元素装饰，图片将更加精致。当然，除了“装饰”外，根据不同的使用场景也会有一些特定的效果，如下图所示。

这是一个经常使用“点”的场景。当有很多小标题时，你可以在每个小标题前添加“点”，这样装饰也可以使文本更有组织，有利于阅读。图片中使用了菱形和直线的组合，这不仅装饰了图片，而且还发挥了分割标题的作用。

布局用“三角形”装饰，三角形更特殊，方向性和方向性，所以它也可以发挥视觉指导的作用，所以在使用时要特别注意三角形的方向，不要有错误的指导。图片使用“圆”，圆本身更具装饰性，可以使整个图片更具色调。

2. 线

假如点是静止的，那么线就是点移动的轨迹，而设计中使用的“线”可以是开放的线，也可以是封闭的线框。

在详细的设计中，与点和面相比，“线”的使用频率最高，因为在实际使用中，线的可变属性最多，所以应用场景也最多。它有直线、虚拟现实、厚度、长度和方向的变化，因为通常使用或直线和实线，所以调整的重点是厚度、长度和方向，是 3 不同属性的变化和组合会产生不同的心理感受。

根据线的形状和位置，在布局中经常发挥以下作用 4 作用：点缀、分隔、引导和强调。

点缀

就像“点”一样，在布局中适当添加“线”元素也可以发挥装饰作用，如下图所示，如果图片不添加线条，只有图片，文本排版，虽然也可以，但总是觉得图片有点薄和传统，加上线条，可以装饰布局，可以提高美感，这通常被称为细节差异。

分隔

当“线”在内容之间时，它可以起到分离的作用。前一篇文章谈到了排版的“亲密性”，提到内容应该通过间距调整来分层，但当层次不是很清晰或需要加强分层时，“线”的使用可以穿插在间距中。有了分隔线，用户将更容易阅读。如下图所示，三个案例都是常见的“分离”用法。

由于我们的视线习惯从左到右，横向排列的信息不容易分开。此时，三个小标题可以通过添加垂直线清晰地分开。

并不是所有的线条都应该和分隔内容一样长。虽然图中的线条很短，但它们仍然起着分隔标题和内文的作用。但是，对于较短的线条，最好适当加粗，通过粗线增加存在感。

参数信息用横线分隔，注意虚线和实线的使用，使文本的分隔逻辑更加清晰。

引导

因为“线”有方向变化，所以也有指导性。它可以引导我们的视线通过方向移动轨迹，并将看似无序的元素联系起来，使浏览时感觉清晰有序，如下图所示。

由于手机的浏览顺序是从上到下的，视线的纵向引导会使内容层层递进。图中只有3天的挑战。此时，使用垂直线引导恰到好处，线条只是左右分割图形。此时，逻辑更加清晰。此外，如果你想增强线条的方向性，箭头将是一个不错的选择。

图为线条的横向引导，每段文字对应的图片通过引导明确，使原有独立的内容立即相关，横线巧妙标题和内文的分割一目了然。

强调

在详细信息页面中，“线框”经常被用来强调内容。由于线框的封闭性，框中的信息很容易引起用户的注意，因此视觉焦点可以通过“圈住”关键信息来明确。此外，线条越厚，线框和框中的信息就越突出。同时，线框还将增强布局的形式感，并串联相关元素。

由于图片元素不多，可以通过加粗来增强线框的存在感，使其不仅可以强调标题，还可以成为图片的核心元素之一，从而增强整体形式感，还可以将布局的所有元素串联起来，形成整体。

这种用法比较特殊，不是用线框整体强调，而是用线框单独强调标题的每个单词，这样除了突出标题外，还可以增加布局的装饰感，但要注意标题字数不容易太多，否则太多的“线框”排列会显得单调乏味。

通过使用线框，原本不突出的内文得到了一定的强调，但毕竟是内文，不能抢标题，所以线框一般都比较细。

3. 面

表面是线路移动的轨迹。在详情页面中，“面”对画面的影响比点和线更明显，因为大多数时候，“点”、“线”只是对排版细节的一种修改，而“面”会改变整个布局，所以使用“面”应该更加谨慎。此外，“表面”有许多形状，通常有规则图形和不规则图形 2 大类，但真正常用的如下 3 规则图形。

虽然只有图形 3 种子，但实际上会根据图片风格进行形式调整，如调整方形角类型或倾斜度等，如下图所示，不同的调整会使图形表现出不同的气质 。

与“点”相反，如果要形成“面”，显示面积通常不会太小。此时，图形的形状、大小和位置将直接影响布局结构。一般来说，“面”将在布局中发挥以下作用 3 功能：布局分割、层次感和图形化。

版面分割

在详细信息页面中，当“表面”大到一定程度时，页面将被分割。图形分割可以增强页面的形式感。然而，应该注意的是，图形本身也需要承载内容，因此形状应尽可能规则；切割还应确保内容的完整性，避免信息分割和逻辑混乱。例如，在下图中，每个图形的内部都是一个完整的内容。

这种版本分割的方式更为常见。它不像左图那样将布局分成几个部分，而是通过留出左右边距来确保布局的完整性和统一性，并创建一个部分的层次关系。

垂直倾斜方形，可以打破原有的规则布局结构，提高布局活动，反映运动感，呼应产品色调。此外，为了保证可读性，内容仍采用水平排版，不相应倾斜。

层次感

如果图形排版有些传统，可以适当添加一些“表面”，使排版更加生动。注意图形与其他元素的叠加，形成一个接一个的空间关系，丰富布局的层次感。此外，图形还可以创建视觉焦点，突出关键信息，因此形式不能大于内容，图形本身的形状和颜色匹配不能影响信息的清晰呈现。

就像左边的想法一样，它只是被方形取代，以创造图形的前后关系。相比之下，圆形更生动，方形更有序。此外，在颜色方面，方形选择了与玫瑰红对比强烈的天蓝色，使布局的视觉焦点非常突出。

图片使用圆形使文本和产品之间的关系，但也让用户关注文本，注意图形的颜色选择不能太接近叠加元素，最好产生明显的差异，否则层次感将大大削弱。

图形化

将图形和文本结合成“表面”，就像“层次感”一样，具有突出信息的作用，但这种方法更注重核心文本的图形化，图形文本可以作为视觉元素，增强布局的形式感，在布局中发挥装饰作用。

图中文字较多，层次较多，此时用方形图形化一些标题后，文字的形式结构得到加强，逻辑也变得清晰。

将“人、货、场”和圆形形成“面”，既强调信息，又对文本进行图形化。当图片“空”，没有其他元素填充时，这些图形文本可以使图片生动。

以上是规则图形的使用，有序简单，操控性强；事实上，还有另一种不规则图形，但通常很少使用，因为不规则图形给人一种随意的感觉，有太多的不确定性，使用不好会使排版变得混乱。当然，如果使用得当，它将使布局更加创新和变化。如下图所示，由自由曲线组成的“表面”感觉轻松、活泼、更个性化。

截获天猫旗舰店自良品店腰果详情页面

从以上案例可以看出，许多布局是各种元素的结合，因为点、线、表面的功能不同，组合使用可以使布局更具设计感，所以在手机细节的长页面中，点、线、表面经常反复出现。

此外，点、线、面的确定与布局的大小进行比较。例如，在同一布局中，小圆圈和圆圈都是“点”，但当面积变大时，圆圈变成了“面”，圆圈变成了“线框”。以下是一组以前的案例。可以看出，它们也是圆形的。由于面积不同，左图的“点”和右图的“面”对布局的影响也大不相同。当然，你不必太在意自己的定义。灵活运用是核心。

具象图形

除了几何图形，还有一种具体的图形经常出现在详细的页面上，顾名思义，它们不像“点”抽象，具体的图形本身可以传达某些内容，所以什么图形变得非常关键，总体原则是与部分主题一致，如果形状不满意，会影响阅读，甚至阻碍信息的准确传输。有很多具体的图形，但它们需要根据内容“定制”，其中最常用和相对容易使用的是以下内容 3 种类：图标、英语和数字。

1. 图标

在详细信息页面中，图标通常不单独出现，而是与文本一起使用，以避免信息呈现过于无聊，使内容生动有趣。困难在于图形设计，因为如果我们想要图形不仅可以表达文本内容，而且简化和美丽，这需要我们对图标建模有很强的控制。但幸运的是，互联网上有大量的图标材料可供选择，建议优先寻找合适的图标进行调整，如果性能内容不受欢迎，真的没有合适的材料，然后开始设计，当然，我们想找到和调整材料作为一个学习改进的过程，如果这种能力很弱，通常会观察更多，经常练习。

日常使用的图标可以分线图标和面图标 2 类别，如下图所示，线图标主要是线轮廓，因为它是线，所以厚度非常重要，不同的厚度给人不同的感觉，线越细，越漂亮，线越厚，力量越强，核心匹配页面的整体风格，但无论如何，一组图标的厚度必须保持一致。

而且表面图标以块面为主，看起来比较厚，而且显示面积也比线图标大，所以比较突出。

无论是线图标还是面图标，都可以添加规则图形作为衬底。如下图所示，衬底图可以 “线”可以是“面”，加衬底可以使图标排列更加规则。

在日常使用中，图标很少单独出现，通常是 3 上述组排列需要图标之间的风格统一。如线图标厚度统一、图形复杂、图形特征统一、衬底线表面统一等，属于风格统一的范畴。如下图所示，左图中间图标的底部为“表面”，右图也为“表面图标”，与其他图标不一致，破坏统一，使视觉混乱；右图从图标到底部保持高度统一，使整体协调舒适。

使用图标实际上是将文本与一些图形元素相匹配，通过图形和文本的结合，使内容更加生动和独特，同时增强部分的设计感。如下图所示，随着图标的添加，它更加清晰和精致，特别是在左三张图片中，图标的“线衬底”设计成加热线，呼应热水杯，新颖有趣，这是细节中的“奖励项目”。

2. 英文

英语是许多设计领域最喜欢的设计元素之一，因为英语不是我们的母语，用户会更加关注“图形”而不是“内容”；此外，英文字形简单，结构整洁，易于控制和产生效果，因此英语在各个地方都使用。

下面是组对比图，左图 T t恤上印有中文的“全球狂欢节”，我们会优先考虑中文的“内容”，而忽略字体本身，这样就印有中文字样。 T t恤会觉得奇怪；而当 T 用右图的英文代替t恤后，我们直接忽略内容，按照“图形”统一处理，所以印有英文的 T t恤看起来会更协调。

当然，这并不是说中文不好，而是说中文的“内容”和英文的“图形”本身并不是在一个相对维度上，就像外国人看中文会觉得“图形”很好看一样。但随着 随着“国潮”的兴起，中国的中文设计越来越多，这是一个很好的现象。与英语相比，汉语形状复杂，表达准确，内涵丰富。如果表现到位，也可以“高级”。

虽然用户通常只关注英语的“图形”，但他们仍然应该关注自己的意思和主题之间的相关性，否则他们会觉得细节并不严格。根据详细信息页面中使用的英语尺寸，主要包括以下内容 2 作用：装饰与点缀。

装饰

当图片元素太少，布局太空时，可以放大英语作为背景元素，如下图所示，放大英语更图形，可以使图片细节丰富，装饰更强；同时，英语可以与主要元素形成空间关系，提高图片层次感，但要注意英语只是装饰，不能抓住主体，否则主要和次要元素会逆转。

点缀

当英语放大时，它主要反映了图形的“装饰性”；当英语缩小时，整体外观将类似于“线条”，可以装饰布局，丰富细节。如下图所示，有一小段英文装饰，图片更精致；事实上，除了装饰，英语还可以使布局更加平衡，当然，添加位置非常重要，一般选择空白区域，如右上角的小英文，如果没有，图片将左右轻，左右不平衡。

除了英语，当图片专注于民族风格、草药、简单、传统等概念时，偶尔也会使用类似图形的“汉语拼音”。如下图所示，拼音的常见形式相对单一，主要添加到汉字上方作为“装饰元素”。

截截截截截截天猫旗舰店糯玉米详细信息页面

3. 数字

这里的数字特别指阿拉伯数字。和英语一样，它也是许多领域的常见元素，因为它形状简单，几何感强，审美特征明显。但是 2 它们有点不同。虽然它们被用作图形元素，但数字比英语更具体。当我们读英语时，默认情况下，不熟悉的语言被视为简单的图形，通常只关注字形本身的美；但当我们看到我们更了解的数字时，除了图形美之外，我们还会本能地想到数字所代表的内容，比如出现 “8”，用户肯定会想为什么页面要放。 8？8 与产品有什么联系？这个时候，如果是这样的话 8 与页面无关，会很奇怪，让人觉得形式，所以在使用数字时要更加注意数字与产品的相关性，如果没有，宁愿不使用。简而言之，英语更注重“装饰”，而数字更注重“内容”。在详细的页面中，数字通常根据不同的背景来强调或指导。

强调

“线”也提到了强调作用，但“线”主要强调核心内容，这里通过直接放大强调数字本身。一般来说 2 种用法，第 1 将数字放大作为设计元素与主体的结合，如下图所示，放大后的数字和产品形成前后层次感，活跃布局，强化布局 0 添加(左一)、8 秒加满(左二)的概念，所以对于数字选择，不仅要看图形，还要看内容。

截自 smeal 天猫旗舰店代餐奶昔详细信息页面

第 2 该用法是放大文本中的数字，如下图所示。当数字放大时，它不仅可以强调内容本身，还可以通过比较大小来增强排版的视觉变化。

截截至第一卫天猫旗舰店充电线详细信息页面

引导

“线”是通过方向引导用户的视线移动，而“数字”则是通过自身的连续性引导的，比如页面上的数字 用户的视线自然会从123开始 1 到 3 移动并标记 123 内容被视为一个整体。根据这些特点，数字经常出现在需要有序阅读的主题中，如步骤描述和各种成分。注意数字的连贯性，不要跳过数字，这样连接才能顺畅自然，如下图所示。

图标、英语和数字是详细信息页面中非常常见的具体图形。它们不仅能使内容生动活跃，而且能突出关键信息，提高信息的传输效率。注意图形应与主题一致，但不能占主导地位，覆盖主题或文本，否则会进入“形式大于内容”的设计误解。

总结

无论是几何图形还是具体图形，在本文的所有案例中都可以看到这一点 2 类“细节元素”会反复出现，经常组合使用。但是，我们不能添加它。我们应该充分发挥每一个细节，明确所有元素都服务于内容和布局。最后，虽然上述细节的“功能”是单独解释的，但一个图形往往有多种功能。例如，一些线框在“强调”信息的同时也起到“分离”的作用。核心是根据需要找出图形的最佳选择。

本文摘自《移动终端销售商品设计：适合手机屏幕的电子商务设计规则与实际应用（上下册）》。这本书是作者12年经验的沉淀。656页干货内容与22小时案例讲解视频相匹配，只教您有效设计移动终端可以销售商品 ?? https://detail.tmall.com/item.htm