當前位置:菜譜大全網 - 素菜食譜大全 - 移動端幾種常見的界面設計布局

移動端幾種常見的界面設計布局

這裏我畫了幾種移動端常見的頁面布局和他們的各自特點:

1,列表式布局

2,陳列式布局

3,九宮格式布局

4,選項卡式布局

5,輪播圖式布局

6,伸展式布局

7,抽屜式布局

8,彈出框式布局

9,橫向拓展式布局

10、多面板式布局

1,列表式布局

特點:

內容從上向下排列,導航之間的跳轉要回到初始點。

優點:

1、層次展示清晰

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

3、可展示內容較長的菜單或擁有次級文字內容的標題

不足:

1、導航之間的跳轉要回到初始點

2、同級內容過多時,用戶瀏覽容易產生疲勞

3、排版靈活性不是很高

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

場景:

列表菜單適合用來顯示平級菜單,且較長或擁有次級文字內容的標題

2,陳列式布局

特點:

布局比較靈活,設計師可以平均分布這些網絡,也可根據內容的重要性不規則分布,相對列表式,其優點在於同樣的高度下可放置更多的菜單,更具有流動性,曝布流就屬於其中壹種。

優點:

1、直觀展現各項內容

2、方便瀏覽經常更新的內容

不足:

1、不適合展現頂層入口框架

2、容易形成界面內容過多,顯得雜亂

3、設計效果容易呆板

場景:

適合以圖片為主的單壹內容瀏覽型的展示

3,九宮格式布局

特點:

相比陳列館式,布局比較穩定為壹行三列式布局。

優點:

1、清晰展現各入口

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

不足:

1、菜單之間的跳轉要回到初始點

2、無法向用戶介紹大概的功能,只能點擊進去才能獲知,初始狀態不如列表式明朗

3、容易形成更深的路徑

4、不能直接展現入口內容

5、不能顯示太多入口次級內容

場景:

適合入口比較多的展示,而且導航之間切換不是很頻繁的情況,也就是業務之間相對獨立,沒有太多的瓜葛。

4,選項卡式布局

特點:

導航壹直存在,具有選中態,可快速切換到另壹個導航。

優點:

1、減少界面跳轉的層級

2、分類位置固定

3、清楚當前所在的入口位置

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

4、直接展現最重要入口的內容信息

不足:

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

場景:

大部分放在底部,方便用戶操作,切換的時候,選中狀態高亮顯示,有少數放在頂部。適合分類少及其內容同時展示,導航菜單項數量為3-5個;各導航菜單項之間內容/功能有顯著差異;用戶在各個導航選項之間需要非常頻繁的切換操作

5,輪播圖式布局

特點:

重點展示壹個對象,通過手勢滑動按順序查看更多

優點:

1、單頁面內容整體性強,聚焦度高

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

不足:

1、受屏幕寬度限制,它可顯示的數量較少,需要用戶進行主動探索

2、由於各頁面內容結構相似,容易忽略後面的內容

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

場景:

適合數量少,聚焦度高,視覺沖擊力強的圖片展示

6,伸展式布局

特點:

能在壹屏內顯示更多的細節,無需頁面的跳轉

優點:

1、減少界面跳轉的層級

2、對分類有整體性的了解

3、清楚當前所在的入口位置

不足:

分類位置不固定,當展開的內容比較多時,跨分類跳轉不方便

場景:

適合分類多及其內容同時展示

內容展示的信息多

7,抽屜式布局

特點:

突出核心功能,隱藏其它功能。

優點:

1、不占用寶貴的屏幕空間,讓用戶首先能聚焦於內容

2、導航的菜單項目不受數量限制,應用的所有信息組織入口都可以加入到抽屜導航中

3、擴展性強,配置靈活,壹些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導航中

不足:

1、隱藏框架中其他入口、用戶需要壹定記憶成本

2、對入口交互的功能可見性要求高

3、容易與應用內的其他交互模式沖突,比如側滑手勢操作

場景:

適合功能較多,信息結構較復雜的產品,用戶的註意力聚焦在主信息流的瀏覽上,不用頻繁切換“子產品模塊”,且擴展性比較好

8,彈出框式布局

特點:

沒有跳出感,適合內容比較少和簡單操作的呈現。

優點:

1、在原有界面上進行操作,不必跳出界面,體驗比較連貫

2、在用戶需要的時候才顯示(重要提示除外),不主動幹擾

不足:

1、顯示的內容有限

場景:

適合內容較少的顯示

9,橫向拓展式布局

特點:

節省空間,可使用箭頭,圓點或顯示不全的圖片告訴用戶還有更多的內容可查看。

優點:

1、查看更多內容不必跳出界面,體驗連貫。

2、節省空間。

不足:

橫屏寬度有限,更多的內容有數量上限制。

場景:

適合圖片或信息組塊更多的展示方式。

10、多面板式布局

特點:

能同時呈現比較多的分類及內容。

優點:

1、減少界面跳轉的層級

2、對分類有整體性的了解

3、分類位置固定

4、清楚當前所在的入口位置

不足:

1、界面比較擁擠

場景:

適合分類多及其內容同時展示

內容展示的信息不多

以上都是基本布局,在實際的設計中,我們需要結合具體的數據結構特點選用合適的布局,把不同的布局像搭積木壹樣組合起來完成復雜的界面設計,要考慮信息結構、重要層次以及數量上的差異,提供最適合的布局,以增加產品的易用性和交互體驗。