在實(shí)際的app設(shè)計(jì)中,要考慮信息優(yōu)先級(jí)和各種布局方式的契合度芬首,采用最合適的布局設(shè)計(jì)方案赴捞,來提高移動(dòng)產(chǎn)品的易用性和交互體驗(yàn)。今天小編給大家分享8種常見移動(dòng)端的基礎(chǔ)布局方案郁稍,喜歡的你們懂得赦政。
常見的APP布局干貨:
1、 APP細(xì)節(jié)考量的四個(gè)方面:導(dǎo)航耀怜、字體恢着、布局和配色
2、四種常見的APP分類界面布局設(shè)計(jì)案例學(xué)習(xí)
3财破、APP設(shè)計(jì)進(jìn)階教程:善用圖標(biāo)風(fēng)格設(shè)計(jì)宮格布局
1掰派、 list 列表布局
優(yōu)點(diǎn)
list列表縱向長(zhǎng)度沒有限制,上下滑動(dòng)可以查看無限內(nèi)容;
list列表在視覺上整齊美觀左痢,用戶接受度很高;
list列表可以展示內(nèi)容長(zhǎng)和次級(jí)文字的標(biāo)題靡羡。
缺點(diǎn)
頁(yè)面跳轉(zhuǎn)后總是從頭開始;
一頁(yè)展示內(nèi)容過多,用戶疲勞度增加;
頁(yè)面重點(diǎn)內(nèi)容不突出抖锥。
場(chǎng)景
常用于并列元素的展示亿眠,包括目錄、分類磅废、內(nèi)容等纳像。
2、網(wǎng)格布局拯勉,在移動(dòng)app上主要是講宮格布局
優(yōu)點(diǎn)
各入口展示清晰竟趾,方便快速查找。
缺點(diǎn)
擴(kuò)展性不如list列表;
標(biāo)題不易過長(zhǎng)宫峦。
場(chǎng)景
適合展示較多入口岔帽,且各模塊相對(duì)獨(dú)立。
3导绷、儀表布局,也是一種數(shù)據(jù)展示結(jié)構(gòu)布局
優(yōu)點(diǎn)
展示更加直觀犀勒。
缺點(diǎn)
信息展示量少,過于單一。
場(chǎng)景
適合表現(xiàn)趨勢(shì)走向的展示贾费。
4钦购、卡片布局
優(yōu)點(diǎn)
每個(gè)卡片信息承載量大,轉(zhuǎn)化率高;
每張卡片的操作互相獨(dú)立褂萧,互不干擾押桃。
缺點(diǎn)
每個(gè)卡片頁(yè)面空間的消耗大,一屏可展示信息少导犹,用戶操作負(fù)荷高唱凯。
場(chǎng)景
適合以圖片為主單一內(nèi)容瀏覽型的展示。
5谎痢、 gallery布局
優(yōu)點(diǎn)
單頁(yè)面內(nèi)容整體性強(qiáng)磕昼,聚焦度高;
線性的瀏覽方式有順暢感、方向感舶得。
缺點(diǎn)
可顯示的數(shù)量有限掰烟,需要用戶探索;
不具有指向性查看頁(yè)面,必須按順序查看頁(yè)面沐批。
場(chǎng)景
適合數(shù)量少纫骑,聚焦度高,視覺沖擊力強(qiáng)的圖片展示九孩。
6. 瀑布流布局
優(yōu)點(diǎn)
瀑布流圖片展現(xiàn)具有吸引力;
瀑布流里的加載模式能獲得更多的內(nèi)容先馆,容易沉浸其中;
瀑布流錯(cuò)落有致的設(shè)計(jì)巧妙利用視覺層級(jí),同時(shí)視線任意流動(dòng)緩解視覺疲勞躺彬。
缺點(diǎn)
頁(yè)面跳轉(zhuǎn)后需要從頭開始煤墙,加載量不固定,理論上是無限延展;
用戶返回查找信息困難很大宪拥。
場(chǎng)景
適用于實(shí)時(shí)內(nèi)容頻繁更新的情況仿野。
7. 手風(fēng)琴布局
優(yōu)點(diǎn)
兩級(jí)結(jié)構(gòu)可承載較多信息,同時(shí)保持界面簡(jiǎn)潔;
減少界面跳轉(zhuǎn)她君,提高操作效率高脚作。
缺點(diǎn)
同時(shí)打開多個(gè)手風(fēng)琴菜單,分類標(biāo)題不易尋找缔刹,且容易將頁(yè)面布局打亂球涛。
場(chǎng)景
適用于兩級(jí)結(jié)構(gòu)的內(nèi)容,并且二級(jí)結(jié)構(gòu)可以隱藏校镐。
8. 多面板布局
優(yōu)點(diǎn)
減少界面跳轉(zhuǎn);
分類一目了然亿扁。
缺點(diǎn)
兩欄設(shè)計(jì)使界面比較擁擠;
分類很多時(shí),左側(cè)滑動(dòng)區(qū)域過窄鸟廓,且不利于單手操作从祝。
場(chǎng)景
適合分類多并且內(nèi)容需要同時(shí)展示襟己。
資源地址: http://blog.silucg.com/UI/sj/7335.html