APP界面設計之頁面佈局的22條基本原則

移動 APP 頁面佈局(Layout)是咱們設計 app 界面的時候，最主要的設計任務。一個 app 的好與很差，很大部分取決於移動 APP 頁面佈局的合理性。

　　下圖爲 APP 最原始的佈局模型。

　　頁面佈局顧名思義就是對頁面的文字、圖形或表格進行排布、設計。優秀的佈局，須要對頁面信息進行完整的考慮。即要考慮用戶需求、用戶行爲，也要考慮信息發佈者的目的、目標。

　　對用戶行爲的迎合和引導，有一些既有原則和方法，好比下面的 22 條基本原則：

　　一、公司/組織的圖標（Logo）在全部頁面都處於同一位置。

　　二、用戶所需的全部數據內容均按前後次序合理顯示。

　　三、全部的重要選項都要在主頁顯示。

　　四、重要條目要始終顯示。

　　五、重要條目要顯示在頁面的頂端中間位置。

　　六、必要的信息要一直顯示。

　　七、消息、提示、通知等信息均出如今屏幕上目光容易找到的地方。

　　八、確保主頁看起來像主頁（使主頁有別於其它二三級頁面）。

　　九、主頁的長度不宜過長。

　　十、APP 的導航儘可能採用底部導航的方式。菜單數目4-5 個最佳。

　　十一、每一個 APP 頁面長度要適當。

　　十二、在長網頁上使用可點擊的「內容列表」。

　　1三、專門的導航頁面要短小（避免滾屏，以便用戶一眼能瀏覽到全部的導航信息，有全局觀）。

　　1四、優先使用分頁（而非滾屏）。

　　1五、滾屏不宜太多（最長 4 個整屏）。

　　1六、須要仔細閱讀理解文字時，應使用滾屏（而非分頁）。

　　1七、爲框架提供標題。

　　1八、注意主頁中面板塊的寬度。

　　1九、將一級導航放置在左側面板。

　　20、避免水平滾屏。

　　2一、文本區域的周圍是否有足夠的間隔。

　　2二、各條目是否合理分類於各邏輯區，並運用標題將各區域進行清晰劃分。

　　這些 APP 界面佈局原則能夠保證頁面在佈局方面最基本的可用性。是很是適合 app 設計新手來掌握。

　　APP 佈局案例的欣賞與解讀

　　以上 22 條頁面佈局的原則是與用戶的眼動軌跡研究有關係的。能夠說是依據來源。

　　眼動研究是隨着用戶體驗的興起與技術設備的進步，而興起的一種用戶研究方法。它是眼動技術與研究方法的二合一，經過眼動研究觀察被試者對移動應用頁面的注視軌跡，輔助完成用戶體驗設計。

　　經過眼動研究，不但能夠完整地還原被試者在各個頁面的注視軌跡，還能夠經過劃分興趣區分析被試者在各區域內容的關注度。

　　眼動研究提供的信息不僅是人們是怎樣「看」東西的這麼簡單，眼動反映了人腦的信息處理過程，眼動模式的特色與腦的信息處理都有密切的關係。