• WixTW

2020年10個網站設計趨勢



歲末準備進入冬季了,我們即將迎接2020年的到來。在去年,我們發表了「2019受歡迎的9項設計趨勢」,而來到了2020年,如何確保網站內容清晰整潔的同時,又可以有豐富的內容和吸晴的視覺效果,仍是設計師們追求的境界。


而2020年的10個網站趨勢,分別是:


  1. 大尺寸設計和元素

  2. 區分設計

  3. 單色塊陣列

  4. 大量的留白

  5. 突出的網格視窗

  6. 螢光3D藝術

  7. 重疊影像

  8. 動態視覺

  9. 全螢幕表單

  10. 量身定制的插圖


01. 超大類型和元素


這樣放大元素非常引人注目,有助於用戶立即了解全部的內容。而且,它們在任何裝置看起來都很適合。如果使用這樣的設計方式,請減少每頁設計元素的數量, Remember, Less is more.

影像是現今的趨勢,越來越多的網站在首頁選擇滿版的圖像或影片,再加上大型字體。簡單直觀地傳達消息,容易引起用戶的共鳴。


02. 區分設計


利用矩形版型將一分為二,運用一點特別的技巧,則可以使螢幕的每一半邊的表現都略有不同。 例如,使用滾動視差效果使每一側以不同的速度移動,置入一些不對稱性的視覺元素混合其中。考量視覺的層次結構,你可以網站的中心放上Logo、CTA按鈕或選單,作為焦點中心也平衡兩半邊。


03. 單色塊陣列


繼續保持區分設計的概念,使用由顏色區分而成大小不同的方塊和矩形組成的陣列,可以有秩序且凝聚表達多項資訊。在每個部分中放置照片或幾行簡短的文字,讓用戶可以輕鬆地瀏覽這些微資訊。為了讓構圖更具吸引力,你可以為方塊加上陰影。請盡可能保持視覺一致,勿隨意拼貼,色塊應整齊地組合在一起,以形成一致的構圖,使設計直觀易懂。



04. 大量的留白 


是的,留白仍是最重要的元素之一。它使任何頁面都具有寬敞,可以呼吸的感覺。留白最常見的是白色,但是也可以由其他淡色糸組成。同時包括文字行列之間的間距,及每個視覺物件的空間或頁面周圍的邊距。

它可以增加可讀性,突出重要的設計元素(如CTA),達到整潔悅目的外觀。

到了2020年,空白及其相鄰的圖像和類型會越來越大,且使用的頻率會愈來愈多。我們看到的是採用乾淨,專業執行的排版的和諧設計,留白不一定只搭配簡約,這個網站案例的視覺物件效果都很大,作風大膽且色彩強烈。


05. 突出的網格視窗


矩形和筆觸及細線將螢幕分成多個部分,引導我們的眼睛按所需的閱讀方向進行(這是在線閱讀的一種很好的做法)。 形狀讓人想起彈跳視窗或瀏覽器分頁,但現在已成為頁面本身的無縫部分。 這種外觀是一種細微的變化設計,以一種熟悉的形式暗示來喚起你的閱讀習慣。


06. 螢光3D藝術


3D藝術的設計使用越來越廣泛,也可能因為3D建模的技術愈來愈普及。結合螢光色充滿未來感和活力,空間的個性鮮明。

但請謹慎使用此網頁設計趨勢,你可以將螢光色散佈在網頁周圍,作為調色板中的互補色或次要色。為了平衡,請選擇中性陰影作為原色,例如白色,黑色和灰色。


07. 重疊影像


這樣的外觀很前衛,但其實在今年就有些設計師偏好這樣的設計,雖然這種外觀具有從字面上看彼此疊在一起的視覺效果,但如果處理得當,構圖有排序且易於辨認,這是通過在元素和層次結構周圍使用來實現。我們可以使用燈箱,視差滾動效果或通過將圖像或文本彼此重疊放置來創建這種外觀。


08. 動態視覺


影片和動畫不是網路上的新現象,不過動態仍是吸引用戶的好方法,我們的眼睛會本能地偏向於任何移動元素,這是生物本能,可以用來吸走用戶停留特定頁面的方式。

當前,網頁設計中存在多種的形式:從微動畫(當我們把滑鼠移到該區域產生的動態)到整個網站的排版,再到全滿版的影片或動畫。

但請考慮你最要關注的區域,若用的太多將會分散用戶的注意力,眼花繚亂將是反效果。


09. 全螢幕表單

今年的總體設計主題是大型元素被大量空白包圍。因此,很自然地,這種趨勢已經進入了看似平凡的網頁設計領域,例如線上表單。

我們會這麼認為,表單看似不起眼,但它是不可或缺的存在。有時,它們會讓人感覺是一個麻煩的東西,用戶經常不願意填寫它們,但是全螢表單可以改善用戶體驗。


10. 量身定制的插圖


插圖在以往設計師的立場,似乎只是用來點綴,但也漸被拿來作為主要的視覺效果,用來塑造品牌形象。 例如,一間刺青藝術服務的網站,裡面滿是街頭藝術啟發的圖形。 再者,一間非營利性機構的網站的視覺效果令人愉悅,帶來了樂觀情緒。


綜觀來說,2020年的設計趨勢,著重在大量的留白、視覺性更吸晴,動態的視覺效果仍是重點。


原文出處:https://www.wix.com/blog/2019/11/web-design-trends-2020/

  • Facebook - White Circle

© 2017 WixTW