我們與設(shè)備的交互方式已經(jīng)多種多樣，但是設(shè)計(jì)工具還很原始，根本沒(méi)法達(dá)到現(xiàn)在的需求。傳統(tǒng)方式是設(shè)計(jì)師搞了幾張?jiān)O(shè)計(jì)圖然后交給工程師，等了幾周得到一個(gè)可運(yùn)行的原型，終于發(fā)現(xiàn)自己多么愚蠢，然后改改改，工程師陪著設(shè)計(jì)師一點(diǎn)點(diǎn)調(diào)效果（為什么部分開(kāi)發(fā)工程師不喜歡調(diào)節(jié)界面的 UI 細(xì)節(jié)？）……這種方式很是不科學(xué)。從去年的沒(méi)有任何設(shè)計(jì)工具到今年設(shè)計(jì)工具遍地開(kāi)花，全世界的設(shè)計(jì)師們都意識(shí)到了這個(gè)問(wèn)題的嚴(yán)重性，通過(guò)不同角度設(shè)計(jì)了很多不同的工具，來(lái)幫助自己在設(shè)計(jì)時(shí)就可以獲得完整的使用體驗(yàn)。

參與討論的人們：

Adam Debreczeni：Form Co-Founder
Brandon Walkin：Origami、Paper 設(shè)計(jì)師，F(xiàn)acebook 產(chǎn)品設(shè)計(jì)師
Clark Valberg：Invision CEO
Koen Bok：Framer 的父親，前 Facebook 設(shè)計(jì)師，sofa 創(chuàng)始人
Paul Colton：Pixate 的父親

為什么想做這些工具嘞？

Adam Debreczeni（Form）：當(dāng)時(shí)公司在做一個(gè)項(xiàng)目，是一個(gè) 3D 編輯器，每次與客戶溝通的方法都是：要么發(fā)送 MP4 文件（沒(méi)法交互），要么發(fā)送 PNG 文件（根本不知道界面上該如何操作）。帶來(lái)了很大了溝通成本。 于是先做了一個(gè)內(nèi)部工具，后來(lái)跟業(yè)內(nèi)其他人溝通時(shí)發(fā)現(xiàn)這是一個(gè)普遍存在的問(wèn)題，于是就想把它做大啦。

Paul Colton（Pixate）：在決定要做一個(gè)設(shè)計(jì)工具之前，與很多公司設(shè)計(jì)團(tuán)隊(duì)的人都溝通過(guò)，Twitter、Pinterest 等。問(wèn)了他們非常細(xì)致的問(wèn)題，比如「你們?cè)谠O(shè)計(jì)過(guò)程中有什么不爽的地方？我們來(lái)給你解決?！?/p>

Koen Bok（Framer）：當(dāng)時(shí)在 Facebook，只是單純地想做一款能讓我工作更高效更快的工具。于是嘗試著使用了一些工程師用的東西。后來(lái)想，如何能讓程序幫助別的設(shè)計(jì)師來(lái)更好地解決問(wèn)題呢？然后就做了這個(gè)東西。

Brandon Walkin（Origami）：Mike Matas 加入 Facebook 時(shí)帶來(lái)了 Quartz Composer，當(dāng)他用 Quartz Composer 做出動(dòng)態(tài)原型時(shí)我們都嚇哭了，因?yàn)閺那皬膩?lái)沒(méi)有見(jiàn)過(guò)這樣的東西。于是我們意識(shí)到，這才是未來(lái)幾年內(nèi)設(shè)計(jì)應(yīng)該發(fā)展成的樣子。我們也開(kāi)始嘗試使用 Quartz Composer，但是它太老了，而且本來(lái)也不是專門用來(lái)做設(shè)計(jì)的，于是我們將界面元素加入了 Quartz Composer，做了 Origami，并且用它做出了 Paper。

Clark Valberg（Invision）：設(shè)計(jì)師需要知道終端用戶、其它設(shè)計(jì)師、公司 VP 等使用他們的設(shè)計(jì)的反饋來(lái)看設(shè)計(jì)的好壞。我們覺(jué)得設(shè)計(jì)師需要一個(gè)地方讓這些討論&反饋都可以發(fā)聲，而且要是一個(gè)低成本的方式。好讓產(chǎn)品更快迭代。

為什么這些工具這么晚才誕生？

Paul Colton（Pixate）：我覺(jué)得與現(xiàn)在的扁平化設(shè)計(jì)大潮有關(guān)。之前的設(shè)計(jì)會(huì)比較注重紋理啊、陰影啊等等。但是自從蘋(píng)果說(shuō)「好，我們開(kāi)始扁平吧！」，以前能去著墨的點(diǎn)，現(xiàn)在沒(méi)有機(jī)會(huì)了，就把更多的重心轉(zhuǎn)移到了動(dòng)畫(huà)上，依靠動(dòng)畫(huà)來(lái)補(bǔ)充紋理啊陰影啊等帶來(lái)的效果?，F(xiàn)在設(shè)計(jì)師都不會(huì)問(wèn)「怎么處理這里的紋理陰影啊」而是會(huì)問(wèn)「怎么制作這里的動(dòng)畫(huà)啊」。所以我們之前沒(méi)有出現(xiàn)，而現(xiàn)在一股腦出現(xiàn)了這么多，是有道理的。

Brandon Walkin（Origami）：做 Facebook Home 之前，我逢人便說(shuō) Quartz Composer 好厲害啊！但是沒(méi)人鳥(niǎo)我。后來(lái)有一天我們的設(shè)計(jì)主管 Julie Zhuo 寫(xiě)了一篇 Blog，里面提到說(shuō) Facebook Home 是用 Quartz Composer 做出來(lái)的，那時(shí)我第一次感受到了設(shè)計(jì)界巨大的改變。

為什么我們不用基于時(shí)間線的工具呢？比如 Flash 或者 After Effects。

Koen Bok（Framer）：如果建造交互工具的話，那么時(shí)間并不是不變的。狀態(tài)隨著時(shí)間在變化，所以 timeline 這種方式并不高效，如果你要做比較長(zhǎng)的交互的話。

那為什么大部分的設(shè)計(jì)師，仍然在使用基于時(shí)間線的工具呢?

Koen Bok（Framer）：那些工具是由很多前輩創(chuàng)立的，它們?cè)谀承┓矫孢€是非常出色的。并不是說(shuō)因?yàn)槲覀兇嬖诹?，After Effects 就要被淘汰了。但是我們工具的發(fā)展方向可能是將 After Effects 中特別出色的地方逐漸的整合或者在我們的工具中支持。

Paul Colton（Pixate）：我們被要求了一萬(wàn)次讓加入 timeline，但是有交互就意味著你無(wú)法預(yù)測(cè)用戶的下一個(gè)行為是什么?；蛟S用戶又返回了上一次操作？所以加入 timeline 是木有意義的。

Adam Debreczeni（Form）：我們內(nèi)部討論過(guò)很多次是要用 timeline 形式還是用一種更具交互性的方式。我們認(rèn)為去掉抽象化的東西在你嘗試新的想法時(shí)非常有幫助。我們的做法是，你可以直接在你需要的元素上拖動(dòng)來(lái)變更它的彈跳程度，做這些用 timeline 的方式就很麻煩。

像 Form 和 Origami 這種學(xué)習(xí)成本較高的工具，應(yīng)該怎樣幫助他們呢？

Brandon Walkin（Origami）：Quartz Composer 的界面非常嚇人是真的。但重要的是它可以實(shí)現(xiàn)任何東西，你的想象力可以在這里得到充分的發(fā)揮，連我們也不知道你會(huì)在這里做出些什么樣的東西。

Sketch、Photoshop 這種這種沒(méi)有引導(dǎo)的工具和 InVsion 有明確引導(dǎo)的工具對(duì)設(shè)計(jì)會(huì)有什么影響？

Clark Valberg（Invision）：我覺(jué)得產(chǎn)品設(shè)計(jì)有三個(gè)維度：1、美學(xué)維度 2、交互維度 3、故事性。每個(gè)產(chǎn)品都在無(wú)意識(shí)地讓你去集中注意力在其中一種維度，InVision 呢就是會(huì)強(qiáng)調(diào)產(chǎn)品故事性的一款工具。我們覺(jué)得，產(chǎn)品界面決定用戶可以去做哪些事情，交互方法決定了用戶可以怎樣使用它，但是一個(gè)產(chǎn)品的故事性才是決定著用戶會(huì)不會(huì)去使用它的因素。

Paul Colton（Pixate）：你并不需要一個(gè)復(fù)雜的工具來(lái)生成復(fù)雜的產(chǎn)物。比如筆。筆非常簡(jiǎn)單，但是你可以用它來(lái)畫(huà)出非常復(fù)雜的畫(huà)。我們的產(chǎn)品也是遵循著這個(gè)原則：產(chǎn)品要非常非常簡(jiǎn)單，但是它絕不會(huì)遏制你的想象力，你可以用它做出非常復(fù)雜精美的東西。而且我們希望我們的產(chǎn)品不會(huì)影響你使用我們的產(chǎn)品做出來(lái)的東西的樣子和風(fēng)格——我們希望你做出你腦海中的產(chǎn)品，Pixate 只是那只筆而已。

Adam Debreczeni（Form）：Form 一打開(kāi)也是一張空畫(huà)布。我們做 Form 時(shí)的一個(gè)工作重心即是：如何制作更加連貫、一致的系統(tǒng)？由于所有東西都是連貫一致的，你之前用 Form 做出來(lái)的東西都可以復(fù)用。你可以制作你自己的 patches。漸漸的，你面對(duì)的就不再是剛開(kāi)始的空白 canvas 了，你已經(jīng)建立起一個(gè)自己的系統(tǒng)了。

你們的工具是著重于設(shè)計(jì)周期中的某一點(diǎn)還是全部？

Koen Bok（Framer）：我們經(jīng)常被定義為一個(gè)「微交互工具」。但是我們希望它是可以用于整個(gè) app 的設(shè)計(jì)過(guò)程中的。

Brandon Walkin（Origami）：在 Facebook，我們會(huì)在設(shè)計(jì)初期就開(kāi)始使用 Quartz Composer。我們通常拿給 Mark 看的是和開(kāi)發(fā)出來(lái)的功能和界面無(wú)異的高保真原型。

未來(lái)設(shè)計(jì)工具會(huì)成為一個(gè)大而全的平臺(tái)還是一個(gè)個(gè)獨(dú)立的小工具？

Koen Bok（Framer）：對(duì)于設(shè)計(jì)師來(lái)說(shuō)，有多重選擇總是好的。曾經(jīng)有很長(zhǎng)時(shí)間所有設(shè)計(jì)師都在使用 Photoshop，但現(xiàn)在很多人都已經(jīng)在嘗試使用其它多種多樣的工具了。我很驚訝我們這些新工具有這么多種不同的方案解決思路，我認(rèn)為未來(lái)的設(shè)計(jì)工具應(yīng)該是一種很聰明的平衡，包含了多重設(shè)計(jì)需求， 而且或許學(xué)習(xí)成本并不高。

如何處理不同設(shè)計(jì)工具的數(shù)據(jù)？

Paul Colton（Pixate）：毫無(wú)疑問(wèn)現(xiàn)在的設(shè)計(jì)工作流有個(gè)很大的缺口。我不認(rèn)為一個(gè)工具能完成所有的設(shè)計(jì)工作，我也不認(rèn)為設(shè)計(jì)師希望能夠用一個(gè)工具完成所有設(shè)計(jì)工作，否則就不會(huì)出現(xiàn) Sketch。我們現(xiàn)在面臨的挑戰(zhàn)，以及我們的愿景是：希望能夠用一種更好的方式補(bǔ)上「把一個(gè)工具中的內(nèi)容轉(zhuǎn)移到另一個(gè)工具中」這個(gè)讓人煩躁的缺口。

Clark Valberg（Invision）：我認(rèn)為 aesthetic authoring 會(huì)出現(xiàn)在現(xiàn)在的工具組中。雖然現(xiàn)在還未實(shí)現(xiàn)，但是我覺(jué)得會(huì)實(shí)現(xiàn)的，到時(shí)候所有數(shù)據(jù)會(huì)匯集在同一個(gè)地方。

Paul Colton（Pixate）：工具一體化還是挺重要的。我覺(jué)得需要解決的是不同工具間更加流暢的數(shù)據(jù)轉(zhuǎn)移工作，讓工作流更加順暢。

我們離在設(shè)計(jì)工具里直接實(shí)現(xiàn)產(chǎn)品的開(kāi)發(fā)還有多遠(yuǎn)？

Adam Debreczeni（Form）：我覺(jué)得非常近了！Form 就是想做這個(gè)。不遠(yuǎn)的未來(lái)，你就可以直接把文件加載到 Xcode 中，然后給工程師，這樣就避免了轉(zhuǎn)譯過(guò)程的數(shù)據(jù)丟失。

Clark Valberg（Invision）：我覺(jué)得這個(gè)還是挺難的。即使你的工具可以直接生成對(duì)應(yīng)的 code， 但它離真正產(chǎn)出可用的產(chǎn)品還遠(yuǎn)呢?？偟膩?lái)說(shuō)，比你想象的要復(fù)雜很多。

Brandon Walkin（Origami）：同意

Koen Bok（Framer）：同意。但是在設(shè)計(jì)-開(kāi)發(fā)這個(gè)過(guò)程中，還有一些沒(méi)有解決的問(wèn)題，我們其實(shí)可以做得更好。比如現(xiàn)在可能有人還在發(fā)送壓縮文件吧，其實(shí)挺傻的…

Google FORM 是 11 月由 Google 在舊金山辦的設(shè)計(jì)大會(huì)，主題涉及設(shè)計(jì)教育、招聘、工具、創(chuàng)新等等，與會(huì)者來(lái)自 Google、Dropbox、Framer、Uber、Pixate 等公司的酷炫人士。

1、Google 設(shè)計(jì)副總裁 Matisa Duarte 和彭博商業(yè)周刊首席數(shù)字內(nèi)容官 Joshua Topolsky 的對(duì)話

2、視頻合集：FORM SF 2014

3、照片合集：FORM SF 2014