近幾年到了每年年底，國內外各大網站幾乎都會開始推測明年的設計趨勢是什麼，有些網站猜得準，但是有些網站只是把去年提過的再做一個彙整就當做是下一年的新趨勢，其實每年常常都會霧裡看花的感受，甚至不知道自己吸收的資訊對錯。當然設計趨勢這種議題是沒有所謂的對錯之分的，只是有明顯顯現在流行上，或開始逐漸被淡忘而不再使用的區別。2017年至今已經過了兩個月，對比去年年底大家還在猜測的2017年網頁設計趨勢來看，現在似乎有比較明朗的趨勢，不需要再猜測哪些是對的，哪些只是噱頭。
1.持續不斷的扁平化設計
從2014年Google推出的 Material Design到2017年的現在，扁平化設計的運用比較沒有什麼太大的變化，主要是因為扁平化設計帶來的不光是視覺設計上的整齊度，也包含了網頁設計在跨平台上的便利性。而以往較為平面的網頁視覺設計，到了扁平化設計之後，也開始比較呈現所謂的空間感，讓同一個網站的網頁組成，可以讓我們像樂高積木一般，透過不同的內容去做排列組合，使得靈活性大增，也讓頁面的內容更加明確。除了視覺設計上的便利以外，網站的介面設計上也有了一致性，網友在瀏覽網站的過程中，所學習到的操控經驗，不需要因為更換平台從新學習，降低了網站瀏覽的門檻，也是扁平化設計所帶來另外一項優勢，有鑒於此，扁平化設計的這項趨勢並不會有太大的改變，只會在相同的大架構上去做其他的延伸，算是從2014年發表 Material Design到現在，唯一不斷存在未來也不太會被淘汰的趨勢。
2.Cinemagraphs 影劇化圖像
早在幾年前網站就開始運用大量的實體照片來營造網站的氛圍，但是運用久了以後，網友便會逐漸習慣這樣的氛圍營造方式，故開始會在網站上運用影片當背景，但是發現影片的loading較大，而且影片製作不易，於是Cinemagraphs這種看似靜態卻又動態的影劇化圖像就誕生了。Cinemagraphs是最近這兩年來比較會使用的動畫圖片，除了檔案上會比影片小很多，所以網站loading速度會快一些以外，還能帶來靜態圖片所沒有的效果。比方說一張餐廳的照片全部禁止，但是杯子裡面的水會一直旋轉，或是桌上的衛生紙在飄動、牛奶倒進咖啡中開始擴散等等，類似這樣的情境照片，但是只有微微一小部分是有動態的。
3.動態效果的運用，包含滑鼠的微互動與捲動捲軸時的視差滾動
上圖範例：http://taiyobank-recruit.jp/
隨著瀏覽器效能的提升，與javascript的進步，運用在網站上的動態也越來越吸引人，從開啟網頁的loading開始，就可以透過動態讓網友期待等等要觀看的網站，再來背景也可以有放大、縮小或是輪播等等的動態，中央更可以放置一些可以吸引眼睛注視的動態效果，像是時鐘一秒一秒的倒數，或是一些環繞的動態，抑或是常見的箭頭往下移動的效果，都可以讓網友非常專注在目前的網站上，隨著網友往下滾動，各個區塊的內容甚至還可以進場、退場的動態效果，即便是最簡單的淡入淡出也可以讓網友充滿驚喜，而這種動態雖然都是預先設置好的，但是難免有讓網友感受到網站正在與他互動的悸動感，除了可以大大提升網站的親和力，而且可以增加網友的黏著度，不由得會提升網友待在網站裡不停瀏覽的時間。
4.漸層色系的運用
上圖範例：日本大阪經濟法科大學國際學部 http://www.keiho-u.ac.jp/int_studies/
相較於前幾年的網頁設計比較走純色系列以外，大約從去年開始漸層的配色又慢慢回歸了，但跟以往不同的是，現在流行的漸層色比較偏向同色系或相近色系，比較不像以往那樣的採用誇張的多重配色，另外在顏色搭配上，以往較不討喜的黃色、桃紅色等等較為刺眼的顏色，也開始被大膽的運用，相較前幾年都在走純色的保守路線相比，在配色上，從今年開始會逐漸走向大膽但又不失和諧的路線。
5.分裂的排版
上圖範例：45/60 http://45-60.ru/
相較以前常見的上下排版，從去年年底開始，設計師越來越喜歡將畫面做左右分割，從20% 80%的誇張分割，或是40% 60%的相近平常分割，甚至50%50%左右平衡分割，都有設計師在運用，這樣的排版除了可以讓畫面帶來張力以外，也可以讓以往從上往下單純瀑布式流動的網頁帶來一點破格的效果，使得網頁動線不再只是單純從上到下，也可以開始有點不一樣的配置。
6.又大又粗，但又清楚的文字
上圖範例：日本網頁字型 Type Square http://typesquare.com/special/
在四五年前的網站都喜歡用小一點的字體來做搭配，原因是早期網頁能運用的字型有限，而常見的新細明體，因為字體設定的緣故，當新細明體放大時，許多不好看的細節也一併暴露，所以造成網頁都喜歡用較小的字體大小來做呈現。近年來隨著Web font的發展，網頁可運用的字體變多了，相較之下我們就可以使用其他字體來做大字形的呈現，而這些大字體為了帶來不一樣的效果，通常我們都會選擇筆畫較粗的字體來做呈現。比起四五年前我們喜歡使用12px或13px的字體大小來看，現今我們都會採用15px以上的大小作為內文的最小字體，而大號的字體可能從20~30px不等，當然這些字體大小的尺寸都是桌機上的比例，若是要跨平台就需要與螢幕大小做尺寸上的運算，或是另外在設定字體大小。
7.3D與WebVR的運用
上圖範例：wish World http://www.clair-et-net.com/wishworld/
3D的運用以往主要是在商品呈現的部分，就像Apple公司會將自家的產品在頁面上做分解在組合，好讓消費者理解每一個產品的細節是多麽的細心，現在隨著VR裝置的普及，將3D與WebVR技術運用在網站上的情況也會越來越多，尤其是Google Cardboard 價格低廉，材料取得容易，所以將VR技術導入到網站並不是不可能的事。透過3D建構世界觀再運用WebVR的技術，我們將網友帶入我們想像中的世界，而不是單單只是在頁面上營造氛圍這樣的單純，我們可以將網友帶進網站中，除了是全新的網站探索方式以外，我們可以設計除了鍵盤與滑鼠以外的操控方式，帶來一個全新不一樣的網站體驗。
作者：Nowill(張芳瑩) 品禾全端網路工作室策略總監