移動端幾種常見的界面設(shè)計布局

在日常產(chǎn)品交互設(shè)計中,有時候總會對界面的排版和布局的選擇上很糾結(jié)豹绪,界面的排版布局直接影響了用戶體驗,選擇一個合適的排版是值得持續(xù)打磨的事情。

這里我畫了幾種移動端常見的頁面布局和他們的各自特點:
1钦椭,列表式布局
2,陳列式布局
3碑诉,九宮格式布局
4彪腔,選項卡式布局
5,輪播圖式布局
6进栽,伸展式布局
7德挣,抽屜式布局
8,彈出框式布局
9快毛,橫向拓展式布局
10格嗅、多面板式布局

1番挺,列表式布局


70172CBC-B2FA-4920-8FB0-678E407CBB21.png

特點:
內(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灾挨,陳列式布局


C7C5962C-F2E1-43A6-BADC-BAE9C48ECCC3.png

特點:
布局比較靈活邑退,設(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,九宮格式布局


315BCC16-2A1E-4640-ACC6-0EF3FA2D965F.png

特點:
相比陳列館式双吆,布局比較穩(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蜻韭,選項卡式布局


9A5DC012-FDF2-42E4-AE71-B38367061ED9.png

特點:
導(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柬讨,輪播圖式布局


6DBDE812-390D-497D-8868-13D8EAAED4FA.png

特點:
重點展示一個對象崩瓤,通過手勢滑動按順序查看更多

優(yōu)點:
1、單頁面內(nèi)容整體性強踩官,聚焦度高
2却桶、線性的瀏覽方式有順暢感、方向感
不足:
1卖鲤、受屏幕寬度限制肾扰,它可顯示的數(shù)量較少畴嘶,需要用戶進行主動探索
2蛋逾、由于各頁面內(nèi)容結(jié)構(gòu)相似,容易忽略后面的內(nèi)容
3窗悯、不能跳躍性地查看間隔的頁面区匣,只能按順序查看相鄰的頁面

場景:
適合數(shù)量少,聚焦度高,視覺沖擊力強的圖片展示

6亏钩,伸展式布局


14A0C66E-843F-434D-B848-654B8D753E10.png

特點:
能在一屏內(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震肮,抽屜式布局


391C6043-E595-46C9-877D-4EFEFF7B3A78.png

特點:
突出核心功能,隱藏其它功能留拾。

優(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,彈出框式布局


7B9FF50C-F00E-48FD-A6B7-1BD5C1875158.png

特點:
沒有跳出感荒揣,適合內(nèi)容比較少和簡單操作的呈現(xiàn)篷角。

優(yōu)點:
1、在原有界面上進行操作系任,不必跳出界面恳蹲,體驗比較連貫
2、在用戶需要的時候才顯示(重要提示除外)俩滥,不主動干擾
不足:
1嘉蕾、顯示的內(nèi)容有限

場景:
適合內(nèi)容較少的顯示

9,橫向拓展式布局


4DC6EAE6-08FD-481D-BA83-70C0E75825CC.png

特點:
節(jié)省空間霜旧,可使用箭頭错忱,圓點或顯示不全的圖片告訴用戶還有更多的內(nèi)容可查看。

優(yōu)點:
1、查看更多內(nèi)容不必跳出界面以清,體驗連貫儿普。
2、節(jié)省空間掷倔。
不足:
橫屏寬度有限眉孩,更多的內(nèi)容有數(shù)量上限制。

場景:
適合圖片或信息組塊更多的展示方式勒葱。

10勺像、多面板式布局


06B4872F-9722-4C2B-9E8D-01DFB9A97DE1.png

特點:
能同時呈現(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)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末信卡,一起剝皮案震驚了整個濱河市隔缀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌傍菇,老刑警劉巖猾瘸,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異丢习,居然都是意外死亡牵触,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門咐低,熙熙樓的掌柜王于貴愁眉苦臉地迎上來揽思,“玉大人,你說我怎么就攤上這事渊鞋〈赂” “怎么了瞧挤?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵锡宋,是天一觀的道長儡湾。 經(jīng)常有香客問我,道長执俩,這世上最難降的妖魔是什么徐钠? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮役首,結(jié)果婚禮上尝丐,老公的妹妹穿的比我還像新娘。我一直安慰自己衡奥,他們只是感情好爹袁,可當(dāng)我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著矮固,像睡著了一般失息。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上档址,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天盹兢,我揣著相機與錄音,去河邊找鬼守伸。 笑死绎秒,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的尼摹。 我是一名探鬼主播见芹,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蠢涝!你這毒婦竟也來了辆童?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤惠赫,失蹤者是張志新(化名)和其女友劉穎把鉴,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體儿咱,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡庭砍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了混埠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怠缸。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钳宪,靈堂內(nèi)的尸體忽然破棺而出揭北,到底是詐尸還是另有隱情扳炬,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布搔体,位于F島的核電站恨樟,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏疚俱。R本人自食惡果不足惜劝术,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望呆奕。 院中可真熱鬧养晋,春花似錦、人聲如沸梁钾。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽姆泻。三九已至零酪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間麦射,已是汗流浹背蛾娶。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留潜秋,地道東北人蛔琅。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像峻呛,于是被迫代替她去往敵國和親罗售。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,577評論 2 353