身為設計師,你也許需要一些演算法

Sidebar 是我最近常去的一個小站, 每天會更新五篇關於設計的文章,讀一個幫你打一個勾,在工作之餘看看很是舒服。上周的推送中有一篇 How UX helped me learn English 讓我想到了自己——英文閱讀能力的薄弱讓我對設計前沿的資訊望而生畏,常常是還未嘗到甜頭就半途而廢了。

現在起,我打算在得到作者允許的情況下對一些設計類(特別是交互設計)的有意思的文章(來自Medium等)做個翻譯,但願以後能像讀中文一樣無障礙地閱讀它們。

第一篇原文來自:Algorithm-Driven Design: How Artificial Intelligence Is Changing Design。

這篇的作者是來自俄羅斯的設計師 Yury Vetrov。我聯繫了 Yury 本人,得到了翻譯和轉載的授權。他回復郵件說「glad to see a Chinese version of my article」,開心~

附上他的聯繫方式和介紹:Yury Vetrov 的 LinkedIn

_________________________________________________________________________________

在關注演算法驅動的設計的幾年時間裡,我漸漸收集了一些設計實例。這些實現設計的方法可以幫助我們構造界面,準備設計的資源和內容,以及個性化我們的用戶體驗,但這方面的信息仍然比較稀少,沒有形成系統的知識體系。

然而在2016年,演算法驅動的技術變得更加成熟,設計者對演算法、神經網路、人工智慧等領域的關注也越來越多。是時候重新思考設計師的現代角色了。

經過 Prisma 和 Glitché 處理過的專輯封面

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

從一家小眾的CMS(內容管理系統)The Grid 中可以看到,演算法驅動設計具有引人注目的前景。模板和內容的風格選擇、調整和剪裁圖片——都由它來一手完成。此外,系統還使用 A/B測試來選擇最合適的模式。產品還處在內部beta版本階段,因此我們只能通過宣傳和廣告來進行了解。

Design News社區創建了 The Grid 的真實案例,它擁有一個混合型反饋——讓人們來評斷設計和代碼的質量如何。這讓很多人消除了對演算法驅動設計的質疑和顧慮。

The Grid CMS

用演算法完全代替設計師的工作聽上去很有未來感,卻是一個錯誤的觀點。產品設計師需要把一個粗略的產品模型轉化為擁有可靠的交互原則、完善的信息架構和視覺風格的、精細的用戶界面,幫助企業達到商業目標,提升品牌效應。

設計師做了很多大與小的決定;其中的很多決定難以用清晰的流程表述。增長的需求不會100%的清晰和一致,因而需要設計師這樣的角色幫助產品經理解決衝突——最終做出更好的產品。這遠遠不止選擇一個合適的模板或用內容填充它那麼簡單。

然而,談起創造性的結合,當設計師「結對工作」、用演算法完成產品任務時,我們可以看到很多優秀的範例和潛在的可能。演算法可以提升我們日常的網站設計和移動應用設計工作,這是件有趣的事。

與演算法的創造性結合

設計師學到了用一些工具和技巧去達到完美的境界,這導致一個新辭彙的誕生:產品設計師。產品設計師是一個產品團隊中積極主動的成員;他們理解用戶研究是如何工作的,決定交互設計和信息架構;他們可以構建一種視覺風格,用動效設計讓產品活起來,他們也可以對實現的代碼做簡單的修改。這個角色對任何團隊都是無價之寶。

但是,在這些技術中做出平衡並不簡單——你沒有足夠多時間在產品工作的方方面面保持專註。當然,設計工具最新推出的功能可以縮短交付物完成的時間,同時增長我們的技能。但這還不夠。還有過多的日常任務和職責在吞噬我們省下的時間。我們需要進一步自動化和簡化工作流程。我總結了與此相關的三個關鍵點:

  • 構建一個UI;

  • 為其準備內容和資源;

  • 個性化用戶體驗。

構建一個UI

類似Medium, Readymag和Squarespace的發布工具已經簡化了寫作者的工作——無數高質量的模板帶給作者優質的設計排版,而無需付給設計師酬勞。其實這些模板可以更加智能,這樣寫作的門檻會變得更低。

例如,當 The Grid 還在beta版本時,Wix,已獲巨大成功的網站創建服務,已經開始包含了一些演算法驅動的設計功能。他們發布了高級智能設計 Advanced Design Intelligence,看上去與 The Grid 的針對非專業人士的半自動網站創建功能相似。Wix 用很多高質的現代化網站示例來訓練演算法,並嘗試去做與客戶產業相關的設計風格建議。對非專業人士來說,選擇一個合適的模板作為設計並不容易,而像 Wix 和 The Grid 的產品就提供了設計專家的服務。

(視頻無法分享,翻越後可見:Wix.com Introducing Wix ADI)

在 The Grid 的例子中, 沒有設計師的加入,創意過程確實可能誕生出平凡的、老生常談的設計結果(即使它提升了整體質量)。但如果我們把這個過程當作是與電腦的「結對設計」,那麼就可以省去很多日常任務;比如,設計師可以在 Dribbble 或 Pinterest 上創建一個 moodboard 心情板,這樣演算法就可以把其中的模式迅速應用到原型中,給出一個合適的模板。設計師們成為了他們新學徒——計算機的藝術指導。

當然,我們無法用這種方式創造一個革命性的產品,但它可以給我們騰出更多的時間去做這種產品。而且,很多工作是為了達成目標,並不需要太多的創新。如果企業足夠成熟,擁有一個設計系統,那麼演算法驅動的設計將會更加有效。

舉個例子,設計師和開發人員可以定義關於內容、情景和用戶數據的邏輯處理;接著,平台根據一些準則和模式來進行設計。這樣,省去了手繪或編程得到一大堆頁面狀態的步驟,我們就可以專心為每個使用場景調整最為微小的細節。Florian Schulz 展示了如何使用填充法去創建大量部件的狀態。

Florian Schultz 的填充法

我對演算法驅動設計的興趣始於2012年,那時我的設計團隊 Mail.Ru 需要一個自動的雜誌排版。當時產品內容的結構做的很差,而手動修改又代價太大。怎樣才能擁有現代感的設計,特別是在編輯無法勝任設計師的時候呢?

是的,腳本可以解析一篇文章。根據每篇文章的內容(段落數、字數、圖片數及其格式,插入的引用和表格,等等),腳本會選擇最合適的模式去呈現每個部分。腳本也可以進行混排,最終的設計就會變得豐富多樣。這省去了編輯人員重做舊內容的時間,設計師只需加上這些擁有新樣式的模塊就可以了。Flipboard 在幾年前建了一個非常類似的模型。

Vox Media 用相似的理念做了一個主頁生成器。演算法結合一個樣板庫中的不同範例找出所有可能有效的排版,接著,每個排版都用一些特徵做了測試和評分。最終,生成器選擇「最好的」排版布局——一般來說是得分最高的那個。這比手動選擇最好的網頁有效多了,Relap.io 這樣的推薦引擎也能證實這一點。

Vox的主頁生成器

準備內容和資源

製作像餅乾模具一樣的多個樣式的圖片資源是設計師最無聊的工作之一了。這種工作浪費了很多時間,讓人產生倦怠感。設計師應該把這些時間花在更有價值的工作中。

演算法可以擔任起諸如配色的任務。Yandex.Launcher 根據 app 的圖標用演算法自動為 app 卡片設置顏色。其它可能的變數可以是自動設置的選項,比如通過背景色自動改變文本顏色,突出照片中的眼睛用以強調情緒的表達,以及實現參數化的字體等等。

Yandex.Launcher

演算法可以創造出完整的作品。Yandex.Market 為電商產品使用了一個增進圖像生成器(in Russian)。銷售人員填寫一個簡單的帶標題和圖片的表格,生成器就會給出一個遵循設計規範的無限多的設計集合。Netflix 則走的更遠——它用腳本為海報挑選電影人物,加上固定風格的、本地化的標題,然後在用戶中進行自動化測試。真是神奇!科技培養了機器撰寫科技報道的品味。Wow!

Netflix 電影廣告

真正的黑科技存在於神經網路演算法中。Prisma就是個活生生的例子,它把照片風格化成著名藝術家的作品的樣子。Artisto 可以用相似的方法處理視頻(甚至視頻流)。

Prisma

(視頻翻越後可見:Aristo app: example)

不過這只是一個開端。當然,你可以在手機上下載一個app,幾秒內得到結果,而不用求助Github上的資源庫;但它仍然無法讓你應用自己想要的風格,不通過訓練神經網路就得到很好的結果。然而,當這一切最終發生時,它是否會讓畫家們變得無用呢?我很懷疑它對那些有著堅定而獨特的風格的藝術家的影響。但當你需要為一篇文章或網站配上優雅的插圖(而非一個特殊要求)時,它確實降低了門檻。再也不會出現無聊的素材圖了!

真正獨特的風格可以基於類似「如果我們以統一的標準描繪一個建築,會怎樣」的問題,快速做出固定風格的素描。例如,Pixar 的動畫藝術家 Ratatouille 試著把多種不同風格應用到電影的風景和人物上;如果用神經網路來做素描呢?我們也可以用連環畫創建故事板和描繪場景(照片可以輕鬆轉化為速寫)。這樣的例子還有很多。

最後一點,演算法還能創造人身特徵 live identity。動效設計在近期的品牌宣傳中變得非常流行,而有些企業則走的更遠。例如,Wolff Olins 為 Brazilian telecom Oi 製作了一個對人聲做出反應的 live identity。無需創意團隊的幫助,你就能用演算法實現一些瘋狂的想法。

個性化用戶體驗

為一部分群體甚至少數特殊用戶定製個性化的產品,是獲得清晰良好的策略的一種方法。從每天的 Facebook 新聞聚合、Google 搜索結果、Netflix 和 Spotify 的推薦和許多其他產品中我們能看出這點。除了能減輕用戶過濾信息的負擔,用戶與品牌的聯繫也變得更加感性,因為產品似乎時刻都在為自己著想。

然而,現在的關鍵問題是設計師在解決方法時扮演的角色。我們很少擁有編寫這些演算法的技術——工程師和數據分析師是這方面的專業人士。CX Partners 的 Giles Colborne 見證了 Spotify』s Discover Weekly 的一個很好的例子:歌曲列表是其中唯一的經典UX設計元素,而推薦系統擔負著特別的工作,它將優秀的音樂填入到設計模板之中。

Spotify 的 Discover Weekly 功能

Colborne 為設計師提供了一些建議,建議如何在數字時代成為「有用」的設計師,以及如何用多種數據資源建立模型、訓練演算法。學慣用大數據設計,把它集成到可實施的想法中去,這些其實很重要。例如,Airbnb 學習了怎樣回答這樣的問題,「列表中的旅店在未來任何一天的預定價格是多少?」 這樣一來,房東就可以設置具有競爭力的價格。Netflix 的推薦引擎也有很多這樣的例子。

PPT請見:Interaction designers vs algorithms

( 譯者:這篇LinkedIn上的PPT大致意思是:設計其實是為大量你不了解的用戶做的,要知道大家的喜好就要學會分析數據,通過一些演算法去得出最優解,這樣才能更好地為他們提供服務。這裡還說到隨著設計工作的深入,設計師會越來越明白設計的核心是理解人類的語言,理解人們信息傳達的方式。)

「超前設計」,一個相對新的概念,對個性化用戶體驗和預測用戶意願展開了更廣泛的討論。我們已經在手機上擁有了這幾樣東西:Google Now 用歷史位置數據自動規划下班回家的路線;Siri 也用了相似的理念。然而,這裡的關鍵因素是信任。為了超前執行這些動作,人們需要把後台收集個人數據的許可權交給這些大公司。

我已經提到一些來自 Netflix, Vox Media 和 The Grid 的自動測試設計變數的例子。Liam Spradlin 的「變化設計」是另一種建立在演算法基礎上的個性化用戶體驗的有趣的方式。它是一個良好的自適應界面模型,關聯了很多變數來滿足特殊用戶的需求。

設計師的盔甲

前面的內容已經包含了幾個演算法驅動設計的案例。現代設計師為此需要哪些工具呢?回想在上世紀中期,計算機被預想成擴展人類能力的一種方式。Roelof Pieters 和 Samim Winiger 仔細分析了計算學歷史和提升人類能力的理念。他們發現了設計工具演化的三個階段:

  • 第一代是用數字方法模仿人設計的工具;

  • 第二代通過不斷的操作-反饋循環 ,完成人和機器共同協商的創意過程,幫助人類構建創作模式;

  • 第三代在細粒度的交流中與人協商創意過程,提升人的創作能力,加快從初學者到專家進階的技巧習得,從而幫助人類構建3.0創作模式。

創意型人工智慧

演算法驅動的設計應該是產品設計師的盔甲——它加大了我們做決定的數目和深度。設計師和計算機需要怎麼合作呢?

數字產品設計師的工作流程可能像是這樣:

  1. 探索可能出現的問題,選擇對商業和用戶最有價值的問題去解決(分析);

  2. 探索可能的解決方法,選出解決(分析)問題的最優解;

  3. 啟動,開發,推廣一個解決問題的方法;

  4. 評估產品在真實用戶中的運行情況,並優化它(分析和設計);

  5. 與公司的其它產品和解決方法保持聯繫和統一(設計)。

上述任務分為兩類:對模糊的信息和已見效的解決方法的分析,以及為此做的需求和解決方案的設計。對這兩種任務,我們分別需要什麼工具和工作方法呢?

分析

對用戶的模糊信息的定性研究難以實現自動化。但發掘現有產品的用戶使用方式是一個好辦法。我們可以提取出行為模式、得到用戶分群,然後為它們優化用戶體驗。在廣告定位中這已經實現了,演算法用清晰和模糊的行為模式給用戶做分類(在特殊產品或廣告網路中)。

為了訓練演算法,優化針對用戶群的界面和內容,設計師應該補充一些機器學習的知識。Jon Bruner 給了一個很好的例子:從理想結果的基本描述開始的一種遺傳演算法——一個為節省燃油和方便乘客做優化的航班時刻表。它把不同的變數包括在內:航空公司擁有的飛機數量,起降的機場,每個飛機的座位數。它加入了那些也許你認為無關的變數:關於現有時刻表的數千個航班的細節,或是隨機產生的虛假信息。經過成千上萬甚至上億次迭代,時刻表漸漸變得更加有效和便於使用了。演算法也讓我們理解了時刻表中的每個元素——例如37次航班從 O』Hare 機場的起飛時間——是怎樣影響燃油效率和乘客便利這些相關變數的。

在這個場景中,人們掌管著演算法,可以任意增減限制條件和變數。從真實用戶的試驗中可以測量出結果。同時,演算法也用持續的反饋循環來提升用戶體驗。儘管這項工作的複雜說明它是數據分析師的分內事,設計師仍應該懂得機器學習的基本原理。O』Reilly 最近發行的關於這個話題的一本小冊子就很棒。

設計

兩年前,一個為工業設計師服務的工具 Autodesk Dreamcatcher 弄出了點動靜,引發了 UX gurus 的好幾次報道。它的基礎理念是「生成設計」——一種應用在表演、工業設計、時裝和建築設計等領域多年的設計方法。很多人知道 Zaha Hadid 建築事務所,他們的官方人士將這種方法稱為「參數化設計」。

Autodesk Dreamcatcher

Logojoy 是一款能替代自由設計師設計簡單 logo 的產品。你可以選擇喜歡的風格、顏色和品牌,Logojoy 會產生無限多的創意結果。它可以精確到一個反映企業風格的特殊定製的 logo,訂做關於品牌的商務名片,信封,等等。這簡直是現實世界中最棒的演算法驅動工具了!它的作者 Dawson Whitfield 闡述了它背後的機器學習原理。

Logojoy

然而它還沒有出現在數字產品設計中,因為他不能幫忙解決實際的工作任務。當然,建築師和工業設計師的工作有它足夠的專業性和種種限制,但用戶界面的設計不是靜止的——它們的使用模式、內容和功能常常變化,應該說是變化非常非常的多。而如果我們考慮整個生成設計的過程——一個設計師制定演算法創作最終產品的原則——就會發現很多靈感。數字產品設計師的工作過程可能看起來是這樣的:

  1. 演算法用給定的原則和模式產生多個設計變化的結果;

  2. 這些結果用設計質量和任務要求進行篩選;

  3. 設計師和經理選擇最有意思與合適的設計變化,必要時將它們打磨加工;

  4. 設計系統對一個或多個變化運行 A/B 測試,最後人工選出最有效的一個。

在數字產品設計中,我們如何從一大堆概念里篩選出結果尚未可知,因為使用場景實在太多了。如果演算法可以幫助過濾這些概念,我們的工作應該會更多產、更有創意吧。然而,作為產品設計師,我們每天大多是在想法巨多的頭腦風暴會議或是屏幕上的原型迭代中使用生成設計。為什麼我們不能把其中一部分交給演算法呢?

Jon Gold 的實驗

在 The Grid 工作的 Jon Gold 發明的實驗性工具 Rene,就是一個讓演算法做選擇的實踐中的例子。Gold 訓練計算機為字體設計做有用的決定。他認為這和教會人做決定差不多,因此他把學習過程分為以下幾步:

  1. 分析字形,理解字體之間的相似之處;

  2. 為組合字體形成基本的原則;

  3. 找出最好的字體組合,了解流行趨勢;

  4. 用演算法衡量設計師的工作成果。

它的想法與 Roelof 和 Samim 所說的類似:工具應該成為設計師的創意合作夥伴,而不只是傻乎乎的執行者。

Jon Gold 的生成設計:看上去合理的組合

Gold 的工具 Rene 是建立在這些原則上的。說起命令式編程和聲明式編程,Gold 認為現代的設計工具應該選擇後者——專註於我們想要得到的目標,而不是如何一步步計算。Jon 用公式表示 Rene 是如何設計並作出一些低級別的 demo 的,你可以試試這個工具。這是一個很早期的概念,但足夠傳達出這種思想。

視頻翻越後可見:Rene ——產品設計工具

Jon 開玩笑地稱這種方法為「暴力設計」和「成倍設計」,他強調了專業人員控制的重要性。值得注意的是,他在今年早些時候離開了 The Grid 團隊。

工具已經有了?

不幸的是,沒有網站或移動產品設計工具能達到和 Autodesk Dreamcatcher 媲美的分析和設計水平。不過,The Grid 和 Wix 多少可以算作高水平的、直接的解決方案。Adobe 一直在加入一些智能特性:最新版本的 Photoshop 有一個內容感知的功能,當你用了裁切工具後旋轉圖像,把畫布擴張到超出圖片本身大小時,它會自動填充和裁剪出擁有重要內容的部分。

視頻翻越後可見:內容感知的裁切功能介紹

Adobe 和多倫多大學合作的實驗——Design Scape 可以自動改善設計布局。它還能為用戶推出一個全新的版塊。

視頻翻越後可見:DesignScape: 與互動式的布局建議一起做設計

你一定要跟上 Adobe 的步伐,因為他們在2016的 the MAX 會議上發布了一個叫做 Sensei 的智能平台。Sensei 利用了 Adobe 在人工智慧和機器學習領域的專業技術,它將會成為未來用戶級和企業級的 Adobe 產品中演算法驅動設計功能的基礎。發布會提到了語義圖像分割(以圖像類型做標籤展示一張圖片中的每個部分,如建築、天空等),字體識別(如,通過創意資源和推薦相似字體來識別一種字體,甚至是手寫體),以及智能用戶分群。

然而,正如John McCarthy——提出「人工智慧」術語的計算機學家的說法,「只要它能工作,沒有人會再稱它為人工智慧了。」 曾經最前沿的人工智慧現在成了計算機的標準要求。下面是一些可作為產品設計師日常工具包的試驗性的想法和工具:

StyLit 無需繪畫即可創作3D模型。

Autocomplete handdrawn animations Microsoft 試驗性的插畫/動畫自動補全工具。

但這只是未來世界的一角。現在的更多情況是,個人企業在為他們的工作任務尋找特定的解決方法。最好的方法之一是把演算法融入到企業的設計體系中。目標是相似的:自動化大量跟隨產品線的任務;得到和維護統一標準的設計;簡化項目啟動過程;更輕鬆地支持現有產品。

現代的設計體系始於前端的設計風格規範,但這只是第一步(把設計與開發人員的代碼相結合)。開發人員仍然需要手動創建頁面。下一步是在預先規定的準則下的半自動化頁面創建和測試。

關於平台的思考 by Yury Vetrov

優勢和劣勢

你的公司應該用演算法驅動的設計嗎?

優勢

如果我們考慮一下近期的趨勢,這種方法的價值就比較清晰明了:

  • 省去了準備資源和內容的機械工作;

  • 拓寬了對創作的探索。計算機把各個變數因素放在一起,讓設計師從結果中過濾出最好的組合;

  • 為小範圍的分群用戶甚至特殊用戶優化界面;

  • 讓設計快速適應多個平台和設備,雖然是一種原始的方法;

  • 可以為一個界面的不同部分或一些特殊的模式做實驗——理想的、自動化的實驗。

總的來說,這種設計方法可以將設計師從支持開發和創作過程中解放出來,但最重要的決定還是交給他們去做。一個不錯的副作用是我們需要弄清楚自己的工作,因為我們需要試著分析它,將其中的一部分自動化。它會讓我們更多產,更好地向非設計人員解釋我們的工作本質。這樣,整個公司的設計氛圍將會更加濃厚。

劣勢

然而,所有的這些優點不太容易實現,或是存在一些限制:

  • 我們討論的只是在公司目標下的定製化的解決方案。這種工作需要在開發、支持和提升上的持續投入;

  • 就像 The Grid 那樣,單單一個工具不能讓奇蹟發生。沒有設計師的全局指揮,做出來的結果很可能平凡無奇。另一方面,這確實是大部分專業工具的應用現狀;

  • 打破過去存在的風格和方案比較困難。演算法驅動的設計是建立在已有的模式和原則的基礎上的;

  • 如果生成設計工具可以從 Dribbble 中獲取到所有信息,抄襲其他設計師的作品就會變得簡單。

道德問題也同樣存在:演算法做出的設計有價值嗎,是獨一無二的嗎?誰是設計的原作者?生成設計的結果難道不會被局部最大值所限制嗎?Oliver Roeder 說「計算機藝術」不會比「繪畫藝術」或「鋼琴藝術」更讓人興奮。畢竟,編程軟體是人寫出的,背後的原理是人思考得出的,計算機是人製造的,素材是人收集的,公司也是人所經營管理的,工具是人使用的。計算機藝術是人類的藝術——之一,而不是一個另類。改革已經發生了,那麼為什麼不能進行下去呢?

總結

這是一個關於美好未來的故事,但我們應該記住演算法的局限——它建立在人類定義的準則上,即使現在是機器學習在管理這些準則。設計師強大的地方在於他們可以製造和打破準則;因此從現在起的一年內,我們可能會把「美麗」定義為完全不同的東西。業界設計師既有高手也有菜鳥,而演算法會輕易取代後者。但那些跟隨準則、必要時打破準則的人,會找到強大的新工具和無限的可能性。

更重要的是,數字產品正在變得越來越複雜:我們需要支持更多的平台,為更多的用戶群體變化使用場景,做出更多的假設。就像 Frog 的 Harry West 所說,以人為本的設計從設計實物(工業設計)擴展到設計體驗(包括交互設計、視覺設計和控制項設計)。下一步將會是系統級行為的設計:設計決定自動化系統或智能系統所做行為的演算法。比起招聘越來越多的設計師,我們更該做的是把日常工作交給計算機去做。讓計算機去和字體玩遊戲吧。


推薦閱讀:

桌游「步步為營」的演算法設計有沒有好的策略?
無禁五子棋能不能變成一道計算題?
如何快速確定演算法的邊界條件?
如何用非遞歸、不用棧的方法,實現原位(in-place)的快速排序?
AI 迅速發展,圍棋會有什麼樣的變局?

TAG:交互设计 | 设计 | 算法 |