最前線|2018年3月即將流行的3種網頁設計趨勢

+ 查看更多

 

在《2018年如何做網頁設計？這里有一份新鮮出爐的UX趨勢指南》中小飛介紹了如何面向用戶體驗做好網頁設計，比如注重內容設計、個性化設計等等。不過，不少站長反饋說這些趨勢雖然能夠指明一定的方向，但都太籠統了，希望能掌握一些具體、實用的設計指南。因此小飛今天就帶來了本月流行的3個設計趨勢，它們也有可能會一直流行下去。快來和小飛一起看看吧！

 

 

 

以超大圖片和視頻為代表的全屏式主頁在網頁設計領域已經流行過一段時間了，不過它最近又出現了一些細微的改變：進一步移除首頁的導航元素和文本，更加追求給用戶提供海報式或觀影式的視覺感受。這就是海報式/電影式主頁的誕生，這種設計趨勢可以看成是極簡主義理論與多彩配色的"混搭"，一方面，主頁元素很少，十分簡潔；另一方面，頁面配色很是豐富。海報式/電影式主頁的設計成敗主要取決于頁面圖片和文本的選擇，由于頁面上主要呈現的是這兩個元素，它們需要足夠出彩才能吸引用戶的注意力。另外，由于頁面上沒有導航菜單或CTA按鈕等元素，用戶在瀏覽過程中可能會感到困惑，進而選擇直接退出網站。因此，在設計海報式/電影式主頁時，我們不僅要想方設法創建令人印象深刻的視覺效果，還應記得在用戶瀏覽過程中給予一定的引導。下面是海報式/電影式主頁的3個示例：

 

的主頁背景是一張優美的風景圖片，再配上有趣的文字，很能吸引用戶。為了貼合用戶的點擊習慣，"Book Now（立即預定）"按鈕被放在了頁面的右上角。盡管這個CTA按鈕所占空間不大，但由于網站的導航菜單是漢堡圖標式的，它很容易就成為了頁面的焦點。頁面右下角的快捷跳轉鍵也能為用戶如何進一步進行瀏覽提供了線索。

 

 

在網站中運用了黑色的背景，風格更加簡約，不過主頁中間的動畫和波浪式的文本處理讓整個的網站的視覺呈現十分新穎。其他元素，比如附加文本、聯系我們、背景音樂設置等都設置的比較小，多處于屏幕的邊緣位置，以確保用戶始終將注意力集中在主要信息上。和上一個網站一樣，這里也沒有明顯的導航菜單，你需要進行點擊才能進入菜單頁面。

 

 

如果說前兩個網站完美呈現了海報式主頁，那么這個網站就是電影式主頁的代表。它的主頁上是各種短視頻的合集，再搭配一些簡短的文本或其他元素，以呈現給用戶觀影式的視覺體驗。同樣，這個網站也采用了漢堡圖標式的導航菜單，不過，圖標上藍色的圓圈讓它突出不少。頁面右下角還設計了動態的箭頭標志，給用戶提供了繼續點擊瀏覽的視覺指引。

 

 

 

 

隨著紫外光色成為2018年的年度代表色，越來越多的網站也開始使用紫色為主的配色方案了。關于2018年度代表色大家可以瀏覽《2018年度代表色公布：超難駕馭的【紫外光色】是何方神圣？》。在網頁設計之中，紫色一直不是設計師們的首選配色，這是因為這種顏色通常比較復雜，用的不好，不僅無法提升網站格調，反而會影響用戶體驗。不過，很多網站項目的實踐也證明紫色是足夠友好的，它可以與多種顏色趨勢很好地搭配在一起，不管是Material Design中的明亮色調，還是極簡主義中的黑白色。紫色為主的配色方案有很多，它可以是略帶紅色&粉紅色的、也可以是偏向藍色的，甚至可以是接近黑色的暗色系。另外，由于紫色在網頁中并不常見，如果你設計得當，不僅可以體現自己的設計能力，還能將自己的網站與其他網站區別開來，給用戶留下深刻的印象。還是不知道怎樣使用紫色為主的配色方案？看看下面這3個示例吧！

 

 

 

 

 

 

漸變色的回歸我們在《滿血復活！重新回歸網頁潮流前線的漸變設計》中早已談過。不過漸變色通常被用在網頁背景或圖片上，其實它還可以用在文本上起到強調的作用。字體排版的大體趨勢一般傾向于略帶一點微妙效果的簡單字體，這些微妙效果可以是圖片/顏色填充、粗體大寫、動畫效果等。而如今，漸變色也開始加入它們的陣營了。老實說，如果你對漸變色不感冒的話，你可能并不會想要使用這條設計趨勢。但漸變色文本確實可以給網站帶來十分酷炫的效果，下面是3個有關漸變色文本的栗子：

 

在網站的主頁使用了現代感十足的襯線字體+淺黃色、藍色的漸變色，由于網站的背景十分樸素簡潔，這個字體完全凸顯出來了，用戶能夠快速get到你想要傳遞的信息。

 

 

這個網站在復雜的字體上使用了粉色和白色的漸變搭配，再配以動畫效果，以吸引用戶的注意力。這里的文本排版之所以能夠起到作用很大程度上是因為它完美契合了網站的主題： Love Lost是一個朗誦愛情詩歌和信件的網站，粉色不正是愛情的顏色？

 

 

這個網站在應用漸變色文本的同時也使用了動效，可以給用戶提供十分有趣的視覺體驗。網站的其他元素（文本等）都相當簡單，沒有任何動效或顏色，這也讓屏幕中間的文本成為了視覺焦點。在這設計師還使用了今年的流行色---紫色。

 

 

 

上面這三種趨勢都各有自己的優缺點，全屏海報式的主頁盡管缺少明顯的導航菜單，但卻能呈現給用戶極佳的視覺體驗；紫色配色雖然有點復雜，但也可以和其他趨勢很好的結合起來；漸變色文本很是炫酷，可以快速突出、傳遞網站重要信息，卻不一定能博得所有用戶的好感。你覺得哪個設計趨勢的潛力最大？快來和大家一起分享分享你的看法吧！