【譯者注】過去的一年，B2B UED團隊花費了巨大的資源和精力投入阿里巴巴集團中臺DPL（Design Pattern Library）項目，旨在通過設計模式的提煉及抽象，由規則和算法支撐更自動化的設計工具，智能生成常規產品設計頁面，從而將設計師從繁重的常規設計任務中解放出來，投入到更需創造力更有價值的設計項目之中。其間，譯者深刻感悟到當今時代對設計師價值的全新認識。這是一場設計師職能升級的革命，如暴風般引入，如未能看清并找準自身定位，或許短短幾年后你的專業核心技能將不再具備競爭力。本文作者描述的算法驅動設計理念，正好與國內諸多公司逐漸興起的設計自動化趨勢有不少一致見解，相信認真閱讀后，你還能在這變幻莫測日新月異的科技更迭之中，緊握設計價值的立足之本。

 

推崇算法驅動設計的理念數年后，我逐漸積累了一些實踐案例。這套工具方法能幫助我們構建用戶界面、編制資產（assets）內容并個性化用戶體驗，遺憾的是，這類稀缺資訊一直沒能系統化。

 

然而，在2017年，隨著這套工具的技術基礎不斷進化，設計界也逐步對算法、神經網絡和人工智能產生興趣。如今已是重新思考設計師角色的最佳時機。

 

圖1. 通過Prisma和Glitche生成的唱片封面
 

 

設計師會被機器人取代嗎？

 

算法驅動設計最讓人印象深刻的宣言，由臭名昭著的內容建站系統The Grid提出，它對相應模板及內容呈現樣式進行選擇，然后自動修飾并整理圖片。此外，該系統通過A/B測試結果來挑選最佳模式。不過，The Grid還在內測階段，我們只能通過已公布內容及廣告來評估整個想法是否靠譜。

 

Designer News社區發現了利用The Grid創建網站的真實案例，由于不少用戶詬病設計及代碼質量，他們的反應五味雜陳。許多質疑者當天甚至擊掌相慶來堅持設計師無法被取代的理由。

 

圖2. The Grid內容建站系統

 

用算法來替代設計師聽起來很超前，但整個想法是錯誤的。產品設計師通過將原始產品理念轉化為經過深思熟慮具備堅實交互原則的用戶界面、良好的信息架構和視覺風格，來幫助公司實現業務目標并強化其品牌。

 

設計師進行諸多大小不一的決策 ，其中許多過程幾乎難以言述。此外，設計師接到的需求并非100％清晰一致，為了讓產品更加完善，設計師還會幫助產品經理解決這些沖突 。這不僅僅是通過選擇一個合適模板和填充其內容就能搞定。

 

然而，如果我們談論的是創造性合作，當設計師與算法一起工作以解決產品問題時，我們看到了算法驅動設計的很多優秀案例和它的明顯潛力。算法可以改良網站和移動應用的日常設計工作，這讓人覺得很有意思。

 

與算法進行創新合作

 

如今的設計師們早已學會把玩諸多工具和技能，以實現近乎完美的原型效果，這也直接導致了“產品設計師”的概念出現。產品設計師是產品團隊的積極成員，他們熟知用戶研究，也擅長交互設計和信息架構，還可以創建視覺風格，用動效設計使其更出彩，并對代碼進行簡單的修改。這些人在任何產品團隊中都是無價之寶。

 

然而，平衡如此多的技能非常困難-你不能在產品的每個環節都花費這么多時間。當然，最近瘋狂涌現的新設計工具縮短了我們創建可交付成果所需的時間，并擴展了我們的能力。然而，它仍然不夠。仍有太多的設計日常工作及新職責，將我們好不容易省下的時間都消耗掉了。我們需要自動化和簡化工作流程。對此，我看到以下三個關鍵方向：

 

構建UI

籌備素材及內容

個性化用戶體驗

 

我會舉一些例子，并提出未來工作過程的新趨勢。

 

構建UI

 

諸如Medium，Readymag和Squarespace的發布工具已經簡化了作者的不少工作-無數的高質量模板在不需要花錢請設計師的情況下帶給作者漂亮的設計。我們現在可以讓這些模板更智能，使用門檻更低。

 

例如，當The Grid仍然處于測試階段時，一個非常成功的網站創建站點Wix，已經開始開發包括算法驅動的相關特性。該公司提出了高級設計智能（Advanced Design Intelligence）的概念，它類似于The Grid以半自動化方式讓非專業人士創建一個網站。Wix通過向其提供許多高質量現代網站的示例來優化算法。此外，它試圖提出與客戶行業相關的風格建議。非專業人員選擇合適的模板并不容易，好在像Wix和The Grid這樣的產品能像設計專家一樣來服務客戶。

 

Wix的智能設計系統介紹視頻

 

當然，像The Grid的情況，將設計師拒絕在創作過程之外，可能導致平庸和缺乏創意的結果（即使它提高整體質量）。轉念一想，如果將這個過程比作與電腦的“結對設計”，那么我們可以減輕許多日常任務負擔; 例如，設計師可以在Dribbble或Pinterest上創建一個情緒版，算法可以快速地將這些樣式應用到模型并提出一個合適的模板。設計師將成為他們的新學徒“電腦”的藝術總監。

 

當然，我們無法以這種方式創造一個革命性的產品，但通過它幫助我們騰出的時間用來創造一個并非不可能。此外，許多日常需求是功能導向的，無需太多創新。如果一家公司足夠成熟并具有自己的設計系統，算法就可以使它更強大。

 

例如，設計師和開發者可以定義內容、上下文和用戶數據的邏輯；那么，平臺將使用原理和模式來編譯設計。這將允許我們微調特定使用場景的最小細節，而無需手動繪制和編碼幾十個頁面狀態。Florian Schulz告訴您如何使用插值的理念，以創建組件的諸多狀態。

 

圖3.Florian Schultz的插值概念

 

2012年左右我開始對算法驅動設計有了興趣，當時我的Mail.Ru Group設計團隊需要一個自動化的雜志布局。已有內容具的語義結構不佳，并且人工更新成本太高。我們如何在雜志編輯不是專業設計師時產出質量不錯的設計呢？

 

好吧，算法中的一個特殊腳本能夠解析一篇文章。然后，根據文章的內容（每個段落和單詞的數量，照片數量及其格式，插入引號和表格等），腳本將選擇最適合的模式來呈現此部分的文章。該腳本還試圖混合各類模式，使最終的設計具備多樣性。這將節省編輯在舊內容中重新整理的時間，設計師只需添加新的演示模塊。幾年前，Flipboard就推出了類似的模式。

 

Vox Media使用類似的想法做了一個首頁生成器。該算法查找每個可能的有效布局，組合來自模板庫的不同示例。接下來，基于某些性狀檢查每一個布局并對其評分。最后，生成器選擇出“最佳”布局 ，即得分最高的布局。這比人工選擇最佳鏈接，再通過推薦引擎的方式（比如Relap.io）創建首頁更加高效。

 

圖4.Vox的首頁生成器

 

籌備素材及內容

 

在許多變量中創建千篇一律的圖形素材是設計師工作中最無聊的部分之一。它需要花費許多原本可以用來創造更大價值的時間，讓設計師失去動力。

 

算法可以承擔如匹配顏色等簡單任務。例如，Yandex.Launcher使用一種算法來根據應用圖標自動設置App的顏色卡。其他變量可以自動設置，如根據背景色改變文字顏色，在照片中凸顯眼睛用來強調情感，貫徹參數化字體（parametric typography）。

 

圖5.Yandex.Launcher

 

算法可以創建各種組合。Yandex.Market在俄羅斯使用了電商產品列表的營銷圖像生成器。營銷人員使用一個標題和圖片填充一個簡單的形式，然后生成器創造出無數符合設計指南的變量。Netflix走的更遠，它的腳本將海報中的電影角色裁剪下來，然后應用一個風格化和本地化的電影標題，再自動生成不同類型的用戶子集。很神奇吧！癮科技已經教會機器人學徒編寫簡單的數碼產品新聞。哇！

 

圖6.Netflix電影廣告

 

真正的黑科技發生在神經網絡。最新的案例是一個叫Prisma的手機應用，它提供的風格化照片看起來像著名藝術家的作品。Artisto可以按類似的方式處理視頻及流媒體。

 

圖7.Prisma

 

Aristo App視頻介紹

 

然而，一切還處于初級階段。沒錯，你可以在手機上下載一個app，在數秒之內馬上得到結果，而不是在GitHub上跟一些庫文件較勁（正如我們去年一樣）; 但在未訓練神經網絡之前，你仍然無法上傳自己的參考風格，并得到理想結果。然而，當這成為現實之后，它會使插畫家過時嗎？我認為這對那些具有扎實基礎和獨特風格的藝術家來說完全不會。當不需要專屬風格時，它會降低為你的文章或網站配上優雅插圖的門檻，而不是使用乏味的默認圖片。

 

對于一個真正獨特的風格，它可以讓你快速站在巨人肩膀上，“假使在一棟建筑上使用我們獨特的插畫風格會如何？”例如，皮克斯的動畫電影《料理鼠王》的創作者試圖將不同風格應用在電影場景和角色上，要是神經網絡完成了這些草圖呢？我們也可以創建故事板把并且以漫畫形式描述場景（照片可以很容易地轉換為草圖）。類似的例子不枚勝舉。

 

最后，還得提一下現動態識別。最近的品牌化中動畫變得極其流行，但部分公司還在進行深度研究。例如，Wolff Olins展示了巴西電信品牌Oi的logo根據聲音進行動態識別的案例。如果沒有一些創造性的協作與算法，你是無法創造這些讓人瘋狂的東西。

 

Oi Logo聲音識別動態案例

 

個性化用戶體驗

 

為細分的受眾群體甚至特定用戶個性化產品，是獲得清晰完善的產品策略的一種方法。我們每天都在Facebook新聞稿，Google搜索結果，Netflix和Spotify推薦以及許多其他產品中看到它。除了為用戶減輕過濾信息的負擔之外，產品更加關心用戶時，用戶與品牌的連接也變得更具情感化。

 

然而，關鍵問題是設計師在這些解決方案中的角色。設計師很少有能力創建這種算法 – 它們來自于工程師和大數據分析師。來自CX Partners的Giles Colborne舉了一個Spotify“每周發現”功能的案例：此處進行經典用戶體驗設計的唯一元素是音軌列表，而絕大部分獨創工作是由一個推薦系統完成的，這個系統為該設計模板填充有價值的音樂內容。

 

圖8.Spotify每周發現功能（Giles Colborne演講PPT中的某頁）

 

在這個領域設計師如何提供價值，如何利用各種數據源建造并優化算法，Colborne給出了建議。了解如何使用大數據并提煉到出可執行的洞察力極其重要。例如，Airbnb對此已有探索，通過給出“未來某天列表上的（房間）預訂價格是多少？”，方便房東據此設置具有競爭力的房價。Netflix推薦引擎的類似案例就不一一窮舉了。

 

圖9.“交互設計師VS算法”-Giles Colborne

 

一個相對較新的名詞，“預期設計 （Anticipatory Design）”對用戶體驗個性化和用戶訴求預期提供了更廣的視野。我們已經在手機上見識到：Google Now和Siri會使用位置記錄數據自動提供回家的路線。然而，此處的關鍵因素即信任。為了執行預期的體驗，用戶必須允許企業在后臺收集個人使用數據。

 

我提到過Netflix，Vox Media和The Grid使用設計變量做自動化測試的案例。這是一種基于算法基礎對用戶體驗進行個性化的方法。Liam Spradlin描述了一種有趣的概念：變化的設計（mutative design） ，它是一個優秀的自適應接口模型，能夠考慮諸多變量以適合特定用戶。

 

設計師的機械化骨骼（Exoskeleton）

 

我已通過實踐中檢驗了幾個算法驅動設計的案例。現代設計師需要什么工具呢？我們回顧上世紀中葉，計算機被設想為擴展人類能力的一種工具。Roelof Pieters和Samim Winiger分析了計算機歷史以及計算機用作人類能力增強工具的細節。他們看到設計工具的三個成熟度級別：

 

1、第一代系統以數字化形式對工具進行生動模擬。

2、第二代是輔助創建系統，人和機器通過緊密的行動反饋循環來協同進行創造。

3、第三代是輔助創建系統3.0，它在細粒度對話中協同創造，增強創造力，并加速從新手到專家的技能獲取。

 

圖10.創意人工智能

 

算法驅動的設計應該像產品設計師的機械化骨骼-增加我們決策的數量并提升決策深度。那么，設計師和計算機該如何協作呢？

 

數字化產品設計人員的工作流程可能是：

1、探索問題領域，為業務和用戶解決最有價值的問題（分析）。

2、探索解決方案領域，并選擇解決問題的最佳解決方案（分析）。

3、開發，發布和推廣解決問題的產品（綜合）。

4、評估產品如何為真實用戶工作，并優化它（分析和綜合）。

5、將解決方案與公司的其他產品和解決方案連接和統一（合成）。

 

這些任務分為兩種類型：1）對隱性表達信息和已奏效解決方案的分析；2）需求和解決方案的合成。我們需要哪些工具和工作方法？

 

分析

 

對適用定性研究的用戶隱性表達信息的分析很難自動化。然而，探索現有產品的用戶使用模式是一個合適的任務。我們可以提取行為模式和細分受眾群，然后為他們優化用戶體驗。廣告精準投放正是如此，算法可以使用隱性和顯性行為模式（在特定產品或廣告網絡內）對用戶進行聚類。

 

為細分用戶群進行算法訓練來優化界面和內容，設計師可以考慮機器學習。Jon Bruner舉了一個很好的例子：一個遺傳算法以預期結果的基礎算法描述開始，比方說，為節省燃料和方便乘客，對航空公司的時間表進行優化。它增加了各種約束：航空公司擁有的飛機數量，運營的機場，以及每架飛機上的座位數量。它加載以下各類獨立變量：現有時間表上數千航班的細節，或者可能隨機生成的虛擬信息。通過數千，數百萬或數十億次的迭代，時間表逐漸變得更有效率和更方便。此外，該算法還熟悉了時間表中的每個元素 （例如 37航班從O’Hare的起飛時間）如何影響燃料效率和乘客便利的因變量。

 

在這種情況下，人們設計了一個算法，可以添加或刪除限制和變量。結果則通過對真實用戶的實驗來測試和改進。利用恒定的反饋回路，該算法也改進了用戶體驗。雖然這項復雜工作主要由分析師處理，但設計師也應該知道機器學習的基本原則。O’Reilly最近就發布了這個話題相關的迷你書。

 

合成

 

兩年前，一款工業設計師的工具Autodesk Dreamcatcher橫空出世，幫助用戶體驗大師們發布了諸多創作。它基于生成設計（generative design）的構思，已應用于性能、工業設計、時尚和建筑多年了。為大家熟知的著名建筑師Zaha Hadid的團隊就稱這種方法為“參數化設計”。

 

圖11.Autodesk Dreamcatcher

 

Logojoy是一個簡單的標志設計產品，某種程度上說它可以取代自由職業設計師。只要選擇喜歡的風格及顏色，Logojoy便能幫你產生無盡的想法。您可以細化一個特定標志，看到一個基于它的企業風格案例，并預設一個品牌包、名片和信封等。這是一個算法驅動設計工具在現實世界的完美案例！其創始人Dawson Whitfield說明了背后機器學習的原理。

 

圖12.Logojoy

 

然而，它尚未在數字產品設計領域奏效，因為它無法解決實際問題。當然，建筑師和工業設計師的工作自身足夠的限制和特殊性，但用戶界面絕非靜態的 – 它們的使用模式、內容和特性隨時間而多次變化。如果我們考慮整個生成過程 -設計師定義規則，算法用來創建最終對象 – 最終會誕生超多靈感。那么數字產品設計師的工作流程可能是：

 

1、算法使用預定義的規則和模式生成設計的諸多變化方案。

2、基于設計質量和任務要求過濾結果。

3、設計師和管理者選擇最有趣和充分的變化，并根據需要進行優化。

4、設計系統針對一個或多個變量運行A / B測試，然后用戶選擇其中最有效的。

 

目前尚未清楚如何在數字產品設計中過濾大量使用場景極其復雜的概念。如果算法也能過濾生成對象，我們的工作將更有成效和創造性。然而，作為產品設計師，我們每天在頭腦風暴會議中或者當我們在屏幕模型和原型上迭代時，就得以生成設計的方式提出了幾十個想法，為什么我們不能將這些工作讓算法完成？

 

Jon Gold實驗

 

來自The Grid的Jon Gold開發了一套實驗工具Rene，就是這種算法驅動設計工具的實踐。Gold訓練計算機做出有意義的排版決策。他認為這與設計師的學習過程類似，所以他將其分成幾個步驟：

 

1、分析字形以了解字體中的相似性。

2、制定組合字體的基本準則。

3、確定類型組合的最佳示例以了解趨勢。

4、創建算法觀察偉大設計師的工作方式。

 

他的想法類似于Roelof和Samim的觀點：工具應該是設計師創造性的合作伙伴，而不僅僅是呆萌的執行者。

 

圖13.Jon Gold的生成設計：合理的組合

 

這套叫Rene的工具就是基于以上原則構建的，他還談到了編程的命令式和聲明式方法，并指出現代設計工具應該選擇后者 – 關注我們想要計算的，而不是如何計算。Jon使用生動的公式來展示它如何適用于設計，并提供了幾個初級演示。你也可以自己試試這個工具，雖僅是早期概念，但足以讓你得到啟發。

 

Rene-產品設計工具視頻

 

Jon開玩笑稱之為“暴力設計（brute-force design）”或者“乘法設計（multiplicative design）”，他強調了從專業角度把控的重要性。值得注意的是，今年早些時候他已經從The Grid團隊離職。

 

算法驅動設計的工具是否已存在？

 

很遺憾，當前還沒有用于網站和移動設備的產品設計工具，可以在分析和綜合方面提供與Autodesk Dreamcatcher相近水準的幫助。然而，The Grid和Wix可被視作具備相近質量水平和有效性的解決方案。Adobe正在不斷地添加類似的智能功能：軟件的最新版本具有內容識別功能，可以智能填充當你使用裁剪工具旋轉圖像或擴展畫布超出了圖像的原始大小的空白區域。

 

介紹內容識別切割功能

 

還有Adobe和多倫多大學的另一個實驗：DesignScape能夠自動提煉設計布局，從而形成全新的作品。

 

DesignScape：根據可交互的布局建議開展設計

 

Adobe公司在2016年MAX會議上發布了一款名為Sensei的智能平臺，同樣值得關注。Sensei使用了Adobe在人工智能和機器學習方面的深厚專業知識，它將是Adobe消費者和企業產品中未來算法驅動設計功能的基礎。Adobe發布了語義圖像分割（按類型標簽展示圖像中的各區域-例如，建筑物或天空），字體識別（即從創意資產識別的字體，甚至手寫字體，推薦類似的字體）和智能細分受眾群等功能。

 

然而，作為創造術語“人工智能”的后期計算機科學家John McCarthy有一個著名觀點：“一旦普及，沒有人再稱它為人工智能。”曾經最前沿的人工智能現在被認為是電腦的標準行為。以下有一些實驗思想和工具，或許可以成為數碼產品設計師日常工具包的一部分：

 

1、StyLit – 創建三維模型出草圖。

2、Autocomplete handdrawn animations-微軟的自動填充插圖和動畫的實驗工具。

 

這些僅僅是幫助我們窺見未來的罕見片段。現在，更多的是個別公司基于自身需要構建自定義解決方案。最好的方法之一是將這些算法集成到公司的設計系統中。它們的目標類似：自動化大量任務來支持產品線；實現和維持統一設計；簡化發布；對當前產品的支持更友好。

 

前端樣式規范開啟了現代設計系統，但是這僅是（將設計集成到開發代碼）的第一步。開發人員仍然通過手工創建頁面，下一步是使用預定義規則進行半自動頁面創建和測試。

 

圖14.Yury Vetrov的平臺思維

 

優勢與劣勢

 

你的公司會追隨算法驅動設計的趨勢嗎？

 

優勢

 

根據近期觀察，這種趨勢的價值或多或少是清晰的：

-免去準備資產和內容的常規流程，畢竟該類工作比較機械。

-通過計算機組合變量來拓寬創意探索，設計師過濾結果以找出最佳變量。

-針對細分的受眾群體甚至特定用戶優化用戶界面。

-快速適應各種平臺和設備的設計，盡管是以原始的方式。

-對用戶界面的不同部分或特定模式進行實驗-理想情況下實現自動化。

 

總而言之，這幫助設計師在缺少開發支持和缺乏創作過程例行程序投入時，仍然可以負責核心決策。我們試圖將工作的一部分實現自動化，并基于這個目標進行深入分析，這將幫助我們更好地認識工作。它使我們更有成效，并幫助我們更好地向非設計師解釋工作的本質。因此，公司內的整體設計文化將更加繁榮。

 

劣勢

 

然而，所有益處的實現并非樂觀，它們或許還有以下局限：

-我們只能在公司的任務背景下談論公司的定制解決方案。這項工作需要不斷進行研發投入，支持和優化。

-正如The Grid的CMS顯示，一個工具本身不是奇跡。缺乏設計師掌舵的結果往往比較平庸。另一方面，大多數專業工具的現狀就是如此。

-打破過去現有的風格和解決方案變得更加困難。算法驅動的設計通常基于現有的模式和規則。

-如果生成設計工具可以挖掘Dribbble，則復制另一個設計師的工作變得更容易。

 

還有道德方面的問題：由算法生成的設計是否具備價值？是否具備獨特性？誰是設計的作者？生成結果的數量受限于局部最大值？Oliver Roeder說“電腦藝術”并不比“漆藝”或“鋼琴藝術”更具挑釁性。算法終究由人編寫，使用人類想出的理論和人類建造的電腦，使用人類編寫的規范，使用人類收集的材料，在由人工作的公司中，使用由人類構建的工具等。計算機藝術是人類藝術的子集，而不是差異。革命的硝煙已起，為什么我們不站在前面呢？

 

結論

 

這是一個美好的未來故事，但我們也該銘記算法的限制 – 即使規則現在通過機器學習來增加，它們仍然建立在人類定義的規則上。設計師的能量在于他們可以制定和打破規則;所以，在一年后，我們可能將“美麗”定義為完全不同的東西。我們的行業有專業能力高或低的設計師，后者最終將被算法取代。然而，那些在必要時可以跟隨和打破規則的人將會找到神奇的新工具和可能性。

 

此外，數碼產品也越來越多，越來越復雜：我們需要支持更多的平臺，為更多用戶群體調整使用場景，并多做假設。正如青蛙設計的Harry West說的，以人為中心的設計已經從對象設計（工業設計）擴展到體驗設計（包括交互設計，視覺設計和空間設計），下一步將是系統行為的設計：確定自動化或智能系統行為的算法設計。由電腦承擔大量常規設計工作，而不是雇用越來越多的設計師。