TCC翻譯情報局 - 今年大家都在看的15+設計趨勢－鑽石舞台

▲點擊 "TCC翻譯情報局"關注，回復 "社群" 加入我們

本文共 4899字，預計閱讀 13 分鐘

TCC 情報局的第 167篇乾貨分享

2022年的第 65篇

TCC 推薦：大家好，這裡是 TCC 翻譯情報局，我是李澤慧。讀它！這篇文章幾乎囊括了最近最新大部分的設計趨勢，大量的圖片和簡單易懂的文字解釋幾乎是用一種窮舉法的文章結構來講述各種設計方法。希望這篇文章可以給到大家一些新的設計靈感。如果再可以為大家的日常工作生活增加些許趣味性，我想作者和我都會很開心的。

一般網站的平均壽命只有三年。像是顏色或是排版字體之類的迭代甚至比這個時間更快。這就是為啥時刻注意網站設計趨勢是如此的重要。關注這些趨勢能幫助我們每天在自己的設計上做一點小小的變化以保證我們不要與社會脫節。

閱讀這篇設計趨勢指導，你可以學習吸收一些新的設計趨勢，並在未來的設計工作中發揚光大。

1.文字排版設計為主的首屏 Banner1.Type Only Heroes

圖片和視頻不是完美的，漂亮的字體設計永遠是被需要的。這一設計趨勢將關注點放在字體設計如何幫助呈現更好的設計效果上。

但頁面首屏只有一些色塊和文字元素的時候，這意味着設計必須將關注點放在「什麼信息是用戶需要立即從頁面中提取到的」。

漂亮的字體組合和字體設計如何一起和諧工作將成為這一趨勢的重點。所有的信息需要有很高的可閱讀性，並且字體上需要注意不要太過巨大。

尋找一些非襯線字體或者是一些閱讀性高的新奇字體，將它們和一些中立且更有影響力的內容相組合。

Try it: Causten Font Family

2. 影像式主頁2. Cinema-Style Homepage

和上一個趨勢完完全全相反的是影像式主頁：主頁由滿屏的圖像配合微量的其他元素來敘述故事。

這種設計風格會讓用戶沉浸其中，覺得自己是視頻中的一份子。其他的元素 —— 從文字元素到導航，通常會以非常小的尺寸縮在屏幕的角落裡以提供更多的空間給視頻展示。

這裡還有另外一件事很多這樣的項目都會遇到：他們同時使用一些影片特效，例如慢動作、畫中畫或者其他特效使得影片或視頻看上去更加特殊。

Try it: Slow Beats Slides Opener

3. 格子和方塊3. Grids and Blocks

不管是內容豐富或缺少藝術氛圍元素的排版需求，都可以通過加入塊狀或格子花紋來幫助所有的信息組合到一起。

有趣的是這種趨勢可以帶來很多設計樣式，不論是用最少量大格子元素和文字組合（如上圖）或者將格子與複雜的視覺圖片組合在一起（如下圖）都是可以的。

思考如何將格子和塊狀因素組合在一起幫助整合視覺信息是設計這種風格的重點。使用設計去創造額外的點擊元素、信息觸點，或者是其他一些可以讓用戶和網頁之間進行交互的因素。

Try it: Grid Shape Masks

4.暗夜和白日模式4. Light/Dark Mode Toggle

你可能已經知道了，可以在白日與暗夜模式中隨意切換是很受歡迎的一種設計風格。現在大部分的手機允許用戶操控核心視覺變化，這種感覺令用戶覺得很棒。將這種切換加入網站可以提升用戶體驗。

記住當你切換至暗夜或白日模式的時候，只是將黑變成白或者將白變成黑是完全不夠的。你的設計計劃需要為兩種模式做兩套色盤。

Try it: Fitness Statistics Mobile App Kit

5. 時尚分屏設計5. Modern Split Screens

分屏設計正在不斷的發展進化中

時尚分屏可以提供更多的交互性並鼓勵用戶參與其中，這點非常棒。上面的例子很好地表現了如何使用這種帶有視頻和三維效果的互動元素來展示設計美學。

設計這個風格的技巧就是要讓他先成為你的風格。分屏可以提供給用戶這樣或那樣的各種交互選擇或者僅僅是簡單的在文字和圖片元素之間製造一種視覺平衡。

Try it: Split IOS UI Kit

6.「無名英雄」交互動效6.Off-Screen Elements

有的時候讓設計變得有趣的東西都是藏在幕後的，就像是只有用戶進行交互才會出現的動效。

更多的交互動效也是今年的設計趨勢之一。圖片、文字或其他元素在用戶進行頁面交互時候在屏幕內外隨着用戶操作而移動、消失或展現。鼠標懸停或滾動時，動效反饋變得更為即時。

這件事更好的鼓勵網站瀏覽者實實在在的觀測動作，並思考動作的意義和結果。反過來，過於複雜的交互動效會使得網站上一些其他信息被忽視。因此，這種趨勢最適用於易於理解的簡單元素。

Try it: Lewis-Creative Portfolio & Agency HTML Template

7. 實驗性字體設計7.Experimental Typefaces

新的、不同的、有意思的、奇特的字體設計可以推動設計去向更高的層級。越來越多的項目設計將關注點放在字體設計上，試驗性字體設計成為了一個必須的工具。

試驗性字體設計的重點在於：他們是不同的。有些可能是設計師製作到一半便停止的設計，或者乾脆是用戶自研的。

你可能會看到一些超出你想象的圖形或線、三維設計字體、動效或顏色，並感覺他們非常與眾不同。用實驗性字體來設計大屏的首頁，首屏廣告位宣傳語將會有非常不錯的效果，但是他們並不適用於需要高可閱讀性的段落性文案或小方塊內的文案，例如操作指引性按鈕。

Try it: Exa Metline Font

8. 元素的相互疊加8. Overlapping Design Elements

設計元素並不一定要待在一個固定的框裡，他們可以互相遮擋、疊加。

就像是提供了一條引導視線的路徑一般，重疊設計創造了畫面的景深和立體感。

以下是這個設計趨勢的重點：你需要創造這些元素並保持他們的可閱讀性並拼接在一起，同時你需要使得他們始終保持較高的可閱讀性，即使是在移動端設備上。否則，這個設計趨勢的重要性將迅速下降。

Try it: Tourist Guide Card Widget

9.極簡美學9. Super Minimal Aesthetics

一個乾淨的首頁可以幫助用戶思考更多設計背後的故事。極簡美學，特別是對於首頁設計而言，是今年的重要趨勢。

如上下圖所示：無論說是乾淨的二維背景上僅有字段展示，或圖片和視頻加上僅僅一個標題，甚至連導航也沒有的樣式都可以算作極簡美學的範疇。

極簡美學幾乎把一切都從設計中剝離出來。這個設計趨勢看上去非常的流線型且簡單，但真正想要運用好也是在冒險，因為它能展示的互動太少。

Try it: Vinero Very Clean and Minimal Portfolio WordPress Theme

10. 字體設計：實色&空心10. Typography Featuring Fills and Outlines

將實色和空心字體結合起來做設計（通常是在同一個頁面中）可以發揮最大作用。

這個設計趨勢可以是有交互的頁面也可以是單純的展示頁面。用上面這個網站來舉例：它使用了實心字體作為鼠標懸停樣式來告知用戶這個元素是可以點擊的，同時空心字體則為默認無鼠標懸停樣式。

這個結果非常有趣，你可以使用一些好玩的字體效果來設計這種交互動效。另外，因為你用同一個字體做了兩種不同的設計樣式，這也使得頁面產生了一些微妙的化學反應。

Try it: Visia Duo (Natural and Outline) Typeface

11. 大量的「小耳朵」「小尾巴」11. So Many Serifs

襯線字體 —— 曾因為可閱讀性差而被認為是網站上最不適合使用的字體，現在隨處可見。「小短耳朵和小短尾巴」襯線字體進化成「長耳朵」「長尾巴」，這種字體就是天生為閱讀而設計的。

這一趨勢的最大貢獻者可能是高分辨率屏幕（以及它們在市場上的主導地位）。由於高清晰度屏幕的出現，「小耳朵」「小尾巴」不會再出現模糊或都抖動的情況了。

現在襯線字體和大部分現代、中間字體樣式一樣可以完美的工作了，已經可以和無襯線字體一樣可以顯示文本和正文了。

Try this: Aaron Serif Font Family

12.留白設計12. Exaggerated White Space

極簡設計比起留白設計而言還是複雜了些，大量的留白設計使得頁面更加簡約。

留白設計最受歡迎的原因就是大面積的留白能讓人更關注於對重點的設計。留白不是單純的只有空白，而是被某物占據的余白。

空白空間同樣也展現出了美學和古典感，可以適用於各種項目的設計。

13. 微動效13. Micro-Animations

感謝 Ins 上這些酷炫的 gif，網站上貼紙風格的 gif 也因此有了更多變化的可能性。

即使是你意想不到的網站，比如上面的電子商務設計，也會用這樣的設計來吸引用戶注意。微動效可以是任何的元素，它可以是從屏幕上彈出的微小圖像到移動的文本元素的任何內容。

Try it: Simple Text Rotator WordPress Plugin

14.更多的使用視頻14. Video Everything

如果你還沒有開始在網頁設計理使用視頻元素，今年應該是個好機會開始使用了。視頻能包含大量的內容，而且現在隨時隨地的觀看視頻越來越成為一個趨勢了。

看看上圖這種會變化的背景設計 —— 視頻已經成為網站設計的一部分了，這種故事敘述手法已經成為未來的一個趨勢。不可否認的是：用戶喜歡這個。從這個角度而言，在設計中使用更多視頻已經是一個可以確定的設計趨勢了，它會變得越來越受歡迎。（因為娛樂至上吧，人在閱讀視頻時候視頻把大量的內容直接淺顯的印入你的腦子，還沒有時間思考，視頻會帶着你前往下一個內容，刷刷抖音就40分鐘過去了呢。）

Try it: Photo/Video Slideshow Template