火星网校
UI界面中的网格系统
发布时间：2024-03-12 18:48:57 浏览量：232次
（一）什么是网格系统？
| 包含了水平和垂直方向的参考线，用来合理排列内容。
最基本的网格系统由一系列水平和垂直的交叉参考线构成。网格系统最开始在纸媒中广泛应用，有着悠长的历史，引入到网页设计之后，出现了很多CSS网格框架，几乎成了网页设计的标准。利用网格系统可以更好的驾驭内容，保持一致性。也是响应式网页表现的方法之一。
下面我们来看图（一）为响应式网站在不同终端的显示效果，显示终端为不同的显示器，各种手机（包括横版竖版）都需要很好适配做好用户体验。
当然你也可以打破网格系统，用更好的布局取而代之，也可从网格系统中衍生出自己的布局方式。如果你的网站设计的已经很不错，那么可以通过网格来让你的网站更具有体验价值。但网格系统不意味着循规蹈矩，一味按照网格线来进行布局。就拿响应式设计来说，灵活性是其最大的特点网格系统也应如此，网格系统的意义在于更灵活的帮助你有序布局，而不是限制你的设计。网上可以找到很多合适的网格框架，当然，我们也可以自己创造。但还有句老话说的好，规矩就是用来被打破的。无需拘泥于网格系统的形式，我们使用网格系统只是为了理解布局的理念和手法，之后，我们便可以进行创新。
（二）如何建立网格系统？
网格系统的设定不同人有不同的习惯，有人喜欢12列的网格，有人则喜欢16列网格，还有人喜欢24列的网格等等。
为什么老铁喜欢运用12栏，网页中最多的栏就是导航的划分了，12栏已经可以满足大多数的分栏了。我们可以先去看苹果的官网响应式就做的很棒，以此来开启我们的网格之旅！！！
那么什么样的网格系统更适合我们呢？
我们要从实际的设计产出物（平面、网页、APP）来考虑，就能够知晓网格系统如何设定。
平面：尊重常用分栏进行划分，尺寸可以有小数点但需要达到均衡感。
网页：为了能够符合工程师书写代码，请按2的倍数进行栏与间距的划分，尽量不要出现奇数与小数点，小数点不好书写，奇数不好对齐。
APP：为了适配不同手机能够方便工程师开发，请按2的倍数（工程师尺寸设计效果图）、4的倍数来划分（按2倍手机设计效果图）、6的倍数来划分（按3倍手机设计效果图），以此为参考进行网格设定就真正意义上考虑到效果图在手机上的还原度。
下面的图解主要分析网页与手机H5页面的网格系统建立方法。我个人更喜欢12列的网格。需要参考整体的宽度来进行分割。如果设计上有比较多的小元素可以设置24列网格。以前网上下载到CSS样式大多数都是960px的网格系统，这里的960px就是页面的可视区域。现在屏幕的分辨率都提高了，大多数网页都基于1200px以内进行响应式设计适配不同的浏览器。下图（二）、图（三）为老铁针对网页的网格系统的划分请童鞋参考，也可以自己重新定义属于自己的网格系统（网页的高度看你的内容多少了）版式中的banner（广告）遵循广告的设计规律，字体字号大小、字体颜色老铁的其它文章都讲解过了~~~
平面设计中的立体空间
设计排版字号大小知多少？
最容易上手的配色方法
（四）手机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分栏-图（七）其它版本的页面可以以此为借鉴制作符合需求的网格效果图。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
