快捷 互聯網 多少 基本 兩個 電商 首頁設計 是否 sha

如何在APP設計中運用網格系統？

--安陽師範學院互聯網+應用技術學院UI設計方向講師 黃艷芳
第1步：定義最小單元格
最小單元格的數值，大多數APP會選擇4-10這個範圍內一個偶數。那麽選用哪個值最為合適呢？
這需要從兩方面考慮：
? 一方面是該數值是否能被大多數手機屏幕的寬度整除，即廣泛的適用性；
? 另一方面是在具體使用時是否具有一定的靈活性。
在適用性方面，4、6、8、10這四個數值都是基本可以滿足的，在靈活性方面，4px表現最佳，但是頁面就會被分割的非常細碎，在設計時比較難於把控。
因此我們需要根據APP的實際情況選擇合適的數值，4px或6px單元格比較適合頁面內容信息較多，布局排版比較復雜的產品，例如：淘寶、考拉等電商類APP；而8px單元格對一般的設計場景都可以很好的滿足，比較適合大多數的APP產品，因此是比較推薦使用的。

第2步：確定組件間距的增量關系
既然確定了最小單元格的數值，那麽頁面裏所有的間距（包括水槽、外邊距、橫向間距等）、組件尺寸等都需要是最小單位的整數倍，以達到統一視覺節奏的目的。例如單元格選擇為8px，那麽所有用到的間距尺寸將會是8px、16px、24px、32px、40px……

第3步：確定列的數量
我們在設計APP頁面時，用到的最多的布局方式就是等分布局，即頁面內容區域被N等分，每一份的寬度則根據屏幕寬度自適應調整。那麽就從這個角度出發，思考一下頁面的網格應該設置為多少列，才能最大程度的滿足各種等分布局的需要。
以下列舉了幾種典型情況（4列、10列、16列等大家有興趣的話可以自己嘗試一下，這裏就不一一列舉了），我們發現12列和24列除了5等分外，其他情況都可以滿足，6列相對稍微差了一點，即結果為：12列=24列>6列>8列。不過其中24列顯然將有限的手機屏幕分割的太碎了，因此在實際使用中還是以12列和6列為主。


第4步：sketch布局設置
利用sketch的布局設置功能，即可快速搭建出網格系統的參考布局，在平時做設計的過程中，可以經常使用Ctrl+L快捷鍵切換布局的顯示，提高設計效率。
另外有幾點需要註意：

1. 總寬=屏幕總寬度-外邊距x2；
2. 偏移=外邊距；

3. 3“裝訂線在外部”不要勾選。
   
   第5步：實際設計運用
   這裏我們以網易漫畫APP的首頁為例，利用8px、12列網格系統來一次設計實戰。
   在首頁設計的初期，還沒有運用完整的網格系統進行規範，組件之間的間距規律基本以10px、20px、30px為主，各個布局模塊之間沒有形成內在關聯的位置關系，視覺的節奏感不流暢，樣式不統一。
   下面兩個頁面中，大部分元素都沒有與網格貼合，布局無規律，沒有一個客觀的參考。

   
   現在我們開始統一使用8px、12列網格系統，對首頁進行一次布局優化。在下面三張圖中我們看到，無論是頂部圖標、入口圖標、豎版封面還是橫版封面，都由網格系統整體串聯起來了，不再是淩亂獨立的個體，閱讀起來更順暢。橫向的間距也都開始使用8px的整數倍，給用戶帶來更有節奏的瀏覽體驗。

   

如何在APP設計中運用網格系統？