行业资讯

直击设计行业第一现场,掌握全球化消息

总监分析!为什么移动端设计中不使用栅格系统?

  • 发布时间: 2023-11-13
我们都知道做网页相关的项目,不管是 C 端的还是 B 端的,往往都会应用响应式布局,用了响应式布局,就肯定要做栅格系统,才能确保响应式的正常执行。

总监分析!为什么移动端设计中不使用栅格系统?

但是,移动端要不要用栅格,怎么用,就成为很多人困扰的问题,我们就用今天这篇分享来解释。

 

一、移动端的网格和栅格

了解移动端布局、排版设计就首先得搞明白网格和栅格系统的区别。

总监分析!为什么移动端设计中不使用栅格系统?

首先是网格系统,从安卓早期规范到 Material Design 2 中,谷歌都提倡一套基于 8dp 长宽(后来增加了 4dp)的网格系统。

总监分析!为什么移动端设计中不使用栅格系统?

简而言之,就是建议设计师在制定组件、按钮、图标等元素大小时,以这个网格系统的格子为标准制作,边缘和参考线对齐,确保元素的尺寸和间距都是 8 的倍数。

这么做布局虽然很简单,但不符合国情,以及实际的应用场景以及 iOS 的适配。主要的问题是后者,因为用 8 建立的网格系统,得画布本身是 8 的倍数才能完美适配,比如安卓标准画布 720P 的 1280*720 长宽。

而多种多样的安卓设备与屏幕分辨率中,有非常多是不满足这个条件的,苹果的手机就更不用说,不是 375,就是 390、393 宽等奇行种……所以这套网格系统是没人用的。

而栅格系统则和网格系统不同,网格是把画布等分成若干的大小一样的格子,用于在格子上方填充内容。而栅格系统则是在画布中添加参考线,让内容的布局可以依据参考线来排版。

比如下图,也是出现在 Material Design 2 中的响应式栅格系统。

总监分析!为什么移动端设计中不使用栅格系统?

它的作用和网页端的响应式栅格是类似的,栅格的宽度是可变的,模块会随栅格的变动做适配。具体的逻辑就不在这里解释了,大家可以看我以前写的网页响应式相关的分享。

总监分析!为什么移动端设计中不使用栅格系统?

安卓在官方规范中提出这套系统,和 Bootstrap 的响应式规则基本一样,包含了断点的应用,主要是为了让产品只用一套代码在不同端和屏幕上实现样式排版的适配。

比如现在这么多的折叠屏手机,以及安卓平板,开发者只需要应用这套系统,就可以使用一套代码实现所有设备、规格的自适应。

想想很美好对不对?但是不做国外的项目,尤其是只针对安卓平台设计的项目,那么这种栅格系统是没法应用的,下面我们就会具体解释下原因。

二、栅格系统的应用难题

栅格系统为什么在移动端开发中难以应用,有多个因素影响,先简单概括一遍:

  1. iOS 系统中不自带栅格系统
  2. 大屏适配不能简单用响应式
  3. 项目内的页面布局差异过大

问题 1. iOS 系统中不自带栅格系统。这个是最致命的,因为我们在 UI 设计中的主要设计对象是以 iOS 规范为标准的,iOS 中没有提供这个规范。

理由也很简单,iOS 设备的规格对比安卓阵营非常少,没有这么迫切的响应式需求。而早年支持 iPad 端适配的逻辑基本被放弃了,官方显然也发现强行让开发者做响应式的设计,还不如 iPad 端直接运行未适配的手机端 APP 或直接开发 iPad 端的 APP,原因下面说明。

总监分析!为什么移动端设计中不使用栅格系统?

问题 2. 大屏适配是不适合直接用响应式的。如果你们真的有去了解网页的响应式,就知道响应式只能应用在非常简单的布局结构中,如果项目的内容多且杂,那么响应式的适配成本远远大于直接开发多个版本。

同理,要让手机 APP 直接用简单的响应式规则适配 iPad 端,是非常难用的。因为针对手机设计的布局是基于手机的交互习惯,而 iPad 的交互习惯不一样,自然会用起来各种别扭。

总监分析!为什么移动端设计中不使用栅格系统?

同时,复杂的项目中会有很多很特殊、花哨的组件设计,这些组件如果要用响应式的规则去适配是非常困难的,得考虑一系列适配逻辑,并在切图环节中增加很多工作成本。

所以为什么大厂那些做的很复杂的产品都不用响应式来开发应用,直接无缝适配 iPad 端?原因就是开发成本太高了,高到宁愿放弃 iPad 端的用户体验也不愿意做响应式。

问题 3. 项目内的页面布局差异过大。如果你们有认真对比一些大型产品的界面布局,就会发现不同的页面,还是不同的模块,布局是不符合统一原则的。

比如淘宝中的这些页面,左右的间距是不一致的,或者间距的规格是不同的。

总监分析!为什么移动端设计中不使用栅格系统?

这么做是根据实际使用场景的需要去放弃统一性,而用了响应式规范来做,想针对性调整就没那么容易了。

以上几个问题,都是栅格系统在移动端设计中推行的真实阻力,所以即便大厂的产品也不会去用。这不是专业不专业的问题,而纯粹是栅格系统是一种解决布局问题的工具,如果它产生更多的问题,要它何用?

那么抛开栅格系统在响应式的使用,仅仅站在平面布局的角度用栅格系统有必要嘛?

我的回复依旧是没有,网页会用是因为画布太大了,如果不使用一定的标准去规范布局和排版,就很难获得优秀的设计结果。而移动端的空间实在太小了,不需要靠这样的系统去维持布局的稳定性。

所以在移动端应用设计中,不要被响应式和栅格系统束缚住,只要满足基本的规范、体验、视觉需要即可。

结尾

这个问题问的人太多了,虽然写了分享,但还是建议新手要学会从线上的案例找答案。随便打开手机看几个常用的 APP,你就会发很多你想要得到的答案就出现了。

后续会继续更新组件设计的分享,如果还有其它移动端设计的问题也可以在设计群或留言中发出来。

下次再贱~

欢迎关注作者的微信公众号:「超人的电话亭」

总监分析!为什么移动端设计中不使用栅格系统?

转载自:https://www.uisdc.com/app-grid-system

本文网址: https://www.zhishangsj.cn/news/479.html

聆听与分析需求

设计并不是个人观点或情感的自我表达,而是基于

商业委托的系统化、清晰化、构成化的客观解决方案

多一份参考,总有益处

联系微信:2476910203,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系


业务热线:


178 6662 5335

185 6288 7528  

关于至上UI设计

至上UI设计,隶属于青岛至上视界互联科技有限公司,成立于2018年7月。专注于建站和UI视觉设计,致力于创造令人难忘的用户体验,用设计来打动每位用户的心,从而为产品赋予更多价值。遵循用户体验至上,品质至上,服务至上的理念,至上UI设计已为上百家企业提供设计服务,有着成熟的服务经验。

我们的优势

扎实的专业素养

资深的项目经验
精准的需求沟通
完善的售后服务

高效的执行力
规范的设计流程

严守进度与质量

对设计执着的追求与热爱

我们能做什么

企业品牌网站
响应式网站
网页UI定制设计
移动端UI设计

系统软件界面设计

数据可视化大屏设计

图标定制设计

落地页设计

青岛UI设计界面设计丨山东UI设计界面设计丨青岛网页设计丨烟台UI设计界面设计丨济南网页设计丨济南UI设计界面设计丨泰安UI设计界面设计丨潍坊UI设计界面设计丨青岛网站设计

在线客服

扫一扫添加我微信好友

在线客服

您好,我这边是在线客服

X