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