繼續聊技術思維與設計思維的mix
- 2019 年 10 月 8 日
- 筆記
本文繼續聊設計思維與技術思維的mix，基於志榮做的訪談《第三期採訪：設計師如何在智慧化時代持續學習和成長？》，mixlab社區重新梳理了4個內容跟大家分享下。
作者們：
ML04-00
產品設計師／數字極客／跨界學習者
公眾號：HackHYourself
ML01-TVB
獨立開發者／交互設計師
公眾號：薛志榮
ML00-shadow
無界社區發起人／設計師／程式設計師
1 編程思維與設計思維
編程思維可以幫助非理工科背景的設計師了解什麼是抽象、復用、結構化和參數化，這些都是編程的思考方式。比如說設計師要搭建組件庫或者整理設計規範的時候，要考慮怎麼把最開始看起來很雜亂的元素抽取出來形成多種模式，這些思維就非常重要了。
——結構化的思維往往是技術思維，例如平面設計領域，平面設計師最後設計完成的是一張設計圖，而在電腦／技術的思維角度看，其實是一份結構化的數據。
例子：
svg格式的圖，看起來跟我們傳統的圖片沒啥區別。例如mixlab的logo：
實際上，svg的文件形式保存了圖形的群組關係及位置、區域、色彩等數據，如：
svg這種文件格式，從技術的角度可以通過數據操作反推設計，而設計可以無縫轉化為結構化的數據。
再看我們設計師常用的photoshop，其psd文件也是結構化的數據：通過程式碼可以解釋成：
{ children: [ { type: 'group', visible: false, opacity: 1, blendingMode: 'normal', name: 'Version D', left: 0, right: 900, top: 0, bottom: 600, height: 600, width: 900, children: [ { type: 'layer', visible: true, opacity: 1, blendingMode: 'normal', name: 'Make a change and save.', left: 275, right: 636, top: 435, bottom: 466, height: 31, width: 361, mask: {}, text: { value: 'Make a change and save.', font: { name: 'HelveticaNeue-Light', sizes: [ 33 ], colors: [ [ 85, 96, 110, 255 ] ], alignment: [ 'center' ] }, left: 0, top: 0, right: 0, bottom: 0, transform: { xx: 1, xy: 0, yx: 0, yy: 1, tx: 456, ty: 459 } }, image: {} } ] } ], document: { width: 900, height: 600, resources: { layerComps: [ { id: 692243163, name: 'Version A', capturedInfo: 1 }, { id: 725235304, name: 'Version B', capturedInfo: 1 }, { id: 730932877, name: 'Version C', capturedInfo: 1 } ], guides: [], slices: [] } } }
可以使用psd.js來解釋psd文件
https://github.com/meltingice/psd.js
解釋psd後能做什麼？得到了設計圖的結構化數據，用機器來做設計就變得容易多了（後續更新此部分內容）
2 掌握技術原理對設計的幫助
如果你知道深度學習的一些原理，它到底能實現什麼，不能實現什麼，它的能力範圍到底在哪裡，當你以後用到深度學習，就大概知道你要做的設計界限在哪。比如說，基於一個人臉影像庫，用GAN（生成對抗網路）來自動生成人臉。這個看起來應用的範圍蠻廣的，但真正做過一遍以後，你可能會有更多的考慮。比如說數據集從哪裡來？是有現成的數據集還是手動獲取一批？如果你手動獲取的數據集樣本量很少，基本不用想自動生成人臉這事了；即便數據量很大，當你發現最終結果人臉是歪的，你就會知道這套技術還沒成熟，沒法達到要求，那你可能不會把它用到設計里。
所以，深度學習需要考慮數據集是否夠多、設定的目標和打分規則是否明確，這些因素都會直接影響設計目標的實現。真正動手學習以後，才會更加清楚深度學習能不能解決設計問題。
——關於數據量大小的問題，現實中，我們很多需要解決的問題都是基於小數據來進行的，例如，做一些卡通人臉的生成，如果採用GAN的方式，得具備大量的卡通頭像數據，生成效果見圖：
但，我們不採用GAN的方式，還有其他方法嗎？有！
通過預設大量的五官影像，通過機器隨即組合成一個卡通人像：
通過預設五官就可以生成人臉，而GAN的方法，更多的還停留在研究階段。
中場休息，推薦基本深度學習的書：
3 AI對交互設計的影響
AI技術對交互流程的影響，在往期的文章也有所提及，例如《TensorFlow.js、遷移學習與AI產品創新之道》
這裡再補充一些例子。
例如，之前需要用戶填寫一些必填資訊才能跳到下一步，但如果通過AI技術基於用戶的歷史數據做分析和判斷，整個資訊填寫可能就不需要了，這就會影響到整個交互流程。
——還有個例子，我們比較常見的製作海報的方式，可能是簡化版的PS工具，需要我們添加圖片，文字，還要挪動圖片跟文字的位置，設置大小等等，而AI的技術，可以讓我們僅輸入幾個文案就可以生成海報（例如ARKIE智慧設計），這個對交互的流程也是產生比較大的改變的。
再有目前mixlab正在連載的《從Storyboard到DIY實現一個漫畫生成器-02》也是利用技術，簡化交互流程，達到用戶只需輸入一張圖片，即可製作漫畫的目的。
4 藝術也是可以被機器所創作的
這裡舉AI與音樂的例子，如果用工程的角度去看待音樂，它其實跟數學還有編程有密切的關係。如果把聲音還原為一種物理現象，它更多是力學研究的對象，甚至跟電學和光學的原理有不少相通之處。從這個角度出發理解聲音跟音樂之後，你可以嘗試加入一些新的元素，例如AI，做出更多有趣、可以互動的聲樂裝置。用演算法生成音樂，正如用演算法做設計，需要的是把音樂結構化，然後運用機器創造新的音樂～
——此部分，可以看00的更新：
近期mixlab也會更新演算法作曲相關的內容，敬請期待哦～
