广告人干货库 广告人干货库
  • 快讯新鲜
  • 营销
    • 资讯
    • 洞察
    • 创意
    • 品牌
    • 策略
    • 文案
    • 设计
    • 运营
    • 电商
    • 传播
    • 日常
    • 书单
  • 案例库
  • 方案库热门
  • 专题库
  • 广告公司导航
  • 4A招聘官方
  • 注册
    登录
立即登录
  • 快讯新鲜
  • 营销
    • 资讯
    • 洞察
    • 创意
    • 品牌
    • 策略
    • 文案
    • 设计
    • 运营
    • 电商
    • 传播
    • 日常
    • 书单
  • 案例库
  • 方案库热门
  • 专题库
  • 广告公司导航
  • 4A招聘官方
🔥广告公司导航    🔥方案库    🔥案例库    🔥加VIP会员    🔥4A公司招聘
🔥广告公司导航    🔥方案库    🔥4A公司招聘

跳进大厂必备技能,UI中网格最佳实践

功夫UX5 年前

网格系统,不用我多说了吧,每个设计师必备的核心硬实力。但还是有很多设计师半知半解,使用时云里雾里的。今天我们来解决这个问题,分享给你一些实用小妙招。记得先收藏,免得下次需要时找不到。

为什么要掌握网格?

网格系统对每个设计师来说,是必须要掌握的硬实力。可以这么说,网格的运用可以帮助我们塑造自身专业性,还可以让设计排版更科学、逻辑性和秩序美。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

网格系统最主要的核心能力,可以给团队之间协作带来默契与统一性;同时也是保证在协作时候,设计师之间减少沟通和决策成本。有了一定的规则约束后,大家都按照统一的规则去完成设计。

所以现在知道网格系统的重要性了吧,那么下面继续分享:使用网格间距系统的一些小技巧。

多卡片间距如何解决?

在使用网格系统过程中,很多设计师会遇到如下问题,我们先来看看图。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

在刚使用网格时,有些设计师遇到这种卡片式的布局,不知道如何正确使用间距,总是很纠结。以后遇到这种问题,几乎90%的解决方案,就是间距相等原则。右侧是修改后的效果,看上去视觉更舒适一些。

下面来看一个实际线上案例

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

上图是天猫app截图的,不知道是开发实现原因,还是设计师故意这样去设计。右边卡片是被我提取出来了,大家可以看下右侧卡片,看着并不是十分舒服,太拥挤了。

下图,我把卡片内间距调整相等后,整体视觉感受好很多了。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

卡片间距相等原则,规则就会少一些。能用最少规则完成设计,而且达到满意的效果,那才是所有设计师该追求的目标。

卡片内文案间距节奏

在卡片内做文案排版,可以有一套好用的公式,那就是外部间距统一,我们先看下图。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

两个卡片很明显,右侧卡片间距比左侧舒服很多,那么到底怎么回事?继续看下面。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

以后遇到这种卡片内文案排版,同样思路运用相等原则。文案四周间距相等,标题和内容之间由于信息层级关系,间距可以比外间距小一些。

这样的好处是规则简单啊,效果也很好,遵循重复原则。所有的间距都必须遵循一个规则约束,比如某个数的增量,我这里使用的是8的增量。

那么如果是大标题带有小标题的情况,同时还有内容信息,这种该如何处理?下面继续看一张图。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

如果遇到这种情况,思路其实也是一样的,确保四周间距一致,中间由于层级关系,大标题和副标题肯定间距要小,这里继续使用小间距8,标题与下面内容之间关系又是一个层级,所以可以使用32。注意,文字垂直间距节奏要比四周小,就可以了。

下面这种情况,思路也是一样的,大家也是需要注意。

跳进大厂必备技能,UI中网格最佳实践-广告人干货库

今天分享这几个实用技巧,大家下去多去观察其他优秀的app设计,看下他们如何使用网格布局的。当然还需要自己去尝试那种更好,去验证。


跳进大厂必备技能,UI中网格最佳实践
#广告人干货库#广告人必读#广告人日常
0
分享
功夫UX
文章 21评论 0



本文版权均为原作者所有,如有侵权请通知删除;本平台仅提供信息存储空间服务。
文章为作者独立观点,不代表平台对观点赞同或支持。



本文版权均为原作者所有,如有侵权请通知删除。
本平台仅提供信息存储空间服务;文章为作者独立观点,不代表平台对观点赞同或支持。
功夫UX
Tony,知名一线大厂设计师,专栏作家。用通俗易懂的语言将设计分享给您,坚持原创干货,让每个设计师都能学到有用的知识。
21文章
0评论
0获赞
找工作

👉 想跳槽,要涨薪,找工作,就上4A招聘

热文推荐
TOP1
宜家:如果无法前往赛场,就把赛场带回家
2 周前
TOP2
名创优品《快乐老家》——用“利他营销”重塑品牌情感连接的创意范式
4 周前
TOP3
蒋奇明被优酸乳「喂」到上头
2 周前
TOP4
不搞碰瓷搞“碰杯”,一台制冰冰箱,推着广告牌上街“偷感”整活
4 周前
TOP5
线下事件新玩法:谷粒多让于适扛着“小绿砖”满城跑
6 天前
方案怎么写,扫码来干货库看看
  • 方案库
  • 加 VIP 
  • 用户评价
  • 行业报告库
  • 关于我们
Copyright © 2026 广告人干货库. Designed by nicetheme. 网站地图 川公网安备51015602000692号 蜀ICP备2023018979号