上篇整理了關於網頁方向的網格系統的方法，今天接上篇給大家介紹一下關於APP和H5方向的網格系統佈局
（四）手機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%完全遵循網格的分欄進行設計，我們也要打破網格系統，這也是創建視覺興趣點的好方法！
關於網頁及APP方向的網格系統佈局已經介紹完畢了，希望文章對於你的設計之路能夠起到一定的幫助。如果喜歡小編的文章 ，可以點擊關注小編，我也會不時推送關於設計的優秀文章一起學習哦
PS：如果需要設計軟件可以私信小編領取網盤鏈接，主流的設計軟件都有噢！
閱讀更多 設計資源推送 的文章
