app界面設(shè)計(jì)布局的22條基本原則

1、<p>　　App界面設(shè)計(jì)布局的22條基本原則</p><p>　　移動(dòng)App頁(yè)面布局(Layout)是我們?cè)O(shè)計(jì)App界面的時(shí)候，最主要的設(shè)計(jì)任務(wù)。</p><p>　　一個(gè)App的好與不好，很大部分取決于移動(dòng)App頁(yè)面布局的合理性。下圖為App最原始的布局模型。</p><p>　　移動(dòng)App經(jīng)典布局界面欣賞，以首頁(yè)為例展示：</p>&l

2、t;p>　　頁(yè)面布局顧名思義就是對(duì)頁(yè)面的文字、圖形或表格進(jìn)行排布、設(shè)計(jì)。</p><p>　　優(yōu)秀的布局，需要對(duì)頁(yè)面信息進(jìn)行完整的考慮。即要考慮用戶需求、用戶行為，也要考慮信息發(fā)布者的目的、目標(biāo)。</p><p>　　手機(jī)App設(shè)計(jì)干貨：常見(jiàn)的App信息布局方式</p><p>　　3種iPad端常見(jiàn)的界面設(shè)計(jì)布局模式和交互解析</p><

3、p>　　對(duì)用戶行為的迎合和引導(dǎo)，有一些既有原則和方法，比如下面的22條基本原則：</p><p>　　1、公司/組織的圖標(biāo)（Logo）在所有頁(yè)面都處于同一位置。</p><p>　　2、用戶所需的所有數(shù)據(jù)內(nèi)容均按先后次序合理顯示。</p><p>　　3、所有的重要選項(xiàng)都要在主頁(yè)顯示。</p><p>　　4、重要條目要始終顯示。<

4、;/p><p>　　5、重要條目要顯示在頁(yè)面的頂端中間位置。</p><p>　　6、必要的信息要一直顯示。</p><p>　　7、消息、提示、通知等信息均出現(xiàn)在屏幕上目光容易找到的地方。</p><p>　　8、確保主頁(yè)看起來(lái)像主頁(yè)（使主頁(yè)有別于其它二三級(jí)頁(yè)面）。</p><p>　　9、主頁(yè)的長(zhǎng)度不宜過(guò)長(zhǎng)。</

5、p><p>　　10、App的導(dǎo)航盡量采用底部導(dǎo)航的方式。菜單數(shù)目4-5個(gè)最佳。</p><p>　　小白自學(xué)App界面設(shè)計(jì)：App導(dǎo)航交互設(shè)計(jì)全解</p><p>　　11、每個(gè)App頁(yè)面長(zhǎng)度要適當(dāng)。</p><p>　　12、在長(zhǎng)網(wǎng)頁(yè)上使用可點(diǎn)擊的“內(nèi)容列表”。</p><p>　　13、專門(mén)的導(dǎo)航頁(yè)面要短?。ū苊鉂L屏

6、，以便用戶一眼能瀏覽到所有的導(dǎo)航信息，有全局觀）。</p><p>　　14、優(yōu)先使用分頁(yè)（而非滾屏）。</p><p>　　15、滾屏不宜太多（最長(zhǎng)4個(gè)整屏）。</p><p>　　16、需要仔細(xì)閱讀理解文字時(shí)，應(yīng)使用滾屏（而非分頁(yè)）。</p><p>　　17、為框架提供標(biāo)題。</p><p>　　18、注意主頁(yè)中

7、面板塊的寬度。</p><p>　　19、將一級(jí)導(dǎo)航放置在左側(cè)面板。</p><p>　　20、避免水平滾屏。</p><p>　　21、文本區(qū)域的周?chē)欠裼凶銐虻拈g隔。</p><p>　　22、各條目是否合理分類(lèi)于各邏輯區(qū)，并運(yùn)用標(biāo)題將各區(qū)域進(jìn)行清晰劃分。</p><p>　　這些App界面布局原則可以保證頁(yè)面在布

8、局方面最基本的可用性。是非常適合App設(shè)計(jì)新手來(lái)掌握。</p><p>　　以上22條頁(yè)面布局的原則是與用戶的眼動(dòng)軌跡研究有關(guān)系的?？梢哉f(shuō)是依據(jù)來(lái)源。</p><p>　　眼動(dòng)研究是隨著用戶體驗(yàn)的興起與技術(shù)設(shè)備的進(jìn)步，而興起的一種用戶研究方法。它是眼動(dòng)技術(shù)與研究方法的二合一，通過(guò)眼動(dòng)研究觀察被試者對(duì)移動(dòng)應(yīng)用頁(yè)面的注視軌跡，輔助完成用戶體驗(yàn)設(shè)計(jì)。</p><p>