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

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

iPhone平臺有三種類型的應用：

效率型應用（Productivity Applications）

實用型應用（Utility Applications）

沉浸型應用（Immersive Applications）

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

1.效率型應用（Productivity Applications）

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

1）如何設計效率型應用

以任務為導向的設計理念。建立準確的任務模型，將用戶可能的任務進行拆解，并逐一設計優(yōu)化流程。要讓用戶快速開始，快速找到信息，快速離開。建立清晰的層級關(guān)系，便捷準確的檢索方式，以便于用戶迅速定位需要的信息。

要降低用戶的學習成本，盡可能的使用系統(tǒng)的控件和操作。降低噪音，保證高級的功能在用戶需要時能夠找到即可，在不需要的時候也不會造成困擾。

2）效率型應用的界面布局

A. 九宮格

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

B. 折疊列表

折疊折表是為避免頁面內(nèi)過長的滾動而做的布局設計，通常需要在同一頁面內(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)容的入口。另一種是如下圖的應用，帶有多個項目的通常用于頁面的頂部。

E. 側(cè)滑分屏

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

標簽： iPhone交互 交互設計 iPhone布局 

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