设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 2024年UI排版风格解析,经典模板一键复用!

2024年UI排版风格解析,经典模板一键复用!

摹客团队
2024-03-04
6150

在UI设计工作中,如何保证版式设计的“美观 + 合理”是经常需要考虑问题。经过了多年的设计工作后,笔者发现新人设计师的尤其容易陷入对流行趋势的简单模仿,缺失对排版本身的逻辑性认知。在这篇文章中,笔者将盘点10个经典UI排版案例,并分析这些版式能成为“经典”的原因。此外,所有的案例都将提供一键复用的链接,方便读者自行进行更细致的研究和学习。

UI设计排版的原则

UI设计过程中,核心遵循的原则依然是平面设计的四项排版原则:对齐、亲密、对比、重复。市面上对设计原则有很多版本的归纳,但笔者反复比较后依然认为这四项原则是最经典、最实用的的设计准则。

  • 对齐:让所有设计元素始终拥有一定的相互对齐关系,这样能形成秩序感,避免混乱

  • 亲密:让有关联的设计元素间隔更近,让没有关联的设计元素间隔更远。这样能暗示设计元素的内在逻辑联系,降低用户的理解成本

  • 对比:避免页面上的设计元素太过相似,有利于增强设计感和并强调关键信息

  • 重复:让特定视觉要素在整个作品中反复出现,可以体现一致性,并构建专业的设计感

UI设计作为传统平面设计的数字化延展,实际操作中有哪些不同呢?下面就让我们一起来看看如何在UI排版设计中融入上面四条原则吧。

经典UI排版设计盘点

1)Hero布局

典型案例:NFT&元宇宙设计模版(Web)

复用链接:https://www.mockplus.cn/example/rp/100268

Hero是Web设计领域的一个专业词汇,特指页面的首屏设计。由于网页的首屏对用户持续停留和转化将起到决定性的作用,所以使用Hero(英雄)来形容这个板块的重要性。

上图的设计则是一个典型的Hero版式:最上方放置Nav导航条,左侧采用高对比度字体展示核心价值(搭配高饱和度CTA按钮引导用户点击),右侧采用定制的主视觉素材解释文案并提升视觉冲击力,最后辅以随机元素装饰背景。这套版式在各种Web设计中可谓是万金油套路,非常推荐新人设计师把优先练熟。

2)现代极简

典型案例:宜家家居(Web)

复用链接:https://www.mockplus.cn/example/rp/100077

现代极简风格强调大面积留白、对齐和重复的运用,在北欧和日本非常流行。在宜家家居这个Web案例中,设计元素的数量非常克制,版面尽可能留给了商品的摄影图。此外,在维持栅格原则的基础上允许适当的错落变化,提升了版式的变化感和实用性。

3)仪表盘结构

典型案例:数据可视化设计(Web大屏)

复用链接:https://www.mockplus.cn/example/rp/100276

仪表盘原来是用在汽车等有驾驶舱的场景,在UI中常常将运用在大屏数据可视化的场景中。数据图表模块围绕中心的主视觉内容,形成包裹的结构,强化用户能一览全局的掌控感。搭配科幻美术风格和3D、Web动态技术等,可以进一步凸显产品的科技感和沉浸感。

4)固定导航结构

典型案例:喜茶(小程序)

复用链接:https://www.mockplus.cn/example/rp/100009

固定导航结构常见于各种移动端APP的UI设计。以国内流行的点单小程序为例:顶部有小程序通用的顶部导航栏;底部有主功能模块的Tab栏;一些特殊页面(商品列表等),还需要再次采用左侧导航栏来进一步划分操作空间,界面上很容易形成1-3个方向的包裹模块。

在确定了这些不易改变的板块以后,剩下的内容只需要在纵向的滚动空间内合理布置即可。相比Web端设计,移动端的版式受限于设备尺寸和用户习惯,限制会比较大,所以风格往往也更统一。

5)对称分屏

典型案例:Shiba(APP)

复用链接:https://www.mockplus.cn/example/rp/100270

在屏幕中间位置,对素材和内容进行切分是移动端Onboarding(引导页面)的常见套路。这个方式可以制造整个滑动体验的一致性。在Shiba这个案例中,配图的部分始终处于页面纵向相同的位置,分割让配图素材和文字描述部分形成了自然而优美的对比感。值得一提的是,配图部分的背景色一定要和文字部分的背景色区隔开,否则会让分屏的效果大打折扣。

6)强字体和色彩对比

典型案例:Contra(APP)

复用链接:https://www.mockplus.cn/example/rp/100248

Contra这套移动端的原型设计体现了字体和色彩对版式的影响。通过放大字体和填充高饱和度颜色,可以让界面呈现自然的分割感、活泼感和不拘一格的设计感。如果你需要设计一套充满趣味和潮流感的UI界面,可以考虑采用更大胆的字号和更激进的配色方案,从而让页面呈现独特的版式感受。

7)抽屉布局

典型案例:Sidebar menu(Web)

复用链接:https://www.mockplus.cn/example/rp/100265

侧面抽屉布局常用于呈现菜单内容,让这部分内容固定在界面的左 / 右侧都能营造稳定的设计感,并始终保持操作的便捷性。值得注意的是,抽屉部分内容是很灵活的,可以搭配高对比度颜色的背景来强化视觉,也可以搭配动效做成更有趣味性的收纳形式。

8)几何重叠

典型案例:时尚摄影集(PPT)

复用链接:https://www.mockplus.cn/example/rp/100064

采用主色的矩形色块和其他素材形成刻意的碰撞和重叠,是经典的平面设计风格。在制作这种效果的时候,设计师最好是借助栅格来确定色块的大小和位置。对于新人设计师来说,一旦掌握了栅格的基本原理,这种风格还是非常好上手的,而且也很容易出效果。

9)悬浮式轮播

典型案例:企业官网(Web)

复用链接:https://www.mockplus.cn/example/rp/100007

对于移动端或者Web端官网设计来说,采用轮播展示客户的多张产品图是常见需求。如果采用最普通的轮播和左右切换按钮,难免会显得非常死板。将轮播控制条的面积增大并改成矩形样式,和图片形成层级关系,就有了悬浮式的轮播效果。在这种版式下,悬浮所带来的轻立体效应可以带来立竿见影的设计感,从而提升整个页面的用户体验。

10)磁铁和Bento布局

典型案例:Marvie(APP)

复用链接:https://www.mockplus.cn/example/rp/100245

作为最近几年最火爆的排版风格,磁铁和Bento可以是当下所有UI设计师必学的设计范式。苹果的发布会就经常使用Bento版式做成一图流,实现极高的信息传递效率。Bento来源于日语中的便当盒,在UI设计圈用来形容类似“便当盒格子”的版式切分。磁铁和Bento布局需要依靠栅格原理作为基础,在页面上根据信息需要切分出合适的模块,并在单个模块中使用少量文案 + 图片素材进行展示。需要注意的是,无论内部如何切分,外部都需要保持一个标准圆角矩形的形状(类似便当盒的轮廓)。

上述的十个经典案例展示了UI排版设计中的常见套路,覆盖了Web设计、APP设计、大屏设计、PPT设计等多种场景,相信这些排版设计方案会为你的UI / UX设计带来新的灵感和思考。点击相关的“复用链接”可以在摹客RP(rp.mockplus.cn)这款免费的在线设计工具中进行深入的研究和设计练习。灵活掌握这些排版思路,将给你的UI的排版设计工作带来极大的助力,赶紧去试试吧!

上一篇
手把手教你从0开始搭建B端设计系统

摹客团队   03/11

这10款设计工具,助你轻松搞定主视觉设计!

摹客团队   02/26

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com