設計總是在不斷變化，每隔一段時間我們就會看到與以往有所不同的設計趨勢。而身為設計師，在進行網頁設計時就需要善用這些流行設計趨勢，讓網站更容易被注意到，甚至被喜愛。

網頁設計技巧

而到了2020年，我們會注意到很多正在流行的設計手法，例如：誇張的漸變、打破常規邏輯的排版、依然流行的簡約設計、深色模式、聲音交互、3D元素…正在主宰者目前的視覺設計。所以，如果你想你的網頁設計更符合現在的設計趨勢，而且對用戶而言更有價值，不妨留意下由香港網頁集團梳理出來的設計表單!

如何讓你的網頁設計更有時代感?

1.極簡風+大留白

近年來極簡主義一直是設計師最喜愛的網頁設計風格之一。雖然每個時代的極簡風格大範疇一致，但細節上會略有不同。

而在2020年，極簡風格會偏向大留白，講究通透性。這種設計趨向有可能是因為受到如今過載信息影響，盡可能地減少信息噪音來與其他設計區分。

【案例分享】

Whiteboard -採用經典的簡約網頁設計，如居中使用非襯線字體，背景使用微妙的淺灰等。

網頁設計技巧

Soldo – 與上個案例不同，這個設計會更加豐富，雖然背景圖片採用幾乎純白的背景墻，但會借用不對稱佈局來吸引用戶眼球。

網頁設計技巧

2.深色模式

2019年「深色模式」一出現，便開始「瘋狂」擴散流行。由於深色模式具備以下特點，使得它自然而然地成為一種流行流行的視覺美學：

· 功能性：讓信息更加聚焦;

· 需求性：用戶想要它，而設計師也開始大規模設計這樣的作品，應用到網頁設計中。

· 獨特性：深色模式深沉且讓人着迷，一方面是因為強烈色彩與界面信息形成對比，另一方面是因為它與常規設計有很多不同點。

【案例分享】

CanneSeries – 使用了霓虹強調色和加粗字體，搭配動畫，整個頁面非常抓人眼球。

網頁設計技巧

Davenport – 與前者相比，這個網站簡直就是優雅深色模式的典範，白色的襯線字體搭配優雅的金色，這種細膩的視覺元素，沉浸而高級。

網頁設計技巧

3.字體和排版

2019年開始，不少設計師都開始打破各種排版設計規則，而在2020年這個「玩法」將會變得更加徹底。

雖然這個「玩法」很新鮮，但要玩好並不容易，關鍵在於：在打破界面排版規則的使用，要控制「度」的問題，讓用戶在「新奇」和「難受」之間Get好信息。

當然，很多設計師在打破常規時，都會偏向藝術感，而忽略信息的準確性，這會使得網頁設計無法發揮應用的作用。所以，在進行網頁設計時，你要明確打破常規的目的是什麼，再考慮是否採用這種手法。

【案例分享】

J Powers Events – 文字排版選用了跨區域設計，而且當用戶滾動頁面時，字體還會隨着疊加區域的變化而產生變化，雖然設計手法很新穎，卻不會對界面的可讀性有任何影響。

網頁設計技巧

Makers & Dreamers – 採用翻轉字體，混搭襯線字體和非襯線字體，在簡約的佈局下，營造了高端藝術的感覺。

網頁設計技巧

4.藝術插畫

這幾年插畫真的非常流行，無論是充滿藝術感的線性插畫，還是有趣生動的卡通插畫，都能讓網頁和UI的視覺格調提升，同時吸引用戶的目光。

【案例分享】

Absurd Design – 這個藝術插畫小圖庫的設計極富想像力和視覺張力。

網頁設計技巧

Heschung – 將插畫與動畫結合一起，讓人有種異想天開，天馬行空。

網頁設計技巧

5.手繪插畫和真實素材結合

設計時，如果不知道是用圖片素材好還是用插畫素材好?不妨試試「混合」，將精緻的圖片與有趣的插畫混搭一起，效果同樣非常好，還能製造奇觀視覺效果。

【案例分析】

Constance Burke – 讓真實的「人」穿上手繪服裝，感覺非常有意思。

網頁設計技巧

Bubka – 滾動頁面時，抽象插畫和真實圖片來回穿插，相當富有想像力。

網頁設計技巧

6.流體動畫效果

越來越多網站或平台有意識地使用各種各樣動畫，以及不那麼死板的元素。例如，像水一樣的不規則流體元素，讓網站設計和APP設計都富有生機。

流體動畫效果能創造更好的過渡效果，吸引用戶注意力，而這種動效的關鍵在於控制流體的運動速度，平滑流暢感。

【案例分享】

Toonami – 光標懸停狀態，以及視頻和文本都使用了流體動畫效果。

網頁設計技巧

Ilya Kulbachny – 標題使用液體動態效果，而且文本會隨頁面的股動而變化。

網頁設計技巧

7.3D元素

想要增加網站和UI中的視覺張力和景深層次，3D元素無疑是不錯的選擇。到了2020年，3D視覺設計的效果將會變得更加強大和細膩，亦有更多優秀的3D設計會變得強大而突出。

【案例分析】

Toke – 就是借用3D設計提升整體的視覺張力。

網頁設計技巧

8.圖層疊加穿插

設計時，大多設計師都習慣將界面上所有元素平鋪開。試試不同的圖層錯落有致地鋪開，界面設計將會變得更加多樣且富有層次感。例如：你可以讓文本框和圖片、視頻穿插重疊，甚至結合動效，在交互過程中穿插移動等。

【案例分享】

Craft Kitchen – 圖片與圖片、文本與圖片之間都有所重疊，但整體上又處於一個相對穩定的框架中，顯得穩重又有所錯落。

網頁設計技巧

Curt Thompson MD – 圖片會與界面的其他元素進行穿插，產生景深。這個網站是通過卡片網頁設計來建立重疊穿插的規則，非常值得學習的!

網頁設計技巧

9.大幅度漸變

扁平化設計瘋狂流行的那些年，設計師都竭盡所能地規避漸變。但如今，漸變不僅捲土重來，更是「放飛自我」。剛剛回歸的漸變變得非常微妙，色彩跨度也越來越大，甚至開始無處不在。

【案例分享】

Bariskuran – 利用大膽的漸變呈現設計作品集。

網頁設計技巧

Arjay Studio – 在小小的氣泡元素中，使用非常出彩的大幅漸變效果。

網頁設計技巧

10.導航

複雜大型的導航將會逐漸消失於我們的眼前，轉而流行簡約，甚至簡化的導航。雖然這種處理手法似乎非常冒險，但從目前的狀況來看，使用較少的導航元素，不僅符合當下用戶的需求，也使網站和APP本身的信息主幹變得更加清晰，更容易傳達信息和給內容騰出更多空間。

【案例分享】

Bikebear – 簡化了導航後，網站的視覺效果顯得更加有特色，甚至有點搞笑。

網頁設計技巧

Uniel – 將導航隱藏到漢堡圖片中，無論是PC端訪問還是APP端訪問，都會有更多內容在彈出菜單中顯示。

網頁設計技巧

設計趨勢和流行技法都是日常設計中一個重要的參考和學習對象，而它們最大的特點就是緊貼當下。因為大家都喜歡，而且符合此刻的語境和用戶的需求，所以能讓網頁設計發揮更大的效果。當然，所有流行趨勢都不是獨立存在，它們之間是可以搭配使用的，這樣反而能產生更加有趣的效果。