2024年十大網站設計趨勢

1. 捲動網站取代點擊

一頁式網站越來越長已是很普遍的做法，尤其是在行動裝置普及的時代，首頁通常不置連結，改將所有內容放在一頁式頁面，讓低頭族「滑上癮」。因為比起在一堆連結中跳轉，必須不斷重新等待新的頁面加載，訊息通通放在一頁的形式更容易瀏覽。而且不再只是首頁「變長」，其實「about」或描述產品的網站，都能採取卷到底的方式，比如蘋果iPhone的呈現，就很符合長網站的趨勢，把所有規格與功能全部放在一頁式網站內，並且增添了一些精緻的動畫元素，抓住網友捲動全程的注意力。

2. 運用敘事與互動製造驚喜

精彩的內容是決定網站優劣的關鍵因素，如果善於以說故事的方式呈現內容，更是大加分。西雅圖Space Needle網站，運用數位敘事與設計，生動的述說了Space Needle的背景故事。同時也運用2024的另一個顯著趨勢：互動，帶給網友宛如親臨實境的獨特體驗。在網站設計中交互使用互動與動畫，而且運用得當，能夠製造驚喜，讓觀者留下深刻印象，瀏覽 Impossible Bureau時，一邊滑動滾動條、一邊滑過不同元素，會有各種令你驚奇萬分的互動感

3. 背景爭奪戰：大張背景圖 vs. 大型色塊

前幾年，一定看過不少大型圖片作為背景、文字浮於其上的設計，這是網友打開網站首先映入眼帘的部分，覺得膩了、想要「非主流」一下嗎？那就逆勢而行。有些新網站就選擇抽除背景圖片，只留下巨大的色塊與文字。抽的好處除了特別突出之外，也有助於改善加載速度。在一片大型背景圖片的網站中，The New Wave優雅的設計值得參考。

4. 去除非必要的元素，簡化再簡化

有個設計理論是這麼說的，所有非必要元素全部都被清除之後，設計才大功告成。2024年可能會是設計師大舉實踐這個理論的年份。前面所提的New Wave Company與Rareview Digital Agemcy網站都屬「去除大型背景圖片」的模範。後者更將背景顏色、複雜的版式通通掃光。過度設計、過多影像、過多色彩的網站充斥，極端簡潔的設計反倒顯得特別。

5. 固定寬度置中版型

過去幾年大部分網站多把「banding」或寬度（width）設為100%，影像與區塊隨著瀏覽器視域而變化。在更之前，設計師傾向設定固定寬度，並將圖像置中在頁面。這種固定寬度的趨勢以現代化的面貌，出現復興的跡象，有些網站選擇設定「最大寬度」，讓內容在瀏覽器中置中。Michele Mazzucco的網站就是一個例子，你發現什麼玄機了嗎？縮小瀏覽器時，含有主要內容的色塊占滿螢幕，放大時卻有留白。

6. 專業高品質、獨一無二的攝影

為求方便也為減省成本，圖庫影像還是很多設計師的選擇。不過最近竄起的新網站，寧可多花一點錢請專業攝影師拍攝高品質、獨一無二而且完全按照網站目的需求定製的影像，不僅能夠切實展現網站品味，還能避免與其他網站「撞衫」。Grain and Mother的網站圖片是幾個人坐在餐桌前，彷佛開心地正在談論什麼事情，他們不是什麼臨演，而是Grain and Mother 的創辦人與員工。如果點進其「about」頁面，美麗且專業的影像肯定會奪走你的注意力，美妙的辦公空間都是真的！

7. 手機選單移植回網站

目前大部分網站還是比較重視桌面版，無法完美過渡到手機與平板設備。不過響應式設計（RWD）興起，幫助設計師順利讓網站順應設備，無論何種螢幕都能有最佳瀏覽體驗。在這樣的趨勢下，我們開始看到本來在手機上流行的元素，反倒移植回桌電上。比如24 Ways 與 Rawnet都有如同app與響應式的選單，儘管是在桌電觀看，卻像是在用手機瀏覽。這兩個網站一改傳統水平選單的形式，而是像手機版網站常見的直式flyout/sideout選單。

8. 主選單藏起來！

有些網站則把選單藏起來，唯有網友點擊或懸停在某個元素上，才會開啟選單，儘量維持畫面整潔、強調功能性。這個同樣源自手機螢幕特性的設計，或許也將成為2024年的趨勢。看看Brian Hoff Design新網站，右上側置放漢堡圖示，由於用戶已很習慣在手機上看到這種代表選單的象徵，因此並不會無所適從。

9. 超級大的字型（typography）

前面所提的示例網站，絕大多數都有個相同的特徵：巨大的文字標題。2024年這樣的流行將會繼續，而且可能有愈長愈大的現象，就像本地面上看到一架即將降落的飛機，那麼大。Tiny Giant網站超大標題直衝眼帘，要忽略也難。眾聲喧譁的時代，就是要比別人更大聲，才有被看見的機會，標題字型，在2024年會繼續放大。

10. 不受環境優劣影響的瀏覽體驗

本文提到的網站設計趨勢，多數都出自為網站「減肥」，加快手機或平板，以及帶寬不足環境的加載速度。網站設計師與開發者越來越重視網站「重量」以及使用者與其互動的形式。如何在行動裝置中、不同帶寬環境下營造同樣良好的體驗，也是2024年益發重要的問題。相信今年我們會有更多更順暢的網站，不會載到一半就喊咔。

另外數位行銷諮詢網站 Econsultancy作者Christopher Ratcliff根據自己的觀察，並且訪問了Dan Barker與Chris Lake兩位行銷專家，也統整出17項2024年網站趨勢，同樣相當值得參考。以下節選出與 The Next Web 沒有重複的觀點：

1. 視差滾動：Wordpress等網站製作平台提供視差捲動的模板，因此我們可以期待未來出現更多高度創新、以敘事為主體的網站。

2. 卡片設計：前幾年類似Pinterest的卡片瀑布流今年可能會捲土重來，這種重視影像的設計非常符合「TL;DR（太長沒讀）」的網路群體，也非常適於呈現在行動裝置與響應式設計。

3. 物質設計（material design）：擬真設計與扁平設計的交叉點，Google 去年推出的 material design，今年預計也將大為風行。

4. 幽靈按鈕（ghost button）：按鈕透明化，僅以能夠識別的超細邊框，包裹無襯線字型。一方面減少按鈕與背景的突兀感，一方面依然有清楚的指向。

5. 動態設計（motion design）：比如不斷捲動，不會直接出現圖片，而是先有色塊才有圖片開展。或者數據直方圖「動起來」。

6. 模塊捲動（modular scrolling）：一般我們是捲動整個網站，但捲動個別欄位也是沒問題的。

7. 色彩漸變：選擇一個色彩作為主體，配以許多深淺不同的相同色系。

8. 固定的導航欄：無論你捲動到哪個位置，導航欄永遠固定在最上方，方便使用者在各種頁面中切換，用處較為複雜的大型網站如 Facebook 就會使用這種設計。

9. 行動第一，但非行動唯一：畢竟還是有一大票人工作倚賴桌面電腦維生，比如正在看本文的網站設計師們，對吧～