非對稱式布局、柔和圖形、微妙動效，這些才是2018年網頁設計的正確打開方式

+ 查看更多

 

每年的12月都是年終盤點總結、來年愿景展望的好時候，網頁設計領域也不例外。這不，小飛近期更新的文章都是與此息息相關的，從《盤點2017年最受歡迎的10個商城范例：我們從中可以得到哪些啟示？》，到《2018年如何做網頁設計？這里有一份新鮮出爐的UX趨勢指南！》，再到《距2018年已不足1月，網站SEO優化又有哪些新趨勢和新方向》等，盡量從多個角度進行剖析，幫助大家在網站建設和推廣的過程中少走彎路。不過，一些看了文章的站長反饋說雖然對接下來一年的建站趨勢有所了解，但一到實踐時卻又不知道如何下手了。不用擔心，小飛今天就來詳細聊聊2018年可能會流行的網頁設計技巧（附設計實例），這些技巧都是行業大咖從近期新出及一些改版設計作品中總結而出的（其中不少設計方法同樣適用于印刷設計）。快來先睹為快吧！

 

 

 

完美對稱式網頁布局的時代已經過去了。盡管分屏式設計在2017年的網站領域還占據一定的席位，但這種設計趨勢正逐漸發生改變：設計師不再單純的將整個屏幕一分為二或幾等分，而是選用其他非常規的布局。換句話說，現在設計師更喜歡在網站中使用非對稱式網格。這是因為，與對稱式布局相比，非對稱布局往往可以呈現更加強烈的視覺張力，更能吸引用戶的注意力。除此以外，非對稱式布局同樣可以詮釋出網站的平衡美感。要想做到這一點，我們需要合理安排網頁的各種視覺元素，比如留白、文本區塊、圖片等，這也是非對稱布局的一個設計難點所在。不過，設計師提出了一種非常有效的解決方案，那就是將所有元素放在網格中進行設計，這有助于保證網站各個元素的和諧有序，幫助形成一定的視覺軌跡，引導用戶完成順暢瀏覽。下圖上的各種元素（標題、短文案、CTA按鈕、圖片等）就是以這種方式集合在一起的，這也是這個非對稱式布局仍顯得平衡和諧的原因。

 

 

 

 

明亮配色這種設計手法在2017年就已經大放異彩了。它最初是從扁平化設計中衍生而來，后借鑒了Material Design的一些特質，最終廣泛用于眾多網頁設計項目之中。在2018年，這種設計手法仍將持續流行下去。這種預測是有充分理論和實踐依據的，首先，明亮、顯眼的顏色最能吸引用戶的注意力，可以給用戶留下比較強烈的第一印象；其次，飽和度高的顏色更能傳遞出正面情緒，吸引廣大年輕訪客；最后，鮮艷的配色還可以創造出意想不到的獨特美感，讓網站更顯生機，讓企業品牌形象更顯活潑。Ford就是一個典型的栗子，它給用戶的感覺比較中規中矩，但其旗下的網站的明亮配色設計則凸顯了Ford與時俱進、緊跟時尚的品質，有助于改善用戶對品牌的傳統印象。

 

 

 

 

曾經有一陣子，APP和移動網站的底部十分流行懸浮固定廣告的設計。而現在這種趨勢好像重新興起了，并逐漸出現在電腦端網站上。底部懸浮固定的元素也不再局限于廣告，這還有對話框、彈出框、通知、甚至是導航菜單。底部懸浮固定元素這種設計方法之所以能夠重新興起是因為網站底部位置是用戶的主要瀏覽區域之一，在這放置一些元素既不會占用太多空間，還能起到突出的作用。由于它不會影響網頁的正常瀏覽，用戶普遍接受度也比較高。就在網站中使用了這種設計手法，底部促銷活動比頁面中的橫幅圖片等要占用更少的空間，但卻能產生更為有效的成果。

 

 

 

 

2017年的網頁設計中，銳利多邊形和幾何圖形的出現頻率很高。不過只要仔細觀察，我們可以發現柔和圖形倒是在網站中越來越受歡迎了。其實，更加柔和、平整的線條元素是棱角分明的多邊形的一種自然演進。早期扁平化設計是網站領域的主要掌控者，網站中的圖形自然也以銳利、二維的多邊形為主，但隨著動畫效果的不斷出現，這種可以和動效完美搭配的柔和圖形自然成了設計師們的心頭好。與銳利的多邊形相比，柔和圖形往往沒有那么"強硬"，能給網站增加不少親和力。另外，平整柔和的曲線也更易給人留下行云流水般流暢的感覺。網站中就使用了波紋曲線。

 

 

 

 

如今動效幾乎已經成為網頁和UI設計的必備元素，這是因為它們在有效吸引用戶注意力、增強用戶互動方面具備無可比擬的優勢。而相比顯眼的動效，小而微妙的動效開始受到更多用戶的歡迎，因為它常可以帶來出其不意的驚喜，給人的愉悅感要更強。這里要注意，微妙動畫絕不是為了隱藏或拖延網站加載過程而存在的。從懸浮效果、電影動圖、再到插畫，這些都是微妙動效的表現形式。網站在主頁的很多位置上（Logo圖標、菜單項、線條、文本、滾動按鈕）使用了微妙動效，整個網站的體驗很是有趣。

 

 

 

 

SVG（Scalable Vector Graphics）圖片在網站中愈發常見了。毫無疑問，可縮放矢量圖片已經成為網站的主要圖片類型之一，這很大程度上歸功于它的特性：無論屏幕大小或分辨率高低，這種類型的圖片、圖標或Logo都能得到良好呈現。除此以外，SVGs還可以與靜態或多媒體圖片很好的結合在一起，包括3D圖片、電影動圖、Logo動畫以及360度全景圖。

 

 

 

 

2017年，視差滾動特效實在是很流行，這甚至導致不少設計師開始有意識地避免在網站中使用這種效果。不過，就目前而言，它在鼓舞用戶進行互動方面能發揮很大的作用，也就是說，滾動特效仍會廣泛用于2018年的網頁設計項目之中。在新的一年里，我們還可以嘗試結合幾種不同的滾動特效以創造與眾不同的效果，當然，特效種類不能太多。這個網站就使用了滾動動效，用戶每滾動過一次，這就會有些彩色紙屑掉在狗狗的身上。快速滾動我們可以體驗視頻式的瀏覽效果，慢慢滾動則可以詳細查看屏幕左側的內容文本。

 

 

 

設計師喜歡極簡主義和留白設計，但有些用戶卻不喜歡。這促成了極簡主義之外留白設計的誕生。簡單來說，就是在網站設計中使用充分的留白，但又讓它不落俗套，不是千篇一律的極簡主義。色彩或其他設計元素的疊加就可以做到這一點。 網站在這方面就就比較突出，它采用了彩色的背景，雖然頁面中內容元素不少，但是充分的留白營造出了足夠的呼吸感。

 

 

 

 

相關閱讀：

《2018年度代表色公布：超難駕馭的【紫外光色】是何方神圣？》

《留不住用戶，這5個概念幫你指明2018網站營銷的前進方向》