UI界面当中的网格系统

时间：2023-09-28 00:06:01 | 来源：网站运营

时间：2023-09-28 00:06:01 来源：网站运营

UI界面当中的网格系统：（一）什么是网格系统？

| 包含了水平和垂直方向的参考线，用来合理排列内容。

最基本的网格系统由一系列水平和垂直的交叉参考线构成。网格系统最开始在纸媒中广泛应用，有着悠长的历史，引入到网页设计之后，出现了很多CSS网格框架，几乎成了网页设计的标准。利用网格系统可以更好的驾驭内容，保持一致性。也是响应式网页表现的方法之一。

下面我们来看图（一）为响应式网站在不同终端的显示效果，显示终端为不同的显示器，各种手机（包括横版竖版）都需要很好适配做好用户体验。

当然你也可以打破网格系统，用更好的布局取而代之，也可从网格系统中衍生出自己的布局方式。如果你的网站设计的已经很不错，那么可以通过网格来让你的网站更具有体验价值。但网格系统不意味着循规蹈矩，一味按照网格线来进行布局。就拿响应式设计来说，灵活性是其最大的特点网格系统也应如此，网格系统的意义在于更灵活的帮助你有序布局，而不是限制你的设计。网上可以找到很多合适的网格框架，当然，我们也可以自己创造。但还有句老话说的好，规矩就是用来被打破的。无需拘泥于网格系统的形式，我们使用网格系统只是为了理解布局的理念和手法，之后，我们便可以进行创新。




（二）如何建立网格系统？

网格系统的设定不同人有不同的习惯，有人喜欢12列的网格，有人则喜欢16列网格，还有人喜欢24列的网格等等。




为什么老铁喜欢运用12栏，网页中最多的栏就是导航的划分了，12栏已经可以满足大多数的分栏了。我们可以先去看苹果的官网响应式就做的很棒，以此来开启我们的网格之旅！！！

那么什么样的网格系统更适合我们呢？

我们要从实际的设计产出物（平面、网页、APP）来考虑，就能够知晓网格系统如何设定。

平面：尊重常用分栏进行划分，尺寸可以有小数点但需要达到均衡感。

网页：为了能够符合工程师书写代码，请按2的倍数进行栏与间距的划分，尽量不要出现奇数与小数点，小数点不好书写，奇数不好对齐。

APP：为了适配不同手机能够方便工程师开发，请按2的倍数（工程师尺寸设计效果图）、4的倍数来划分（按2倍手机设计效果图）、6的倍数来划分（按3倍手机设计效果图），以此为参考进行网格设定就真正意义上考虑到效果图在手机上的还原度。

下面的图解主要分析网页与手机H5页面的网格系统建立方法。我个人更喜欢12列的网格。需要参考整体的宽度来进行分割。如果设计上有比较多的小元素可以设置24列网格。以前网上下载到CSS样式大多数都是960px的网格系统，这里的960px就是页面的可视区域。现在屏幕的分辨率都提高了，大多数网页都基于1200px以内进行响应式设计适配不同的浏览器。下图（二）为大家对网页的网格系统的划分请童鞋参考，也可以自己重新定义属于自己的网格系统（网页的高度看你的内容多少了）

（三）网页网格系统

~点链接可以访问实际效果可以通过电脑端手机进行检验~http://www.adobeedu.com/images/laiyi/

（四）手机H5网格系统




我们知道手机端的开发分为原生开发（基于iOS、Android、Windows Phone也叫本地智能操作系统Native APP）与Web APP（基于高端机浏览器运行）以及混合开发（web与原生结合）,后台的开发语言也不同如安卓Jav是a开发语言、iOS是Objective-C语言、Windows Phone是C##。

原生APP的优点可以节约宽带成本、访问本地资源、打开的速度更快并为用户提供最佳的用户体验和优质的用户界面，但现在web端口也有很多优点基于网页端开发完成后移入到移动端内部就需要混合开发来解决了。

手机端的网格系统建立我们首先需要基于效果图来进行讨论，H5与APP在展现效果上是相同的，但开发上是不一样的。H5是基于web，APP基于原生与web。我们在制作效果图上都希望还原度较好，请在网页设计与APP设计上注重尺寸规范考虑到工程师书写代码的习惯。手机里我们知道有0.75倍、1倍、1.5倍、2倍、3倍、4倍，其中0.75倍、1倍、1.5倍已经淘汰了。我们通过老铁书写的<设计排版字号大小知多少？>文章就可以了解到平面设计与网页设计都是1倍，手机里是2倍3倍居多。

我们在制作H5与APP设计效果图上需要制作苹果版与安卓版，理论上可以制作工程师的1倍尺寸，设计师的2倍、3倍尺寸都在允许范围，都需要工程师进行适配到各种手机上显示。

用来制作效果图的尺寸如下：

iOS包括:

工程师-375x667pt、414x736pt ；


设计师-640x1136px、750x1334px、1125x2001px、1242x2208px、1080x1920px;

Android包括：

工程师-360x640dp;

设计师-720x1280px、1080x1920px；


以上的尺寸都是可以制作效果图的但看工程师想依照那个效果图进行开发，因人而异，有的工程师设计师制作一套效果图剩下都可以适配出来，有的工程师需要设计师再更改一个其它版本。下图的H5页面使用苹果2倍手机尺寸制作效果图进行的网格系统建立，共建立了两个网格系统8分栏-图（六）与6分栏-图（七）其它版本的页面可以以此为借鉴制作符合需求的网格效果图。

下图是以H5网格系统设计的专题作品

在你的设计中使用网格可以让你更有逻辑地进行设计工作，并且网格系统可以更好地组织画面中的信息，让重要的元素更加鲜明，让设计稿有更好的结构，带来更好的体验。设计师的工作是尽可能更有创意地传递信息，网格系统是让信息更具条理的方式之一，但我们不一定非得100%完全遵循网格的分栏进行设计，我们也要打破网格系统，这也是创建视觉兴趣点的好方法！

喜欢的记得点赞谢谢