在UI设计工作中，如何保证版式设计的"美观 + 合理"是经常需要考虑问题。经过了多年的设计工作后，笔者发现新人设计师的尤其容易陷入对流行趋势的简单模仿，缺失对排版本身的逻辑性认知。在这篇文章中，笔者将盘点10个经典UI排版案例，并分析这些版式能成为"经典"的原因。此外，所有的案例都将提供一键复用的链接，方便读者自行进行更细致的研究和学习。
UI设计排版的原则
UI设计过程中，核心遵循的原则依然是平面设计的四项排版原则：对齐、亲密、对比、重复。市面上对设计原则有很多版本的归纳，但笔者反复比较后依然认为这四项原则是最经典、最实用的的设计准则。
-
对齐：让所有设计元素始终拥有一定的相互对齐关系，这样能形成秩序感，避免混乱
-
亲密：让有关联的设计元素间隔更近，让没有关联的设计元素间隔更远。这样能暗示设计元素的内在逻辑联系，降低用户的理解成本
-
对比：避免页面上的设计元素太过相似，有利于增强设计感和并强调关键信息
-
重复：让特定视觉要素在整个作品中反复出现，可以体现一致性，并构建专业的设计感
UI设计作为传统平面设计的数字化延展，实际操作中有哪些不同呢？下面就让我们一起来看看如何在UI排版设计中融入上面四条原则吧。
经典UI排版设计盘点
1）Hero布局
典型案例：NFT&元宇宙设计模版（Web）
复用链接：www.mockplus.cn/example/rp/...
Hero是Web设计领域的一个专业词汇，特指页面的首屏设计。由于网页的首屏对用户持续停留和转化将起到决定性的作用，所以使用Hero（英雄）来形容这个板块的重要性。
上图的设计则是一个典型的Hero版式：最上方放置Nav导航条，左侧采用高对比度字体展示核心价值（搭配高饱和度CTA按钮引导用户点击），右侧采用定制的主视觉素材解释文案并提升视觉冲击力，最后辅以随机元素装饰背景。这套版式在各种Web设计中可谓是万金油套路，非常推荐新人设计师把优先练熟。
2）现代极简
典型案例：宜家家居（Web）
复用链接：www.mockplus.cn/example/rp/...
现代极简风格强调大面积留白、对齐和重复的运用，在北欧和日本非常流行。在宜家家居这个Web案例中，设计元素的数量非常克制，版面尽可能留给了商品的摄影图。此外，在维持栅格原则的基础上允许适当的错落变化，提升了版式的变化感和实用性。
3）仪表盘结构
典型案例：数据可视化设计（Web大屏）
复用链接：www.mockplus.cn/example/rp/...
仪表盘原来是用在汽车等有驾驶舱的场景，在UI中常常将运用在大屏数据可视化的场景中。数据图表模块围绕中心的主视觉内容，形成包裹的结构，强化用户能一览全局的掌控感。搭配科幻美术风格和3D、Web动态技术等，可以进一步凸显产品的科技感和沉浸感。
4）固定导航结构
典型案例：喜茶（小程序）
复用链接：www.mockplus.cn/example/rp/...
固定导航结构常见于各种移动端APP的UI设计。以国内流行的点单小程序为例：顶部有小程序通用的顶部导航栏；底部有主功能模块的Tab栏；一些特殊页面（商品列表等），还需要再次采用左侧导航栏来进一步划分操作空间，界面上很容易形成1-3个方向的包裹模块。
在确定了这些不易改变的板块以后，剩下的内容只需要在纵向的滚动空间内合理布置即可。相比Web端设计，移动端的版式受限于设备尺寸和用户习惯，限制会比较大，所以风格往往也更统一。
5）对称分屏
典型案例：Shiba（APP）
复用链接：www.mockplus.cn/example/rp/...
在屏幕中间位置，对素材和内容进行切分是移动端Onboarding（引导页面）的常见套路。这个方式可以制造整个滑动体验的一致性。在Shiba这个案例中，配图的部分始终处于页面纵向相同的位置，分割让配图素材和文字描述部分形成了自然而优美的对比感。值得一提的是，配图部分的背景色一定要和文字部分的背景色区隔开，否则会让分屏的效果大打折扣。
6）强字体和色彩对比
典型案例：Contra（APP）
复用链接：www.mockplus.cn/example/rp/...
Contra这套移动端的原型设计体现了字体和色彩对版式的影响。通过放大字体和填充高饱和度颜色，可以让界面呈现自然的分割感、活泼感和不拘一格的设计感。如果你需要设计一套充满趣味和潮流感的UI界面，可以考虑采用更大胆的字号和更激进的配色方案，从而让页面呈现独特的版式感受。
7）抽屉布局
典型案例：Sidebar menu（Web）
复用链接：www.mockplus.cn/example/rp/...
侧面抽屉布局常用于呈现菜单内容，让这部分内容固定在界面的左 / 右侧都能营造稳定的设计感，并始终保持操作的便捷性。值得注意的是，抽屉部分内容是很灵活的，可以搭配高对比度颜色的背景来强化视觉，也可以搭配动效做成更有趣味性的收纳形式。
8）几何重叠
典型案例：时尚摄影集（PPT）
复用链接：www.mockplus.cn/example/rp/...
采用主色的矩形色块和其他素材形成刻意的碰撞和重叠，是经典的平面设计风格。在制作这种效果的时候，设计师最好是借助栅格来确定色块的大小和位置。对于新人设计师来说，一旦掌握了栅格的基本原理，这种风格还是非常好上手的，而且也很容易出效果。
9）悬浮式****轮播
典型案例：企业官网（Web）
复用链接：www.mockplus.cn/example/rp/...
对于移动端或者Web端官网设计来说，采用轮播展示客户的多张产品图是常见需求。如果采用最普通的轮播和左右切换按钮，难免会显得非常死板。将轮播控制条的面积增大并改成矩形样式，和图片形成层级关系，就有了悬浮式的轮播效果。在这种版式下，悬浮所带来的轻立体效应可以带来立竿见影的设计感，从而提升整个页面的用户体验。
10）磁铁和Bento布局
典型案例：Marvie（APP）
复用链接：www.mockplus.cn/example/rp/...
作为最近几年最火爆的排版风格，磁铁和Bento可以是当下所有UI设计师必学的设计范式。苹果的发布会就经常使用Bento版式做成一图流，实现极高的信息传递效率。Bento来源于日语中的便当盒，在UI设计圈用来形容类似"便当盒格子"的版式切分。磁铁和Bento布局需要依靠栅格原理作为基础，在页面上根据信息需要切分出合适的模块，并在单个模块中使用少量文案 + 图片素材进行展示。需要注意的是，无论内部如何切分，外部都需要保持一个标准圆角矩形的形状（类似便当盒的轮廓）。
上述的十个经典案例展示了UI排版设计中的常见套路，覆盖了Web设计、APP设计、大屏设计、PPT设计等多种场景，相信这些排版设计方案会为你的UI / UX设计带来新的灵感和思考。点击相关的"复用链接"可以在摹客RP（rp.mockplus.cn）这款免费的在线设计工具中进行深入的研究和设计练习。灵活掌握这些排版思路，将给你的UI的排版设计工作带来极大的助力，赶紧去试试吧！