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（介面複製）

模式設計出來的。

［1］ 複製介面 — ［2］ 更改 — ［3］ 設定過渡

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

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

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

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

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

Selectors

：可視的 Components 都可以成為 Selectors，並且具備繼承關係；

Events

：真實世界的互動行為都將成為 Phase 中的 Events，比如 Click，Touch，Scroll；

Action

：Selector（s） + Event（s） = Action；

Element States

：web 端、移動端的 Element 都有很多的 Class（類）和 States（狀態），他們並不是靜止的。那麼 Phase 中的 Element 也會如此。你可以用 Action（s） 讓 Element 切換 State；

Triggers

：但是，原型設計不僅要考慮 Element States 的轉換，還要考慮介面跳轉、數值變化、增刪元素等情況，那麼你需要在 Timeline 上新增 Trigger（s） 來觸發 Action。

Conditions

：你需要判斷條件，也就是 if/else，這樣就可以處理判斷提交成功和失敗的情形。

用 Phase 提供的原型元素為你的介面自由搭建原型

根據 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 全貌

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

Units

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

Overflow, Clipping & Scrolling

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

Columns & Rows

：使用者可以在這兩種特殊的介面元素中單維度堆疊其他介面元素，並可以設定 Gap Properties 來保證他們之間的間距。

元件和樣式庫 | Components and Libraries

所有的元素都可以做成 Components

所有的 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

感謝閱讀