本文翻譯自 Rohit kumar15 Web Design Trends in 2018 (+1 Bonus) 部分內容是以示意的方式翻寫,若有錯誤或建議,都歡迎提出

如果你是一個設計師,並且正在尋找能啟發靈感的趨勢? 那麼你就來對地方了。

在這裡由 Rohit kumar 所彙整的 15+1 個網頁設計趨勢,希望你會喜歡~

1.小而美

Project: Rem by Alim Maasoglu

少即是多 (Less is More): 極簡主義(Minimalism) 趨勢提倡更多的空白空間。

特別是透過白色色調,讓空間畫面看起來更加乾淨,並且兼具實用性。

以優雅且細緻的方式來呈現動畫,讓視覺感受能更舒適。極簡且大膽的作風,讓你的內容可以更容易的傳達。

就像你所知道的 - 第一印象往往持續的時間最久 ( First impression lasts longer. )

2.未來感

**設計師的未來感設計,絕對超乎想像 ** Designers are Outpacing Movies in futuristic design.

Project: [Tesla Model 3](https://medium.muz.li/web-design-trends-2018-a9bfabc99d46) User Interface by [Michael Cherkashin](https://www.behance.net/michaelcherkashin)

每天我都會固定瀏覽一些頂尖設計,在上周就看到非常棒的高科技設計以及大數據視覺設計,在過去2-3年之間,數據(Data Points)成長了20倍,讓數據分析變得更加困難,對於這個問題我們推薦的解決方式是 - 用JS來思考來解決這些問題。

Project Kepler.gl by Uber Design (Team: Data Design Designer: Jinglu Li)

3. 客製化的插圖風格

一張圖片可以傳達非常多訊息,除了更加節省空間,也更受到用戶喜愛。

Seet by Eddie Lobanovskiy

GOT OPEN — A Tennis Game of Thrones by Lena Vargas Afanasieva

根據一份研究報告指出,在頁面上至少存有一張圖或一則影片,會明顯增加停留的時間。

讓人印象深刻的是,消費者在看過介紹影片之後,購買該項產品的意願會提升 85%

4. 陰影深度力

Flyknit Lunar 3 | Made You Look👁 255 | Live a little more. Author: Callum Notman | STUDIOJQ

陰影效果可以創造出深度錯覺,因此受到設計師喜愛,透過這樣的方式,你可以將平面設計變得更加有層次。

你可以透過下面的方式來使用陰影及色彩(製造微變化)

  • 當CTA被點擊時顯現出來
  • 在元素之間製造視覺層次

留意,不要過度使用陰影效果

隨著Google公布了移動優先搜索,網頁設計師也習慣了響應式網頁設計之後,響應式所帶來的舒適體驗也開始在Logo上被呈現出來了,感謝 Google。

在 2018 年,響應式網站及Logo 的設計方式,讓品牌能完美的在各種裝置上的呈現。

6. 迷你攝影棚

Project: [Squarspace](https://www.behance.net/gallery/59421147/Squarespace) by [Akatre Studio](https://www.behance.net/akatre)

透過樸實背景讓細節更真實的呈現,讓用戶的注意力集中在同一個物件上面。

這種設計技巧開始大量使用在電子商務上,而網頁設計師也透過這種方式來設計各種 CTA。

7. 更多的副空間 (Negative Spaces)

Microsoft Surface Studio Landing Page Design Concept by Surja Sen Das Raj 💯

主/副空間(Positive Spaces & Nagative Spaces) 這種陰陽空間穿插的方式,讓視覺對象從背景浮現出來

網頁設計師開始使用 Nagative Spaces 的方式來讓畫面看起來更加獨特,並且運用在優化CTA銷售設計。

8. 動畫、Gif以及動態照片(Cinemagraph)

相較於其他方式,透過動作能更有效的捕捉使用者的注意力,使用者喜歡看故事,但是不喜歡閱讀。這就是 Instagram 背後成功的關鍵。

在設計登陸頁、banner、新聞簡報或者其他內容時,可以運用動畫(animation)、Gifs以及動態照片(Cinemagraph)的設計方式,來捕獲使用者的目光。當你在設計這些內容時,會發現在這之前,你就曾在社交媒體上使用過這些技巧。

導航選單、載入畫面等等,也都能透過整合動畫效果的方式,來引導你的用戶。

9. 微互動

AI powered- Schedule a meeting by Johny vino™

微互動的體驗無所不在,但又很難形容。但你可以從上方的範例圖示了解微互動的奧妙所在。

在同一個介面中,具有微互動效果的使用者介面,可以讓使用者不必再捲動或切換頁面。

10. 明亮漸變的鮮豔色彩

Nike Free Design by Leo Natsume

經過很長一段時間,漸層效果終於又回到Web設計趨勢。這次的 Gradients 2.0 擁有易於辨識(distinguishable)的色彩,並且更受到歡迎。

11. 大膽兼具創意的字體效果

Scenery Illustration by Willie.H

網頁設計師開始透過字體效果來創造扣人心弦的作品。在2018網頁設計將不會再拘泥於常用的幾種字體,而是會使用5~6種字體。

超大的字符會被用來取代圖片。在2018年,大且粗體的字型將會成為主流的趨勢。

12. 輔助背景 (Particle Backgrounds)

Digital Agency Exploration by Surja Sen Das Raj

如果你的網站需要透過 2-4秒來載入,將會因此而流失許多使用者。 這個觀點,在許多主流的SEO部落格都有提到。

那網頁速度與輔助背景到底有甚麼關聯呢?

這個答案其實非常簡單,因為背景載入的速度快,不會造成分心且可以獲得注意力。不會有影片背景帶來的相關問題。

13. 創造更多空間的內容分隔設計

Split fold Design for blog by Divan Raj

**具有雙倍的效果:**將頁面分割成兩個部分,可以讓你將內容存放在語意區塊。舉例來說,將文字以及圖像分開..等。

這樣的作法,可以在不影響使用者體驗的情況下,顯示更多內容。

14. 單色及混和 Icons

使用 Icons 不會太多負擔。單色的 Icons 容易閱讀。如果是超過一種顏色的 Icons,則使用上要適度的保留一些空白。

15. 用故事留住用戶

Character & illustration by Seung Uk Hong

說故事是留住客戶最好的方式,關於這點,大品牌都做得非常好。

因此,你也可以透過插圖或介面來向你的觀眾說故事,至於要用甚麼樣的媒介,則由你自行決定。

16. 可列印的內容

Preview: Reading mode of this story

不管數位如何進行,都不能忽略列印這件事情。列印內容下來檢視也是非常有用的一件事情,因此,提供閱讀模式,並且透過 print-css 來設定內容,絕對是值得加入你的可用性測試項目中。

如果你喜歡這篇文章,不訪前往原作者的 Medium 給予鼓掌+

本文翻譯自 Rohit kumar15 Web Design Trends in 2018 (+1 Bonus) 部分內容是以示意的方式翻寫,若有錯誤或建議,都歡迎提出