手機(jī)已成為了我們生活中不可或缺的一部分，每個人的手機(jī)可能都安裝了幾十個甚至上百個APP。使用過那么多的APP，今天我們就來給這些APP分類，看看它們的界面設(shè)計屬于哪些類型。

移動端常見的頁面布局：

1、列表式布局

2、陳列式布局

3、九宮格式布局

4、選項卡式布局

5、輪播圖式布局

1、列表式布局

大家熟悉的今日頭條、百度百家等新聞資訊類APP，多使用列表式布局。

特點：內(nèi)容從上向下排列，導(dǎo)航之間的跳轉(zhuǎn)要回到初始點。

優(yōu)點：

1、層次展示清晰

2、視覺流線從上向下，瀏覽體驗快捷

3、可展示內(nèi)容較長的菜單或擁有次級文字內(nèi)容的標(biāo)題

不足：

1、導(dǎo)航之間的跳轉(zhuǎn)要回到初始點

2、同級內(nèi)容過多時，用戶瀏覽容易產(chǎn)生疲勞

3、排版靈活性不是很高

4、只能通過排列順序、顏色來區(qū)分各入口重要程度

2、陳列式布局

陳列式布局比較靈活，像小紅書使用的就是陳列式布局。特點：布局比較靈活，設(shè)計師可以平均分布這些網(wǎng)絡(luò)，也可根據(jù)內(nèi)容的重要性不規(guī)則分布，相對列表式，其優(yōu)點在于同樣的高度下可放置更多的菜單，更具有流動性，曝布流就屬于其中一種。

優(yōu)點：

1、直觀展現(xiàn)各項內(nèi)容

2、方便瀏覽經(jīng)常更新的內(nèi)容

不足：

1、不適合展現(xiàn)頂層入口框架

2、容易形成界面內(nèi)容過多，顯得雜亂

3、設(shè)計效果容易呆板

3、九宮格式布局

九宮格這種類型的構(gòu)圖更為規(guī)范和常用，用戶在使用過程中非常的方便，應(yīng)用功能會顯得格外的明確和突出。很明顯的例子就是微信讀書。

特點：相比陳列館式，布局比較穩(wěn)定為一行三列式布局。

優(yōu)點：

1、清晰展現(xiàn)各入口

2、容易記住各入口位置，方便快速查找

不足：

1、菜單之間的跳轉(zhuǎn)要回到初始點

2、無法向用戶介紹大概的功能，只能點擊進(jìn)去才能獲知，初始狀態(tài)不如列表式明朗

3、不能直接展現(xiàn)入口內(nèi)容

4、不能顯示太多入口次級內(nèi)容

4，選項卡式布局

這種布局選項卡大部分放在底部，方便用戶操作，切換的時候，選中狀態(tài)高亮顯示，有少數(shù)放在頂部，例如愛奇藝。

特點：導(dǎo)航一直存在，具有選中態(tài)，可快速切換到另一個導(dǎo)航。

優(yōu)點：

1、減少界面跳轉(zhuǎn)的層級

2、分類位置固定

3、清楚當(dāng)前所在的入口位置

3、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向

4、直接展現(xiàn)最重要入口的內(nèi)容信息

不足：

功能入口過多時，該模式顯得笨重不實用

5，輪播圖式布局

這種布局界面展示一張圖片，沖擊力較強(qiáng)，適合數(shù)量少，聚焦度高，視覺沖擊力強(qiáng)的圖片展示。使用這種布局的APP有貓眼電影。

特點：重點展示一個對象，通過手勢滑動按順序查看更多

優(yōu)點：

1、單頁面內(nèi)容整體性強(qiáng)，聚焦度高

2、線性的瀏覽方式有順暢感、方向感

不足：

1、受屏幕寬度限制，它可顯示的數(shù)量較少，需要用戶進(jìn)行主動探索

2、由于各頁面內(nèi)容結(jié)構(gòu)相似，容易忽略后面的內(nèi)容

3、不能跳躍性地查看間隔的頁面，只能按順序查看相鄰的頁面

結(jié)語

以上都是基本布局，了解了這些之后，在日常生活中使用APP的同時，大家可以留意一下這些APP的界面布局，也許會有不同的發(fā)現(xiàn)。

參考文章：

移動端幾種常見的界面設(shè)計布局 作者：文子產(chǎn)品筆記 簡書 ，2019年10月31 日

https://www.jianshu.com/p/ba4c9a4c97f6

推薦閱讀：sp2000

（正文已結(jié)束）