UI設(shè)計模式是針對常見的用戶界面問題提出的解決方案。當(dāng)解決方案得到驗證時，它經(jīng)常被使用，最終演變成可重復(fù)使用的設(shè)計模式。

設(shè)計師可以根據(jù)不同的網(wǎng)站功能類型選擇使用相應(yīng)的網(wǎng)站UI設(shè)計模式，從而創(chuàng)建一致高效的網(wǎng)站UI界面。

本文推薦8種常見的網(wǎng)站UI設(shè)計模式。

延遲注冊

網(wǎng)站UI設(shè)計模式在電子商務(wù)平臺中尤為常見。顧名思義，這種網(wǎng)站UI設(shè)計模式意味著用戶可以延遲注冊。直到實際結(jié)賬，用戶才會注冊。網(wǎng)站UI設(shè)計模式可以滿足單純想體驗網(wǎng)站而不正式注冊的用戶的需求。

這種網(wǎng)站UI設(shè)計模式使新用戶瀏覽網(wǎng)站更加方便快捷，并將自己喜歡的物品添加到購物車中，而不會因為沒有創(chuàng)建賬戶而阻礙新用戶體驗網(wǎng)站。當(dāng)用戶最終結(jié)賬時，說明用戶對網(wǎng)站有需求，需要創(chuàng)建賬戶。這種網(wǎng)站UI設(shè)計模式可以在更大程度上滿足新用戶的需求，具有松弛感，給用戶更好的體驗感。

面包屑導(dǎo)航

面包屑導(dǎo)航（BreadcrumbNavigation）又稱路徑導(dǎo)航，是設(shè)計中經(jīng)典的網(wǎng)站UI設(shè)計模式，適用于大多數(shù)網(wǎng)站。目前，面包屑導(dǎo)航在許多網(wǎng)站中很流行。網(wǎng)站UI設(shè)計模式通常出現(xiàn)在包含大量內(nèi)容和信息的網(wǎng)站中，如電子商務(wù)平臺、社會風(fēng)格的雜志和新聞期刊。由于廣泛使用和長期使用，大多數(shù)用戶已經(jīng)習(xí)慣了這種導(dǎo)航模式。

這種網(wǎng)站UI設(shè)計模式可以引導(dǎo)用戶快速了解網(wǎng)站架構(gòu)，幫助用戶始終了解他們在產(chǎn)品結(jié)構(gòu)中的位置，減少用戶跳轉(zhuǎn)到高級頁面的操作次數(shù)，為用戶提供快速的方式。但并不是所有的網(wǎng)站都適用于這種模式。例如，面包屑導(dǎo)航并不是小型網(wǎng)站、頁面較少或結(jié)構(gòu)交叉網(wǎng)站的合適選擇。

案例：js.design/community?category=detail&type=resource&id=64c324932cf109c42e89edf1&source=zhihu&plan=yszl9111

卡片式布局

卡布局是設(shè)計師經(jīng)常用來顯示內(nèi)容的另一種網(wǎng)站UI設(shè)計模式。這種模式非常靈活，可以有效解決不同形式和長度內(nèi)容的顯示問題。換句話說，卡布局可以充分利用網(wǎng)頁和移動設(shè)計中的可用空間。

當(dāng)用戶隨意瀏覽網(wǎng)站而不是搜索特定的東西時，卡網(wǎng)格系統(tǒng)顯示效果最好。其特點(diǎn)是每張卡的內(nèi)容和形式可以相互獨(dú)立，不受干擾，不同的卡可以在同一頁面上攜帶不同的內(nèi)容。卡是獨(dú)立的，其信息量比列表更豐富，可以直觀地將可消化的信息組合在一起，使其有序。這種網(wǎng)站UI設(shè)計模式直觀迷人，讓大多數(shù)用戶滿意，為用戶提供清晰的視覺層次。

案例：js.design/community?category=detail&type=resource&id=62bfecf44835c76a42aea59d&source=zhihu&plan=yszl9111

標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航，也被稱為選項卡導(dǎo)航，是一種高頻導(dǎo)航形式，大多數(shù)用戶已經(jīng)習(xí)慣了使用這種設(shè)計模式。這種網(wǎng)站UI設(shè)計模式非常適合復(fù)雜的內(nèi)容，需要層次分類，以幫助用戶快速找到目標(biāo)信息。

標(biāo)簽導(dǎo)航不僅可以幫助頁面保持視覺平衡，還可以幫助用戶快速定位。標(biāo)簽導(dǎo)航有效地解決了以平面結(jié)構(gòu)組織內(nèi)容的問題，始終向用戶顯示用戶位置。該模式的功能入口直觀清晰，可見性強(qiáng)，只需單次點(diǎn)擊即可在頁面之間靈活切換，結(jié)構(gòu)清晰，易于理解，可以幫助用戶快速定位目標(biāo)。標(biāo)簽導(dǎo)航和層次導(dǎo)航也適合使用，但在少量類別的選項卡系統(tǒng)中效果不佳。

分頁和連續(xù)滾動

分頁是將內(nèi)容分為不同頁面的網(wǎng)站UI設(shè)計模式，而連續(xù)滾動是允許用戶通過滾動瀏覽大量內(nèi)容的設(shè)計模式。這兩種網(wǎng)站UI設(shè)計模式都是為用戶提供內(nèi)容而產(chǎn)生的。

一方面，我們需要將內(nèi)容分解成單獨(dú)的部分，這樣用戶就可以更容易地消化和理解內(nèi)容。此時，分頁模式應(yīng)運(yùn)而生，可以完全控制來回移動，包括上一頁和下一頁，直接跳轉(zhuǎn)到內(nèi)容的開頭或結(jié)尾。分頁模式可以讓用戶有更多的界面控制感，更準(zhǔn)確地判斷目標(biāo)內(nèi)容是否存在，幫助用戶估計尋找目標(biāo)內(nèi)容所需的時間，給用戶一種身臨其境的體驗。

連續(xù)滾動模式使用場景較少，更適合快速瀏覽和發(fā)現(xiàn)內(nèi)容的情況。

頁底導(dǎo)航

頁底導(dǎo)航又稱胖頁腳，也是一種常見的設(shè)計模式。主要用于滿足用戶繞過主導(dǎo)航系統(tǒng)直接進(jìn)入產(chǎn)品特定頁面的需求。

這種模式通常用于比其他頁面更頻繁訪問的特定頁面的網(wǎng)站，比如常見的問題頁面。功能類似于添加快捷方式，不用擔(dān)心網(wǎng)站的一般層次結(jié)構(gòu)。

案例：js.design/community?category=detail&type=resource&id=62bae792217cf42c32e89137&source=zhihu&plan=yszl9111

浮窗

浮動窗口，也稱為浮動窗口，在網(wǎng)站UI設(shè)計中也很常見。例如，在線商店和博客，浮動窗口網(wǎng)站UI設(shè)計模式為他們提供了一種吸引用戶注意力的好方法。設(shè)計師使用這種模式來吸引用戶對銷售、重要新聞和其他需要注意的信息的關(guān)注。

浮窗是一種網(wǎng)站UI設(shè)計模式，故意打斷用戶瀏覽，引起用戶注意。此外，浮窗模式效果極佳，效果極快，給用戶造成的障礙很小。因此，受到設(shè)計師的廣泛喜愛是合理的。

輪播

使用輪播網(wǎng)站UI設(shè)計模式時，用戶可以通過左右滑動和拖動瀏覽內(nèi)容。它的強(qiáng)大之處在于允許用戶看到更多的選項，并將所有的注意力集中在其中一個選項上。輪播可以直觀地將內(nèi)容呈現(xiàn)給用戶，使用戶體驗非常流暢。這也意味著輪播可以成為一種接近用戶的方式，相當(dāng)有說服力。

同時，由于占用空間小，顯示內(nèi)容多，網(wǎng)站UI設(shè)計模式使用方便。這是一種高度可視化的方法，但如果需要顯示的內(nèi)容不可視化，如書面文檔，則不適合使用輪播模式。