Step2. 頁面排版

1)線框圖

線框圖通過安排和選擇界面元素來整合界面設計，可以確定一個建立在基本概念結構上的架構，同時指出視覺設計應該前進的方向。

2)固定寬度&響應式（以IOS系統為例）

首先科普下固定寬度和響應式的具體概念。

固定寬度：固定網頁布局指網站內容被一個固定寬度的容器包裹，容器內的區塊都有固定的百分比或者像素寬度值，不管屏幕分辨率如何變化，訪客看到的都是固定寬度的內容。

響應式：頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整，跟隨屏幕大小的變化而變化。

整合固定寬度與響應式設計的優缺點，結合二者優勢，最后決定為每個設備進行獨立設計，可優化設計視覺效果，同時提升最終網站用戶體驗。

3)網格

網格是用豎直或水平分割線將布局進行分塊，把邊界、空白和欄包括在內，以提供組織內容的框架。網格可以輔助我們設計結構統一，畫面更為整潔。

然而，我們應該勇敢地向網格以外的地方冒險，要創造一個基于網格的作品，不意味著任何東西都要對齊。

越出網格邊界的元素會讓作品看起來更加簡潔和流暢。