首先,你準備好網頁改版了嗎?近兩年,CSS3、Html5、微交互、移動端等互聯網技術飛速發展,從線上到線下、從PC到智能移動端,設計趨勢受到媒體、技術以及時尚業的影響,在不斷地循序漸進地變化,更是改變了我們的生活方式,是時候該重新審視下過往的設計,亦或者審視下即將開始的新項目,好好想一想如何將流行趨勢融入到你的設計中去!
1. 傳統網頁逐漸消亡
網頁設計正從傳統的概念中逐漸的消亡。在傳統的網頁設計中,網頁的作用更多是被動展現,將信息強加給用戶,而現如今網頁設計已演變的不僅如此了。網頁設計師(或體驗設計師)不再只是使網站“看起來美麗”。 相反,他們需要研究用戶的體驗以及他們之間的故事。2. 半扁平化極簡設計
小技巧:盡可能的讓用戶在網頁中得到最渴望得到的內容,以此調動用戶繼續向下探究的欲望。
近幾年扁平化設計風格被網頁設計廣泛應用,隨著CSS3、Html5網絡技術的發展影響,扁平化的風格也開始出現了一些新的變化,比如加上平滑的陰影、倒角等,即沒有破壞扁平化的風格,又使畫面多了一些深度和變化,我們稱之為“半扁平化”。


3. 響應式設計
現代Web設計不再局限于傳統PC,適配手機端、iPad、PC等不同分辨率的智能終端是必然趨勢,響應式設計將繼續占據著主導地位,因為它是適配多終端最佳用戶體驗的有效方式之一。CSS media queries為網站提供了靈活性,并根據訪問網站的不同設備進行調整,網頁響應的時間越短,那么網站的轉化率就會得到提升。
現如今,數據和分析越來越重要。而可視化圖表正為用戶提供了一個查看自己網站的統計數據的機會。

這是一個簡單卻有趣的網頁設計趨勢。作為用戶,我們更愿意看到那些能夠表明公司或業務的照片,而不只是一張通用的網絡圖片,銘記于心的事情是你網站的服務目的是什么,個人照片(團隊照片)同樣很受歡迎—請給品牌一個門面。

網頁設計源于物理事物,它起步于材料設計,發展于更多的觸覺表象和層次感。這種界面表現趨勢正在擴展到視覺展示中。設計師的設計源于現實,這包括照片而不是插圖,以及近乎觸手可及的豐富的元素。這些照片更加真實的同時,其中的元素也來源于自然或被制成項目產品。


字體排印越來越大,并且更大膽。無論是用于繪圖,還是用來吸引用戶的注意,大型字體的排印可以有效地打破網格的界限。品牌名稱將會變得更大、更醒目,甚至會全屏出現。而動態的顏色與紋理也將添加到那些有趣、充滿活力的字體中,并創造出一個讓你“哇”的效果。


導航菜單再也不用單調的固定在網頁的頂端。從隱藏式菜單,到浮層菜單,亦或者將菜單展示網頁的一側或者底部,菜單位置的變更已經成為一種趨勢(前提它的位置等快速讓用戶找到)。


8. 全屏表單(Full-Screen Forms)
不需要去另外的網站去填寫表單信息,因為新的網站做到了響應式全屏設計,適合所有設備的屏幕。

中性色調(冷淡色系)
寫實的設計原則也同時延續到色板,最近幾年色彩豐富的網頁設計逐漸被中性色所代替。
網頁設計中越來越多大自然色,米色和輕柔的配音。也預示著濃烈的,明亮的色彩斑斕的色板會被更自然的顏色所取代。


已經在網頁設計中消失多年的漸變強勢回歸,有了很多微小的設計變化。蘋果的iOS圖標是最明顯的例子。現在的漸變使用更大膽,醒目,顏色也更加豐富。
如今最流行的漸變方式是將兩種顏色疊加在圖片上(這種技術讓你的設計看上去驚艷無比!)。這種使用手法使得一張看似無趣的圖片看上去更生動有趣。另外如果你目前沒有一張滿意的照片可以使用,也可以通過一整張漸變背景來吸引用戶的眼球。



對比鮮明的配色使得Material design和扁平化的設計更完美。

滾動視差效果是2016年非常流行的設計趨勢,設計師在利用鼠標滾動創造效果上也越來越精明。至今視差的趨勢仍然會繼續發酵,在滾動過程中會捕獲更加富的層次感。幾乎每一個設計趨勢的關鍵都是觸摸真實,視差也不例外。越是真實的滾動效果,越能激起用戶的瀏覽欲望。


動畫正在越來越多地被應用到網頁設計中,它可以以多種格式呈現:Gif,SVG,WebGL CSS or 視頻,在過去幾年動畫是網頁設計中最大的一個趨勢,所以,毫不猶豫地去用吧。

電影圖像并不是我們常見的gif圖片,它是在一張靜態圖片上加入了很少量的動的元素。這個技術使得一張普通的圖片變得更加逼真生活化。
網站開始用講故事的方式使顧客停留更久。相比閱讀一個普通的說明信息,人們更易于在故事里記住更多的信息。
13. 帶聲音的視頻
用戶越來越習慣在他們的設備上觀看視頻,從YouTube 上的幾針的小視頻到電影。網頁設計可以模仿這種視頻的體驗,利用整屏的帶聲音的視頻展示首頁內容(并不需要自動播放效果)

14. 虛擬現實
這其中包括在網頁設計中的360度的沉浸式視頻體驗和其它高度互動的3D體驗效果,同時也將成為一種完美的交互趨勢。


微交互,不是只在小范圍收到空間時間概念限制的交互,而是細微的,細節的,有人性化的交互。

