我們?cè)絹?lái)越常見(jiàn)到的一種網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)是“可定制”的網(wǎng)站。最常見(jiàn)的形式是一個(gè)按鈕，用于切換深色和淺色主題，但現(xiàn)在的選項(xiàng)變得越來(lái)越復(fù)雜了。  

在這一組20個(gè)網(wǎng)站中，我們有深色和淺色主題、圖片和純文本模式、顏色切換、整體主題更改、自定義文本選項(xiàng)，甚至還有圖片編輯功能。這類交互不同于事件觸發(fā)的動(dòng)畫(huà)和過(guò)渡效果。為了達(dá)到最佳效果，通常簡(jiǎn)潔的布局是最優(yōu)選擇，這些示例正是如此。希望你喜歡！

1 Montezuma’s  

高端巧克力品牌 Montezuma’s 更新了其網(wǎng)站，以提升用戶體驗(yàn)。網(wǎng)站的配色方案和休閑字體與產(chǎn)品包裝相呼應(yīng)，而包裝設(shè)計(jì)則反映了品牌的道德理念。

2 Sake High  

Sake High 的字體選擇為其以黑白為主的設(shè)計(jì)增添了干練與現(xiàn)代感。對(duì)比效果也讓偶爾出現(xiàn)的彩色照片更具層次感。

3 Confetti Therapy  

這是一個(gè)充滿趣味的小網(wǎng)站，背后卻有著減壓的嚴(yán)肅目標(biāo)。研究表明，微互動(dòng)和即時(shí)反饋能讓用戶感到愉悅，而這正是 **Confetti Therapy** 的核心理念：點(diǎn)擊一個(gè)按鈕，選擇一個(gè)方向，欣賞彩紙炮的綻放吧！

4 Pesquera Diez  

這家建筑事務(wù)所網(wǎng)站的動(dòng)畫(huà)設(shè)計(jì)，尤其是過(guò)渡效果，帶來(lái)了非常愉悅的用戶體驗(yàn)。清新的黃色點(diǎn)綴為簡(jiǎn)潔的布局增添了一抹活力。

5 Base Habitation  

高質(zhì)量的照片巧妙地與模型圖結(jié)合，讓用戶能夠直觀地想象產(chǎn)品的實(shí)際效果。信息被分成小塊呈現(xiàn)，以突出圖片的主導(dǎo)地位。

6 Following Wildfire  

Following Wildfire是一個(gè)如今已顯得彌足珍貴的范例，它將社交媒體、技術(shù)和優(yōu)秀設(shè)計(jì)結(jié)合，創(chuàng)造出真正實(shí)用的工具。平臺(tái)會(huì)掃描公開(kāi)照片中的潛在野火跡象，并將結(jié)果添加到交互式地圖中。

7 Sound Ethics  

Sound Ethics致力于倡導(dǎo)藝術(shù)家的權(quán)益，并推動(dòng)建立AI倫理新標(biāo)準(zhǔn)。他們的目標(biāo)不是排斥AI，而是讓AI為音樂(lè)人和藝術(shù)家服務(wù)，而非與他們對(duì)立。網(wǎng)站采用深色背景搭配熒光黃綠色，視覺(jué)效果極具沖擊力，表達(dá)了鮮明的立場(chǎng)。

8 ThermoKonnect  

網(wǎng)站的一大亮點(diǎn)是像素化圖片逐漸轉(zhuǎn)換為產(chǎn)品3D模型的效果，極具吸引力。滾動(dòng)動(dòng)畫(huà)進(jìn)一步增強(qiáng)了互動(dòng)性，讓用戶始終保持參與感。

9 La Mulata  

這家連鎖餐廳的網(wǎng)站架構(gòu)設(shè)計(jì)巧妙地集中展示了適用于所有分店的內(nèi)容，例如菜單，同時(shí)又為每家分店保留了獨(dú)特的個(gè)性化展示空間。

10 Orkenworld  

Orken是一個(gè)全新的幻想世界，將通過(guò)多種媒介呈現(xiàn)，并將在即將啟動(dòng)的 Kickstarter 上發(fā)布。這個(gè)預(yù)告網(wǎng)站提供了示例插圖和視頻片段，信息簡(jiǎn)潔卻足夠引起用戶的興趣。

11 Serious.Business  

棉花糖粉色和笑臉?lè)?hào)可能看起來(lái)不像是一個(gè)名字中帶有“serious”（嚴(yán)肅）的機(jī)構(gòu)的明顯選擇，但事實(shí)上，這種矛盾感恰到好處，反而增添了獨(dú)特的魅力。

12 Songs of a Lost World  

這是為 The Cure 新專輯打造的預(yù)告頁(yè)面，回歸了一個(gè)時(shí)代，那時(shí)用戶可以自由探索和發(fā)現(xiàn)事物，而不必依賴常見(jiàn)的“大紅按鈕”式的行動(dòng)號(hào)召（CTA）。頁(yè)面簡(jiǎn)潔卻充滿趣味，比起常規(guī)的CTA，它更加引人入勝。

13 Stripe.dev  

這是 Stripe 為開(kāi)發(fā)者提供的資源中心，包含視頻、文章和社區(qū)鏈接，同時(shí)也充滿趣味。默認(rèn)的設(shè)計(jì)是簡(jiǎn)單的黑白配色，配有熒光色高亮，但更有趣的是，它還提供了一個(gè)控制臺(tái)，讓你可以隨意玩弄所有非實(shí)際內(nèi)容的部分。甚至還可以玩貪吃蛇游戲。

14 Trieze Grammes  

品牌設(shè)計(jì)公司Treize Grammes重新設(shè)計(jì)了他們的網(wǎng)站，以適應(yīng)業(yè)務(wù)發(fā)展帶來(lái)的變化。結(jié)果是網(wǎng)站結(jié)構(gòu)清晰，展現(xiàn)了高水平的專業(yè)性。色彩的選擇和滑動(dòng)開(kāi)關(guān)的設(shè)計(jì)元素增添了個(gè)性和親和力。

15 Netlify 5 Million Devs  

Netlify 平臺(tái)通過(guò)這個(gè)互動(dòng)游戲慶祝達(dá)成 500 萬(wàn)開(kāi)發(fā)者的里程碑。游戲中的每一個(gè)路標(biāo)都會(huì)揭示 Netlify 迄今為止的發(fā)展歷程。

16 Sonder  

這家市場(chǎng)調(diào)研公司 Sonder 的網(wǎng)站將明亮的色彩、干凈利落的字體和簡(jiǎn)潔的布局相結(jié)合，打造出一種自信且積極的視覺(jué)風(fēng)格。

17 Printer Scanner  

Printer Scanner的網(wǎng)站延續(xù)了粗獷主義風(fēng)格，雖然視覺(jué)設(shè)計(jì)簡(jiǎn)單，卻也令人愉悅。點(diǎn)擊標(biāo)志性字形會(huì)隨機(jī)切換四種主題：兩種深色版本和兩種淺色版本。

18 Harry Atkins  

這是一個(gè)結(jié)構(gòu)良好的作品集網(wǎng)站，布局簡(jiǎn)潔，流程直觀。作為前端開(kāi)發(fā)技能的額外展示，網(wǎng)站提供了多種切換選項(xiàng)，包括深色或淺色模式、圖片或純文本模式，以及彩色或灰度模式。

19 Mathieu Crepel  

或許不出所料，沖浪和滑雪運(yùn)動(dòng)員Mathieu Crepel的網(wǎng)站中，照片是主要元素。甚至菜單部分也用照片代替了常見(jiàn)的文字或圖標(biāo)。雖然這種設(shè)計(jì)不常見(jiàn)，但在這里卻效果很好。

20 PackBags  

PackBags的概念是根據(jù)客戶選擇的組件（如包身、背帶和登山扣）定制個(gè)性化背包。網(wǎng)站設(shè)計(jì)清晰易懂，且配置器非常友好，用戶可以輕松進(jìn)行自定義操作。