2019網頁設計趨勢瞭解一下?
今年2月26日,國外設計機構UXPin在國際頂尖網頁設計網站Awwwards釋出了2019年網頁設計趨勢。
全文共66頁,知道你們懶,所以這次小編特意為大家提練了一些重點資訊!
文章的研究方向主要從5個方面出發,這5點分別是:
1.顏色
2.品牌
3.分屏設計
4.資料視覺化
5.分層互動
• 關於顏色 •
顏色是設計的基礎,通過顏色,能夠與使用者建立強烈的情感聯絡。毫無疑問,在2019年,顏色依然是最受關注的元素之一。
多色調漸變
越來越多的網站在主頁上選擇兩到三種顏色的漸變方案,這是一種有趣且引人入勝的用色技巧,它可以幫助你的畫面融入品牌色彩,創造視覺焦點。
Orion Icon Library
Michael
明亮的色彩
最大膽、最鮮豔的顏色將主導設計。明亮的顏色往往不那麼“嚴肅”,並且“年輕”,正如下面所看到的,耐克和百事等品牌的網站設計中,鮮豔的色彩顯而易見。做為引領潮流的偶像,其他人很可能會效仿。
百事
耐克
色彩疊加
當涉及到使用顏色時,幾乎任何色調都可以疊加在影象上。色彩疊加能夠幫助所有的影象保持一致的品牌感。尤其是暗色疊加,它能很大程度提升白色文字的可讀性。
eDesign Interactive
Beautiful Minds
• 變得微妙的品牌 •
我們不再需要大的logo來創造更多的視覺體驗。事實上,網頁設計的趨勢之一就是在網站上展示更少的品牌。越來越多的網站開始關注內容本身,因為內容才是使用者真正想要的,而不是公司的logo。
無襯線文字logo
隨著使用者更多地關注內容,logo在螢幕上變得更小、更微妙,雖然它們可能還在之前的位置——網站的左上角,但是設計本身卻變化了。精心設計的圖形開始消失,取而代之的是無襯線字型的簡單文字logo。它們不僅簡單,而且大多數都是沒有顏色的,僅僅用了黑色或白色。(UIMAX注:由於中文和英文的不同,此觀點更適用於英文logo)
LIMITLESS
簡單的圖形
圖形的簡化也反映了品牌微妙的轉變,越來越多的logo開始變得低調,這受app的設計影響,因為在app中,品牌logo必須小而簡單,才能更容易被識別。
達美樂
• 打造影象的品牌感 •
當一張照片出現在INS上,使用者會主動把它和某個品牌聯絡起來,這就是影象的品牌感。如何創造影象的品牌感,文章給出了以下幾點建議:
•使用主題相似的照片,如白色背景的產品或騎自行車的孩子(UIMAX注:如ofo的黃色圓圈)
•為照片設定一個調色盤(如大多數照片都存在一個綠色的物件)
•對所有照片使用相同濾鏡
•在影象中新增文字或是logo時,位置保持一致
ofo
• 分屏設計 •
一個螢幕,兩個部分。分屏設計會越來越受歡迎,它的好處在於可以增強在小裝置上的使用者體驗。一塊大螢幕上的並排兩部分內容,可以無縫銜接成小螢幕上的垂直排布,為使用者提供相同的使用者體驗。除此之外,它還不干擾其它的設計元素,不管是動畫、視訊、影象、還是插畫,幾乎任何元素都能適應這種趨勢。
並排分屏
當頁面有兩個同等重要的內容需要顯示時,建議使用並排分佈的分屏設計
Chekhov
上下分屏
Acrylice
不對稱分屏
不對稱的分屏設計可以更好的區分視覺的權重
Weima
影象與白色共存的分屏
儘管分屏存在多種形狀和設計,但還有一種趨勢是影象與白色共存,不管是並排分佈、上下分佈、還是不對稱分佈。這種分屏方式,更多地關注文字和實際訊息的傳遞,尤其是你有很多文字內容時,這樣是為了提供更乾淨、更容易閱讀的空間。
Yoke
• 資料視覺化 •
資訊圖形是一個很酷的元素,它是一種設計趨勢,它既反映了使用者對資訊的渴望,又反映了技術的進步。資料視覺化有各種各樣的形狀和形式,從簡單的數字到支援事實的數字,再到能說明問題的完整的動畫,這些元素在視覺上都很有趣,有助於更清晰地解釋概念,指導使用者體驗。
不要糾結於數字
當設計師聽到“資料”這個詞,首先想到的就是數字。雖然數字是資料視覺化的重要組成部分,但並不是唯一的方法。杜克大學圖書館有一個包含數十種資料視覺化型別的列表,其中包括:
•地圖 •時間軸 •蜂房圖 •網路矩陣
•列表 •甘特圖 •三維計算機模型
•弧圖 •樹狀圖 •熱地圖 •餅圖或條形圖
Brand Love Score
學會講故事
當資料視覺化作為一種網站設計趨勢時,它起的作用是一個有凝聚力的故事。為了獲取資料而將資料放到網站上是無效的。它需要有一個明確的目的,講故事就是利用資料的關鍵方式。
Adobe將其移動研究分解為螢幕上易於理解的資料點,鼓勵使用者進一步的互動。
動畫效果
動畫能夠幫助資料脫穎而出,它為你的資料故事提供了更有力的支撐
元素週期表。滑鼠放在不同的元素上,會顯示對應資料的變化。
把使用者放在第一位
那些最好、最精細的資料視覺化的網站,往往存在一個共同點,那就是讓使用者控制資訊。在使用者與網站開始互動之後,資料會因為使用者的參與而發生變化。
• 分層互動 •
2019年最大的網站設計趨勢之一是在設計中加入互動元素,讓使用者參與進來。
滾動視差
通過讓前景和背景相互獨立,來創造滾動視差的效果,使一切看起來更真實。
文字分層
通過整合文字與背景,創造更多視覺互動的層級,這種方式適合筆劃較粗的字型樣式,這樣更容易通過文字看到背景。此外,要想使用文字分層的方式,背景必須能夠被使用者輕鬆識別。
引入聲音
網站中的音訊層,可以獲得使用者的吸引力(但並不推薦在網頁中自動播放)。讓它起作用的關鍵是聲音要與視覺元素相結合,讓螢幕上的元素與音樂同步,帶來身臨其境的感受。