在手機這樣一個小小的有限的屏幕尺寸里，要使界面保持清晰合理、簡潔美觀，就涉及到產(chǎn)品“框架布局”的設(shè)計問題，我們需要根據(jù)不同的產(chǎn)品需求及應(yīng)用場景來設(shè)計合理的界面布局。
iPhone平臺的標準界面布局為頂部標題欄、中部內(nèi)容區(qū)、底部工具欄/標簽欄，設(shè)計師們根據(jù)不同的應(yīng)用類型以及不同的使用情境進行著巧妙的布局，其中不乏很多勇于打破常規(guī)，精巧合理的布局設(shè)計。今天就一起來看看iPhone平臺多樣化的界面布局方式。
iPhone平臺有三種類型的應(yīng)用：
- 效率型應(yīng)用（Productivity Applications）
- 實用型應(yīng)用（Utility Applications）
- 沉浸型應(yīng)用（Immersive Applications）
每一種類型都有各自不同的特點和應(yīng)用場景。設(shè)計之前要清楚產(chǎn)品的目標、特點以及用戶使用產(chǎn)品的動機，以選擇合適的應(yīng)用類型。下面我們分別通過這三種應(yīng)用來總結(jié)一下界面的布局方式。
1.效率型應(yīng)用（Productivity Applications）
效率型應(yīng)用幾乎包含了從社交網(wǎng)絡(luò)到手機銀行的所有應(yīng)用。此類應(yīng)用具有組織和操作具體信息的功能，需要比較精簡的用戶體驗，從而不會阻礙用戶的工作，要將用戶體驗的重點放在任務(wù)上，用戶可以快速地找到需要的目標，輕松地完成操作。
[Page: ]
1)如何設(shè)計效率型應(yīng)用
以任務(wù)為導(dǎo)向的設(shè)計理念。建立準確的任務(wù)模型，將用戶可能的任務(wù)進行拆解，并逐一設(shè)計優(yōu)化流程。要讓用戶快速開始，快速找到信息，快速離開。建立清晰的層級關(guān)系，便捷準確的檢索方式，以便于用戶迅速定位需要的信息。
要降低用戶的學(xué)習(xí)成本，盡可能的使用系統(tǒng)的控件和操作。降低噪音，保證高級的功能在用戶需要時能夠找到即可，在不需要的時候也不會造成困擾。
2)效率型應(yīng)用的界面布局
A. 九宮格
此類界面通常是用戶進入產(chǎn)品后的首屏，為用戶提供分類入口，入口通常以圖表加文字的形式展現(xiàn)。以格子的形式排列，可以讓用戶快速地找到入口。此類布局適合用于豐富的內(nèi)容展現(xiàn)，且內(nèi)容適合分類聚合。
B. 折疊列表
折疊折表是為避免頁面內(nèi)過長的滾動而做的布局設(shè)計，通常需要在同一頁面內(nèi)展示大幅內(nèi)容時可考慮使用此類布局。內(nèi)容以兩級列表的形式進行分組，每組可以分別展開顯示它的子項目。
C. 圖片列表
圖片列表可以直觀地將圖片的全圖顯示出來，方便用戶快速檢索查看，大幅的圖片也為用戶帶來視覺上的愉悅體驗。
D. 旋轉(zhuǎn)木馬
旋轉(zhuǎn)木馬的布局適用于內(nèi)容以線性或者循環(huán)的形式進行組織，充分利用有限的屏幕空間，更好的來展示一系列圖形圖像，從而讓用戶獲得更好的聚焦體驗，正如歡快奔騰的木馬，不停的旋轉(zhuǎn)展示，讓每個獨立個體都得到表現(xiàn)的機會。這種布局特別適用于屏幕空間有限而又需要展示大量內(nèi)容。
常用的旋轉(zhuǎn)木馬式布局有兩種，一種是如上圖的全屏的展示，一般多用于首頁，用作各個內(nèi)容的入口。另一種是如下圖的應(yīng)用，帶有多個項目的通常用于頁面的頂部。
E . 側(cè)滑分屏
側(cè)滑分屏的界面布局是采用三屏模式（左屏、主屏、右屏），此架構(gòu)具有極好的擴展性。path2.0完全顛覆了iOS guild line的模式，采用這種三屏模式，極簡了主頁面，主屏僅留下feed展示和添加功能。將導(dǎo)航放入左側(cè)的屏幕，增加了未來的可擴展性，同時也保證了主屏幕清晰的內(nèi)容。
2. 實用型應(yīng)用（Utility Applications）
實用型應(yīng)用完成的任務(wù)對用戶輸入要求很低。用戶打開實用型應(yīng)用程序，是為了快速查看信息摘要或是在少數(shù)對象上執(zhí)行簡單任務(wù) 。實用型應(yīng)用的特點是最小化安裝、簡單的流程及布局、標準化的界面元素。
1) 如何設(shè)計實用型應(yīng)用
專注做好一個功能，使其一目了然，將需要的信息展示在一個層級里，讓用戶快速地獲取某類特定的信息或者執(zhí)行某一具體的任務(wù)，因此在開啟后無需操作就能解決問題是最完美的。力爭使界面簡潔，并盡量使用簡單的、標準的視圖和控件。設(shè)置通常在主視圖背面，可以設(shè)置不同的數(shù)據(jù)源。
[Page: ]
2) 實用型應(yīng)用的界面布局
界面以平面列表的方式顯示信息；易于瀏覽，只包含了最必要的信息，沒有深入的信息層次結(jié)構(gòu)。每一個視圖都提供同樣的數(shù)據(jù)組織結(jié)構(gòu)和細節(jié)深度。在界面下方顯示打開的視圖數(shù)量，用戶可以按順序瀏覽，在一個視圖后選擇另一個視圖。
通常一個實用型應(yīng)用只解決某一個方面的問題，如上圖的指南針和溫度計，通過擬物化的設(shè)計，全屏布局突出應(yīng)用功能，一目了然。
界面簡明地突出了主要功能，沒有多余的操作和設(shè)置，以使用戶快速完成操作。
3. 沉浸型應(yīng)用（Immersive Applications）
沉浸型應(yīng)用可以為用戶帶來極致的娛樂和游戲體驗，這類應(yīng)用和標準的系統(tǒng)界面不同，用戶希望這類應(yīng)用能夠給他們帶來最大的娛樂。此類應(yīng)用的特點是聚焦于主要內(nèi)容及完全個性化的用戶體驗。
1) 如何設(shè)計沉浸型應(yīng)用
富媒體的表現(xiàn)形式，聲，光，色，效，通過豐富的表現(xiàn)力讓用戶沉浸其中。不拘泥于系統(tǒng)的控件和表現(xiàn)方式，因此，界面設(shè)計的自由發(fā)揮度比較高，仿真的、可愛的設(shè)計風格往往容易出彩。
2) 沉浸型應(yīng)用的界面布局
A. 游戲類的全屏布局
沉浸式應(yīng)用通常會占據(jù)整個屏幕，包括電池和網(wǎng)絡(luò)信息的狀態(tài)欄，讓用戶聚集于主要內(nèi)容，以增強用戶的參與感。這種全屏界面布局沒有多余的任務(wù)導(dǎo)向和元素干擾，讓用戶探索，并在探索中得到發(fā)現(xiàn)和獎勵，不拘泥于系統(tǒng)的控件和表現(xiàn)方式。此類應(yīng)用多為以橫屏方向進行布局。
B. 媒體類的全屏布局
媒體類最常見的是電子閱讀和視頻播放，特寫內(nèi)容會占據(jù)整個屏幕，界面只顯示內(nèi)容，讓用戶沉浸其中，當用戶點擊屏幕時會在浮動層上顯示控件。
C. 特定任務(wù)類的全屏布局
特定任務(wù)類常見的有錄音、拍照、圖片處理等，界面布局以突出特定任務(wù)為主，在界面的下方輔以任務(wù)的操作按鍵，通常使用自定義的界面以配合環(huán)境。此類應(yīng)用程序運行時可能會涉及到大量數(shù)據(jù)的處理，但是通常不顯示這些數(shù)據(jù)，無須讓用戶查看。
寫在后面
在手機的交互設(shè)計中，我們要思考如何在有限的空間內(nèi)合理布局，更好的展現(xiàn)內(nèi)容，無論是文字還是圖片，都要讓內(nèi)容看上去優(yōu)雅得體。我們需要根據(jù)不同的應(yīng)用類型、產(chǎn)品定位、用戶目標來選擇合適的界面布局，還要勇于嘗試，敢于打破常規(guī)，設(shè)計出讓用戶賞心悅目的產(chǎn)品。
