由Principle 2.0 入門 — 不斷分割再分割

自 Principle 在2.0版本提供元件(Component)的功能後，Principle 的可用性大大提高了，完成一個項目的完整流程的演示也基本沒有問題。

Principle 功能上的優勢與舊版本留下的問題

1. 有類似於神奇移動的功能；

2. 能直接導入 Sketch 文件；

3. Component 功能；

4. 有單獨的畫板；

在像 Sketch 一樣支持畫板的同時，也伴隨著一個問題，隨著畫板的增多，畫板間的交互將會變得非常複雜，Principle 中的界面連線將會多得眼花繚亂。

同時，畫板增多，命名習慣也不夠好時，一不注意圖層就會出現相同的名字（尤其是一些矩形），而剛好這些圖層需要連線在一起的時候，你就會感覺到神奇移動的麻煩之處了。

使用Component

因為使用過 Sketch 的經驗，初見 Component 的功能很容易會當成是 Sketch 的 Symbol 功能來使用。這個功能的確可以這樣使用，但是遠不止如此。Component 可以把完整的流程分割，由多個Component 組成來完成整個產品的交互。

在我使用2.0版本時是這樣分割的：

• 產品中每個模塊為一個 Component（Component1~5）
• 模塊中有獨立操作邏輯的一部分為 Component（Component6）
• 再增加一些元件作為 Component（相當於 Sketch 中的 Symbol）

雖然看起來很複雜，但是操作起來完全不複雜，還有效的把各個模塊分開了，現在重新回到最開始說到的問題。

在像 Sketch 一樣支持畫板的同時，也伴隨著一個問題，隨著畫板的增多，畫板間的交互將會變得非常複雜，Principle 中的界面連線將會多得眼花繚亂。

因為把畫板拆分了成了不同的 Compoment，所以在一個 Compoment 內不會出現過多的畫板，連線很多的問題自然不會出現。

同時，畫板增多，命名習慣也不夠好時，一不注意圖層就會出現相同的名字（尤其是一些矩形），而剛好這些圖層需要連線在一起的時候，你就會感覺到神奇移動的麻煩之處了。

因為拆分畫板的緣故，畫板的數量都可以控制在一定範圍內，圖層名字的問題都是很容易可以處理的。

新問題

但是這個版本使用這樣分割產品的方法會出現一個新問題：元件之間是不能跳轉的，如上文圖中的紅線。

這樣的情況部分也是有辦法可以解決的：加入一些過渡的頁面，如我的模塊1與模塊2之間其實還有頁面，以及使用一些透明的熱區。

Principle 3.0 中對於這個新問題已經有了解決方法，下一篇會寫到。

Tips1：注意矩形圖層的透明度為0和矩形的填充透明度為0有一個不同點。

Tips2：如果怎麼分割都不能使用上面的思路來解決，說明這個項目不適合用這個軟體 ，換一個吧。

關於原型，推薦一篇文章：原型與你

同意這兩點：

不同的工具，表現的是不同的思維邏輯。

看起來用起來像，並不等於真實。