「工具」七分鐘認識一款思路新穎的設計工具：Phase

來自專欄 BorderDesign

Phase 團隊認為，目前市面上的設計工具仍處在「Print Design」時代，並不是為「Digital Design」服務的。他們計劃在下個月，也就是2018年6月放出 Phase V1。在2017下半年初步宣傳了 Phase 後，他們逐步放出了在設計關鍵功能時的思考，描述了從 Why 到 How，再到 What 的過程。大家可以在了解這款設計工具的同時，也感受一下 Phase 團隊清晰的設計思路。

閱讀準備

• 相關閱讀：Meet Phase?—?{ hi! }
• 工具官網：Phase - Digital design Reinvented
• 閱讀時長：7分鐘

宣傳視頻

https://www.zhihu.com/video/981681275635122176

工具界面

https://www.zhihu.com/video/981681332719554560

根據筆者對 Phase 的了解，比較革新的功能大概有四個 - 原型工具、自動排版、樣式庫和代碼導出。至於其他功能，沒什麼亮點，就簡單介紹一下。

原型工具 | Prototype

先看一段沒有工程師介入，完全由 Phase 原型功能實現的原型。在這個原型中，所有內容均為真實數據、所有元素均可交互。

https://www.zhihu.com/video/981682375012564992

雖然市面上的原型工具很多，比如 Principle、Flinto、InVision，但是原型製作這個環節是目前設計師工作流中最混亂的。根據 Design Tools Survey 的統計：

平均每個設計師會使用2.98種原型工具。既然這樣，那麼我們認為這個環節仍有產品機會，是各個工具團隊的藍海。

這些原型工具各有特色，有的容易上手，有的適用於移動端的原型製作。平均每年都會有新的原型工具面世，而且這個速度仍在加快。有一些成熟的設計工具會把原型作為一個功能，比如 Sketch 的 Prototype 和 Adobe 的 XD。然而這些原型功能的本質都是遵照duplicate-screens（界面複製） 模式設計出來的。

這種 duplicate-screens 模式雖然很直觀，但是製作耗時，限制也多。所以有的、時候我們會選擇直接用代碼完成動效設計，雖然慢很多，但沒有任何限制，能夠限制你的只有你的想像力。

Duplicate-screens 原型工具並沒有關注界面元素的 States 和 Interaction，他們的出發點更多是來自 Print Design，呈現靜態的、低耦合的交互事件。也許真正的原型工具應該從 Digital Design 出發。

我們在做界面設計的時候，往往會從最小的界面元素著手，比如路徑、文字、填充、描邊等等，然後再將這些元素進行不同耦合程度的組合，形成 Layer 或 Component。那麼，我們在做原型設計的時候，是否也應該從這些最小的原型元素著手？比如選擇器、事件和條件？

如果能夠理出這些原型元素，並基於他們來設計原型工具，那麼相較於基於 Print Design 的 Duplicate-screens 模式。新的設計工具必將提升效率，釋放更多的生產力。目前市面上這一塊做的最好的是 Framer，但是門檻不低。

即將在六月放出的 Phase V1 中我們可以直接導入 Sketch 文件，並用下列原型元素進行原型設計製作：

1. Selectors：可視的 Components 都可以成為 Selectors，並且具備繼承關係；
2. Events：真實世界的交互行為都將成為 Phase 中的 Events，比如 Click，Touch，Scroll；
3. Action：Selector(s) + Event(s) = Action；
4. Element States：web 端、移動端的 Element 都有很多的 Class（類）和 States（狀態），他們並不是靜止的。那麼 Phase 中的 Element 也會如此。你可以用 Action(s) 讓 Element 切換 State；
5. Triggers：但是，原型設計不僅要考慮 Element States 的轉換，還要考慮界面跳轉、數值變化、增刪元素等情況，那麼你需要在 Timeline 上添加 Trigger(s) 來觸發 Action。
6. Conditions：你需要判斷條件，也就是 if/else，這樣就可以處理判斷提交成功和失敗的情形。

根據 Phase 團隊表示，原型工具的測試用戶原型輸出的效率要比原來提升了很多倍。

自動排版 | Dynamic Layouts

排版是一個界面的骨架，用來承載內容。這些排版規則，將不同的內容分別布置在頁面上的指定區域。排版良好雖然不是直觀可見的，卻可以大大提升用戶的瀏覽效率與體驗。所以，排版規則是為動態的內容所服務的。

當我們調整設計稿中某一部分的布局時，往往牽扯到很多模塊的相應改變，一個個拉扯，重新布局子元素，真的是很痛苦。目前還沒有什麼設計工具給出了完美的解決方案。

在 Digital Design 時代，排版應該是動態的、靈活的，而不是 Print Digital 中的僵硬布局。目前市面上的設計工具都是提供 Grid 和 Resizing 來協助布局，以期實現響應式設計。

我們常常看到這樣一種設計工具宣傳片段：你給界面元素設置好 Resizing 參數，然後拉伸整個界面的一部分，其他部分會響應進行重布局。但是真實情況是，根本沒有這麼神奇的工具，視頻都是為了宣傳的美化。

我們可以給元素或元素組設定基本的尺寸和位置，柵格對於視覺上的布局幫助很大。但是這些都沒有解決動態布局的問題，因為他們沒有考慮到真實的內容，以及界面上的容器之間的關係。

目前，解決 Digital Design 中動態複雜排版的方案就是敲代碼實現。因為 Flexbox、Grid、Dynamic Units 這些要素，代碼能夠提供幾乎無盡的可能性。

那可以推斷出 Phase 的 Layout 功能設計思路：Constraints + Flexbox + Grid + Dynamic Units = Phase』s Layout Model。

那麼這些要素在 Phase 裡面是怎麼配合，組成 Layout 功能的呢？

Units：Phase 會用 Dynamic Units 來表示各個元素之間的相對大小，當你在一行中複製一個 Element，那麼這一行所有元素的佔比會重新計算，但是單維排版規則不變。

Overflow, Clipping & Scrolling：在 Phase 中，每一個元素都有對於其父元素的相對位置，舉個 Sketch 中的例子方便大家理解：Artboard 的父元素就是 Page。這些子元素可能在某一維度超出父元素的尺寸，那你可以設置溢出、截斷或是滾動進行排版。另外他們也可以按照中軸或者邊選取不同的對齊方式。

Columns & Rows：用戶可以在這兩種特殊的界面元素中單維度堆棧其他界面元素，並可以設置 Gap Properties 來保證他們之間的間距。

組件和樣式庫 | Components and Libraries

所有的 Components 都會有 States，當然這個在 Flinto 中已經被實現了，Phase 應該是大膽借鑒，大膽創新。

現在設計工具中的樣式庫很難實現 Web 或 App 設計中的設計系統。真正的樣式庫不應該僅僅支持宏觀 Components 或者文字樣式。填充色、描邊、投影甚至圓角、長、寬，所有的都應該是 Components，可以存儲在樣式庫中。你只需要根據自己的工作流，選擇最適合自己的界面元素耦合度即可。

直接導出代碼 | Exporting <Code/>

雖然我們在做設計時一切都是可視的，但是仍然需要在導出的時候變成代碼。但是事實是，各個團隊都有自己的風格，所以 Phase 團隊提供了足夠多的設置項。用戶可以配置出自己團隊能夠直接拿來使用的代碼。筆者對這個功能不抱很大期望～

其他功能 | Other Features

真實數據、實時協作、版本控制、評論，這四個功能在市面上都有足夠成熟、好用的方案，不知道 Phase 團隊打算怎麼革新。點陣圖編輯、矢量編輯這兩個完全是濫竽充數，就為了多放兩個 Feature ??。唯一有看點的可能就是跨端了。我在想跨端的解決方案也許是桌面端作為生產力工具，Web 端主要負責展示，再附帶一些簡單的修改、協作功能。

其他文章

• 專欄：Ant Design | BorderDesign | 一斑
• 插件：CRAFT | Sketch Material | WeSketch | Runner | Paddy | Diya
• 技法：Library | Colored Text | Symbol | Shared Text | Resizing | 流程圖 | 文檔 | 表格
• 工具：InVison Studio | Nucleo | Feedly
• 案例：Swarm | YouTube | Uber | Oscar | Atlassian | Adobe | Adobe | Airbnb

感謝閱讀

推薦閱讀：