在手機(jī)這樣一個(gè)小小的有限的屏幕尺寸里，要使界面保持清晰合理、簡潔美觀，就涉及到產(chǎn)品“框架布局”的設(shè)計(jì)問題，我們需要根據(jù)不同的產(chǎn)品需求及應(yīng)用場(chǎng)景來設(shè)計(jì)合理的界面布局。

iPhone平臺(tái)的標(biāo)準(zhǔn)界面布局為頂部標(biāo)題欄、中部內(nèi)容區(qū)、底部工具欄/標(biāo)簽欄，設(shè)計(jì)師們根據(jù)不同的應(yīng)用類型以及不同的使用情境進(jìn)行著巧妙的布局，其中不乏很多勇于打破常規(guī)，精巧合理的布局設(shè)計(jì)。今天就一起來看看iPhone平臺(tái)多樣化的界面布局方式。

iPhone平臺(tái)有三種類型的應(yīng)用：

• 效率型應(yīng)用（Productivity Applications）
• 實(shí)用型應(yīng)用（Utility Applications）
• 沉浸型應(yīng)用（Immersive Applications）

每一種類型都有各自不同的特點(diǎn)和應(yīng)用場(chǎng)景。設(shè)計(jì)之前要清楚產(chǎn)品的目標(biāo)、特點(diǎn)以及用戶使用產(chǎn)品的動(dòng)機(jī)，以選擇合適的應(yīng)用類型。下面我們分別通過這三種應(yīng)用來總結(jié)一下界面的布局方式。

效率型應(yīng)用幾乎包含了從社交網(wǎng)絡(luò)到手機(jī)銀行的所有應(yīng)用。此類應(yīng)用具有組織和操作具體信息的功能，需要比較精簡的用戶體驗(yàn)，從而不會(huì)阻礙用戶的工作，要將用戶體驗(yàn)的重點(diǎn)放在任務(wù)上，用戶可以快速地找到需要的目標(biāo)，輕松地完成操作。

1)如何設(shè)計(jì)效率型應(yīng)用

以任務(wù)為導(dǎo)向的設(shè)計(jì)理念。建立準(zhǔn)確的任務(wù)模型，將用戶可能的任務(wù)進(jìn)行拆解，并逐一設(shè)計(jì)優(yōu)化流程。要讓用戶快速開始，快速找到信息，快速離開。建立清晰的層級(jí)關(guān)系，便捷準(zhǔn)確的檢索方式，以便于用戶迅速定位需要的信息。
要降低用戶的學(xué)習(xí)成本，盡可能的使用系統(tǒng)的控件和操作。降低噪音，保證高級(jí)的功能在用戶需要時(shí)能夠找到即可，在不需要的時(shí)候也不會(huì)造成困擾。

2)效率型應(yīng)用的界面布局

A. 九宮格

此類界面通常是用戶進(jìn)入產(chǎn)品后的首屏，為用戶提供分類入口，入口通常以圖表加文字的形式展現(xiàn)。以格子的形式排列，可以讓用戶快速地找到入口。此類布局適合用于豐富的內(nèi)容展現(xiàn)，且內(nèi)容適合分類聚合。

B.?折疊列表

折疊折表是為避免頁面內(nèi)過長的滾動(dòng)而做的布局設(shè)計(jì)，通常需要在同一頁面內(nèi)展示大幅內(nèi)容時(shí)可考慮使用此類布局。內(nèi)容以兩級(jí)列表的形式進(jìn)行分組，每組可以分別展開顯示它的子項(xiàng)目。

C. 圖片列表

圖片列表可以直觀地將圖片的全圖顯示出來，方便用戶快速檢索查看，大幅的圖片也為用戶帶來視覺上的愉悅體驗(yàn)。

D. 旋轉(zhuǎn)木馬

旋轉(zhuǎn)木馬的布局適用于內(nèi)容以線性或者循環(huán)的形式進(jìn)行組織，充分利用有限的屏幕空間，更好的來展示一系列圖形圖像，從而讓用戶獲得更好的聚焦體驗(yàn)，正如歡快奔騰的木馬，不停的旋轉(zhuǎn)展示，讓每個(gè)獨(dú)立個(gè)體都得到表現(xiàn)的機(jī)會(huì)。這種布局特別適用于屏幕空間有限而又需要展示大量內(nèi)容。
常用的旋轉(zhuǎn)木馬式布局有兩種，一種是如上圖的全屏的展示，一般多用于首頁，用作各個(gè)內(nèi)容的入口。另一種是如下圖的應(yīng)用，帶有多個(gè)項(xiàng)目的通常用于頁面的頂部。

E . 側(cè)滑分屏

側(cè)滑分屏的界面布局是采用三屏模式（左屏、主屏、右屏），此架構(gòu)具有極好的擴(kuò)展性。path2.0完全顛覆了iOS guild line的模式，采用這種三屏模式，極簡了主頁面，主屏僅留下feed展示和添加功能。將導(dǎo)航放入左側(cè)的屏幕，增加了未來的可擴(kuò)展性，同時(shí)也保證了主屏幕清晰的內(nèi)容。

實(shí)用型應(yīng)用完成的任務(wù)對(duì)用戶輸入要求很低。用戶打開實(shí)用型應(yīng)用程序，是為了快速查看信息摘要或是在少數(shù)對(duì)象上執(zhí)行簡單任務(wù) 。實(shí)用型應(yīng)用的特點(diǎn)是最小化安裝、簡單的流程及布局、標(biāo)準(zhǔn)化的界面元素。

1)?如何設(shè)計(jì)實(shí)用型應(yīng)用

專注做好一個(gè)功能，使其一目了然，將需要的信息展示在一個(gè)層級(jí)里，讓用戶快速地獲取某類特定的信息或者執(zhí)行某一具體的任務(wù)，因此在開啟后無需操作就能解決問題是最完美的。力爭使界面簡潔，并盡量使用簡單的、標(biāo)準(zhǔn)的視圖和控件。設(shè)置通常在主視圖背面，可以設(shè)置不同的數(shù)據(jù)源。

2)?實(shí)用型應(yīng)用的界面布局

界面以平面列表的方式顯示信息；易于瀏覽，只包含了最必要的信息，沒有深入的信息層次結(jié)構(gòu)。每一個(gè)視圖都提供同樣的數(shù)據(jù)組織結(jié)構(gòu)和細(xì)節(jié)深度。在界面下方顯示打開的視圖數(shù)量，用戶可以按順序?yàn)g覽，在一個(gè)視圖后選擇另一個(gè)視圖。

通常一個(gè)實(shí)用型應(yīng)用只解決某一個(gè)方面的問題，如上圖的指南針和溫度計(jì)，通過擬物化的設(shè)計(jì)，全屏布局突出應(yīng)用功能，一目了然。

界面簡明地突出了主要功能，沒有多余的操作和設(shè)置，以使用戶快速完成操作。

沉浸型應(yīng)用可以為用戶帶來極致的娛樂和游戲體驗(yàn)，這類應(yīng)用和標(biāo)準(zhǔn)的系統(tǒng)界面不同，用戶希望這類應(yīng)用能夠給他們帶來最大的娛樂。此類應(yīng)用的特點(diǎn)是聚焦于主要內(nèi)容及完全個(gè)性化的用戶體驗(yàn)。

1)?如何設(shè)計(jì)沉浸型應(yīng)用

富媒體的表現(xiàn)形式，聲，光，色，效，通過豐富的表現(xiàn)力讓用戶沉浸其中。不拘泥于系統(tǒng)的控件和表現(xiàn)方式，因此，界面設(shè)計(jì)的自由發(fā)揮度比較高，仿真的、可愛的設(shè)計(jì)風(fēng)格往往容易出彩。

2)?沉浸型應(yīng)用的界面布局

A. 游戲類的全屏布局

沉浸式應(yīng)用通常會(huì)占據(jù)整個(gè)屏幕，包括電池和網(wǎng)絡(luò)信息的狀態(tài)欄，讓用戶聚集于主要內(nèi)容，以增強(qiáng)用戶的參與感。這種全屏界面布局沒有多余的任務(wù)導(dǎo)向和元素干擾，讓用戶探索，并在探索中得到發(fā)現(xiàn)和獎(jiǎng)勵(lì)，不拘泥于系統(tǒng)的控件和表現(xiàn)方式。此類應(yīng)用多為以橫屏方向進(jìn)行布局。

B. 媒體類的全屏布局

媒體類最常見的是電子閱讀和視頻播放，特寫內(nèi)容會(huì)占據(jù)整個(gè)屏幕，界面只顯示內(nèi)容，讓用戶沉浸其中，當(dāng)用戶點(diǎn)擊屏幕時(shí)會(huì)在浮動(dòng)層上顯示控件。

C. 特定任務(wù)類的全屏布局

特定任務(wù)類常見的有錄音、拍照、圖片處理等，界面布局以突出特定任務(wù)為主，在界面的下方輔以任務(wù)的操作按鍵，通常使用自定義的界面以配合環(huán)境。此類應(yīng)用程序運(yùn)行時(shí)可能會(huì)涉及到大量數(shù)據(jù)的處理，但是通常不顯示這些數(shù)據(jù)，無須讓用戶查看。

在手機(jī)的交互設(shè)計(jì)中，我們要思考如何在有限的空間內(nèi)合理布局，更好的展現(xiàn)內(nèi)容，無論是文字還是圖片，都要讓內(nèi)容看上去優(yōu)雅得體。我們需要根據(jù)不同的應(yīng)用類型、產(chǎn)品定位、用戶目標(biāo)來選擇合適的界面布局，還要勇于嘗試，敢于打破常規(guī)，設(shè)計(jì)出讓用戶賞心悅目的產(chǎn)品。

源地址：http://mux.baidu.com/?p=2950