http://www.028hs.net

平面广告文案- UI设计中如何更好地使用栅格系统

环顾身边常见的优秀设计许多都利用了栅格系统,你大概很是附和在界面中利用栅格系统,但却没有人汇报你应该如何利用它们。

印刷中也会用到栅格,但就本文而言,我主要想接头的是用于PC和移动设备上的栅格系统设计。

平面广告文案-
UI设计中如何更好地利用栅格系统

紫色块放内容

内容块包罗文本,图片可能是两者的组合形式,配景颜色实际上不能算是内容元素,除非是作为文本可能图片的容器。

平面广告文案-
UI设计中如何更好地利用栅格系统

上图中的粉色块作为栅格中的列,它们组成了内容宽度。一般来说,列宽是不会变的,只是列数会跟着设备的差别而变革,比如从PC端的12列变为平板电脑上的8列,然后在移动端变为4列。严格来说,你其实可以界说任何想要的列宽,但大大都环境下的网格列宽都设置在60-80px之间。选择符合的列宽是最重要的,因为它是内容宽度的主要抉择因素。

平面广告文案-
UI设计中如何更好地利用栅格系统

水槽是在列与列之间的空间。20px是一个常见的尺寸设置,当设计块状可能卡片元素的网格时,这种间距很是重要,比如做照片类设计的时候。有些系统会跟着设备宽度的增加而增加水槽的宽度,但也可以保持牢靠。

平面广告文案-
UI设计中如何更好地利用栅格系统

外边距也称为外水槽,是内容宽度之外的空缺区域。为了更利便的设计,外边距会跟着设备宽度的增加而增加。移动设备的边距凡是为20-30px,而在平板电脑和PC端,这个间距凡是会差异很大。

下面会先容一些根基的准则,但要大白在实际设计中其实没有任何硬性的规定。

1. 内容元素必需位于若干列上

其核心思想是内容元素必需位于若干列上,你可以任意支解,比如6x2,3x4,4x3。下面的例子中,我展示了差别支解方法设计的信息卡片。

平面广告文案-
UI设计中如何更好地利用栅格系统

平面广告文案-
UI设计中如何更好地利用栅格系统

差别栅格设计展示

很棒,这看起来很简单对吧。有的时候,你想把内容严格的套用在栅格机关上,会发明大概不足雅观,比如下面的例子。

平面广告文案-
UI设计中如何更好地利用栅格系统

平面广告文案-
UI设计中如何更好地利用栅格系统

假如我们把内容都放在网格上,文本内容会显得很长,最佳的位置是不严格在任何网格上,这也是可以的,只要领略了整个元素实际上是一个不行见的,更大的容器就行。

平面广告文案-
UI设计中如何更好地利用栅格系统

平面广告文案-
UI设计中如何更好地利用栅格系统

这也是4x3的机关,只是给了它内部不行见的填充。当把这样的设计稿给到开发时,他们就能很直观的知道这一点,所以这更利于去领略如何实际地分配好内容。

2. 不要将内容元素留在水槽中

平面广告文案-
UI设计中如何更好地利用栅格系统

平面广告文案-
UI设计中如何更好地利用栅格系统

内容元素应该要在列宽以内,而不能流出在水槽之外,这样会违背栅格化的目的。

3. 只要父级元素对齐栅格,子级可以不完全对齐列

有些时候,你想要将设计和卡片分成两部分,一半是图片,一半是文字。你大概遇到这样难堪的环境,图片没有完全落在一列上,文字被迫以一种奇怪的方法自适应。其实不消担忧,只要“父”容器对齐栅格,这就没有干系。

平面广告文案-
UI设计中如何更好地利用栅格系统

平面广告文案-
UI设计中如何更好地利用栅格系统

父子级内容栅格排版示意

4. 除非有意,否则不要把列作为外部填充

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。