UI界面设计常见的排版方法

2020还有一个月就过去,2020对很多人来说的确是多灾多难的一年,一年里经历了全世界的疫情、家人的去世、团队的解散、公司的倒闭、失业分手,方知人生不如意之事真的是十之八九，只有不断努力强大自己才可更加从容面对生活中的坎坷。

接下来为大家介绍一下本篇内容，通过UI的页面排版布局，进行系统的页面设计，本片章通过keep、喜玛拉稀、京东、比心等多个app系统的阐述UI等距栅格排版的优势。

最后再说一句勿忘初心，方得始终，祝大家2021越来越好。

1.1 什么是栅格系统？

网格系统可以让你依靠秩序与逻辑去完成设计。

早在20世纪初，德国、荷兰、瑞士等国的平面设计师们发现通过维持视觉秩序，从而使版面能更加清晰有效地传递信息，二战后这种理念在瑞士得到了良好的发展，直到20世纪40年代后期，第一次出现了使用网格进行辅助设计的印刷作品。

1.2 栅格系统的优势

栅格系统在页面排版布局、尺寸设定方面给了设计者直观的参考，它让页面设计变得有规律，从而减少了设计决策成本。

UI设计也是需要理性的、客观的、具有数学逻辑美感的。熟练运用网格系统能够让你的设计更有秩序和节奏感，页面信息的展现更加清晰，提高阅读效率，从而提供给用户舒适的使用体验。

当多位设计师共同设计产品时，一个统一标准就变得尤为重要。如果没有一个统一的框架去约束的话，我们的产品的页面和组件的标准可能各式各样，这样的话整个产品的页面都会比较混乱。因此，网格系统有助于将界面设计工作分开，因为多位设计师可以在统一的布局下进行不同部分工作，并且无缝集成并保持连贯。

1.3 App中重要的网格系统  

网格系统利用水平与垂直的参考线，将完整页面的版心划分成若干大小一致的格子，所有元素都在版心内编排，再通过这些规律性的格子作为参考来构建有序的版面。

在app设计中，被到导航栏、标签栏和左右边距包裹的区域为设计区，所有元素都应在设计区排版布局。但并不是不可超越左右边距，在一些特定的环境下也可以使用边距空间。

栅格系统就是利用均分的垂直和水平线，将页面分割成若干有秩序的格子，按照这些分割好的格子去安排页面的设计元素，控制元素之间的节奏关系。

栅格系统大的层面可以帮助设计者更好的进行版式设计与内容布局，而小的方面可以辅助设计师规范页面内各种元素的对齐与间距的设定。从用户体验角度来讲，这两者同等重要，从执行层面来讲，我们一般先做版式设计与布局然后再填充内容、调整细节。

2.1 什么叫单位的网格

由于列跟水槽的宽度是以网格作为基本单位来增加或者减小，所以栅格化的重要一步就是需要先定义好栅格的原子单位“网格”的大小。

我们也可以利用 相同网格法来制定产品中的间距，建立相同的间距为一个单位的网格，使用单位的倍数来定义模块的间距与元素的尺寸。

2.2 网格的应用标准

App通常不会超过6列，以750*1624为例，如果边距为40、间距为20，划分成6列，则每列为95，较ios最小点击范围（88px）大一点，如果划分为7列，则每列为78，这么小的尺寸将会影响用户的点击操作。

2.3. 八倍间距的应用

目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除，使用8作为最小原子足够普适。可以确保不同布局之间的视觉一致性，同时可以灵活的适配多种尺寸的设计。以8为单位符合“偶数原则”。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现，从而使页面各类元素在大多数场景下都能有比较精致的细节表现。

在网格系统中应该更加注重的是间距，而间距要遵循网格系统（例如使用 4、8、16、24、32 等和 8 具有规律的数字）同时在产品中的各类元素也要遵循这类原则（例如图标大小、组件大小等）。所以布局的水平和垂直节奏和各个组件的节奏会相互重叠，整体的设计将更加完整。

那么假设我们以8为基准的去延展系统间距，得到如下间距系统：

8、16、24、32、40、48、56、64、72、80、88、96、192等，这里都是8的倍数或能被 8 整除。

开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计，因此如果设计师也使用以8为基本单位的栅格系统，开发与设计师相互对接就会更加方便，开发实现页面时也能更高品质的去还原我们的设计。

2.4 十倍间距的应用

如果定义10为最小单位,那么以10为基准去延展系统间距,得到一组数字是10、20、30、40、50、60、….120、130等。

比心app挑选20作为列间距,挑选20作为全局边距,这些将满足整个app的设计需求,相同的边距会让整个app显得整齐一致,紧凑的节奏感使得整个页面充满了活力与动感。

 keep app挑选挑选30作为全局边距,大边距长留白,上方金刚区间距90,下间距110 ,图片间距10留出大面积空白。大量的留白和简单的比例让整个界面充满了清新的文艺气息。简单布局,充满呼吸的节奏感,能让用户在体验运动的同时,又有呼吸流畅的感觉,具有极佳的用户体验感。

2.5 四倍间距的应用

如最小的单位是4,那么较为合适的间距有16、20、24、30、36;我们还可以通过列间距反推全局边距的尺寸,全局边距大于列间距画面会更加聚焦在屏幕中间,反之,画面就会跑向屏幕边缘。

3.1 什么是广进分割比

有人曾经问过我黄金分割比是否能在ui的界面设计中的得到应用,其实黄金分割比在建筑、电器、logo 设计和摄影等领域都有着举足轻重的作用,但是这种方法在 UI 设计中却不是那么流行，因为它看起来太难了，但在国外的软件设计已经开始有了很好的应用。

这是一个十分有趣的数字，我们以0.618来近似，通过简单的计算就可以发现：

0.618/1=0.618

(1-0.618)/0.618=0.618

3.2 keep中的黄金分割比

以app界面尺寸750*1624为例子,750*0.618=464、1624*0.618=1004,以这两个尺寸为线拉长延伸,以keep app为例,可以清楚的发现首页的功能区第二、第三的图标正好在黄金分割比上,整体分布显得清晰明确复合左右最佳分割比例.

将页面的黄金分割比连线将整个界面清晰分为3层9个部分,再将单手操作热区图片与9宫格结合后.清晰的发现keep的主要操作与视觉位置主要体现在中间三个区域与下方前两个区域.

通过上图就会清晰的发现keep首页整体布局的合理性与用户体验的舒适度.

参考文献：

https://zhuanlan.zhihu.com/p/25210675

http://www.woshipm.com/pd/1632732.html