發(fā)布日期：2017/8/4

移動(dòng)APP頁(yè)面布局(Layout)是我們?cè)O(shè)計(jì)app界面的時(shí)候，主要的設(shè)計(jì)義務(wù)。

一個(gè)app的好與不好，很大部分取決于移動(dòng)APP頁(yè)面布局的合理性。下圖為APP原始的布局模型。

移動(dòng)APP經(jīng)典布局界面瀏覽網(wǎng)絡(luò)營(yíng)銷(xiāo)，以首頁(yè)為例展示：

頁(yè)面布局顧名思義就是對(duì)頁(yè)面的文字、圖形或表格進(jìn)行排布、設(shè)計(jì)。

優(yōu)異的布局，需要對(duì)頁(yè)面信息進(jìn)行完整的考慮。即要考慮用戶(hù)需求、用戶(hù)行為西安做網(wǎng)站，也要考慮信息發(fā)布者的目的、目標(biāo)。

手機(jī)app設(shè)計(jì)干貨：常見(jiàn)的APP信息布局體例

3種iPad端常見(jiàn)的界面設(shè)計(jì)布局模式和交互解析

對(duì)用戶(hù)行為的迎合和指導(dǎo)，有一些既有原則和方法，比如下面的22條基本原則：

1、公司/組織的圖標(biāo)（Logo）在所有頁(yè)面都處于統(tǒng)一位置。

2、用戶(hù)所需的所稀有據(jù)內(nèi)容均按先后次序合理顯示。

3、所有的主要選項(xiàng)都要在主頁(yè)顯示。

4、主要條目要始終顯示。

5、主要條目要顯示在頁(yè)面的頂端中心位置。

6、需要的信息要一向顯示。

7、新聞、提醒、通知等信息均出現(xiàn)在屏幕上目光容易找到的地方。

8、確保主頁(yè)看起來(lái)像主頁(yè)（使主頁(yè)有別于其它二三級(jí)頁(yè)面）。

9、主頁(yè)的長(zhǎng)度不宜過(guò)長(zhǎng)。

10、APP的導(dǎo)航盡量采用底部導(dǎo)航的體例。菜單數(shù)目4-5個(gè)好。

小白自學(xué)APP界面設(shè)計(jì)：APP導(dǎo)航交互設(shè)計(jì)全解

11、每個(gè)APP頁(yè)面長(zhǎng)度要適當(dāng)。

12、在長(zhǎng)網(wǎng)頁(yè)上使用可點(diǎn)擊的“內(nèi)容列表”。

13、專(zhuān)門(mén)的導(dǎo)航頁(yè)面要短�。ū苊鉂L屏，以便用戶(hù)一眼能瀏覽到所有的導(dǎo)航信息，有全局觀）。

14、優(yōu)先使用分頁(yè)（而非滾屏）。

15、滾屏不宜太多（長(zhǎng)4個(gè)整屏）。

16、需要細(xì)心閱讀理解文字時(shí)，應(yīng)使用滾屏（而非分頁(yè)）。

17、為框架提供題目。

18、注重主頁(yè)中面板塊的寬度。

19、將一級(jí)導(dǎo)航放置在左側(cè)面板。

20、避免水平滾屏。

21、文本區(qū)域的周?chē)�是否有足夠的間隔。

22、各條目是否合理分類(lèi)于各邏輯區(qū)，并運(yùn)用題目將各區(qū)域進(jìn)行清晰劃分。

這些APP界面布局原則可以保證頁(yè)面在布局方面基本的可用性。是特別很是適合app設(shè)計(jì)新手來(lái)掌握。

【APP布局案例的瀏覽與解讀】

以上22條頁(yè)面布局的原則是與用戶(hù)的眼動(dòng)軌跡研究有關(guān)系的�？梢哉f(shuō)是依據(jù)來(lái)源。

眼動(dòng)研究是隨著用戶(hù)體驗(yàn)的興起與技術(shù)設(shè)備的提高，而興起的一種用戶(hù)研究方法。它是眼動(dòng)技術(shù)與研究方法的二合一，通過(guò)眼動(dòng)研究觀察被試者對(duì)移動(dòng)應(yīng)用頁(yè)面的諦視軌跡，輔助完成用戶(hù)體驗(yàn)設(shè)計(jì)。

通過(guò)眼動(dòng)研究，不但可以完整地還原被試者在各個(gè)頁(yè)面的諦視軌跡，還可以通過(guò)劃分愛(ài)好區(qū)分析被試者在各區(qū)域內(nèi)容的關(guān)注度。

眼動(dòng)研究提供的信息不只是人們是怎樣“看”東西的這么簡(jiǎn)單，眼動(dòng)反映了人腦的信息處理過(guò)程，眼動(dòng)模式的特點(diǎn)與腦的信息處理都有密切的關(guān)系。

不銹鋼閥門(mén)