您好,歡迎來到一站式眾包服務(wù)平臺-威客牛網(wǎng)
當(dāng)前位置:威客牛首頁 > 知識百科 > IT軟件 > App開發(fā) > app界面設(shè)計風(fēng)格有哪些?

app界面設(shè)計風(fēng)格有哪些?

2022-12-04作者:網(wǎng)友投稿
學(xué)習(xí)UI設(shè)計的時候,經(jīng)常要接觸到頁面的布局,布局的方式會直接影響一個APP的視覺效果,好的布局方式,往往能帶來舒服的視覺效果,更能得到用戶的接受與好評。以下是贏在威客網(wǎng)小編整理的app界面設(shè)計風(fēng)格有哪些?

由于手機屏幕尺寸的限制,無法直接把所有內(nèi)容在一屏內(nèi)顯示,可顯示內(nèi)容要比PC屏幕少得多。在APP界面設(shè)計中,我們需要對信息進行有效組織、提煉,通過合理布局把信息展示給用戶。

合理的布局設(shè)計可以使信息變得井然有序,用戶可以很容易地找到自己想要的信息,產(chǎn)品的交互效率和信息的傳遞效率都得到提升,在此,我們不妨一起來看看APP界面常用的8種頁面布局:

一、列表式布局

特點:內(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、只能通過排列順序、顏色來區(qū)分各入口重要程度。

二、陳列館式布局

特點:布局比較靈活,即可以平均分布這些網(wǎng)格,也可以根據(jù)內(nèi)容的重要性做不規(guī)則分布。

優(yōu)點:1、同樣的高度下可放置更多的菜單,流動性強。2、直觀展現(xiàn)各項內(nèi)容,方便用戶瀏覽經(jīng)常更新的內(nèi)容。

缺點:1、不適合展示頂層入口框架。2、界面內(nèi)容過多時顯得雜亂,讓用戶眼花繚亂。

三、九宮格布局

特點:相比陳列館式,九宮格布局比較穩(wěn)定為一行三列式。

優(yōu)點:清晰展現(xiàn)各入口,方便用戶快速查詢。

缺點:1、菜單之間的跳轉(zhuǎn)要回到初始點。2、容易形成更深的路徑,不能顯示太多入口次級內(nèi)容。

四、選項卡式布局

特點:導(dǎo)航一直存在,具有選中狀態(tài),可快速切換另一個導(dǎo)航(更多的設(shè)計形式,可查看馬海祥博客《十個簡單而有創(chuàng)意的網(wǎng)站導(dǎo)航設(shè)計案例》的相關(guān)介紹)。

優(yōu)點:1、直接展示最重要接口內(nèi)容信息。2、分類位置固定,清楚當(dāng)前所在入口位置。3、減少界面跳轉(zhuǎn)的層級,輕松在各入口間頻繁跳轉(zhuǎn)。

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

五、旋轉(zhuǎn)木馬式布局


特點:重點展示一個對象,通過手勢滑動查看更多內(nèi)容。

優(yōu)點:單頁面內(nèi)容整體性強,聚焦度高。

缺點:1、受屏幕寬度限制,可顯示的數(shù)量較少。2、不能跳躍性地查看間隔的頁面。3、各頁面內(nèi)容結(jié)構(gòu)相似,容易忽略后面的內(nèi)容。

六、行為擴展式布局

特點:能在一屏幕內(nèi)顯示更多的細節(jié),無需頁面跳轉(zhuǎn)。

優(yōu)點:1、減少頁面跳轉(zhuǎn)的層級。2、對分類有整體性的了解,清楚當(dāng)前所在的入口位置。

缺點:分類位置不固定,當(dāng)展開的內(nèi)容較多時,跨分類跳轉(zhuǎn)不方便。

七、多面板布局


特點:能同時呈現(xiàn)比較多的分類及內(nèi)容。

優(yōu)點:1、分類位置固定,清楚當(dāng)前所在入口位置。2、對分類有整體性的了解,減少界面跳轉(zhuǎn)的層級。

缺點:界面比較擁擠,容易產(chǎn)生視覺疲勞。

八、圖表式布局

特點:用圖表的方式直接呈現(xiàn)信息

優(yōu)點:直觀,總體性強

缺點:詳細信息顯示有限
免費查詢商標(biāo)注冊