網站(zhàn)設計(jì)最迷人(rén)之處就(jiù)是(shì)不(bù)斷變動，技(jì)術(shù)的(de)演進讓設≈計(jì)師(shī)與工(gōng)程師(shī)可(kě)以不(bù)停實驗創新，帶來(lái)更好(hǎo)、更流暢的"(de)使用(yòng)體(tǐ)驗，以及讓人(rén)處處驚奇的(de)感官飨宴。今年(nián)網頁又(yò≠u)會(huì)有(yǒu)哪些(xiē)有(yǒu)趣的(de)風(fēng)格将主宰我們的(de)螢幕？我們綜合了(le) W♥ebflow、The Next Web、AWWWARDS 等媒體(tǐ)與網站(zhàn)設計(jì)公司的(de)預測，整理(lǐ)出網頁設計(jì)十大(dà)趨勢：
 
1. 打破框架的(de)版面設計(jì)

過去(qù)幾年(nián)，一(yī)成不(bù)變的(de)網頁布局（layout）已開(kāi)≤始令人(rén)疲乏，幸而Flexbox 以及CSS Grid!（Chrome、Firefox 預計(jì)于今年(nián )三月(yuè)開(kāi)始支援）等技(jì)術(shù)的(de)出現(xiàn)，讓版面設計(jì)變得(de)更靈活彈性，為(wèi)設計​(jì)師(shī)、工(gōng)程師(shī)帶來(lái)更寬廣的(de)揮灑空(kōng)間•(jiān)，今年(nián)将可(kě)看(kàn)到(dào)更多(duō)網站(zhàn)打破慣有(yǒ₩u)的(de)「對(duì)稱」、「秩序」守則，形形色色，層層疊疊的(de)網頁布局肯定精彩。不(bù)過不(bù)變的(de)大(dà)原則是(shì)，設計(jì)的(de♣)重點是(shì)要(yào)烘托「內(nèi)容」，內(nèi)容才是(shì)骨肉、才是(shì)人(rén)們光(guāng)臨網站(zhàn®)的(de)主因，因此設計(jì)的(de)尺度上(shàng)也(yě)需斟酌，天馬行(xíng)空(kōng)之餘，别反客為(wèi)主，奪走內(nèi)容的(de)風★(fēng)采。
 
2. 極簡out，色彩在跳(tiào)舞(wǔ)！

色彩作(zuò)為(wèi)表達個(gè)性的(de)重要(yào)元素，在極簡風(fēng)蔚為(wèi)風(fēng)潮時(shí)卻被剝除，不(bù)過約莫去(qù)年(ni÷án)開(kāi)始，大(dà)面積漸層色塊似有(yǒu)強勢回歸，Instagram、Asana、StripΩe 都(dōu)以飽和(hé)的(de)漸層重塑品牌視(shì)覺主調，今年(nián)絢爛的(de)色彩以及流動的(de)漸層更将大(dà)行≈(xíng)其道(dào)；此外(wài)，影(yǐng)像以雙色調（duotone）後制(zhì)，也(yě)可(kě)¶能(néng)會(huì)是(shì)今年(nián)的(de)潮流。設計(jì)師(shī)，Sarah Hutto 預↑言，今年(nián)将會(huì)是(shì)很(hěn)「funky」的(de)一(yī)年(nián)，期待強烈的(de)色彩≠刺激人(rén)們的(de)視(shì)覺感官。
與前兩年(nián)的(de)明(míng)亮(liàng)輕盈、以及上(shàng)述張揚鮮濃的(de)色彩對(duì)比，以相(xiàng)≤對(duì)沉著(zhe)冷(lěng)靜(jìng)的(de)黑(hēi)色作(zuò)為(wèi)主色調也(yě)是(shì)愈來(lái)愈多(duō)網↕站(zhàn)的(de)選擇，隻要(yào)「輔色」（accent color）搭配得(de)宜，黑(hēi)色一(yī)點也φ(yě)不(bù)沉悶，反而能(néng)在一(yī)片光(guāng)彩的(de)世界裡(lǐ)脫穎而出。
 
3. 華麗(lì)且實用(yòng)的(de)動态效果

動态效果在當代的(de)網頁設計(jì)領域扮演舉足輕重的(de)角色，今年(nián)也(yě)絲π毫沒有(yǒu)退流行(xíng)的(de)迹象，反而應用(yòng)會(huì)更廣泛。适當的(de)動态效果，具有(yǒu)突出重點、争取注意力的(de)用(yòng)處，今年(n↓ián)以 SVG、CSS 創造的(de)動态效果預料将大(dà)幅增加，滾動視(shì)差（Parallax Scrolling）也(yě)愈來(láiδ)愈華麗(lì)。但(dàn)設計(jì)師(shī)應考量品牌或內(nèi)容的(de)內(nèi)涵以及每個(gè)動态效果的(de)意義，避免「為(wèi)動而動」。

 
4. 創造小(xiǎo)驚喜的(de)「微(wēi)互動」

「微(wēi)互動」在網頁上(shàng)也(yě)會(huì)愈來(lái)愈流行(xíng)，比如(rú)滑鼠移過、點擊各式網頁零∞件(jiàn)如(rú)按鈕，卷軸滑動過程中，适時(shí)出現(xiàn)細緻變化(huà)，也(yě)能(néng)夠有(yǒu)提示重點的(de)作(zuò)用(yò☆ng)。當然，就(jiù)跟動态效果一(yī)樣，設計(jì)師(shī)也(yě)要(yào)拿(ná)捏「動」的(de)意義與幅度，才不(bù)緻畫(h☆uà)蛇添足。
 
5. 不(bù)失真、載入快(kuài)的(de) SVG 向量圖檔大(dà)行(xíng)其道(dào)

比起傳統圖片格式JPG、PNG、GIF 以像素構成，近(jìn)年(nián)興起的(de)可(kě)縮放(fàng)向量圖®片SVG 在網頁上(shàng)具有(yǒu)更大(dà)優勢，以标記式語言（XML）組合圖形，繪制(zhì)矩形、圓形、線條都(dōu)是(shì)小(xiǎo)事(shì)∞一(yī)樁，複雜(zá)的(de)填充、形狀也(yě)難不(bù)倒它，也(yě)能(néng)輕而易舉制(zhì)作(zuò)動态效果，而且不(bù)受解析度影(yǐng)響★，無論利用(yòng)什(shén)麽螢幕、什(shén)麽裝置觀看(kàn)，都(dōu)不(bù)會(huì)破壞圖像品質。 SVG 勝出≤更關鍵的(de)是(shì)，不(bù)需 HTTP Request，能(néng)夠大(dà)幅提升網站(zhàn)載入速度。例如(rú)這(zhè)個(gè)便是(shì)以 SVG 繪制(z≈hì)的(de)後背包。
 
6. 巨大(dà)字體(tǐ)精準傳達品牌意涵

首頁以巨大(dà)的(de)字體(tǐ)呈現(xiàn)品牌主旨，也(yě)将是(shì)今年(nián)☆随處可(kě)見(jiàn)的(de)風(fēng)潮。不(bù)過「巨大(dà)」并不(bù)代表加寬加粗，而是(shì)以恰當的(de)字體(tǐ)設計(jì)，言簡意赅、精準×表達産品精神，取代冗長(cháng)贅言。而字體(tǐ)與背景或色彩互動、或者在字體(tǐ)上(shàng)塑造動态效果，也(yě<)是(shì)可(kě)以嘗試的(de)作(zuò)法。
7. 虛拟實境技(jì)術(shù)結合內(nèi)容

虛拟實境的(de)話(huà)題從(cóng)前年(nián)延燒到(dào)今年(nián)，科(kē)技(jì)巨頭對(duì)虛拟實境的(d e)投資力道(dào)絲毫沒有(yǒu)減弱的(de)迹象，特别是(shì)Facebook 未來(lái)十年(nián)将砸下(xià) 30 億美(měi)金(jīn)專注虛拟"實境的(de)研發。可(kě)預見(jiàn)的(de)是(shì)技(jì)術(shù)更臻成熟，也(yě)會(huì)有(yǒu)愈來(lái)愈多(duō)媒體(tǐ)或品牌運用(yòng♠)虛拟實境科(kē)技(jì)「說(shuō)故事(shì)」，為(wèi)人(rén)們創造更身(shēn)曆其境的(de)感受。
 
8. 為(wèi)不(bù)同使用(yòng)者量身(shēn)打造內(nèi)容

對(duì)內(nèi)容網站(zhàn)而言，有(yǒu)效的(de)把「對(duì)的(de)內(nèi)容」傳遞給「對(duì)的(de)使用(yòng)者」，是<(shì)這(zhè)幾年(nián)備受重視(shì)的(de)能(néng)力。不(bù)過能(néng)夠命中核心的(de)卻不(bù)多(©duō)。因為(wèi)要(yào)達到(dào)跟随情境給予特定內(nèi)容，需要(yào)考慮不(bù)<同使用(yòng)者的(de)不(bù)同特征，例如(rú)，使用(yòng)者來(lái)訪網站(zhàn)的(de)目÷的(de)是(shì)私人(rén)之用(yòng)還(hái)是(shì)為(wèi)了(le)工♠(gōng)作(zuò)？使用(yòng)者是(shì)從(cóng)哪裡(lǐ)來(lái)到(dào)網站(zhàn>)的(de)？使用(yòng)者此刻正在做(zuò)什(shén)麽？他(tā)們以前在網站(zhàn)上(shàng)的(de)行(xíng)為(wèi)又(yòu)是(sh×ì)什(shén)麽？他(tā)們使用(yòng)什(shén)麽電(diàn)子(zǐ)裝置上(shàng)網？他(tā)們現(xi☆àn)在是(shì)登入狀态還(hái)是(shì)登出？
這(zhè)些(xiē)特征綜合起來(lái)增加了(le)複雜(zá)性，有(yǒu)些(xiē)媒體(tǐ)使用(yòng)「推薦閱讀(dú)」σ機(jī)制(zhì)或如(rú) Facebook 以演算(suàn)法為(wèi)個(gè)體(tǐ)決定®不(bù)同訊息流。而如(rú) Fubiz 則用(yòng)「Creativity Finder」，讓使用(yòng)者自(zì)行(xíng)設定「身(sh↑ēn)分(fēn)」、「區(qū)域」、「目的(de)」三個(gè)條件(jiàn)，過濾最符合要(πyào)求的(de)內(nèi)容給予不(bù)同使用(yòng)者。
 
9. 「登陸頁」重于「首頁」

登陸頁（landing page）與首頁（homepage）的(de)差異在于，前者有(yǒu)個(gè)非常明(míng)确的(de)目标，例如(φrú)希望使用(yòng)者注冊、訂閱電(diàn)子(zǐ)報(bào)、甚至購(gòu)買，而首頁則如(rú)自(zì)家(jiā)門(mén)口，提示網站(zhàn)包含哪些(xiē)內(nφèi)容或功能(néng)，作(zuò)用(yòng)乃為(wèi)提綱挈領。前者的(de)重要(yào)性日(rì)益彰顯，設計(jì)上(shàng)要(yào)能(néng)高(gāo)效率地>(dì)帶領使用(yòng)者完成「轉換（conversion）」目的(de)，幾乎不(bù)會(huì)有(yǒu)「導航（navigation）」的(de)成分(fēn)，因為(<wèi)我們不(bù)希望使用(yòng)者分(fēn)心到(dào)其他(tā)地(dì)方，最重要(yào)、幾<乎也(yě)是(shì)唯一(yī)的(de)目的(de)就(jiù)是(shì)推進轉換。
 
10. 設計(jì)的(de)分(fēn)享

如(rú)同程式領域熱(rè)烈的(de)分(fēn)享文(wén)化(huà)，近(jìn)幾年(nián)有(yǒu)愈來(lái)愈多(duō)小(xiǎo)公司或大(dà)企業(yè)樂(y‌uè)于公開(kāi)分(fēn)享內(nèi)部的(de)設計(jì)團隊協作(zuò)與工(gōng)作∏(zuò)技(jì)巧流程，不(bù)但(dàn)有(yǒu)招募人(rén)才之效，也(yě)充分(fēn)展現(xiàn)品牌特色、塑造設計(jì)領域的(de)互助氛圍。
Google Design、Facebook、 Shopify 、Airbnb Design 都(dōu)是(shì)可(kě)以借鏡的(de)例子(zǐ)。