2019年正在流行的16個網(wǎng)頁設(shè)計趨勢

2 評論 11762 瀏覽 81 收藏 18 分鐘

根據(jù)今年最新的網(wǎng)站設(shè)計作品,這篇文章梳理了2019 年的網(wǎng)頁設(shè)計趨勢,有的是舊有趨勢回歸,有的則是正在悄然流行的新方向,希望能夠給你更多啟示。

時間進入2019年,我們在網(wǎng)頁設(shè)計中看到舊有風(fēng)格的重生,也見證了新的設(shè)計趨勢的誕生。

Web 技術(shù)的快速發(fā)展,不僅讓設(shè)計和產(chǎn)品足以滿足更多更細致深入的需求,也讓設(shè)計師能夠進行更細膩更獨特的表達?,F(xiàn)今的網(wǎng)頁設(shè)計趨勢,已經(jīng)不再僅僅局限于單一的技法,而更多是一種復(fù)合的、暗含意圖的綜合的設(shè)計方法。從色彩的選取、文本的布局、整體的界面設(shè)計和用戶體驗的呈現(xiàn),都是當下文化和整個時代走向的一種反饋和外化表現(xiàn)。

根據(jù)今年最新的網(wǎng)站設(shè)計作品,這篇文章梳理了2019 年的網(wǎng)頁設(shè)計趨勢,有的是舊有趨勢回歸,有的則是正在悄然流行的新方向,希望能夠給你更多啟示。

1. 在設(shè)計中傾注更多情感

Notation

與潛在用戶產(chǎn)生真正連接的唯一辦法,還是情感化的設(shè)計。就目前來看,2019年最優(yōu)秀的一批網(wǎng)頁大都基于某種情感訴求,和用戶的快樂或者悲傷相通,讓用戶感到驚訝,或者巧妙地抓住用戶所焦慮的點,從映入用戶眼簾的時候就試圖建立信任感。

色彩是用戶的第一感知,同時,文本、圖片等元素應(yīng)當和色彩在情緒表達上保持一致,方可帶來共鳴。通過高度統(tǒng)一的情感輸出,賦予用戶更進一步操作的欲望。視覺中的情感輸出決定了用戶的下一步操作。如果網(wǎng)站或者 APP 中所呈現(xiàn)的東西足夠吸引人,那么他們采取行動的機率就很高了。

通過情感來吸引用戶,讓興趣和吸引力成為撬動用戶的關(guān)鍵。這也正是今年絕大多數(shù)優(yōu)秀的設(shè)計作品所呈現(xiàn)出來的一種成熟的設(shè)計技巧。

2. 用色彩來強化主題

Dice Berlin

明亮的色彩和鮮艷的色彩,在感知上其實是有所不同的。如果你能夠明白兩者之間微妙的差異,那么你對于色彩的掌控力就更上一層樓了。在圖片和動畫的基礎(chǔ)上疊加色彩已經(jīng)是非常的流行的技法了,這種趨勢只會愈演愈烈,但是在色彩的選取和表達上,你需要更加小心,更加專業(yè),才能比其他的設(shè)計項目更加具有表現(xiàn)力。

從現(xiàn)在最流行設(shè)計來看,明亮的藍色和柔和的紫色正在成為很多新網(wǎng)站和流行 APP 的配色選擇。色彩的選取并不是第一次成為影響設(shè)計趨勢的重要因素,但是在設(shè)計的進化過程中,色彩一直發(fā)揮著無與倫比的重要作用。

用流行的色彩來服務(wù)網(wǎng)站的設(shè)計吧。如果網(wǎng)站有現(xiàn)成的配色系統(tǒng),那么你可以在此基礎(chǔ)上更好地部署充滿表現(xiàn)力的色彩。

3. 目的性極強的動效

X Company

動效并不是新鮮的事物,但是它也隨著時間悄然變化,最新的動效設(shè)計越來越具有明確的目的性。每一個動效的意圖,都是將用戶引導(dǎo)到特定的位置,讓用戶于頁面中特定的元素進行交互。

動效本身不應(yīng)該僅僅只是有趣,傳達愉悅感,不能剝離動效背后的目的性,而是要正向地為用戶操作注入力量。

即使是在現(xiàn)實生活中,大量的動畫效果也是為了快速吸引用戶注意力而存在的,它們比圖片更有張力。對于網(wǎng)頁設(shè)計師而言,借助不斷快速發(fā)展的網(wǎng)頁來抓住用戶注意力是必須要做的事情,現(xiàn)在正是最好的時機。

4. 單頁設(shè)計的回歸

Goods

無限滾動依然有效,這使得單頁設(shè)計再次流行起來。將網(wǎng)站的所有內(nèi)容重新鋪在首頁,向下滾動即可獲得,這樣的設(shè)計在2019年開始重新流行起來。用戶通過導(dǎo)航菜單,在頁面內(nèi)快速跳轉(zhuǎn)。

隨著近年來移動端設(shè)計的快速增長,用戶對于滾動交互越來越習(xí)慣,所以單頁設(shè)計的合理性是不存在問題。不過,考慮到如今用戶的注意力集中時間并不長,所以單頁網(wǎng)站的設(shè)計過程中需要盡量讓用戶可以更快找到他們需要的內(nèi)容。

5. 超現(xiàn)實主義的設(shè)計

Gyor Moore

看慣了大量現(xiàn)實的設(shè)計,超現(xiàn)實主義風(fēng)格的設(shè)計中所蘊含的豐富想象就顯得非常迷人了。在2019年的諸多網(wǎng)頁設(shè)計當中,那些比現(xiàn)實世界更夢幻的設(shè)計元素,顯得更加吸引人,影響力更大。

基于目標用戶所追求的情感和情緒來構(gòu)建超現(xiàn)實主義的設(shè)計,能夠更快地同用戶產(chǎn)生情感聯(lián)系。這種獨特的視覺和獨一無二的情緒所創(chuàng)建的情感連接更加難以復(fù)制,而這其中,動畫、漫畫和奇怪的插畫占據(jù)了極大的比例。這些元素能夠帶來新鮮的體驗,而這本身就是影響力。

6. 復(fù)古的字體排版的回歸

Haus

大家似乎已經(jīng)厭倦了超級現(xiàn)代的設(shè)計風(fēng)格,更加復(fù)古的襯線字體和肆意張揚的手寫字體在網(wǎng)站設(shè)計中重新回歸。與之前流行的非襯線字體相比,襯線字體有著更加吸引人的線條和邊角,這些精致的細節(jié)正是大家沉迷復(fù)古設(shè)計的原因之一。

而令人驚訝的一點在于,復(fù)古的字體和排版在目前絕大多數(shù)的屏幕上,所呈現(xiàn)出來的狀態(tài)已經(jīng)越來越舒適了,從可讀性到視覺效果均是如此。

7. UX設(shè)計的關(guān)注點更加細膩

The New Yorker

隨著技術(shù)的提升,用戶對于網(wǎng)站的體驗,已經(jīng)不止于可用、好用,用戶的關(guān)注點已經(jīng)慢慢遷移到更加細膩的感知維度上,比如是否更加真實、是否從視覺乃至文本上體現(xiàn)出對于用戶的尊重和關(guān)心。因此,UX寫作成了設(shè)計師必須掌握的另外一個技能——文案是否走心,用戶很在意。

優(yōu)質(zhì)的文案能夠讓用戶留存下載,讓用戶和產(chǎn)品更容易聯(lián)系到一起,讓用戶獲得尊重感。UX設(shè)計的維度正在擴展,設(shè)計師需要更加精準地抓住用戶的注意力,這也是具有商業(yè)價值的設(shè)計方向。

8. 多變的字體

The Unseen

在過去的幾年當中,字體本身經(jīng)過了一個復(fù)雜的轉(zhuǎn)變過程。為了兼容更加復(fù)雜的屏幕環(huán)境,字體本身具備了越來越強的拓展性。Opentype 字體的靈活可變性讓無論哪個平臺上的UI界面內(nèi)容,都可以清晰無縫地展示出來。

而多彩字體的出現(xiàn),讓字體內(nèi)的色彩和結(jié)構(gòu)的展現(xiàn),擁有了超乎以往的表現(xiàn)力。另外,諸如蘋果為 iOS 提供的 SF Symbols 以及越來越多的圖標字體,讓UI設(shè)計和字體的運用擁有了更多的可能性。

多變的字體,在2019年讓設(shè)計擁有了更多的可能性。

9. 分屏可能帶來下一次革命

Dropbox

移動端設(shè)備的快速增長,讓響應(yīng)式設(shè)計乃至于分屏設(shè)計成為了一個重要的需求。其實現(xiàn)在已經(jīng)有平臺嘗試跨平臺、跨界面、跨屏幕的內(nèi)容共享了,打通不同屏之間的用戶體驗,是2019年一個技術(shù)趨勢。

最典型的案例是 Mac 和 iOS 平臺之間的「接力」功能:在Mac 電腦上復(fù)制鏈接,通過快速的云端同步,在 iPhone 上接力打開頁面。在今年 9 月新的 iOS 、iPadOS 以及新的 macOS 上,更深層的屏幕共享將會出現(xiàn)。這個時候,分屏將不止是做簡單的屏幕復(fù)制,或者簡單的響應(yīng),屏幕內(nèi)容的不對稱分割,甚至都有可能成為一種趨勢。

各種不同形態(tài)的內(nèi)容,都可能會出現(xiàn),異于以往的設(shè)計會越來越重要。

10. 數(shù)據(jù)可視化

Google Cloud Showcase

信息圖表是設(shè)計的又一個熱點。向用戶呈現(xiàn)復(fù)雜信息和數(shù)據(jù),信息圖表和可視化設(shè)計是最為有效的方法之一,因為它不僅可以帶來視覺愉悅感,而且足夠有趣,讓人能夠理解。

現(xiàn)在數(shù)據(jù)可視化可以通過靜止的圖片來呈現(xiàn),也可以借助動畫來展現(xiàn),具體的呈現(xiàn)取決于你的平臺和預(yù)期。

可視化的數(shù)據(jù)最好能夠和故事結(jié)合到一起,結(jié)合敘述和故事,讓信息以更加可信的方式呈現(xiàn)在用戶面前,這樣可以帶來更高的轉(zhuǎn)化率。

11. 更多漸變色彩

Zef Cherry

漸變是一種功能更為豐富的設(shè)計趨勢,它幾乎可以用在所有的設(shè)計門類當中。如今,越來越多的設(shè)計項目正在使用漸變來呈設(shè)計,而網(wǎng)頁正是最為重要的門類之一。

漸變讓色彩更加富,更有質(zhì)感,使得原本平淡的色彩擁有了近乎藝術(shù)化的表達。如今的漸變色彩更加豐富,而不僅僅是用作一種疊加于圖片的元素。如今,隨著對于漸變要求的提升,更多的相關(guān)色彩工具也誕生了。

12. 使用3D來進行平面設(shè)計

Prior

雖然 3D 設(shè)計并不是什么新鮮的東西,但是頂級的網(wǎng)頁設(shè)計師經(jīng)常在設(shè)計中用到 3D 設(shè)計。在平面設(shè)計當中使用 3D 同樣能夠帶來巨大的影響。3D 渲染所帶來的豐富細膩效果,能夠讓界面更加吸引人。

對于新手設(shè)計師而言,3D 軟件上手并不算太容易,但是一旦掌握了它,它所帶來的效果和可能性會非常的驚人。3D 軟件降維進入平面設(shè)計,所呈現(xiàn)的價值是無與倫比的。

13. 更加立體和擬真的設(shè)計元素

Brand.Squarespace

雖然如今虛擬現(xiàn)實設(shè)備的普及率還沒有那么高,但是毫無疑問它的影響力正在提升,很快就會有用戶開始使用 VR 設(shè)備來瀏覽網(wǎng)頁了。

新的網(wǎng)頁 UI 將會需要在設(shè)計當中加入更多有縱深的、立體的元素,讓它們在視覺上更加具有真實的質(zhì)感。即便未來有更多的新技術(shù)加入進來,也不足為奇。

14. 更多自然的圖形和形狀

Studio Exchange

雖然絕大多數(shù)的網(wǎng)頁都使用柵格系統(tǒng)來進行約束,但是在新的技術(shù)支持之下,設(shè)計師可以更加自由地使用更多有機而自然的圖形和形狀。

有機的圖形,不規(guī)則、不對稱的圖形,增加了設(shè)計的深度,讓頁面能夠脫穎而出。這些圖形的靈感大多來自自然,也更能夠自然的吸引用戶的注意力。

15. 更多微交互

Grand Image

微交互存在的目的,是以吸引人的方式來給予用戶以反饋、驚喜甚至制造一些微妙的「焦慮」。這是一種非常有效的引導(dǎo)方式,它是有信息進來的時候的通知彈出框,是刷新頁面完成時的提醒,是點擊之后的加載小動效。

微交互是一種一直在緩慢變化的趨勢,在 2019 年的網(wǎng)頁設(shè)計當中有明顯的增長,更加多樣的微交互開始出現(xiàn)在網(wǎng)頁設(shè)計作品當中,吸引著用戶的注意力,提供有效的信息反饋,提供引導(dǎo)。

16. 更多視頻內(nèi)容

Outrider

文本信息已經(jīng)沒有以往那么具有吸引力了,更多的視頻內(nèi)容也是自然的結(jié)果。不過隨著網(wǎng)絡(luò)帶寬和上下行速度的提升,等待視頻加載的時間越來越短,用戶也可以更加快速便捷地獲得視頻內(nèi)容。

視頻內(nèi)容不僅能夠更快的表達,也具備更好表達的可能性。作為一種主動輸出的媒體模式,視頻內(nèi)容的優(yōu)勢非常明顯。相應(yīng)的,視頻內(nèi)容的制作也需要更加注意,必須提供有意義的內(nèi)容,才不會讓用戶有浪費時間的感覺。

結(jié)語

如果你仔細觀察這些趨勢的話,會發(fā)現(xiàn)這當中絕大多數(shù)的趨勢都只是之前趨勢的升級和發(fā)展。不同的文化和快速變化的時代,正在塑造新的趨勢。企業(yè)和公司期望能夠發(fā)掘能夠帶來商業(yè)價值的設(shè)計,同時還能兼顧時尚,能夠幫助業(yè)務(wù)有長足發(fā)展,這才是最重要的事情。找到這幾個關(guān)鍵之間的平衡點,就能夠創(chuàng)造有價值的設(shè)計。

 

作者:niceverynice

譯者:陳子木

來源:https://www.uisdc.com/web-design-trends-2019

本文由 @陳子木授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感覺更多的是個性化的設(shè)計元素,對于國人來說,場景化設(shè)計可能更偏重一些

    來自浙江 回復(fù)
  2. The NewYork的那張網(wǎng)頁看起來好累,確定是流行的設(shè)計嗎。。

    來自北京 回復(fù)