1.4 設計構圖與界面布局

Version:CS4 CS5 CS6 CC

1.4.1 App界面設計構圖

下面將對iOS、Android的App界面構圖（布局）進行剖析對比，從而了解不同的系統在App設計時的異同。

iOS系統的界面布局元素一般分為3個部分：狀態欄、導航欄（標題）、標簽欄/工具欄。

? 狀態欄：顯示應用運行狀態。

? 導航欄：文本居中顯示當前App的標題名稱。左側為返回按鈕，右側為當前App內容操作按鈕。

? 標簽欄/工具欄：標簽欄和工具欄共用一個位置，在iPhone界面的最下方，這是根據App的需要來選擇一個。工具欄按鈕不超過5個。

Android系統的界面布局元素一般分為4個部分：狀態欄、標題欄、標簽欄、工具欄。

? 狀態欄：位于界面的最上方。當有短信、通知、應用更新、連接狀態變更時，會在左側顯示，而右側則是電量、鬧鐘、信號、時間等常規手機信息。按住狀態欄往下拉，可以查看信息、通知、應用更新等詳細情況。

? 標題欄：文本在左方顯示當前的App名稱。

? 標簽欄：在標簽欄中放置的是App的導航菜單，標簽欄可以在App界面的上方也可以在下方，標簽的項目不宜超過5個。

? 工具欄：針對當前的App頁面，是否有相應的操作，若有的話，會放置在工具欄中。

1.4.2 智能手機界面的布局構成

下面將App界面的布局構成進行了總結，一般來說可將其分為6種方式。

（1）平鋪成條：以長條的形式橫向平鋪。

橫向界面分類給人一種簡潔的印象，讓操作更簡單，分類更明晰。雖然這種橫向平鋪的構圖從藝術角度來講有點呆板，但在App UI里卻是最常用的，也是讓用戶更易操作的常用界面分類方式。

（2）九宮格：以九宮格的方式進行網格式橫向和縱向排列。

九宮格界面分類是最為常見、最基本的構圖方法，如果把畫面當作一個有邊框的面積，把左、右、上、下四個邊都分成三等份，然后用直線把這些對應的點連起來，畫面中就構成一個“井”字，畫面分成相等的九個方格，“井”字的四個交叉點就是趣味中心。

（3）大圖滑動：以一張大圖的方式布滿全屏。

整屏滑動界面分類方式受益于系統速度和網速的提高，手機讀取速度提高了，這種大圖滑動才得以普及。大圖滑動方式很有氣勢，畫面也更加整潔，常用于軟件的多屏瀏覽。

（4）圖片平鋪：所有圖片不規則地平鋪于界面之中。

這種圖片平鋪的界面分類方式一開始來自于Facebook和Windows系統的界面，優勢是多個元素同時展示在用戶面前，面積可以平均分配也可以穿插畫中畫效果，這種平鋪界面分類的優點是比較靈活。

（5）分類標簽：以標簽的形式進行分類，導航條的下方水平鋪開，可以左右滑動。

標簽界面分類方式是以圖標的形式將類別可視化，通常體現在App軟件、功能等分類首頁上。這種標簽界面分類的優點在于視覺導向明晰，利于操控。

（6）下拉選項框：以下拉列表或下拉選項的方式呈現，主要對信息進行篩選。

下拉選項框的優點是可以將大量信息分門別類隱藏在框中，適用于列表式的選項。常見的有歌曲菜單、地址列表等，查詢方式可以采用英文字母排序等多種搜索方法。