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

iPhone平臺(tái)的標(biāo)準(zhǔn)界面布局為頂部標(biāo)題欄、中部?jī)?nèi)容區(qū)、底部工具欄/標(biāo)簽欄，設(shè)計(jì)師們根據(jù)不同的應(yīng)用類型以及不同的使用情境進(jìn)行著巧妙的布局，其中不乏很多勇于打破常規(guī)，精巧合理的布局設(shè)計(jì)。今天就一起來(lái)看看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)用類型。下面我們分別通過(guò)這三種應(yīng)用來(lái)總結(jié)一下界面的布局方式。

1.效率型應(yīng)用（Productivity Applications）

效率型應(yīng)用幾乎包含了從社交網(wǎng)絡(luò)到手機(jī)銀行的所有應(yīng)用。此類應(yīng)用具有組織和操作具體信息的功能，需要比較精簡(jiǎn)的用戶體驗(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)化流程。要讓用戶快速開(kāi)始，快速找到信息，快速離開(kāi)。建立清晰的層級(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. 折疊列表

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

C. 圖片列表

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

D. 旋轉(zhuǎn)木馬

旋轉(zhuǎn)木馬的布局適用于內(nèi)容以線性或者循環(huán)的形式進(jìn)行組織，充分利用有限的屏幕空間，更好的來(lái)展示一系列圖形圖像，從而讓用戶獲得更好的聚焦體驗(yàn)，正如歡快奔騰的木馬，不停的旋轉(zhuǎn)展示，讓每個(gè)獨(dú)立個(gè)體都得到表現(xiàn)的機(jī)會(huì)。這種布局特別適用于屏幕空間有限而又需要展示大量?jī)?nèi)容。

常用的旋轉(zhuǎn)木馬式布局有兩種，一種是如上圖的全屏的展示，一般多用于首頁(yè)，用作各個(gè)內(nèi)容的入口。另一種是如下圖的應(yīng)用，帶有多個(gè)項(xiàng)目的通常用于頁(yè)面的頂部。

E. 側(cè)滑分屏

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

標(biāo)簽： iPhone交互 交互設(shè)計(jì) iPhone布局 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。