2019年網頁及UI設計趨勢（一）
每年各大設計部落格和知名網站都會預測新一年的網頁和UI設計趨勢，既有相同之處，也有各家的獨到見解，甚至還有相互衝突的地方。在接下來的系列文章裡，將會為大家彙編（譯）一些比較具有前瞻性的趨勢文章供參考。
本期文章選取了 Designmodo 網站對2019年的網頁和UI設計趨勢的17條認知，主要涉及顏色選擇，排版，字型使用，語音，VR介面以及UX相關的所有方面。其中有一些是在2018年後半段才開始出現，延續到2019年成為了趨勢所在。
系列文章
- 2019年網頁及UI設計趨勢（一）
- 2019年網頁及UI設計趨勢（二）
- 2019年網頁及UI設計趨勢（三）
- 2019年網頁及UI設計趨勢（四）
- 2019年網頁及UI設計趨勢（五）
- 2019年網頁及UI設計趨勢（六）
- 2019年網頁及UI設計趨勢（七）
- 2019年網頁及UI設計趨勢（八）
- 2019年網頁及UI設計趨勢（九）
- 2019年網頁及UI設計趨勢（十）
2019年排名前17位的網頁設計和UI趨勢
Top 17 Web Design and UI Trends for 2019
- 概覽 -
- 充滿活力的調色盤
- 情感化設計
- 立體感和幾近“真實”的設計元素
- 有意義的動畫
- 超現實設計和抽象設計
- 更多的語音
- 單頁設計捲土重來
- 扁平化設計模擬3D
- 粗曠主義漸入主流
- 更多的漸變
- 復古字型/更多襯線字型
- 可變字型
- 專注於資料視覺化
- UX寫作
- 分屏設計保持增長
- 手機動畫
- 更多文字
1.充滿活力的調色盤
鮮豔的顏色比比皆是。從漸變背景到明亮的影象疊加再到具有顏色變化的動畫，充滿活力的調色盤將繼續流行。
甚至連大名鼎鼎的潘通也通過命名一個具有明亮色調的顏色 活力珊瑚色 Living Coral 作為2019年流行色加入到了該流行趨勢之中。但是根據調查蒐集顯示，明亮的藍色可能才是最流行的選擇，如Spotify或Secure Invest。
這些鮮豔的顏色中很多是從其他設計趨勢演變而來的。鮮豔的顏色最早開始於扁平化設計，並隨著 Material Design 變成了更加充滿活力的色彩，現在其中一些色調甚至還帶有一些霓虹色。
這種設計趨勢的好處在於一旦你有了一個調色盤，顏色部署起來會非常簡單。你無需重新設計網站即可將趨勢元素新增到設計中去。
2.情感化設計
情感化設計的意義在於建立與使用者之間的聯絡。
2019年， 沒有建立情感化聯絡的網站和app應用將會被遺棄 。根據 Design Shack 所述，情感化聯絡分為4個基本類別：快樂和悲傷，信任與厭惡，恐懼與憤怒，以及驚訝與期待。考慮一下你的內容如何歸屬於這些分類，並使用顏色，影象以及使用者介面進一步與使用者進行連線。
設計中的每一個視覺元素都為使用者提供了他們該如何應對的提示。如上圖中自行車app中的動畫顯示了運動效果，讓使用者想跟著一起騎。同樣的，在上圖Sprout頁面中，一張笑臉可以與使用者建立積極的第一次互動。影象中的女子很高興，使用者可以感受其中並且想模仿這種情緒。
3.立體感和幾近“真實”的設計元素
雖然虛擬現實還沒有被每一個人所接受，但是它的影響已經顯而易見。
越來越多的設計師正在新增更多的立體感和設計元素，使他們的專案看起來更加真實或具有實戰性。這包括從具有更多三維外觀的插畫（甚至是動態插畫）到使用者看似可以觸手可得的移動形狀或產品的所有內容。
當越來越多的設計師使用這些技術，它們將成為使用者體驗中更常見以及更為期待的部分。它們也將看起來真實多一些，虛擬現實感少一些。
4.有意義的動畫
網頁和APP應用設計都會涉及到動畫。但是這些動畫需要使用有因。
動畫把使用者吸引到設計的某些部分中去，幫助使用者參與，或興趣提升，或講故事。在網頁專案中使用動畫可以為參與到設計之中的使用者提供深入的理解。
5.超現實設計和抽象設計
在我們生活的這個瘋狂世界裡，越來越多的設計師正將超現實主義和抽象元素應用到他們的專案中。隨著越來越多的使用者想要這些幾近真實的體驗，超現實主義設計和抽象設計將獲得持續發展。
這種設計方式的工作原理可以追溯到情感化聯絡的理念：超現實設計和抽象設計提供了一個與使用者自身相關的聯絡。（也許是因為更多的超現實和抽象元素允許使用者在設計中描繪自己。）
這些專案通常以如下元素為例：具有一些動畫，插畫人物或事物以及一些使用者想參與其中的活潑有趣的，卡通性質的元素。超現實和抽象設計專案的目標是保持使用者參與的風格新鮮度。（我們認為這種趨勢很有效，希望在未來一年能看到很多這種趨勢。）
6.更多的語音
“Google, 播放我喜歡的音樂。”
在2019年，你需要設計對話介面。隨著家中使用智慧裝置的人群越來越多，你需要開始考慮設計與這些裝置進行互動的方式，以及如何建立符合人們想要使用網站的使用者體驗。
對設計師來說最大的變化就是理解使用者將如何通過語音命令進行互動，然後通過關鍵詞和相關操作對語音介面進行原型設計。
這會讓網站上的所有內容更為重要。語音介面植根於資訊和資料的“閱讀”網站。因此文字內容至關重要。 （這是從更多的視覺思維轉變而來的。）
7.單頁設計捲土重來
不久前我們宣稱頁面滾動已經死亡。（很明顯，我們錯過了那艘船。）
越來越多的設計師將部署單頁設計，使用有趣的滾動效果和沉浸式故事講述來保持使用者參與。單頁設計實際上在移動裝置和小型裝置上效果更好，因為使用者可以通過選單導航獲取任何內容。並且移動使用者可能是你網站數量最多的訪問者，他們習慣於使用滾動效果。
不要忽視這種不斷增長的使用者模式。
8.扁平化設計模擬3D
三維渲染是對扁平化設計的提升。其結果就是3D的逼真效果和扁平化介面混搭，具有複雜感，視覺上很有趣，並且隨處可見。
這就像是設計中的虛擬現實，不需要任何特殊的東西。
當你深入瞭解這個趨勢的時候，你會發現使其發揮作用的是圖層的立體化加上動畫。
一些人開始管這種概念叫“深度扁平化 deep flat”。但是我們認為這不過是扁平化設計的一種自然演變。
9.粗曠主義漸入主流
在簡約化設計統治網際網路介面的方式中， 粗曠主義 正在開始接管 。這是所有鮮亮顏色設計的對立面。
這樣描述粗曠主義（Brutalism）：“數字設計中的粗曠主義是一種故意看起來原始未經處理的，隨意的或未經裝飾的風格。它與早期20世紀90年代風格的網站相似（想想Craigslist和Drudge Report兩個網站）。有時這些粗曠主義的表現形式是赤裸裸的，幾乎就是html裸站，只帶有藍色的超連結以及單色的Monospace文字。”
雖然很少有人會將這種設計風格歸為漂亮，但它確實對某些內容型別具有一定的吸引力。並且具有鮮明和大膽的風格，當你偶然發現其中一個設計時，它必然會產生影響。
10.更多的漸變
漸變是多用途顏色趨勢，適用於幾乎任何型別的設計。看看有多少專案正在使用它就知道了。
漸變可以為幾乎任何設計模式新增有趣的色彩，但最常見的可能還是那些“藝術匱乏”的專案。漸變背景可以以一種有趣的方式來突破文字元素或突出特定的內容，例如上面的Train Body Brain圖例，Orion的文字元素，或為一個產品展示創造一種有趣的背景，如Mel。
2019年，漸變作為顏色趨勢的最大轉變就是漸變作為重要的一項技術將與明亮的顏色進行選擇搭配。而2018年，漸變更像是一個照片疊加工具。現在，這項流行的技術已經有它自己的立足之地了。
11.復古字型/更多襯線字型
2019年最令人耳目一新的設計趨勢之一就是向更復古的排版風格轉變。
更多的襯線字型，板狀襯線字型以及文字元素，看上去有老舊的感覺。這些復古風格似乎比過去幾年流行的一些比較細的襯線字型更為加粗，厚重。
甚至一些知名品牌，如Mailchimp也已經轉向了這種復古的排版風格。
這種設計趨勢的最大誘因元素就是跨裝置的更大的螢幕解析度。曾經有人認為無襯線字型在螢幕上可讀性最高，但是感謝高清晰度和高解析度的到來，理解襯線字型已經不再是問題了。
12.可變字型
2019年，越來越多的設計師將使用可變字型使網站在跨裝置上更加可讀。
: “可變字型是主字型的集合，具有一個‘預設’主字型（通常是普通字型樣式）和多個已註冊的‘軸’，將中心主體和其它主體捆綁到一起。例如， 粗細 軸可能會將細體樣式主體連線到普通樣式主體再連線到粗體樣式主體。延軸定位的獨立樣式稱為例項。”
雖然OpenType可變字型背後的概念可能仍有些令人生畏，但它們已經開始變得更加主流。它們專為響應式設計而設計，並且可以幫助專案在不同的螢幕尺寸上看起來更加完整。
可變字型提供了你一直希望的所有靈活性。
試試下面三個可變字型:
13.專注於資料視覺化
無論在哪裡，似乎都有人將資訊圖作為設計的一部分。
視覺視覺化是向用戶呈現複雜資訊的一種更為有趣且易於理解的方式。這種視覺格式適用於從數字到地圖到理解複雜演算法的所有內容，深受使用者喜愛。它可以幫助人們理解內容，並且以多種方式工作，如作為靜止影象，滾動面板，動畫或互動遊戲。
使其更為有效運作的方式就是將你的資料轉換為故事。建立一個故事開頭，中間和結尾，以便使用者跟隨資訊旅程來徹底理解，從而獲得更長的網頁逗留時間以及更高的轉化率。
14.UX寫作
所有好的設計都有使用一些文字形式的資訊傳遞元素。隨著使用者需要真實的網頁體驗，人們越來越關注使用者體驗的編寫。
網站上所有的內容資訊都旨在幫助使用者更好的參與和連結到產品與服務上。艱難推銷的日子已經過去了，有用且實用的內容將統治天下。
良好的使用者體驗寫作對使用者來說是有用的並且受尊重的。
使用者體驗寫作如此重要是因為你沒有很多空間，時間或者文字來講述你的故事。因此，每句話都要直指人們想要閱讀的目標以及使用者結果。
15.分屏設計保持增長
你可能會跟上這裡的一個主題 - 網站設計需要適應移動端客戶。這就是分屏模式不斷湧現的原因。
分屏設計，將桌面端的螢幕分為兩個板塊內容，在較小的裝置上摺疊成垂直的內容塊，是跨裝置無縫銜接使用者體驗設計內容的最合適的方式。
雖然多數設計開始採用這種看似相似的並排螢幕，但更多的設計開始轉向內容不對稱分割。這樣可以為桌面端使用者建立更多層次結構的設計，對於更為重要的內容可以使用更大的元素。
16.手機動畫
雖然設計師已經避開在網站的移動端使用動畫，但是這裡會有一個包含動畫的動作。
視訊仍然是一個值得關注的問題，特別是iPhone使用者，裝置不能在網站上很好的渲染視訊，但是定時動畫正在逐漸普及。你甚至可能會開始在移動裝置上看到更多的滾動動效，因為移動優先的想法開始佔據上風了。
切記你網站的多數瀏覽者來自移動裝置，為什麼你不為這些使用者進行優先設計呢？
17.更多文字 (我是認真的!)
如果2019年是文字的一年，你會感到驚訝嗎？
從使用大量單詞的堆疊標題到使用少量圖片作為全部的設計，文字正在轉換為特色元素。通過正確的排版，這個趨勢會看起來很驚豔，並且可以快速向用戶提供大量資訊。沒有良好的排版，則可能使設計變得平淡無奇而且還是災難性的。
開始使用文字密集型設計的最簡單的方式就是在首頁上使用一個雙行或者三行的標題。獲取更多的空間給資訊。這裡的調整是指文字大小通常比一些流行的超大字型要小的多。記住，較小尺寸的多行文字實際上可以和較少文字的大文字字型使用相同的字型粗細。
為設計專案提供更多文字的技巧是需要使用有價值的文字。使用者需要閱讀文字。因此，要仔細規劃設計。 （不要為了寫作而寫作，要讓每個單詞都具有價值。）
（編譯完）
重點關注：#情感化設計 #語音介面設計 #UX寫作 #可變字型
原文作者： Carrie Cousins
原文連結： 地址
以上譯文僅代表原作者觀點。如需轉載請遵循 CC版權協議 正確標明出處。
