無從下手?也許網(wǎng)站網(wǎng)頁該從這五種經(jīng)典網(wǎng)頁布局開始設(shè)計

時間：2023-09-16 21:18:01 | 來源：網(wǎng)站運營

時間：2023-09-16 21:18:01 來源：網(wǎng)站運營

無從下手?也許網(wǎng)站網(wǎng)頁該從這五種經(jīng)典網(wǎng)頁布局開始設(shè)計：所有的布局都是為了用戶體驗，而在現(xiàn)階段各種效果圖泛濫的時代，能準確抓住用戶的設(shè)計才是好設(shè)計。只要用戶用的方便、用的舒服的設(shè)計，都是好設(shè)計。那么問題來了，對于網(wǎng)頁設(shè)計，設(shè)計師需要考慮哪些用戶需求呢？

1內(nèi)容的不確定性

我們很多界面的文字和圖片都不是固定不動的。比如圖片的寬高尺寸比例，比如文字內(nèi)容的長短都有可能發(fā)生變化，所以我們要做的，就是注意容錯處理。

2長時間停留

很多設(shè)計都是過眼云煙，潦草快速的掃一眼。而設(shè)計師要做的，就是如何留住用戶，讓他們長時間瀏覽觀看，除了本身的內(nèi)容之外，設(shè)計上要做的就是規(guī)整、耐看。

3閱讀效率

現(xiàn)在都是掃描式閱讀，所以提高效率很關(guān)鍵，能夠在最短的時間內(nèi)獲取最多的信息，不能只注重炫酷的形式感，在形式上還要考慮閱讀效率，設(shè)計上要做的就是緊湊、易讀。

4模塊層級多樣

模塊層級不是越多越好，嵌套太深反而容易誤會，所以要保持統(tǒng)一性，設(shè)計上要做的就是多樣、有規(guī)律。

各種網(wǎng)頁布局都有各自的優(yōu)缺點，要在合適的模塊選擇合適的布局。來看一下常見的網(wǎng)頁布局吧！

1、標簽式布局

標簽式布局也稱之為網(wǎng)格式布局，適用于重要元素模塊的布局，注意的事項是同層級的標簽風格一定要統(tǒng)一，且圖標要精致、識別性高。

【優(yōu)點】展示清晰，方便快速查找。

【缺點】擴展性有限，標題名稱不易過于繁瑣，還有就是數(shù)量精簡不易過多。

2、列表式布局

列表式布局在門戶類的網(wǎng)站比較適用，比如新聞列表性的頁面，尤其適用于文字較長的內(nèi)容組合，但要注意分割，要避免出現(xiàn)視覺誤差。

【優(yōu)點】信息內(nèi)容展示直觀，節(jié)省空間，瀏覽效率高，文字數(shù)量比較，長稍微自由一些。

【缺點】樣式較單一，容易產(chǎn)生視覺疲勞，可適當穿插其他版式。

3、卡片式布局

卡片式布局就是把頁面劃分開來，一個模塊一個區(qū)域，要注意可適當圖文混排，視覺上保持一致。

【優(yōu)點】避免信息層級過多時造成的視覺誤差，有視覺一致性。

【缺點】對頁面空間消耗比較大，內(nèi)容太多時會降低效率。




4、瀑布流布局

在很多電商或者圖片素材網(wǎng)站，或者視頻類網(wǎng)站，經(jīng)常用瀑布流布局。主要是瀏覽欣賞型的，給人豐富、漂亮、華麗的感覺。

【優(yōu)點】節(jié)省交互效率，圖片或者視頻漂亮，讓人一飽眼福。

【缺點】太依賴于圖片，所以質(zhì)量過低的時候影響視覺效果，同時不適合以文字為主的產(chǎn)品。

5、多面板布局

多面板布局也稱之為Tab切換，同等大小的模塊，多面板布局可以展示更多的信息量，多用于分類或者篩選頁面。

【優(yōu)點】減少了頁面之間的跳轉(zhuǎn)，承載了更多的網(wǎng)頁內(nèi)容，大大提高了工作效率，分類明確直觀。

【缺點】如果分類過于多的話，會較為擁擠，增加當前頁面流量的負擔。

5、手風琴布局

手風琴布局，就是一級可以控制二級內(nèi)容的展示和閉合，可以自由選擇二級內(nèi)容的隱藏和顯示。

【優(yōu)點】承載信息多，可以保持界面簡潔，減少點擊次數(shù)，提高操作效率。

【缺點】如果展開模塊比較多的時候，一級標題分類不好找，容易混亂。

以上就是我們的網(wǎng)頁布局分類，所以我們要多欣賞別人做出來的東西，總結(jié)別人的巧妙精致之處，集他們的長處，在此基礎(chǔ)上合理的利用和創(chuàng)新，才能做出好的設(shè)計。希望大家以后在網(wǎng)頁中能進行合理的布局，讓用戶用起來方便易讀、喜歡耐看。