您好,歡迎來到一站式眾包服務(wù)平臺-威客牛網(wǎng)!
當(dāng)前位置:威客牛首頁 > 知識百科 > IT軟件 > UI設(shè)計 > 網(wǎng)頁界面設(shè)計布局和分析

網(wǎng)頁界面設(shè)計布局和分析

2022-12-04作者:網(wǎng)友投稿
手機由于屏幕尺寸的限制,可顯示內(nèi)容要比PC屏幕少得多。在手機界面設(shè)計中,若直接把所有內(nèi)容在一屏內(nèi)顯示,會使界面混亂不堪,丑陋且不可用。我們需要對信息進(jìn)行有效組織,通過合理布局把信息展示給用戶。合理的布局設(shè)計可以使信息變得井然有序,用戶可以很容易地找到自己想要的信息,產(chǎn)品的交互效率和信息的傳遞效率都得到提升。以下是贏在威客網(wǎng)小編整理的網(wǎng)頁界面設(shè)計布局和分析。

豎排列表


豎排列表是最常用的布局之一。手機屏幕一般是列表豎屏顯示的,文字是橫屏顯示的,因此豎排列表可以包含比較多的信息。列表長度可以沒有限制,通過上下滑動可以查看更多內(nèi)容。豎排列表在視覺上整齊美觀,用戶接受度很高,常用于并列元素的展示,包括目錄、分類、內(nèi)容等。

橫排方塊


橫排方塊是把并列元素橫向顯示的一種布局。我們常見的工具欄,TAB,Coverflow 等都采用這種布局。受屏幕寬度限制,它可顯示的數(shù)量較少,但可通過左右滑動屏幕或點擊箭頭查看更多內(nèi)容,不過這需要用戶進(jìn)行主動探索。它比較適合元素數(shù)量較少的情形,當(dāng)需要展示更多的內(nèi)容適,豎排列表則是更優(yōu)的選擇。

九宮格


九宮格是非常經(jīng)典的設(shè)計,展示形式簡單明了,用戶接受度很廣。當(dāng)元素數(shù)量固定不變?yōu)?、9、12、16時,則適合采用九宮格。雖然它有時候給人設(shè)計老套的感覺,不過它的一些變體目前比較流行,比如METRO風(fēng)格,一行兩格的設(shè)計等。

TAB

采用TAB可以減少界面跳轉(zhuǎn)的層級,可以將并列的信息通過橫向或豎向TAB來表現(xiàn)。與傳統(tǒng)的一級一級的架構(gòu)方式對比,此種架構(gòu)方式可以減少用戶的點擊次數(shù),提高效率。當(dāng)功能之間聯(lián)系密切,用戶需要頻繁在各功能之間進(jìn)行頻繁時,TAB布局是首選。

多面板

多面版的布局常見于PAD終端,手機上也會用到。多面版很像豎屏排列的TAB,可以展示更多的信息量,操作效率較高,適合分類和內(nèi)容都比較多的情形。它的不足是界面比較擁擠。

手風(fēng)琴


手風(fēng)琴布局常見于兩級結(jié)構(gòu)的內(nèi)容。用戶點擊分類可展開顯示二級內(nèi)容,在不用的時候,內(nèi)容是隱藏的。因此它可承載比較多的信息,同時保持界面簡潔。手風(fēng)琴可以減少界面跳轉(zhuǎn),與樹形結(jié)構(gòu)相比,手風(fēng)琴減少點擊次數(shù),提高操作效率。手風(fēng)琴在瀏覽器上很常見,很多瀏覽器的導(dǎo)航、歷史、下載管理等頁面均采用了手風(fēng)琴的設(shè)計。

彈出框

彈出框很常見,也屬于布局設(shè)計的一種。彈出框把內(nèi)容隱藏,僅在需要的時候才彈出,以節(jié)省屏幕空間。彈出框可在原有界面上進(jìn)行操作,不必跳出界面,體驗比較連貫。彈出框在安卓系統(tǒng)上的使用很普遍,比菜單、單選框、多選框等,在IOS系統(tǒng)上使用相對少些。

抽屜/側(cè)邊欄

抽屜也是將內(nèi)容先藏起來,在需要時再展開。彈出框一般是完成設(shè)置或完成某個任務(wù),而抽屜展示的一般是具體內(nèi)容。抽屜在交互體驗上更加自然,和原界面融合較好。抽屜欄一般從頂部或底部拉出,若是從左右兩側(cè)拉出的,我們一般稱為側(cè)邊欄。Path和一些瀏覽器的書簽,均采用了側(cè)邊欄的設(shè)計。

標(biāo)簽

在搜索界面和分類界面時,會采用標(biāo)簽的方式來展現(xiàn)。標(biāo)簽方式比較動感的,增加了應(yīng)用的趣味性,但使用場景較有限。

在產(chǎn)品設(shè)計過程中,我們需要考慮為不同的信息結(jié)構(gòu)來提供相匹配的布局。布局方案不是唯一的,巧妙采用各種布局可以增強產(chǎn)品的易用性和交互體驗。我們還可以通過基本布局的組合來完成復(fù)雜的界面設(shè)計,例如天天瀏覽器的菜單,它是一個彈出框,同時它有三個TAB,每個TAB下面是個8宮格的布局。

對于手機終端來說,內(nèi)容總是超出屏幕可顯示的范圍,界面布局的設(shè)計是非常重要的。掌握這9種常見的布局設(shè)計,可以讓我們在產(chǎn)品設(shè)計時更加地游刃有余。
免費查詢商標(biāo)注冊