恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
2024年UI排版风格解析,经典模板一键复用!
35.5°
2024-03-05 原创文章 行业资讯 举报 7279 7 3 0

在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的排版设计工作带来极大的助力,赶紧去试试吧!

Powered by Froala Editor

更新:2024-03-05

收藏

7人已收藏

  • 285

    作品

  • 125

    粉丝

  • 5

    关注

  • 强烈推荐!10款 PS 易用插件
  • 弹窗也有大学问,一文讲透产品弹窗设计!
  • 产品经理如何用ChatGPT提高工作效率?给你15个例子!
  • 如何高效绘制SVG? 附5款设计师必备SVG编辑工具!
相关标签
UIUI设计

    猜你喜欢

      2024-03-05 原创文章 行业资讯 举报 7279 7 3 0

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

      35.5°

      你确定要举报2024年UI排版风格解析,经典模板一键复用!

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2024年03月05日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录