在創(chuàng)意產(chǎn)業(yè)中，我們很容易就能從趨勢中獲利，畢竟關(guān)注熱點并不需要創(chuàng)意或是創(chuàng)新——除非你是為了不斷地改變趨勢。但創(chuàng)意是一種對話。
自從我們第一次學會用木炭在洞穴壁上的赭石記錄世界的片段以來，這種對話就一直在進行。我們還學會了把僅僅是用棍子刻在粘土上的抽象符號，變成了承載著充分含義的載體——語言。
趨勢僅僅只是龐雜而混亂的多方談話中的主音，無論是否應用趨勢，我們的創(chuàng)造都與這些趨勢并存。
趨勢為我們提供了大背景，畢竟如果沒有規(guī)范，又何從定義創(chuàng)新？如果沒有去年的熱點潮流，又從哪里尋找規(guī)范？
所以和去年一樣，我和webflow優(yōu)秀的設計團隊一起，預測了2018年的設計趨勢。以下來自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。
1
破碎的網(wǎng)格布局
設計師總是無盡地去追求更具創(chuàng)意、更引人入勝的布局，但在這個過程中網(wǎng)格布局一直廣受運用，網(wǎng)格布局能帶來和諧和規(guī)范的感覺，但網(wǎng)格本身就存在約束。
有時候我們自己都想逃離網(wǎng)格的規(guī)范性，對吧！
但這并不意味著破碎的網(wǎng)格布局完全忽略了網(wǎng)格的概念，相反，破碎格局允許圖像和文本元素更自由地出現(xiàn)，而在更規(guī)范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開始重疊和匯合，位圖和字體的并置往往都會出現(xiàn)美麗的意外。
有時候很難說這些效果是故意的，還是只是一個美麗的錯誤…
2
將插圖放在中心位置
我在數(shù)字產(chǎn)品營銷領域所看到的一個比較有趣的挑戰(zhàn)就是選擇合適的圖像。我看到過整個設計團隊針對這一議題進行討論，并且通常結(jié)束于兩點之一：
1.產(chǎn)品UI（用戶界面）截圖及動圖
2.設計過的或是生活化的攝影
前者強調(diào)產(chǎn)品本身的體驗、特征及功能，而后者則試圖強調(diào)產(chǎn)品的人性層面：它對生活的影響。
進入2018年后，我們可以看到并將繼續(xù)看到，在產(chǎn)品的設計和營銷方面，插畫師的工作越來越受重視。
我對這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們在時尚界所看到周期性相同，畢竟插畫在整個60年代后期一直占據(jù)著廣告界的主導地位。
或者，Dropbox的設計團隊可以通過解釋他們的新插畫風格來解決問題：
我們用鉛筆構(gòu)建草圖，然后用豐富多彩、抽象的形狀來填充，將創(chuàng)意變?yōu)楝F(xiàn)實。我們的風格的靈感來源于你第一次有想法的瞬間，這種風格也在提醒我們，除非你有所行動，否則畫布上只有空白。
我想，這就是說，他們必須重新設計一些東西，對吧？
在Shopify的Polaris網(wǎng)站中可以看到，插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作，Shopify就闡述了Polaris的概念—就像北極星一樣，為團隊中的每一位成員指明方向。
最后，值得注意的是，插圖也可以巧妙地解決攝影帶來的一些具有代表性的問題。
我們?yōu)榇蟊娞峁⿺?shù)字產(chǎn)品，但當我們將一張真人攝影作品放在網(wǎng)站上的顯著位置時，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。
相比之下，Shopify Polaris的插畫主角形象僅僅只是個人類，并不能確定諸如種族、性別、國際等屬性，這使得我們更容易地將自己代入這樣的場景中，就像我們自己就是一個獨立地思考者，思考這北極星所照亮的創(chuàng)造的可能性。
3
野蠻主義達到主流地位
2017年初，我們發(fā)表了一篇文章，談及野蠻主義的興起，并試圖回答出現(xiàn)新興風格的原因：
野蠻主義……正在開啟一個設計師想做什么就可以做的空間，這甚至超出了應該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實踐列表上的東西，以支持震撼的外觀和效果，有時甚至帶有一些攻擊性。
所以你可以想象，當這兩個電子商務網(wǎng)站都坐上這股粗獷潮流的列車時，我們有多驚訝。
Balenciaga
Gucci
4
更多有機和傾斜的形狀
大自然厭惡直線�！猈illiam Kent
近幾年來，無論是網(wǎng)頁端還是移動端的設計都是由卡片式的用戶界面占據(jù)主導地位。直到現(xiàn)在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎的幾何形狀，使得大家去關(guān)注網(wǎng)頁設計的基礎材料。
這在2017年有了很大的改變，現(xiàn)在，從谷歌到推特再到臉書，幾乎每一個應用的卡片都應用了圓角，比如輸入框、頭像框等。
如果這些框都是圓角的，他們就會是橢圓形的。
但這并不是有機形狀的主要組成元素�，F(xiàn)在的背景設計往往有很多顏色各異的變形斑點，略夸張的對角線，即使是我們平時所用的破折號也會被卡通化。
但在無盡的探索中，設計師總不能僅僅只是運用靈活的曲線，很多人都會把卡片旋轉(zhuǎn)一些角度，運用角度來進行設計，就像Stripe的主頁一樣。
但這并不意味著直角將會在設計中消失。在下圖中，我們可以看到直線和直角的運用，不過是把它們與更多的曲線、球形有機地結(jié)合在了一起。
在許多網(wǎng)站，我們都能看到閃爍或是振動的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是，在可訪問性的層面上，顏色組合的使用可能會出現(xiàn)一些問題。
通常我們都將可訪問性作為為殘障人士所做的用戶友好行為，但不要忘記，即使是不存在色覺障礙的人也可能會遇到令人眼花繚亂的色彩組合。
不開玩笑，當這些形狀滾動起來，你就會看到你的屏幕上全是這些東西了。
根據(jù)LinkedIn的無障礙工程經(jīng)理Jennison Asuncion的說法，可訪問性可以定義為：
設計和開發(fā)包括殘疾人在內(nèi)的每個人都可以獨立使用和互動的用戶界面。
5
更普遍的交互和動畫
媒介就是信息。–Marshall McLuhan
網(wǎng)頁并不是一個靜態(tài)媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實性，但網(wǎng)頁上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網(wǎng)頁信息在于網(wǎng)頁的變化和交互：網(wǎng)頁不能只是簡單地向我們提供信息，而應該是讓信息生動起來，更重要的是，讓我們與這些信息進行交互并對之產(chǎn)生影響。
有的信息都在移動，但這并不影響集中注意力。
漸漸地，當你滾動網(wǎng)頁滑塊時，一塊一塊的信息并不僅僅只是被你接受了，還會影響你的認知，并且企圖得到你更多的關(guān)注。
顯然，我們也不能濫用這種生動，會使得網(wǎng)頁看起來像動畫一樣，要小心這會影響你的用戶體驗，尤其是那些有認知障礙或?qū)\動敏感的人。
但 不能否認，恰當?shù)男赢嬆軌蛟谇‘數(shù)臅r間引導用戶注意正確的內(nèi)容，從而使得他們不會錯過重要的信息，或是訪問其他頁面。
以Black Sheep的Heco Partners為例，向下滾動時，標黑的當前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭奪用戶的注意，呼吁停止閱讀并點擊下一頁。這是創(chuàng)建一個內(nèi)聯(lián)導航系統(tǒng)的創(chuàng)造性方案，但這也可能給用戶帶來了不必要的緊張感。
我們也可以看到很多工具可以簡化復雜動畫和交互的創(chuàng)建—這是數(shù)字設計是工具包中的一個缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來。
具體而言，我們期待兩種特定的動畫模式的出現(xiàn)：不尋常的滑動速率和頁面轉(zhuǎn)換。
意外的滑動率
現(xiàn)在視差可能有些過時了，但這并不意味著設計師們不會以有趣的方式來設計滑動。
例如網(wǎng)站Anna Eshwood，網(wǎng)站上的每一張照片一開始都是正常的展示，直到用戶下拉滑塊滑過后，照片都會快速上升，比滑塊滑動速度快，營造出一種有趣的飄渺感，可以很好地展現(xiàn)簡樸的黑白照片和嚴肅的模型。
隨著交互和動畫在在線體驗中更為突出，我們也期望看到更多的設計師設計出更具突破性的作品。
頁面轉(zhuǎn)換
在一個充滿好看動畫的網(wǎng)站中，我們能感知到，網(wǎng)頁上正在發(fā)生一些變化，但如果是從一個頁面轉(zhuǎn)換到另一個頁面，就會比較唐突了，無論是在哪個網(wǎng)站上。
轉(zhuǎn)換動畫可能會有所用處，它能將用戶從一個頁面送走，再在另一個新頁面上迎接。不過要謹慎運動轉(zhuǎn)換動畫，也沒有必要鏈接它們。這個過渡本身就是每一個頁面之間的轉(zhuǎn)換：頁面突然變?yōu)橐黄瞻祝缓笤儆行碌捻撁婕虞d。
但我們發(fā)現(xiàn)在這一點上，很多網(wǎng)站都搞了一些事情。以網(wǎng)站3drops為例：
在這里，頁面轉(zhuǎn)換時依舊保證了用戶的體驗，體現(xiàn)了品牌的存在。當用戶想要訪問是視圖庫中的另一視圖時，髕骨是被導航到了新的頁面。這對于以設計為中心的品牌展示來說，是一個不錯的點子。
全部評論