UI设计过程中，核心遵循的原则依然是平面设计的四项排版原则：对齐、亲密、对比、重复。市面上对设计原则有很多版本的归纳，但笔者反复比较后依然认为这四项原则是最经典、最实用的的设计准则。
UI设计作为传统平面设计的数字化延展，实际操作中有哪些不同呢？下面就让我们一起来看看如何在UI排版设计中融入上面四条原则吧。
典型案例：NFT&元宇宙设计模版（Web）
Hero是Web设计领域的一个专业词汇，特指页面的首屏设计。由于网页的首屏对用户持续停留和转化将起到决定性的作用，所以使用Hero（英雄）来形容这个板块的重要性。
上图的设计则是一个典型的Hero版式：最上方放置Nav导航条，左侧采用高对比度字体展示核心价值（搭配高饱和度CTA按钮引导用户点击），右侧采用定制的主视觉素材解释文案并提升视觉冲击力，最后辅以随机元素装饰背景。这套版式在各种Web设计中可谓是万金油套路，非常推荐新人设计师把优先练熟。
典型案例：宜家家居（Web）
现代极简风格强调大面积留白、对齐和重复的运用，在北欧和日本非常流行。在宜家家居这个Web案例中，设计元素的数量非常克制，版面尽可能留给了商品的摄影图。此外，在维持栅格原则的基础上允许适当的错落变化，提升了版式的变化感和实用性。
典型案例：数据可视化设计（Web大屏）
仪表盘原来是用在汽车等有驾驶舱的场景，在UI中常常将运用在大屏数据可视化的场景中。数据图表模块围绕中心的主视觉内容，形成包裹的结构，强化用户能一览全局的掌控感。搭配科幻美术风格和3D、Web动态技术等，可以进一步凸显产品的科技感和沉浸感。
典型案例：喜茶（小程序）
固定导航结构常见于各种移动端APP的UI设计。以国内流行的点单小程序为例：顶部有小程序通用的顶部导航栏；底部有主功能模块的Tab栏；一些特殊页面（商品列表等），还需要再次采用左侧导航栏来进一步划分操作空间，界面上很容易形成1-3个方向的包裹模块。
在确定了这些不易改变的板块以后，剩下的内容只需要在纵向的滚动空间内合理布置即可。相比Web端设计，移动端的版式受限于设备尺寸和用户习惯，限制会比较大，所以风格往往也更统一。
典型案例：Shiba（APP）
在屏幕中间位置，对素材和内容进行切分是移动端Onboarding（引导页面）的常见套路。这个方式可以制造整个滑动体验的一致性。在Shiba这个案例中，配图的部分始终处于页面纵向相同的位置，分割让配图素材和文字描述部分形成了自然而优美的对比感。值得一提的是，配图部分的背景色一定要和文字部分的背景色区隔开，否则会让分屏的效果大打折扣。
典型案例：Contra（APP）
Contra这套移动端的原型设计体现了字体和色彩对版式的影响。通过放大字体和填充高饱和度颜色，可以让界面呈现自然的分割感、活泼感和不拘一格的设计感。如果你需要设计一套充满趣味和潮流感的UI界面，可以考虑采用更大胆的字号和更激进的配色方案，从而让页面呈现独特的版式感受。
典型案例：Sidebarmenu（Web）
侧面抽屉布局常用于呈现菜单内容，让这部分内容固定在界面的左/右侧都能营造稳定的设计感，并始终保持操作的便捷性。值得注意的是，抽屉部分内容是很灵活的，可以搭配高对比度颜色的背景来强化视觉，也可以搭配动效做成更有趣味性的收纳形式。
典型案例：时尚摄影集（PPT）
采用主色的矩形色块和其他素材形成刻意的碰撞和重叠，是经典的平面设计风格。在制作这种效果的时候，设计师最好是借助栅格来确定色块的大小和位置。对于新人设计师来说，一旦掌握了栅格的基本原理，这种风格还是非常好上手的，而且也很容易出效果。
典型案例：企业官网（Web）
对于移动端或者Web端官网设计来说，采用轮播展示客户的多张产品图是常见需求。如果采用最普通的轮播和左右切换按钮，难免会显得非常死板。将轮播控制条的面积增大并改成矩形样式，和图片形成层级关系，就有了悬浮式的轮播效果。在这种版式下，悬浮所带来的轻立体效应可以带来立竿见影的设计感，从而提升整个页面的用户体验。