界面排版技巧说明及案例展示，助力提升设计水平

aizixun8

我们是一群执着于设计的黑马

@水瓜设计获黑马家族授权发布

--------------------------------------------------

感谢您对黑马家族的支持。我将提供界面布局技术及相关技术的案例展示，并通过案例呈现相应的技术风格。希望能给您带来更多的帮助！

前言

大家好，我是西瓜。前段时间我收到这样的问题，说：我几乎可以完成日常工作，但我的老板总是不满意。我也在做审美练习，但是当我看到我在做的事情时，我觉得根本不是那么回事。我怎样才能打破这个？

其实，每个人都或多或少经历过上述问题，有时，这才是他们最担心的，因为这似乎处于较低的技术水平。对于这样的问题，我建议处于这种情况的设计师应该努力寻找设计手法的基本源泉，即重新审视自己的基本环节。一般来说，当我们无法突破、无法前进的时候，我们最应该做的不是继续向前冲刺，而是稳住身子，深吸一口气，回头看看自己努力的痕迹，看看还有没有漏洞，或者是否牢固。如有，应及时弥补。

经过最后的辅助整理，刚才那位同学得出了一些结果，那就是他的排版能力稍弱，每次设计时都不能很好的控制整个布局的视觉焦点，所以……他是练习！你不能只是练习。我在这里也总结了一些排版技巧和知识点，把我多年积累的排版技巧分享给大家。希望有类似问题或者正在努力的设计师们能够共同学习、共同进步。

目录

01、增加内容之间的距离，分清主次关系。

02.结构不错，但比较僵化

03.赋予图像和文字层次感

04.根据确定的内容选择字体

05.案例说明

06. 总结

01、增加内容之间的距离，分清主次关系。

首先我首先想说的是，在一个界面中，最重要也是最简单的方法就是拉开整个界面内容的距离。无论是图与图，还是图与文字，都应该有节奏。有空间距离感，从而保证整个界面的透气性和条理。

其次，要注意维护关键标题文字与内容文字的主次关系。我们一般可以通过字体粗细、大小、颜色来区分主次，然后加上规则的间距。这可以很好地帮助我们对内容进行分类和分组。 。

最后一个是图片之间的主次关系。例如，在应用程序设计中，有些应用程序会显示更多的图片（例如食物和大牌服装应用程序）。那么图片之间的距离应该是 ，或者图片组之间有节奏的间距也可以更好地帮助我们区分界面内主次部分的内容。如果涉及到显示不同功能的图片，我们还可以通过图片的大小来区分。这样我们不仅可以单独设置距离，还可以再添加一个纬度和大小来区分主次。

02.结构不错，但比较僵化

这个问题不仅是每个人的问题，也是我自己的问题。当我们陷入思维困境时，我们总是习惯于左对齐、右对齐、上对齐、下对齐、居中对齐。事实上，这不是我们的错。当我们第一次学习设计时，无论谁教排版，他们都会围绕四个基础的对齐进行延伸。并不是说我们作为初学者就不能创新。事实上，如果我们不制定这个规则，我们很可能就可以为所欲为。但也正是因为如此，我们才习惯了这四种布局方式，因为它们确实好用，简单方便。这并不是说我们不想发挥创造力。随着时间的推移，我们可能会逐渐喜欢上这四种布局。

因此，无论采用怎样的标准四对齐排版技术，一般不会出现什么大问题。然而，却形成了一种不一致的状态。为了解决这个问题，每个人都应该尝试一种新方法。该手法就是“错位手法”，比如内容标题和字幕必须错位、标题和图片必须错位、标题和文字必须错位、图片和图片必须错位或穿插等等。

上述错位都是让界面更加灵活的方法。不过这里大家要注意一下。错位手法虽然灵活，但确实很难控制。这取决于实际设计和个人技术水平。如果说不能更好的控制错误，对于定位技巧，我建议大家先在实际工作中安全地使用标准对齐，然后私下练习一个同样内容的草稿，尝试一下错位技巧。这样，你就不需要重新理解界面内容模块，就可以尝试新的了。技术是一个不错的选择。

03.赋予图像和文字层次感

一般情况下，我们在设计界面的时候，首先想到的就是将界面中的各种元素和文字按顺序列出来，比如一张图片，然后是下面的标题，下面是文案/关注的描述，最后是分享/消息/点击。 Like/tag，按照常规做法，这个相对来说是比较安全的，但同时也缺乏我们创造性的探索。事实上，平面上的界面设计和布局设计有着相似的做法和目的。我们可以考虑如何让界面更加直观、更有条理，既满足了较小空间的需求，又需要更多内容的展示，也提高了整体的视觉呈现。

我们可以将图片与图片重叠（例如分层银行卡图片设计），也可以将文字+图片重叠（例如图块区域显示图片和文字）。事实上，这些各种各样的案例都有助于我们从常规的视觉角度进行多方位的设计探索。通过上述几个层面的技术表达，我们可以在视觉上更加灵活地展现，突出内容的主体，丰富界面的空间关系。

04.选择适合设计风格和气质的字体

关于字体的选择，我这里就不做过多的赘述，主要是因为这并不是简单的与设计相关，而是我们设计师选择的字体在开发的时候能不能被采用和实现。目前我所看到的开发一般都使用标准的微软雅黑、评方等字体，有的还购买字体版权。比如我目前参与的产品就使用了方正兰亭集简体中文_粗体，但归根结底，字体的选择还是比较有限的。 。那么你可能会问，既然没什么可讨论的，为什么还要讨论呢？其实在整个界面设计中，还是有一些地方是设计师可以触摸和控制字体选择的，比如内容的字体设计和选择、标题是否使用宋体、活动/H5的字体设计等。界面等，都是可以进行布局设计、界面可视化的地方。

一个界面是否好看、实用，不仅仅取决于简单的布局和列表。必要的字体设计也是不可缺少的一部分。因此，在一些操作活动界面中，建议大家选择和设计一些好的字体来与界面相得益彰。 。正确的字体选择还可以从信息层面和视觉层面向用户传达信息。错误的选择可能会导致误解和令人困惑的结果。

05.案例说明

5.1 案例1

在图1中我们可以看到，设计者将搜索和主标题/按钮都赋予了主题渐变背景，然后通过白色模块的层次关系进行区分和展示。作为用户，我们在第一眼浏览的时候，就能清楚地了解内容/功能的前后层次，潜意识里就会附着空间感，也会产生很大的视觉印象。

图2与图1有很大不同。图2的设计亮点实际上是主标题和内容文本的对比，包括主标题的行距和字距。它还使用更宽松的间隙来增强呼吸感，这与我们文章的第一章类似。提到的一件事与内容之间的距离以及主次内容之间的区别相吻合。

5.2 案例2

图中第一个度小满金融APP界面顶部的主标语采用了我们提到的气质文字选择。设计师采用衬线字体作为标语展示，目的是强化产品概念，利用衬线字体的干。薄而强代表了产品的精神和文化。

图2是概念草案。这种类型的稿子非常适合缺乏布局技巧的设计师练习。我们可以看到其顶部是三层磨砂半透明卡片，采用了画面层次关系的设计手法。通过卡片层面的关系设计，可以让整个界面有更好的空间感和高级感。

5.3 案例3

我们先看一下图1。这里的图片层次结构与案例2中的图片层次结构不同。这里的层次结构技术的作者没有使用文本与图片、或图片与图片之间的层次关系，而是在图片本身上。采用了“漫射投影”技术，该技术在当前主流设计中也广泛使用。

图 2 显示了我们在第二节中讨论的不对中问题。界面上半部分是错位的分层设计，下半部分是瀑布式布局设计。上下结构手法明显不同，形成强烈的视觉对比。同时也为界面增添了不少活力。

总结

看似一个（375*812）PT的界面内容不多，但也隐藏着很多布局技巧和知识点。也是我们设计师必须学习和熟练掌握的重要技能之一，无论你目前从事C端还是B端，电商还是平面设计，排版技能都不是排他性的。相反，它是所有设计最基本的技术之一。因此，在实际工作中，我们要引起重视，时刻注意。它是在潜意识中练习的。

感谢您的阅读支持·欢迎留言互动

--------------------------------------------------

免责声明：本文内容和评论仅代表作者观点。

不反映任何黑马家族的意见和看法

优质进阶课程推荐

更多行动·更多想象

—