社区编辑申请
注册/登录
想要用好网格系统,这八个小技巧你必须掌握
移动开发 移动应用
今天将分享我在 UI 设计中掌握的网格设计技巧,文章不长,认真看完,定有收获。

Hi,我是彩云。留白和网格是任何设计的基础,一旦真正掌握并正确使用,网格将帮你设计出可靠且具有吸引力的设计解决方案。所以,今天将分享我在 UI 设计中掌握的网格设计技巧,文章不长,认真看完,定有收获。

什么是网格设计?

网格是设计好任何界面的基础,可以将其理解为布局的框架。这套框架有助于组织 UI 元素、引导用户并确定设计的各个部分。

常用术语

网格(Grid)由网格单元(Grid unit)组成。布局放在网格上,它包含一定数量的列,列的左侧和右侧都有外边距(Margin),每列之间都有内边距(Padding),也叫水槽。

技巧 1,正确地选择列数

虽然 12 列 Bootstrap 类似网格是最受欢迎的选择,但它不是强制性的。选择网格时,根据设计真正需要来确定用多少列的网格,做到不多不少。(彩云注:可以根据自己的界面主要尺寸来定义列数,常见的可以按 4 的倍数或者 8 的倍数来设置)

技巧 2,了解限制条件

始终以你正在设计的设备屏幕为基准,了解目标用户的使用习惯, 利用这些限制并学习使用它们进行设计

最常见的屏幕分辨率 (px)

  • PC: 1440×1024
  • 平板电脑: 768×1024
  • 手机:320×640(这里指的是 1x 图)

技巧 3,间距保持一致

统一垂直和水平间距,使得布局更具吸引力和一致性。

技巧 4,用好网格基线

使用基线网格来排列内容并为文本和布局元素带来视觉一致性。(彩云注:保持文字底部对齐网格)

额外提示——调整字体行高以匹配基线网格。

例如:如果选择 4px 作为基线/网格单位,对齐文本,需要将字体的 line-height 设置为单位的倍数,即行高应该是 4、12、32、64 等

技巧 5,利用好框架和颜色

把框架作为一种工具,将用户的注意力集中在某个布局部分上, 在需要的地方添加额外的视觉重量。(彩云注:比如为凸显某个数据而改个卡片颜色,在做后台界面时比较常见)

技巧 6,打破网格

将某些元素排除在网格之外,使用这个分解技巧来增加价值并使你设计的某些部分能脱颖而出,引导用户。(彩云注:比如出界的设计,或者大小有比较大的对比)

技巧 7,动态网格

确保你设计的布局能适应常见的屏幕尺寸、并适配多终端保持体验一致。(彩云注:改布局不改变网格体系,间距那些依然可以保持不变)

技巧 8,灵活运用网格系统

没有网格的设计对于小型项目确实是可以的,但对于相对较大的项目,使用网格就非常有必要了,甚至是强制的。

学习使用网格进行设计,但也并非生搬硬套,你需要不时观察布局,为你的需求找到最有创意的解决方案。

责任编辑:未丽燕 来源: 优设
相关推荐

2022-05-18 23:42:08

网络安全安全分析工具

2022-08-09 08:00:00

服务网格云原生工具

2022-07-06 08:25:17

服务网格Kubernetes

2020-08-26 05:45:40

服务网格DevOps开发

2021-04-02 22:00:50

服务网格微服务

2021-02-28 07:42:40

可视化网格线H5-Dooring

2020-11-30 13:50:13

服务网格微服务数据

2010-02-06 14:31:54

ibmdw云计算

2020-10-21 13:31:53

2020-01-03 09:27:10

UI设计师网格

2020-10-30 21:12:03

数据中心微服务技术

2019-08-29 08:00:00

2013-07-24 15:33:57

编辑推荐

Safari不是唯一选择:8款优秀iPhone Web浏览器应用!从安卓智能手机控制PC的五款最佳应用软件谁说苹果手机不能截长屏?教你3种方法,别再说不知道了推荐两款iOS端磁力下载工具后悔药来了!iOS 15刷机降级iOS 14.6详细图文教程
我收藏的内容
点赞
收藏

51CTO技术栈公众号