《TO 導讀》Silver 是一個可以流暢地在 Mac 和 iOS 間傳輸設計 Sketch 擴充元件，能讓 UI 設計師面向手機端 UI 流暢地開展原型設計。一位 Desigrammer – Aby Nimbalkar 發表在 Medium 上的一篇文章，介紹了他在做的一款原型工具。與所有其他的原型工具不同的是這款工具是一個 Sketch 擴充元件！
以下以第一人稱編譯。
Silver 是一個結合 iOS app、Mac app 及 Sketch 3 讓手機設計更順暢的應用程式。
- 背景故事
當我在今年初開始啟動 Silver 這個 Side-Project 時，我 google 了一下一些設計工具：Framer、Pixate、Form、Origami、Invision、Flinto、Marvel、Proto.io 和 UXPin。這些工具都有他們自己獨特的優點，但他們都讓我的設計帶來了零散而繁重的額外工作。這裡其中的一些工具可以設計精細的交互效果，另一些則適合做使用流程（workflow）演示的原型。
然而，這些工具之間完全沒有相容，我在設計中不得不痛苦地在他們之間轉換。總結來說，我真的無法找到能滿足我所有需求的一套軟體。
然而我要的需求其實很簡單：
1. 在設計一款 app 的時候，需要在開始設計時做一個使用者流程圖，雖然我每次只設計單一個畫面內容，但有著多工畫面的使用者流程圖代表著完整用戶使用故事線，因此我不想偏離設計方向。
2. 我想要省略掉引導圖片、同步文件或者是畫熱點（我最討厭畫熱點）的步驟，因為這樣會讓我的原型更簡單上手。
3. 我想要先用低保真度的方式來設計我的應用並開始測試。當我從測試結果中了解到一些東西，並通過設計表達出來的時候，我需要同步提高設計稿的保真度（fidelity），同時不需要更換設計工具。
4. 我想要在設計中能直接了解工程師在最終開發時會遇到的各種限制，確保我們不會耗費過多精力在一個實現起來無比困難的設計效果上。
5. 我想繼續在 Sketch 裡面設計，因為它是到目前為止，最適合用來設計平面界面的工具。我想要一個能和 Sketch 整合在一起的工具，因為這樣我可以同時用到所有 Sketch 好用的擴充套件及功能。
6. 一旦整體的使用流程被確定、測試並通過檢測，我需要在單個頁面完成交互細節原型的製作。 Framer 是我個人最喜歡的工具，它能在單個頁面的原型上增加交互細節的工具。所以我理想中的原型工具應該能和 Framer 完美的結合在一起。
7. 最重要的是，我需要減少在設計流程中繁重而瑣碎的工作，從而我可以節省下時間來與使用者溝通，做用戶研究，或者做更多用於測試的交互原型。
與其抱怨世界上缺少一個可以解決我所有問題的 大絕 app，不如自己開始做一個這樣的 app。我曾經做過 Sketch 的擴充元件，也已經知道一些 Sketch 的內部細節構造，所以一個基於擴充元件的解決方案立刻吸引了我。之後我說服 Andrey ，一位我認識的 Sketch 擴充元件開發領域界的大師，加入到我的團隊中，來把想法推動到新的階段。以下是我們完成開發 Silver 後，它目前能做到的功能，以及你如何能通過它來加速你的設計流程：
- 與 Sketch 的整合
當你在一台 Mac 上安裝 Silver 的時候，會同時收到安裝 Sketch 擴充元件的請求。這個元件用於在後台連接 Mac 的 app。 Silver app 本身則停駐在 menu 上，幫助你連接行動裝置。所有其他的功能則以元件的形式放在 Sketch 上面。
將視覺稿轉化為原型的所有後台邏輯都會同步保存在你的 Sketch 文件內。我們的目標是去掉所有導入導出，同步文件以及在工具間切換的步驟。
- 透過 WiFi 或 USB 連接裝置
如果你在為一個手機 app 做設計，你一定要在你的手機上預覽你的界面，沒有逃避的理由！
當你在你的 iOS 裝置裡安裝了 Silver 的預覽 app，你可以將修改過的設計稿從畫板同步到手機裡查看，或者在 Sketch 擴充元件中預覽 app 的使用流程。通過 WiFi 連接裝置的功能增加了設計師在辦公室環境下分享原型的便利性，同時 Silver 也允許透過 USB 連接 app 來加快原型同步到設備的速度。基於設備是否接上 USB，Sliver 會在 USB 和 WiFi 間自動地切換。
- 不只介面跳轉，設計元素也跟著跳轉
我們最喜歡 Silver 的一個功能，是它可以直接在 Sketch 中將圖層與畫板連接起來，生成使用流程的原型（Flows）。想要建立連接，用戶可以選中圖層，然後按下鍵盤上的「C」鍵。這會啟動一個「界面生成樣式」的線型連接器，然後可以將它放置在目標畫板上。隨後你可以選擇觸發跳轉的手勢，以及其他的過渡動畫細節。當你用 Silver 做完了流程原型並在 iOS app 中預覽，你會看到一個真實的 iOS 界面導航，同時有著逼真的頁面過渡效果。這不僅僅讓你的原型看起來更真實，同時也利用到了 iOS 的導航結構的優勢。
Silver 支援三種形式的過度效果：
- 推移轉場（Push Transitions）
你會在用戶進入到應用下一層級的時候使用推移轉場。舉例來說，在一個聊天應用中，從一組對話列表中進入到一個單獨的對話頁。想要返回到上一頁，你可以從頁面左端滑動，或設置一個返回圖層來執行返回操作。
- 範例轉場（Modal Transitions）
- 無轉場（No Transitions）
當你希望立即從當前畫板切換到另一個畫板，你可以設置過渡類別為「無（None）」。這將會在轉換時用你連接的畫板立即替換當前畫板。當你希望用戶看到當前界面的不同狀態時，你可能會想用到這個轉場。你也可以使用這個轉場來做基於標籤欄（Tab-bar）的應用，並在切換 Tab 的時候將其設置為「None」，就像下面這個影片那樣
- 啟動 iOS 內建核心功能
除了製作使用流程圖、Silver 同時能讓你生成啟動 iOS 內建核心功能的連接。這些功能包括打開相機、瀏覽照片、打開系統郵件、打開簡訊編輯器、撥電話或者用預設瀏覽器打開一個外部連結。
你再也不需要在你的原型中去製作一個假的靜態界面來模擬這些功能。這裡有一個案例，展示如何生成一個連接，讓使用者在他們 iOS 裝置中瀏覽照片。你也可以通過將一個圖層命名為「_photo」來將使用者選中的照片去填充它。
- 固定頁首、頁尾
通過一個簡單的鍵盤快捷鍵，Silver 能讓你為界面設置固定的頁首和頁尾。選擇你要固定的圖層，按下「Ctrl + Shift + H」來固定為頁首，「Ctrl + Shift + F」來固定為頁尾，這樣就完成了。所有關於尺寸（Size）和定位（Position）的設置你都可以之後操作，同時更動都會在預覽中自動更新。
- 現實輸入範圍
有時候你需要設計一個需要使用者輸入一些內容的使用流程。也許是一個簡單的有用戶名和密碼的登陸框，或者一個有著更多輸入框的個人資料編輯頁。你可能傾向於偽裝這個行為，考慮到在原型中製作一個真實的輸入框是一個痛苦的過程。然而，這些都不再是問題了。有了 Silver，你可以在 Sketch 中建立一個普通的文本圖層，然後通過幾步簡單的設置將它在預覽中轉為真實輸入框。這些輸入框同時為我們帶來 iOS 裡「UITextField」對象的一些功能。
- 嵌入式網頁預覽
Silver 也可以將方形的圖層轉換為網頁預覽，如果你已經將一些應用功能在 HTML 中做出來，想要加到已有的內容中，這將會非常有用。網頁視圖的功能也相容指向 Framer 原型的鏈接。這讓你可以把在 Framer 裡做的多頁面的交互原型，加入到已有的應用原型中來，從而拓展現有原型的內容。一個專門為 Framer 製作的模塊也已經在開發中，能讓設計師能更簡單地在 Framer 程式碼中直接調用 Silver 相關的功能。
