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

但創(chuàng)意是一種對(duì)話(huà)。

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

趨勢(shì)僅僅只是龐雜而混亂的多方談話(huà)中的主音，無(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ī)范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開(kāi)始重疊和匯合，位圖和字體的并置往往都會(huì)出現(xiàn)美麗的意外。

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

 

2.將插圖放在中心位置

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

•   產(chǎn)品UI（用戶(hù)界面）截圖及動(dòng)圖
•   設(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)銷(xiāo)方面，插畫(huà)師的工作越來(lái)越受重視。

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

或者，Dropbox的設(shè)計(jì)團(tuán)隊(duì)可以通過(guò)解釋他們的新插畫(huà)風(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)，否則畫(huà)布上只有空白。

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

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

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

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

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

 

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

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

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

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

Balenciaga

 

Gucci

 

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

大自然厭惡直線(xiàn)。——William Kent

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

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

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

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

 

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

 

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

 

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

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

 

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

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

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

 

5.更普遍的交互和動(dòng)畫(huà)

媒介就是信息。–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à)一樣，要小心這會(huì)影響你的用戶(hù)體驗(yàn)，尤其是那些有認(rèn)知障礙或?qū)\(yùn)動(dòng)敏感的人。

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

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

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

具體而言，我們期待兩種特定的動(dòng)畫(huà)模式的出現(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)站上的每一張照片一開(kāi)始都是正常的展示，直到用戶(hù)下拉滑塊滑過(guò)后，照片都會(huì)快速上升，比滑塊滑動(dòng)速度快，營(yíng)造出一種有趣的飄渺感，可以很好地展現(xiàn)簡(jiǎn)樸的黑白照片和嚴(yán)肅的模型。

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

 

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

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

轉(zhuǎn)換動(dòng)畫(huà)可能會(huì)有所用處，它能將用戶(hù)從一個(gè)頁(yè)面送走，再在另一個(gè)新頁(yè)面上迎接。不過(guò)要謹(jǐn)慎運(yùn)動(dòng)轉(zhuǎn)換動(dòng)畫(huà)，也沒(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í)依舊保證了用戶(hù)的體驗(yàn)，體現(xiàn)了品牌的存在。當(dāng)用戶(hù)想要訪(fǎng)問(wèn)是視圖庫(kù)中的另一視圖時(shí)，髕骨是被導(dǎo)航到了新的頁(yè)面。這對(duì)于以設(shè)計(jì)為中心的品牌展示來(lái)說(shuō)，是一個(gè)不錯(cuò)的點(diǎn)子。

 

 

6.至多主義的出現(xiàn)

好的設(shè)計(jì)盡可能少設(shè)計(jì)。–Dieter Rams

多年來(lái)，設(shè)計(jì)師最想聽(tīng)到的最振奮人心的設(shè)計(jì)反饋，恐怕就是：“他很干凈。”

那是一個(gè)極簡(jiǎn)主義的時(shí)代。深受Dieter Rams的設(shè)計(jì)原則，以及雜志《The Crystal Goblet》的影響，視覺(jué)設(shè)計(jì)師一直追求提供盡可能少的選擇和視覺(jué)干擾。

對(duì)于當(dāng)今生活在數(shù)字中的世界來(lái)說(shuō)，極簡(jiǎn)主義是一個(gè)全新且難得的經(jīng)歷，這個(gè)選擇很有意義。我們需要足夠放松以進(jìn)入這個(gè)陌生的新世界。

但是今天，我們也有類(lèi)似于以下的網(wǎng)站：

Pin-Up Magazine

 

H. Lorenzo

 

Razzle Dazzle Torino

 

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

你可以稱(chēng)之為一種野蠻主義，我也的確在Brutalist網(wǎng)站上發(fā)現(xiàn)了所有上述網(wǎng)站。但我們認(rèn)為我們期待更多至多主義的網(wǎng)站的出現(xiàn)，而在這之前你可能并不覺(jué)得這個(gè)網(wǎng)站會(huì)變成這樣。隨著數(shù)字技術(shù)的發(fā)展，一些網(wǎng)站會(huì)很自然的對(duì)用戶(hù)有更高的期待。

 

7.襯線(xiàn)字體能表現(xiàn)得更好

在技術(shù)落后，字體并不多的糟糕過(guò)去，在網(wǎng)頁(yè)界面中使用無(wú)襯線(xiàn)字體是個(gè)很好的方法。但隨著屏幕和字體渲染技術(shù)得進(jìn)步，我們可以看到越來(lái)越多精致得字體占據(jù)舞臺(tái)中心，或者至少成為了更重要的角色。

以Kickstarter最新的設(shè)計(jì)為例，他運(yùn)用了柔和的襯線(xiàn)：

 

或者是大膽的標(biāo)題：

 

在特定的日子里，Typewolf都會(huì)展示一些襯線(xiàn)的運(yùn)用：

襯線(xiàn)能提供一種優(yōu)雅、精致的文學(xué)修飾效果，作為襯線(xiàn)的長(zhǎng)期愛(ài)好者，我歡迎大家多多使用襯線(xiàn)。

 

8.浮動(dòng)的導(dǎo)航菜單

固定的導(dǎo)航已經(jīng)成為以轉(zhuǎn)化為中心或具有龐大菜單的網(wǎng)站的主流，因?yàn)楹诵膶?dǎo)航可在滑動(dòng)時(shí)與用戶(hù)保持一致。不過(guò)浮動(dòng)的導(dǎo)航使得用戶(hù)在滑動(dòng)瀏覽時(shí)也能輕松使用，直接優(yōu)化了網(wǎng)站體驗(yàn)。

最近，我們注意到有些設(shè)計(jì)師將導(dǎo)航從其他設(shè)計(jì)中分離出來(lái)，并將其移動(dòng)到瀏覽器的下方，進(jìn)一步確定了用戶(hù)可以隨時(shí)接觸到導(dǎo)航。這增強(qiáng)了導(dǎo)航是網(wǎng)站的廣泛對(duì)象的感覺(jué)，不一定是某一頁(yè)的一個(gè)部分，而是放在一個(gè)觸手可及的地方，使人安心。

最直觀的方法就是在導(dǎo)航欄中添加陰影，并將其移動(dòng)到網(wǎng)頁(yè)的最頂端，以Reseau為例。但在平面的設(shè)計(jì)中也是可行的，以Anchor & Orbit為例。

與離線(xiàn)型設(shè)計(jì)類(lèi)似，浮動(dòng)的導(dǎo)航允許設(shè)計(jì)師在設(shè)計(jì)中自然地或帶有目的性地運(yùn)用巧妙的并置，這又給設(shè)計(jì)帶來(lái)了更多的空間。

 

9.視頻元素

當(dāng)你想用可視格式傳達(dá)復(fù)雜的信息時(shí)，靜態(tài)圖像往往都難以達(dá)到效果。畢竟，復(fù)雜性需要時(shí)間來(lái)表現(xiàn)，而一個(gè)用戶(hù)界面上的靜態(tài)圖像只會(huì)告訴你圖片上的內(nèi)容，而不是如何使用。

以下是幾點(diǎn)重要的原因：

• 視頻元素可以無(wú)縫地切入設(shè)計(jì)中，無(wú)需嵌入Youtube或是Vimeo插件。
• 即使有很多顏色，漸變和細(xì)節(jié)，視頻地質(zhì)量依然很高，但如果GIF動(dòng)圖不按大小以指數(shù)倍數(shù)放大，則很難做到。
• 視頻可以循環(huán)以確保副本的細(xì)節(jié)和圖像的細(xì)節(jié)保持一致，并為有需要的人重復(fù)播放。

所以從我們自己的網(wǎng)站到Stripe Sigma，當(dāng)視頻元素風(fēng)靡整個(gè)網(wǎng)絡(luò)時(shí)，我們并不感到奇怪。

 

10.更多身臨其境的“多媒體”長(zhǎng)格式

當(dāng)我們想要發(fā)布長(zhǎng)格式的內(nèi)容時(shí)，只需在頁(yè)面上放置一個(gè)長(zhǎng)文本字段，特別是當(dāng)我們的長(zhǎng)格式內(nèi)容有CMS支持時(shí)。其中，單個(gè)布局的內(nèi)容長(zhǎng)度大概為200字到一篇較為詳細(xì)的短教程的長(zhǎng)度。

但現(xiàn)在一些設(shè)計(jì)師和作家并不采用這種方法，他們將布局和量身定制的副本結(jié)合起來(lái)，通過(guò)視頻、聲音、圖表和圖形、地圖等豐富的載體，娓娓道來(lái)故事的內(nèi)容。

說(shuō)實(shí)話(huà)，這并不是一個(gè)“新”趨勢(shì)，我更傾向于把它稱(chēng)為網(wǎng)絡(luò)產(chǎn)生長(zhǎng)期對(duì)話(huà)的基石。但現(xiàn)在所有的網(wǎng)絡(luò)出版工具都出現(xiàn)了，包括我們?cè)趦?nèi)，2018年似乎都是最佳時(shí)機(jī)。

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

這個(gè)故事盡可能地做到引人入勝，這對(duì)于很多還較為抽象的問(wèn)題來(lái)說(shuō)至關(guān)重要。它巧妙地將一個(gè)復(fù)雜的話(huà)題變成一系列便于理解的段落。你永遠(yuǎn)都不會(huì)覺(jué)得內(nèi)容過(guò)于冗雜，相反你總是不知不覺(jué)就接受了，你發(fā)現(xiàn)自己閱讀每一個(gè)字，都很容易理解。

請(qǐng)注意，我并不是批評(píng)CMS，事實(shí)上，我們可以利用CMS來(lái)提供這種體驗(yàn)。這里只需要一點(diǎn)小技巧：利用背景圖片和視頻來(lái)傳遞所有的視覺(jué)效果，在編寫(xiě)、設(shè)計(jì)時(shí)仔細(xì)檢查每一個(gè)故事的一致性。這就和“博客”的格式不大一樣了。

如果你正在尋找更有吸引力的長(zhǎng)形，我不會(huì)推薦紐約時(shí)報(bào)上由Tuam拍攝的“失落的兒童”。

值得一提的是，這樣更為多樣化的長(zhǎng)格式可以用破碎網(wǎng)格或者標(biāo)準(zhǔn)布局進(jìn)行組合，正如上面的紐約時(shí)報(bào)片段所示。

 

11.可變的字體！

在今天看來(lái)，我們很難相信就在幾年前，我們還不得不依靠稀少的字體來(lái)呈現(xiàn)我們所有的文本內(nèi)容。

今天，網(wǎng)絡(luò)上到處都是各種各樣華麗的字體，從而引發(fā)了人們對(duì)字體印刷、字體設(shè)計(jì)和選用、消費(fèi)字體的興趣。

可變字體出現(xiàn)后，這一趨勢(shì)愈演愈烈?？萍己陀∷⒓夹g(shù)的巨頭——蘋(píng)果、谷歌、微軟和Adobe之間有一個(gè)可變字體聯(lián)合項(xiàng)目，這使得可變字體實(shí)現(xiàn)了一種全新的字體設(shè)計(jì)形式，正式增加了opentype格式，這意味著，允許設(shè)計(jì)師插入一個(gè)字體的整個(gè)詞庫(kù)或者有多達(dá)64000axe（磅值、字號(hào)等）的單個(gè)字形，并在設(shè)計(jì)空間中將特定位置定義為命名實(shí)體（粗體、濃縮等）。

說(shuō)實(shí)話(huà)上面這段文字有些難懂了，那么請(qǐng)直接看John Hudson的解釋?zhuān)J(rèn)為可變字體是：

一個(gè)字體文件的行為像多個(gè)字體一樣。

但是在討論字體設(shè)計(jì)等視覺(jué)藝術(shù)時(shí)，最好還是堅(jiān)持從視覺(jué)方面入手。

簡(jiǎn)而言之，這就是一個(gè)可變的字體，一個(gè)單一的字體文件，能夠變黑，而不需要調(diào)用其它字體。

 

12.內(nèi)容中心–或稱(chēng)webook？盡量酷起來(lái)！

（注意：內(nèi)容一直很酷）

作為一個(gè)內(nèi)容為王的極客，我很高興看到在2017年產(chǎn)生了如此之多的有見(jiàn)解、極有幫助的內(nèi)容。我相信2018年我們會(huì)見(jiàn)到更多，畢竟2017年已經(jīng)打下了很好的基礎(chǔ)。

我們也可以看到，有很多領(lǐng)先品牌將pdf格式用于電子書(shū)領(lǐng)域并充分發(fā)掘網(wǎng)絡(luò)出版長(zhǎng)內(nèi)容的潛力，我喜歡稱(chēng)之為“webooks”，這很具有吸引力。

具體而言，我指的是：

Stripe Atlas Guides

 

AirtableUniverse

 

DesignBetter.co

 

Intercom Books

 

我們自己的電子書(shū)網(wǎng)站

我想不需多言了吧！

 

13.CSS網(wǎng)格

Robin Rendle的CSS網(wǎng)格演示，來(lái)自CSS-Tricks。

正如Robin Rendle極具有表現(xiàn)力地將它放在了CSS-Tricks上：

那么，CSS網(wǎng)格是第一個(gè)真正地網(wǎng)頁(yè)布局系統(tǒng)，它旨在將內(nèi)容組織成列和行，并最終為給予開(kāi)發(fā)人員最高的權(quán)限。

此處應(yīng)有得逞了的笑聲。

注：Webflow 將支持CSS網(wǎng)格，但尚未提供官方日期。

 

14.追求完美的數(shù)字設(shè)計(jì)工具

2017年是一個(gè)重要的年份，尤其是對(duì)于深入討論設(shè)計(jì)工具的性質(zhì)及其 對(duì)我們工作的適用程度。

Spectrum的Bryn Jackson分享了自己的看法：

設(shè)計(jì)成品和設(shè)計(jì)工具之間的中間格式，可以為產(chǎn)品團(tuán)隊(duì)和設(shè)計(jì)人員提供更高效、更強(qiáng)大的工具。

在一篇名為“接口”的文章中，他繼續(xù)假設(shè)：“今天所有的每一種流行的設(shè)計(jì)工具都是為了優(yōu)化插圖。”

（需要注意，Bryn Jackson對(duì)于插圖的定義是導(dǎo)致圖像、圖標(biāo)、插圖、字體、廣告、印刷媒體或其他沒(méi)有本地交互性的可視通信媒介的任何設(shè)計(jì)工作，但這是一個(gè)有爭(zhēng)議的定義，其中沒(méi)有提到閱讀和交互形勢(shì)。）

除了插圖和交互性的定義以外，不難看出，Bryn Jackson的觀點(diǎn)：在最基礎(chǔ)的地方，大多數(shù)現(xiàn)代設(shè)計(jì)工具都注重圖像的制作而不是接口。

設(shè)計(jì)師兼工程師Adam Michela在“I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.”中提出了一些相同的觀點(diǎn)。他認(rèn)為大多數(shù)設(shè)計(jì)師花費(fèi)大部分時(shí)間來(lái)創(chuàng)建實(shí)際價(jià)值并不大的少量工件。而這些工件僅代表最終產(chǎn)品—數(shù)字接口，這與上述的情況背道而馳。

在文章的最后，他積極地認(rèn)為，有機(jī)會(huì)創(chuàng)建融合（而不是橋接）設(shè)計(jì)和實(shí)現(xiàn)的工具。

這正是我們?cè)噲D在webflow上構(gòu)建的。像Michela，我們希望一個(gè)設(shè)計(jì)交付的不是網(wǎng)站的示意圖，而是網(wǎng)站本身，不是接口的文檔，而是接口本身。在這個(gè)過(guò)程中，網(wǎng)站能不斷地修改、完善，還可以保存時(shí)間線(xiàn)上的不同版本，可以檢查，甚至點(diǎn)擊一個(gè)鍵就可以恢復(fù)。

 

15.多樣性和包容性使得設(shè)計(jì)更具挑戰(zhàn)

Webflow是一個(gè)公平的機(jī)會(huì)雇主，我們致力于建立一個(gè)團(tuán)隊(duì)，這個(gè)團(tuán)隊(duì)不僅在觀念和身份上具有多樣性，并且受到鼓勵(lì)。– Our job listings

在Webflow所在的美國(guó)，日益激烈的政治環(huán)境正在推動(dòng)對(duì)多樣性和包容性在設(shè)計(jì)中的作用的強(qiáng)烈關(guān)注。

我們不得不承認(rèn)，設(shè)計(jì)的選擇，小到性別的下拉列表中包含了哪些選項(xiàng)，都能影響我們同胞中的一些人。我們可以清楚地看到，錯(cuò)誤的消息、措辭地影響有多嚴(yán)重，數(shù)據(jù)驗(yàn)證機(jī)制在人機(jī)交互地動(dòng)態(tài)機(jī)制中有多強(qiáng)大。我們意識(shí)到，讓種族成為廣告的過(guò)濾器會(huì)產(chǎn)生徹頭徹尾的種族主義效果，從而維護(hù)我們?cè)S多人希望看到被顛覆的現(xiàn)有權(quán)利體系。

我們也清楚地意識(shí)到，如果我們地團(tuán)隊(duì)沒(méi)有多元化和包容性，我們也沒(méi)有辦法提出設(shè)計(jì)方案。

最起碼，我們中的一些人不能。

另一方面，我們也看到了性別歧視在明顯的自相矛盾和邊緣化之后抬起了丑惡的頭顱，甚至?xí)碓诳此频赖碌娜粘?duì)話(huà)中。性別歧視就是雙重標(biāo)準(zhǔn)的明顯例子。

最終，作為用戶(hù)體驗(yàn)專(zhuān)業(yè)人員，我們的工作是為每個(gè)人提供可用且理想愉快的體驗(yàn)，而不論他們的種族、國(guó)籍、信仰等個(gè)人情況。

換句話(huà)說(shuō)，我們的工作就是包容，讓我們一起在2018年，包容更多，獲得更多。

 

16.視頻的廣泛應(yīng)用

盡管我們幾乎沒(méi)有人大肆鼓吹視頻將會(huì)成為網(wǎng)絡(luò)發(fā)布媒體，但發(fā)行商仍然非?？春棉D(zhuǎn)播。

視頻早已到處可見(jiàn)：從一開(kāi)始就堅(jiān)持使用視頻而不是短故事的新聞網(wǎng)站，到Snapchat，再到Instagram，最后到Facebook。無(wú)疑，Excel很快也會(huì)趕上潮流！

 

但就像科技領(lǐng)域的大多數(shù)事情一樣，這并不是一個(gè)平穩(wěn)的發(fā)展，成千上萬(wàn)的記者在文本和動(dòng)圖之間丟掉了工作。

對(duì)于轉(zhuǎn)播的網(wǎng)站來(lái)說(shuō)，前景也可能不是很好。根據(jù)哥倫比亞新聞評(píng)論：

轉(zhuǎn)播的發(fā)行商們僅花了一年的時(shí)間，就用無(wú)差別的、平淡的快餐式視頻，驅(qū)散了大多數(shù)來(lái)之不易的本土觀眾。

獨(dú)立新聞業(yè)至今遭受創(chuàng)傷，這要?dú)w功于特朗普，而視頻的宣傳也沒(méi)有幫到他們。

值得一提的是：根據(jù)Digiday的說(shuō)法：“展示一千次視頻的費(fèi)用遠(yuǎn)高于展覽一千次的費(fèi)用。”在理想的世界里，報(bào)紙可以在打更少的廣告。

當(dāng)然，這不會(huì)發(fā)生。

 

面對(duì)這一切，請(qǐng)記住文字作為創(chuàng)意和信息媒介的優(yōu)勢(shì)：

•   生產(chǎn)速度相對(duì)較快
•   便宜
•   仍是網(wǎng)絡(luò)上大多數(shù)通信的主要形式

最后一點(diǎn)可能也會(huì)讓人費(fèi)解，但我希望你能去各個(gè)社交網(wǎng)站看看。除非你點(diǎn)開(kāi)的是Instagram，Pinterest或Snapchat，否則你仍會(huì)看到大量的文字。即使在這些視覺(jué)效果站第一的平臺(tái)上，文字仍然扮演者重要的支撐角色。

因?yàn)橐粡垐D片可能在捕捉場(chǎng)景時(shí)值得多說(shuō)幾句，但圖片很難捕捉到具體的內(nèi)容，人物、時(shí)間、地點(diǎn)、原因和方式。

這使得我們很自然地談及下一點(diǎn)：

 

17.用戶(hù)體驗(yàn)寫(xiě)手的持續(xù)興起

任何影響設(shè)計(jì)的人都是設(shè)計(jì)師，這包括開(kāi)發(fā)人員、CFO甚至公司法律。所有的這些都可以是設(shè)計(jì)師。–Jared Spool

我在去年的設(shè)計(jì)趨勢(shì)中談到了這一點(diǎn)，但我今天想將注意力更多地放在被稱(chēng)為用戶(hù)體驗(yàn)寫(xiě)手地原因上。

簡(jiǎn)而言之，UX寫(xiě)手們專(zhuān)注于用戶(hù)界面中的內(nèi)容，這些內(nèi)容主要用于大型數(shù)字產(chǎn)品和web應(yīng)用程序?，F(xiàn)在，我說(shuō)我是為Webflow產(chǎn)出內(nèi)容，過(guò)去是為了Linkedln，人們都會(huì)問(wèn)：“這是啥？”

但請(qǐng)放心，用戶(hù)界面都有寫(xiě)手地痕跡。并且這些內(nèi)容往往在你的理解過(guò)程中起到關(guān)鍵作用：

•   你可以在用戶(hù)界面中做什么
•   如何做這些事情
•   你可能會(huì)遇到什么限制和困難

但UX寫(xiě)手能做的不僅僅是這些。用戶(hù)界面中的詞匯也是塑造好的用戶(hù)界面背后的品牌認(rèn)知的強(qiáng)大工具。試想一下，如果你看到的所有推文，所有應(yīng)用中，都有一系列的搞笑文章，或者是在404頁(yè)的展示中都有亮點(diǎn)，這些都是為了在最不理想的時(shí)候敦促你的行動(dòng)。

這在被稱(chēng)為Chatbot的UI格式中顯得尤其明顯。一般來(lái)說(shuō)，這些用戶(hù)界面只包含單詞，單詞構(gòu)成了整個(gè)用戶(hù)界面。Chatbot的個(gè)性、品牌都只能通過(guò)語(yǔ)言表達(dá)，不過(guò)也有一些精心挑選的表情符號(hào)來(lái)調(diào)味。

作為一名經(jīng)驗(yàn)豐富的UX寫(xiě)手，我很高興看到這個(gè)關(guān)鍵角色得到了它應(yīng)有的更多認(rèn)可。

我們也是設(shè)計(jì)師，不過(guò)我們是在音節(jié)和字母表中工作，我們迫不及待想要和你合作。

 

18.系統(tǒng)化

現(xiàn)在，設(shè)計(jì)已經(jīng)贏得了重要的位置。設(shè)計(jì)的對(duì)話(huà)已經(jīng)從價(jià)值主張轉(zhuǎn)移到更成熟的分析，即如何使設(shè)計(jì)作品的成功更加系統(tǒng)化，更加具有擴(kuò)展性且在品牌的許多產(chǎn)出和不同環(huán)境中具有凝聚力。

設(shè)計(jì)系統(tǒng)專(zhuān)注于將品牌美學(xué)和功能方法轉(zhuǎn)化為模塊化的組件，這些模塊化組件可以混合搭配以滿(mǎn)足任何UI的獨(dú)特需求（理想情況下）。當(dāng)設(shè)計(jì)語(yǔ)言被系統(tǒng)化時(shí)，就簡(jiǎn)化了設(shè)計(jì)決策，縮短了開(kāi)發(fā)時(shí)間，并且能讓設(shè)計(jì)人員在尚未建立設(shè)計(jì)模式的項(xiàng)目上更好地工作。

通常情況下，品牌正處于這一趨勢(shì)之上。UXPin推出了Systems，這是一款用于創(chuàng)建和維護(hù)設(shè)計(jì)系統(tǒng)的工具。Shopify推出了Polaris，憑借其獨(dú)特的內(nèi)容、設(shè)計(jì)和開(kāi)發(fā)指導(dǎo)方案而獲得高度贊譽(yù)。UX Power Tools推出了一個(gè)想要使Sketch稱(chēng)為可行的設(shè)計(jì)系統(tǒng)工具的庫(kù)（我們即將會(huì)看到?。?/p>

我想2018年會(huì)有更多這樣的消息。

 

19.原則—設(shè)計(jì)的第一要?jiǎng)?wù)

設(shè)計(jì)界一直糾結(jié)于雞還是蛋的問(wèn)題：內(nèi)容至上還是設(shè)計(jì)至上。

我過(guò)去一直都是支持內(nèi)容至上，這并不僅僅是因?yàn)槲沂且粋€(gè)內(nèi)容的極客。對(duì)于我來(lái)說(shuō)，在確定怎么包裝之前，確定所包裝的信息是最符合邏輯的。

但最近，由于我已經(jīng)由特定交付品的內(nèi)容設(shè)計(jì)專(zhuān)項(xiàng)更系統(tǒng)化的工作，品牌內(nèi)容策略，我對(duì)我們的工作是否遵從內(nèi)容還是設(shè)計(jì)變得柔和了起來(lái)。

它應(yīng)該從原則開(kāi)始。

不論其他一切如何工作，我們都應(yīng)該明確原則，并依賴(lài)于這些原則。

當(dāng)Shopify的高級(jí)UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：

如果系統(tǒng)是為了實(shí)現(xiàn)真正的工作而創(chuàng)建的，它應(yīng)該反映一個(gè)組織的行事準(zhǔn)則及其價(jià)值。這也是說(shuō)，一個(gè)不包含任何原則或價(jià)值取向的設(shè)計(jì)系統(tǒng)沒(méi)法考慮日常實(shí)踐中的這些問(wèn)題。

原則為其他所有決策提供了一個(gè)框架，從主要內(nèi)容要多長(zhǎng)到內(nèi)容的背景是什么都有所限制。畢竟，品牌是建立在其原則至上：品牌的使命、愿景和目標(biāo)。這些名詞都需要一個(gè)進(jìn)出的信念來(lái)作為支撐，使之成立而不倒。

換句話(huà)說(shuō)，原則回答了為什么。

例如，在Webflow上，我們的使命是鼓勵(lì)設(shè)計(jì)師，企業(yè)家和創(chuàng)意者將他們的想法帶到網(wǎng)絡(luò)上。這一使命融入了我所做的一切，從Ryan為我們創(chuàng)造的美學(xué)到我設(shè)計(jì)的語(yǔ)音和音調(diào)標(biāo)準(zhǔn)。

這些標(biāo)準(zhǔn)知道我們創(chuàng)建草圖，溝通我們的意見(jiàn)，并希望每篇文章、電子郵件和廣告頁(yè)面能更豐富。到目前為止，這是一個(gè)溫暖的搖籃。

 

你認(rèn)為2018的數(shù)字設(shè)計(jì)將會(huì)如何？

每當(dāng)我將這些點(diǎn)列在一起時(shí)，我的腦海里會(huì)涌滿(mǎn)很多與之相關(guān)的想法，時(shí)間的流逝也使得我不得不優(yōu)先考慮一些。

這是為什么我放棄了一些顯而易見(jiàn)的熱點(diǎn)但迄今為止對(duì)網(wǎng)絡(luò)的影響有限，比如去年提到的AR和VR?？紤]到這一點(diǎn)，你會(huì)在這個(gè)列表中添加什么？

感謝閱讀!

 

原文地址：webflow

譯文地址：玩皮兔設(shè)計(jì)（公眾號(hào)）

作者：JOHN MOORE WILLIAMS