如何設計出趨勢類型的時髦網站

如何設計出趨勢類型的時髦網站

近兩年,以黑色為主色調,或者大量運用深色背景的網站,逐漸流行開來。這些深色系網站常常被設計的非常時髦,並且搭配了不少有趣的動效,比如懸停觸發的小特效和微妙的視差效果,這些特效讓網站擁有了近乎電影的視覺體驗。

我們日常所看到的絕大多數的網站,在基礎配色方案上,都是以淺色為主的,背景大多是白色或者淺色。有意思的是,近兩年,以黑色為主色調,或者大量運用深色背景的網站,逐漸流行開來。這些深色系網站常常被設計的非常時髦,並且搭配了不少有趣的動效,比如懸停觸發的小特效和微妙的視差效果,這些特效讓網站擁有了近乎電影的視覺體驗。今天我們就來聊聊這一設計趨勢。

深色系配色+動效


Meida

Impero深色系配色和動效的結合確實已經悄然流行起來了:用黑色或者深色為主的配色方案,搭配一個炫酷的動效。

兩種技巧的搭配,創造出層次分明的視覺,營造出微妙的情緒氛圍和令人著迷的神秘感。雖然在具體實現上並不那麼容易,在移動端上的體驗不如桌面端明顯,但是這種設計趨勢所營造的視覺體驗還是很能引人關注的。

深色系的配色會讓前景的元素更聚焦,用戶會不由自主地關注設計師刻意營造的焦點。

在這種被營造出的神秘的氛圍之下,被動效加持的視覺焦點元素會讓用戶好奇,這個頁面之下還藏著什麼,接下來會有怎樣的事情發生。

這種設計趨勢和其他的趨勢相似,僅僅是一個範圍而非規定嚴苛的規定,你可以使用黑色作為主色調也可以使用藏藍,搭配的動效也沒有固定的套路,它可以只是一個簡單的懸停動效,也可以是一種複雜而精緻的動態效果,你可以根據實際狀況自行嘗試。

當然,這種設計趨勢的核心在於營造神秘感。

運作機制

Garden8很難完全說清這種設計趨勢為什麼會如此的有效,當你簡單腦補深色系配色+動效的時候,很難意識到這種效果實際效果是如此的出眾。

回過頭來,我們可以仔細剖析這種設計趨勢的特徵:

  • 配色方案中不會有太多顏色
  • 幾乎沒有太多明晰的對比
  • 整體設計看起來極其簡單

不過,也可能正是這些看起來不複雜的設計,使得這種設計趨勢在用戶當中發揮了效果。它打破了規則,吸引了用戶。

另外一個促使它流行的因素應該是它所營造的黑暗氛圍和神秘感。

人總是充滿好奇心的,欲蓋彌彰總比開放的展示更加撩人。

動畫和黑暗的氛圍搭配起來的時候,更容易勾起訪客的好奇心。

在許多設計作品當中,我們看到設計師並不僅僅營造出神秘感,他們還加入了更多的情緒上的引導。

不同的情緒在這樣的神秘氛圍下發酵,用戶最終會身不由己地被這種視覺模式所吸引。

不一定非得是黑色的

FedEx-track雖然絕大多數的設計師還是選擇了黑色為主的設計,但是實際上並不一定只有黑色適合這一設計趨勢。

其他的深色調同樣有效,這個時候就是考驗設計師調色和搭配的能力了。

除此之外,想要讓整個配色和動效能夠有效地搭配,還得讓色彩足夠豐富。

確定主要的色彩之後,最好在配色方案中加入同色系不同明暗、不同飽和度的色彩,這樣能讓整個配色統一而又豐富。

雖然營造顯著的對比並不在這個設計趨勢之內,但是它依然是不容忽視。

這個深色係為主的配色方案應該儘量貼近單色系配色,但是配色中色彩的對比度不夠明顯會讓人迷惑,對比度太強則不夠微妙。

這一是趨勢的侷限性

深色系配色+動效這種設計趨勢並不適合每個人,也不會貼合每個項目的實際需求,它也有著侷限性:

  • 在移動端上的顯示效果一般
  • 在可訪問性上或多或少有那麼一點問題
  • 對於一部分用戶而言吸引力不足
  • 導航和CTA元素並不好安置
  • 在環境光不足或者不好的情況下,頁面可能很難看清
  • 部分用戶可能並不喜歡網站所呈現出的情緒
  • 用戶可能會在較短的時間內厭倦

使用時候的注意事項


Formigari

The Great如果你覺得自己可以駕馭這種設計趨勢,那麼你可以嘗試在自己的網頁當中使用它。
不過,下面的事項一定要注意:

  • 堅持使用單頁:太多先鋒的設計手法可能會讓用戶覺得不舒服,太多的元素也可能打破好不容易營造的感覺,所以,儘量限制其為單頁設計。
  • 使用對比色:白色文本在深色背景上顯示效果很好。其他的元素也是同樣的道理。需要突出的按鈕、導航元素、信息等都可以採用對比色。
  • 簡化動效:過於複雜的動效可能會讓用戶覺得難於接受。堅持使用簡單的動效能產生更好的效果。
  • 分層結構:由於需要結合動效,不同的元素需要處於不同的分層當中,這樣可以營造出有觸感的真實效果。分層還能讓設計師更好地創造對比,也更易於管理。
  • 大膽的排版:文本元素不僅要包含對比,而且要通過大膽排版和字體設計,來創造出不落俗套的設計。在保證可讀性的前提之下,使用粗細不同、大小對比的字體,營造出形式感。

接下來會怎樣?


Blairwitch和任何設計趨勢一樣,深色系配色+動效的設計趨勢會隨著時間的推移逐步演變,雖然我們無法確知變化的細節,但是我們總歸能夠看到一個方向。深色系的配色和如今逐步崛起的VR和AR的沉浸式體驗有著一致的精神,動效的流行自是不必說,相比於複雜化的演化方向,它更有可能會越來越自然,越來越有意思。

結語

色彩對於設計的影響無疑是巨大的,深色系的配色常常會讓設計顯得深沉、神秘,它能夠承載的情緒總體會更加非常規一些。如果你希望你的設計更貼近大眾,淺色無疑會更合適一些,深色相對而言更加特立獨行。
另外,不同的設計技巧之間的組合搭配,或多或少能夠創造出一些新的效果,今天所聊的這種設計趨勢又何嘗不是如此呢?你也可以沿著這個思路繼續探索適合自己設計項目的視覺效果。

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。