在創意產業中，我們很容易就能從趨勢中獲利，畢竟關注熱點并不需要創意或是創新——除非你是為了不斷地改變趨勢。

但創意是一種對話。

自從我們第一次學會用木炭在洞穴壁上的赭石記錄世界的片段以來，這種對話就一直在進行。我們還學會了把僅僅是用棍子刻在粘土上的抽象符號，變成了承載著充分含義的載體——語言。

趨勢僅僅只是龐雜而混亂的多方談話中的主音，無論是否應用趨勢，我們的創造都與這些趨勢并存。

趨勢為我們提供了大背景，畢竟如果沒有規范，又何從定義創新？如果沒有去年的熱點潮流，又從哪里尋找規范？

所以和去年一樣，我和webflow優秀的設計團隊一起，預測了2018年的設計趨勢。

以下來自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

1.破碎的網格布局

設計師總是無盡地去追求更具創意、更引人入勝的布局，但在這個過程中網格布局一直廣受運用，網格布局能帶來和諧和規范的感覺，但網格本身就存在約束。

有時候我們自己都想逃離網格的規范性，對吧！

但這并不意味著破碎的網格布局完全忽略了網格的概念，相反，破碎格局允許圖像和文本元素更自由地出現，而在更規范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開始重疊和匯合，位圖和字體的并置往往都會出現美麗的意外。

有時候很難說這些效果是故意的，還是只是一個美麗的錯誤…

2.將插圖放在中心位置

我在數字產品營銷領域所看到的一個比較有趣的挑戰就是選擇合適的圖像。我看到過整個設計團隊針對這一議題進行討論，并且通常結束于兩點之一：

1.產品UI（用戶界面）截圖及動圖

2.設計過的或是生活化的攝影

前者強調產品本身的體驗、特征及功能，而后者則試圖強調產品的人性層面：它對生活的影響。

進入2018年后，我們可以看到并將繼續看到，在產品的設計和營銷方面，插畫師的工作越來越受重視。

我對這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們在時尚界所看到周期性相同，畢竟插畫在整個60年代后期一直占據著廣告界的主導地位。

或者，Dropbox的設計團隊可以通過解釋他們的新插畫風格來解決問題：

我們用鉛筆構建草圖，然后用豐富多彩、抽象的形狀來填充，將創意變為現實。我們的風格的靈感來源于你第一次有想法的瞬間，這種風格也在提醒我們，除非你有所行動，否則畫布上只有空白。

我想，這就是說，他們必須重新設計一些東西，對吧？

在Shopify的Polaris網站中可以看到，插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作，Shopify就闡述了Polaris的概念—就像北極星一樣，為團隊中的每一位成員指明方向。

最后，值得注意的是，插圖也可以巧妙地解決攝影帶來的一些具有代表性的問題。

我們為大眾提供數字產品，但當我們將一張真人攝影作品放在網站上的顯著位置時，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。

相比之下，Shopify Polaris的插畫主角形象僅僅只是個人類，并不能確定諸如種族、性別、國際等屬性，這使得我們更容易地將自己代入這樣的場景中，就像我們自己就是一個獨立地思考者，思考這北極星所照亮的創造的可能性。

3.野蠻主義達到主流地位

2017年初，我們發表了一篇文章，談及野蠻主義的興起，并試圖回答出現新興風格的原因：

野蠻主義……正在開啟一個設計師想做什么就可以做的空間，這甚至超出了應該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實踐列表上的東西，以支持震撼的外觀和效果，有時甚至帶有一些攻擊性。

所以你可以想象，當這兩個電子商務網站都坐上這股粗獷潮流的列車時，我們有多驚訝。

Balenciaga

Gucci

4.更多有機和傾斜的形狀

大自然厭惡直線。——William Kent

近幾年來，無論是網頁端還是移動端的設計都是由卡片式的用戶界面占據主導地位。直到現在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎的幾何形狀，使得大家去關注網頁設計的基礎材料。

這在2017年有了很大的改變，現在，從谷歌到推特再到臉書，幾乎每一個應用的卡片都應用了圓角，比如輸入框、頭像框等。

如果這些框都是圓角的，他們就會是橢圓形的。

但這并不是有機形狀的主要組成元素。現在的背景設計往往有很多顏色各異的變形斑點，略夸張的對角線，即使是我們平時所用的破折號也會被卡通化。

但在無盡的探索中，設計師總不能僅僅只是運用靈活的曲線，很多人都會把卡片旋轉一些角度，運用角度來進行設計，就像Stripe的主頁一樣。

但這并不意味著直角將會在設計中消失。在下圖中，我們可以看到直線和直角的運用，不過是把它們與更多的曲線、球形有機地結合在了一起。

在許多網站，我們都能看到閃爍或是振動的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是，在可訪問性的層面上，顏色組合的使用可能會出現一些問題。

通常我們都將可訪問性作為為殘障人士所做的用戶友好行為，但不要忘記，即使是不存在色覺障礙的人也可能會遇到令人眼花繚亂的色彩組合。

不開玩笑，當這些形狀滾動起來，你就會看到你的屏幕上全是這些東西了。

根據LinkedIn的無障礙工程經理Jennison Asuncion的說法，可訪問性可以定義為：

設計和開發包括殘疾人在內的每個人都可以獨立使用和互動的用戶界面。

5.更普遍的交互和動畫

媒介就是信息。–Marshall McLuhan

網頁并不是一個靜態媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實性，但網頁上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網頁信息在于網頁的變化和交互：網頁不能只是簡單地向我們提供信息，而應該是讓信息生動起來，更重要的是，讓我們與這些信息進行交互并對之產生影響。

有的信息都在移動，但這并不影響集中注意力。

漸漸地，當你滾動網頁滑塊時，一塊一塊的信息并不僅僅只是被你接受了，還會影響你的認知，并且企圖得到你更多的關注。

顯然，我們也不能濫用這種生動，會使得網頁看起來像動畫一樣，要小心這會影響你的用戶體驗，尤其是那些有認知障礙或對運動敏感的人。

但不能否認，恰當的小動畫能夠在恰當的時間引導用戶注意正確的內容，從而使得他們不會錯過重要的信息，或是訪問其他頁面。

以Black Sheep的Heco Partners為例，向下滾動時，標黑的當前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭奪用戶的注意，呼吁停止閱讀并點擊下一頁。這是創建一個內聯導航系統的創造性方案，但這也可能給用戶帶來了不必要的緊張感。

我們也可以看到很多工具可以簡化復雜動畫和交互的創建—這是數字設計是工具包中的一個缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來。

具體而言，我們期待兩種特定的動畫模式的出現：不尋常的滑動速率和頁面轉換。

意外的滑動率

現在視差可能有些過時了，但這并不意味著設計師們不會以有趣的方式來設計滑動。

例如網站Anna Eshwood，網站上的每一張照片一開始都是正常的展示，直到用戶下拉滑塊滑過后，照片都會快速上升，比滑塊滑動速度快，營造出一種有趣的飄渺感，可以很好地展現簡樸的黑白照片和嚴肅的模型。

隨著交互和動畫在在線體驗中更為突出，我們也期望看到更多的設計師設計出更具突破性的作品。

頁面轉換

在一個充滿好看動畫的網站中，我們能感知到，網頁上正在發生一些變化，但如果是從一個頁面轉換到另一個頁面，就會比較唐突了，無論是在哪個網站上。

轉換動畫可能會有所用處，它能將用戶從一個頁面送走，再在另一個新頁面上迎接。不過要謹慎運動轉換動畫，也沒有必要鏈接它們。這個過渡本身就是每一個頁面之間的轉換：頁面突然變為一片空白，然后再有新的頁面加載。

但我們發現在這一點上，很多網站都搞了一些事情。以網站3drops為例：

在這里，頁面轉換時依舊保證了用戶的體驗，體現了品牌的存在。當用戶想要訪問是視圖庫中的另一視圖時，髕骨是被導航到了新的頁面。這對于以設計為中心的品牌展示來說，是一個不錯的點子。

6.至多主義的出現

好的設計盡可能少設計。–Dieter Rams

多年來，設計師最想聽到的最振奮人心的設計反饋，恐怕就是：他很干凈。

那是一個極簡主義的時代。深受Dieter Rams的設計原則，以及雜志《The Crystal Goblet》的影響，視覺設計師一直追求提供盡可能少的選擇和視覺干擾。

對于當今生活在數字中的世界來說，極簡主義是一個全新且難得的經歷，這個選擇很有意義。我們需要足夠放松以進入這個陌生的新世界。

但是今天，我們也有類似于以下的網站：

Pin-Up Magazine

H. Lorenzo

Razzle Dazzle Torino

所有的這些都力圖在你看到的那一刻就把所有東西都放入你的世界里。

你可以稱之為一種野蠻主義，我也的確在Brutalist網站上發現了所有上述網站。但我們認為我們期待更多至多主義的網站的出現，而在這之前你可能并不覺得這個網站會變成這樣。隨著數字技術的發展，一些網站會很自然的對用戶有更高的期待。

7.襯線字體能表現得更好

在技術落后，字體并不多的糟糕過去，在網頁界面中使用無襯線字體是個很好的方法。但隨著屏幕和字體渲染技術得進步，我們可以看到越來越多精致得字體占據舞臺中心，或者至少成為了更重要的角色。

以Kickstarter最新的設計為例，他運用了柔和的襯線：

或者是大膽的標題：

在特定的日子里，Typewolf都會展示一些襯線的運用：

襯線能提供一種優雅、精致的文學修飾效果，作為襯線的長期愛好者，我歡迎大家多多使用襯線。

8.浮動的導航菜單

固定的導航已經成為以轉化為中心或具有龐大菜單的網站的主流，因為核心導航可在滑動時與用戶保持一致。不過浮動的導航使得用戶在滑動瀏覽時也能輕松使用，直接優化了網站體驗。

最近，我們注意到有些設計師將導航從其他設計中分離出來，并將其移動到瀏覽器的下方，進一步確定了用戶可以隨時接觸到導航。這增強了導航是網站的廣泛對象的感覺，不一定是某一頁的一個部分，而是放在一個觸手可及的地方，使人安心。

最直觀的方法就是在導航欄中添加陰影，并將其移動到網頁的最頂端，以Reseau為例。但在平面的設計中也是可行的，以Anchor & Orbit為例。

與離線型設計類似，浮動的導航允許設計師在設計中自然地或帶有目的性地運用巧妙的并置，這又給設計帶來了更多的空間。

9.視頻元素

當你想用可視格式傳達復雜的信息時，靜態圖像往往都難以達到效果。畢竟，復雜性需要時間來表現，而一個用戶界面上的靜態圖像只會告訴你圖片上的內容，而不是如何使用。

以下是幾點重要的原因：

1.視頻元素可以無縫地切入設計中，無需嵌入Youtube或是Vimeo插件。

2.即使有很多顏色，漸變和細節，視頻地質量依然很高，但如果GIF動圖不按大小以指數倍數放大，則很難做到。

3.視頻可以循環以確保副本的細節和圖像的細節保持一致，并為有需要的人重復播放。

所以從我們自己的網站到Stripe Sigma，當視頻元素風靡整個網絡時，我們并不感到奇怪。

10.更多身臨其境的多媒體長格式

當我們想要發布長格式的內容時，只需在頁面上放置一個長文本字段，特別是當我們的長格式內容有CMS支持時。其中，單個布局的內容長度大概為200字到一篇較為詳細的短教程的長度。

但現在一些設計師和作家并不采用這種方法，他們將布局和量身定制的副本結合起來，通過視頻、聲音、圖表和圖形、地圖等豐富的載體，娓娓道來故事的內容。

說實話，這并不是一個新趨勢，我更傾向于把它稱為網絡產生長期對話的基石。但現在所有的網絡出版工具都出現了，包括我們在內，2018年似乎都是最佳時機。

以CNN講述全球變暖對格陵蘭島和全世界其他地區的影響為例。

這個故事盡可能地做到引人入勝，這對于很多還較為抽象