在日常產(chǎn)品交互設(shè)計中,有時候總會對界面的排版和布局的選擇上很糾結(jié)豹绪,界面的排版布局直接影響了用戶體驗,選擇一個合適的排版是值得持續(xù)打磨的事情。
這里我畫了幾種移動端常見的頁面布局和他們的各自特點:
1钦椭,列表式布局
2,陳列式布局
3碑诉,九宮格式布局
4彪腔,選項卡式布局
5,輪播圖式布局
6进栽,伸展式布局
7德挣,抽屜式布局
8,彈出框式布局
9快毛,橫向拓展式布局
10格嗅、多面板式布局
1番挺,列表式布局
特點:
內(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ū)分各入口重要程度
場景:
列表菜單適合用來顯示平級菜單,且較長或擁有次級文字內(nèi)容的標(biāo)題
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è)計效果容易呆板
場景:
適合以圖片為主的單一內(nèi)容瀏覽型的展示
3,九宮格式布局
特點:
相比陳列館式双吆,布局比較穩(wěn)定為一行三列式布局眨唬。
優(yōu)點:
1、清晰展現(xiàn)各入口
2好乐、容易記住各入口位置匾竿,方便快速查找
不足:
1、菜單之間的跳轉(zhuǎn)要回到初始點
2蔚万、無法向用戶介紹大概的功能岭妖,只能點擊進去才能獲知,初始狀態(tài)不如列表式明朗
3、容易形成更深的路徑
4昵慌、不能直接展現(xiàn)入口內(nèi)容
5苔巨、不能顯示太多入口次級內(nèi)容
場景:
適合入口比較多的展示,而且導(dǎo)航之間切換不是很頻繁的情況废离,也就是業(yè)務(wù)之間相對獨立侄泽,沒有太多的瓜葛。
4蜻韭,選項卡式布局
特點:
導(dǎo)航一直存在悼尾,具有選中態(tài),可快速切換到另一個導(dǎo)航肖方。
優(yōu)點:
1闺魏、減少界面跳轉(zhuǎn)的層級
2、分類位置固定
3俯画、清楚當(dāng)前所在的入口位置
3析桥、輕松在各入口間頻繁跳轉(zhuǎn)且不會迷失方向
4、直接展現(xiàn)最重要入口的內(nèi)容信息
不足:
功能入口過多時艰垂,該模式顯得笨重不實用
場景:
大部分放在底部泡仗,方便用戶操作,切換的時候猜憎,選中狀態(tài)高亮顯示娩怎,有少數(shù)放在頂部。適合分類少及其內(nèi)容同時展示胰柑,導(dǎo)航菜單項數(shù)量為3-5個截亦;各導(dǎo)航菜單項之間內(nèi)容/功能有顯著差異;用戶在各個導(dǎo)航選項之間需要非常頻繁的切換操作
5柬讨,輪播圖式布局
特點:
重點展示一個對象崩瓤,通過手勢滑動按順序查看更多
優(yōu)點:
1、單頁面內(nèi)容整體性強踩官,聚焦度高
2却桶、線性的瀏覽方式有順暢感、方向感
不足:
1卖鲤、受屏幕寬度限制肾扰,它可顯示的數(shù)量較少畴嘶,需要用戶進行主動探索
2蛋逾、由于各頁面內(nèi)容結(jié)構(gòu)相似,容易忽略后面的內(nèi)容
3窗悯、不能跳躍性地查看間隔的頁面区匣,只能按順序查看相鄰的頁面
場景:
適合數(shù)量少,聚焦度高,視覺沖擊力強的圖片展示
6亏钩,伸展式布局
特點:
能在一屏內(nèi)顯示更多的細節(jié)莲绰,無需頁面的跳轉(zhuǎn)
優(yōu)點:
1、減少界面跳轉(zhuǎn)的層級
2姑丑、對分類有整體性的了解
3蛤签、清楚當(dāng)前所在的入口位置
不足:
分類位置不固定,當(dāng)展開的內(nèi)容比較多時栅哀,跨分類跳轉(zhuǎn)不方便
場景:
適合分類多及其內(nèi)容同時展示
內(nèi)容展示的信息多
7震肮,抽屜式布局
特點:
突出核心功能,隱藏其它功能留拾。
優(yōu)點:
1戳晌、不占用寶貴的屏幕空間,讓用戶首先能聚焦于內(nèi)容
2痴柔、導(dǎo)航的菜單項目不受數(shù)量限制沦偎,應(yīng)用的所有信息組織入口都可以加入到抽屜導(dǎo)航中
3、擴展性強咳蔚,配置靈活豪嚎,一些常用的快捷操作功能和低層級界面入口也能直接放置進抽屜導(dǎo)航中
不足:
1、隱藏框架中其他入口谈火、用戶需要一定記憶成本
2疙渣、對入口交互的功能可見性要求高
3、容易與應(yīng)用內(nèi)的其他交互模式?jīng)_突堆巧,比如側(cè)滑手勢操作
場景:
適合功能較多妄荔,信息結(jié)構(gòu)較復(fù)雜的產(chǎn)品,用戶的注意力聚焦在主信息流的瀏覽上谍肤,不用頻繁切換“子產(chǎn)品模塊”啦租,且擴展性比較好
8,彈出框式布局
特點:
沒有跳出感荒揣,適合內(nèi)容比較少和簡單操作的呈現(xiàn)篷角。
優(yōu)點:
1、在原有界面上進行操作系任,不必跳出界面恳蹲,體驗比較連貫
2、在用戶需要的時候才顯示(重要提示除外)俩滥,不主動干擾
不足:
1嘉蕾、顯示的內(nèi)容有限
場景:
適合內(nèi)容較少的顯示
9,橫向拓展式布局
特點:
節(jié)省空間霜旧,可使用箭頭错忱,圓點或顯示不全的圖片告訴用戶還有更多的內(nèi)容可查看。
優(yōu)點:
1、查看更多內(nèi)容不必跳出界面以清,體驗連貫儿普。
2、節(jié)省空間掷倔。
不足:
橫屏寬度有限眉孩,更多的內(nèi)容有數(shù)量上限制。
場景:
適合圖片或信息組塊更多的展示方式勒葱。
10勺像、多面板式布局
特點:
能同時呈現(xiàn)比較多的分類及內(nèi)容。
優(yōu)點:
1错森、減少界面跳轉(zhuǎn)的層級
2吟宦、對分類有整體性的了解
3、分類位置固定
4涩维、清楚當(dāng)前所在的入口位置
不足:
1殃姓、界面比較擁擠
場景:
適合分類多及其內(nèi)容同時展示
內(nèi)容展示的信息不多
以上都是基本布局,在實際的設(shè)計中瓦阐,我們需要結(jié)合具體的數(shù)據(jù)結(jié)構(gòu)特點選用合適的布局蜗侈,把不同的布局像搭積木一樣組合起來完成復(fù)雜的界面設(shè)計,要考慮信息結(jié)構(gòu)睡蟋、重要層次以及數(shù)量上的差異踏幻,提供最適合的布局,以增加產(chǎn)品的易用性和交互體驗戳杀。
喜歡的朋友可以關(guān)注我的公眾號“產(chǎn)品之火”该面,我將會持續(xù)不斷的更新內(nèi)容。