‍‍

    在創(chuàng)意產(chǎn)業(yè)中，我們很容易就能從趨勢(shì)中獲利，畢竟關(guān)注熱點(diǎn)并不需要?jiǎng)?chuàng)意或是創(chuàng)新——除非你是為了不斷地改變趨勢(shì)。但創(chuàng)意是一種對(duì)話。

    自從我們第一次學(xué)會(huì)用木炭在洞穴壁上的赭石記錄世界的片段以來(lái)，這種對(duì)話就一直在進(jìn)行。我們還學(xué)會(huì)了把僅僅是用棍子刻在粘土上的抽象符號(hào)，變成了承載著充分含義的載體——語(yǔ)言。

    趨勢(shì)僅僅只是龐雜而混亂的多方談話中的主音，無(wú)論是否應(yīng)用趨勢(shì)，我們的創(chuàng)造都與這些趨勢(shì)并存。  

    趨勢(shì)為我們提供了大背景，畢竟如果沒(méi)有規(guī)范，又何從定義創(chuàng)新？如果沒(méi)有去年的熱點(diǎn)潮流，又從哪里尋找規(guī)范？

    所以和去年一樣，我和webflow優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)一起，預(yù)測(cè)了2018年的設(shè)計(jì)趨勢(shì)。以下來(lái)自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

    1

    破碎的網(wǎng)格布局

    設(shè)計(jì)師總是無(wú)盡地去追求更具創(chuàng)意、更引人入勝的布局，但在這個(gè)過(guò)程中網(wǎng)格布局一直廣受運(yùn)用，網(wǎng)格布局能帶來(lái)和諧和規(guī)范的感覺(jué)，但網(wǎng)格本身就存在約束。

    有時(shí)候我們自己都想逃離網(wǎng)格的規(guī)范性，對(duì)吧！

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

    有時(shí)候很難說(shuō)這些效果是故意的，還是只是一個(gè)美麗的錯(cuò)誤…

    2

    將插圖放在中心位置

    我在數(shù)字產(chǎn)品營(yíng)銷領(lǐng)域所看到的一個(gè)比較有趣的挑戰(zhàn)就是選擇合適的圖像。我看到過(guò)整個(gè)設(shè)計(jì)團(tuán)隊(duì)針對(duì)這一議題進(jìn)行討論，并且通常結(jié)束于兩點(diǎn)之一：

    1.產(chǎn)品UI（用戶界面）截圖及動(dòng)圖

    2.設(shè)計(jì)過(guò)的或是生活化的攝影

    前者強(qiáng)調(diào)產(chǎn)品本身的體驗(yàn)、特征及功能，而后者則試圖強(qiáng)調(diào)產(chǎn)品的人性層面：它對(duì)生活的影響。

    進(jìn)入2018年后，我們可以看到并將繼續(xù)看到，在產(chǎn)品的設(shè)計(jì)和營(yíng)銷方面，插畫師的工作越來(lái)越受重視。

    我對(duì)這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們?cè)跁r(shí)尚界所看到周期性相同，畢竟插畫在整個(gè)60年代后期一直占據(jù)著廣告界的主導(dǎo)地位。

    或者，Dropbox的設(shè)計(jì)團(tuán)隊(duì)可以通過(guò)解釋他們的新插畫風(fēng)格來(lái)解決問(wèn)題：

    我們用鉛筆構(gòu)建草圖，然后用豐富多彩、抽象的形狀來(lái)填充，將創(chuàng)意變?yōu)楝F(xiàn)實(shí)。我們的風(fēng)格的靈感來(lái)源于你第一次有想法的瞬間，這種風(fēng)格也在提醒我們，除非你有所行動(dòng)，否則畫布上只有空白。

    我想，這就是說(shuō)，他們必須重新設(shè)計(jì)一些東西，對(duì)吧？

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

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

    我們?yōu)榇蟊娞峁��?shù)字產(chǎn)品，但當(dāng)我們將一張真人攝影作品放在網(wǎng)站上的顯著位置時(shí)，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒(méi)有被定義的用戶。

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

    3

    野蠻主義達(dá)到主流地位

    2017年初，我們發(fā)表了一篇文章，談及野蠻主義的興起，并試圖回答出現(xiàn)新興風(fēng)格的原因：

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

    所以你可以想象，當(dāng)這兩個(gè)電子商務(wù)網(wǎng)站都坐上這股粗獷潮流的列車時(shí)，我們有多驚訝。

    Balenciaga

    Gucci

    4

    更多有機(jī)和傾斜的形狀

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

    近幾年來(lái)，無(wú)論是網(wǎng)頁(yè)端還是移動(dòng)端的設(shè)計(jì)都是由卡片式的用戶界面占據(jù)主導(dǎo)地位。直到現(xiàn)在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎(chǔ)的幾何形狀，使得大家去關(guān)注網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)材料。

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

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

    但這并不是有機(jī)形狀的主要組成元素。現(xiàn)在的背景設(shè)計(jì)往往有很多顏色各異的變形斑點(diǎn)，略夸張的對(duì)角線，即使是我們平時(shí)所用的破折號(hào)也會(huì)被卡通化。

    但在無(wú)盡的探索中，設(shè)計(jì)師總不能僅僅只是運(yùn)用靈活的曲線，很多人都會(huì)把卡片旋轉(zhuǎn)一些角度，運(yùn)用角度來(lái)進(jìn)行設(shè)計(jì)，就像Stripe的主頁(yè)一樣。

    但這并不意味著直角將會(huì)在設(shè)計(jì)中消失。在下圖中，我們可以看到直線和直角的運(yùn)用，不過(guò)是把它們與更多的曲線、球形有機(jī)地結(jié)合在了一起。

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

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

    不開玩笑，當(dāng)這些形狀滾動(dòng)起來(lái)，你就會(huì)看到你的屏幕上全是這些東西了。

    根據(jù)LinkedIn的無(wú)障礙工程經(jīng)理Jennison Asuncion的說(shuō)法，可訪問(wèn)性可以定義為：

    設(shè)計(jì)和開發(fā)包括殘疾人在內(nèi)的每個(gè)人都可以獨(dú)立使用和互動(dòng)的用戶界面。

    5

    更普遍的交互和動(dòng)畫

    媒介就是信息。–Marshall McLuhan

    網(wǎng)頁(yè)并不是一個(gè)靜態(tài)媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實(shí)性，但網(wǎng)頁(yè)上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網(wǎng)頁(yè)信息在于網(wǎng)頁(yè)的變化和交互：網(wǎng)頁(yè)不能只是簡(jiǎn)單地向我們提供信息，而應(yīng)該是讓信息生動(dòng)起來(lái)，更重要的是，讓我們與這些信息進(jìn)行交互并對(duì)之產(chǎn)生影響。

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

    漸漸地，當(dāng)你滾動(dòng)網(wǎng)頁(yè)滑塊時(shí)，一塊一塊的信息并不僅僅只是被你接受了，還會(huì)影響你的認(rèn)知，并且企圖得到你更多的關(guān)注。

    顯然，我們也不能濫用這種生動(dòng)，會(huì)使得網(wǎng)頁(yè)看起來(lái)像動(dòng)畫一樣，要小心這會(huì)影響你的用戶體驗(yàn)，尤其是那些有認(rèn)知障礙或?qū)�運(yùn)動(dòng)敏感的人。

但    不能否認(rèn)，恰當(dāng)?shù)男��?dòng)畫能夠在恰當(dāng)?shù)臅r(shí)間引導(dǎo)用戶注意正確的內(nèi)容，從而使得他們不會(huì)錯(cuò)過(guò)重要的信息，或是訪問(wèn)其他頁(yè)面。

    以Black Sheep的Heco Partners為例，向下滾動(dòng)時(shí)，標(biāo)黑的當(dāng)前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭(zhēng)奪用戶的注意，呼吁停止閱讀并點(diǎn)擊下一頁(yè)。這是創(chuàng)建一個(gè)內(nèi)聯(lián)導(dǎo)航系統(tǒng)的創(chuàng)造性方案，但這也可能給用戶帶來(lái)了不必要的緊張感。

    我們也可以看到很多工具可以簡(jiǎn)化復(fù)雜動(dòng)畫和交互的創(chuàng)建—這是數(shù)字設(shè)計(jì)是工具包中的一個(gè)缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來(lái)。

    具體而言，我們期待兩種特定的動(dòng)畫模式的出現(xiàn)：不尋常的滑動(dòng)速率和頁(yè)面轉(zhuǎn)換。

    意外的滑動(dòng)率

    現(xiàn)在視差可能有些過(guò)時(shí)了，但這并不意味著設(shè)計(jì)師們不會(huì)以有趣的方式來(lái)設(shè)計(jì)滑動(dòng)。

    例如網(wǎng)站Anna Eshwood，網(wǎng)站上的每一張照片一開始都是正常的展示，直到用戶下拉滑塊滑過(guò)后，照片都會(huì)快速上升，比滑塊滑動(dòng)速度快，營(yíng)造出一種有趣的飄渺感，可以很好地展現(xiàn)簡(jiǎn)樸的黑白照片和嚴(yán)肅的模型。

    隨著交互和動(dòng)畫在在線體驗(yàn)中更為突出，我們也期望看到更多的設(shè)計(jì)師設(shè)計(jì)出更具突破性的作品。

    頁(yè)面轉(zhuǎn)換

    在一個(gè)充滿好看動(dòng)畫的網(wǎng)站中，我們能感知到，網(wǎng)頁(yè)上正在發(fā)生一些變化，但如果是從一個(gè)頁(yè)面轉(zhuǎn)換到另一個(gè)頁(yè)面，就會(huì)比較唐突了，無(wú)論是在哪個(gè)網(wǎng)站上。

    轉(zhuǎn)換動(dòng)畫可能會(huì)有所用處，它能將用戶從一個(gè)頁(yè)面送走，再在另一個(gè)新頁(yè)面上迎接。不過(guò)要謹(jǐn)慎運(yùn)動(dòng)轉(zhuǎn)換動(dòng)畫，也沒(méi)有必要鏈接它們。這個(gè)過(guò)渡本身就是每一個(gè)頁(yè)面之間的轉(zhuǎn)換：頁(yè)面突然變?yōu)橐黄�空白，然后再有新的�?yè)面加載。

    但我們發(fā)現(xiàn)在這一點(diǎn)上，很多網(wǎng)站都搞了一些事情。以網(wǎng)站3drops為例：

    在這里，頁(yè)面轉(zhuǎn)換時(shí)依舊保證了用戶的體驗(yàn)，體現(xiàn)了品牌的存在。當(dāng)用戶想要訪問(wèn)是視圖庫(kù)中的另一視圖時(shí)，髕骨是被導(dǎo)航到了新的頁(yè)面。這對(duì)于以設(shè)計(jì)為中心的品牌展示來(lái)說(shuō)，是一個(gè)不錯(cuò)的點(diǎn)子。