【譯者注】作為一款設計工具，Sketch只用了1年多時間，就迅速風靡於移動設計師之間，無論是我所在的團隊和公司，還是國內外各大設計組織，都對其推崇不已，“設計流是否支援Sketch”也成為移動原型工具的重要競爭力。本文是Silver移動原型工具作者在Medium上的SWLH（Startups,Wanderlust, and Life Hacking）話題下寫的一篇介紹文章，從各個方面介紹了這款原型工具的優勢和特色，相信對各位移動設計師有一定的吸引力。

Silver是一款便捷進行移動設計流程的工具，它包含：一個iOS應用、一個Mac應用和一個Sketch外掛，三者之間無縫銜接，完美配合。

背景

2015年初，為了找到完美的原型工具，我將Silver作為一個兼職專案進行研究，研究中發現了一些很棒的工具，包括：Framer, Pixate, Form, Origami, Invision, Flinto, Marvel, Proto.io和 UXPin。每一項工具都獨具特色，同時也為我的設計流程添加了不少麻煩。這些工具部分適合微互動設計，部分適合流程類原型設計。當然，在完全沒有整合它們之前，在設計流程中的每一步進行工具的切換非常痛苦。

可以說，我無法找到一款完全滿足所有需求的工具。

我的需求其實不麻煩：

-開始設計移動應用之前，先進行使用者流原型設計。儘管每次只能設計一個頁面，但完整的故事需要一個頁面流，我不想對設計失去全域性控制。

-能在移動裝置上實時預覽、感受和體驗自己設計的應用，而不是匯出圖片、同步檔案或者繪製熱點。原型的製作越簡單越好，否則我會立即放棄使用。

-先進行低保真設計並進行測試，從測試結果中不斷迭代優化設計，在不切換工具的情況下逐步增加原型的保真度。 -能展現應用開發時面臨的真實技術限制，避免設計出無法落地實現的應用。 -作為目前介面設計的最佳工具，我希望可以在Sketch中完成設計，該原型工具能與Sketch深度整合並支援其相關外掛。 -一旦完整流程確定後，我可以基於頁面製作微互動。Framer是我個人最喜歡的頁面級別互動的原型工具，因此該工具最好能夠與Framer相容。

-最關鍵的地方在於減少設計流程中不需要的瑣事，這樣我才能將精力花在與客戶溝通、進行深度研究或是設計多套方案供測試等方面。

與其抱怨缺少這麼一款能滿足我所有需求的殺手級原型工具，還不如自己動手。我具備Sketch外掛的製作經驗，對其內部原理也有所瞭解，因此立即選定了基於外掛的解決方案。我立馬召集了自己心中最牛的外掛開發者Andrey跟我一起進行嘗試。

以下是我倆搞定的Silver基本功能，以及它們如何幫你提升設計效率的建議：

與Sketch深度整合

將Silver應用安裝到Mac上之後，你還需要安裝一個Sketch外掛，用來在後臺與之配合。Silver應用出現在選單欄上，用作與移動裝置連線，其它所有功能都融合在Sketch及外掛之中。

Silver選單欄應用，連線與斷開狀態。

Silver的內建邏輯能幫你把設計轉換為Sketch文件中的原型，我們的目標是消除匯入、匯出、同步以及切換工具等設計流程中的瑣事。

通過WiFi或者USB連線裝置

如果你正在設計移動應用，務必注意，必須在移動裝置上去預覽介面的最終效果！

藉助iOS裝置安裝的Silver預覽應用，你不僅可以實時關注Sketch中藝術板（Artboard）的微小修改，而且可以預覽使用Silver Sketch外掛建立的設計流程。

通過WiFi連線的裝置能夠讓你隨意在辦公室展示你的原型，除此之外，Silver還可以通過USB連線的方式做到這點，而且映象展示更迅速，它能夠根據裝置是否插上自動判定使用USB或者WiFi。

設計工作流而不只是頁面

Silver有一項頗受喜愛的特性，它支援Sketch內通過連線藝術板上的圖層形成工作流。選擇一個圖層並敲擊鍵盤上的C就能創造一個連線，同時這樣也生成了一個Interface-Builder（Mac OS X下用於設計和測試UI介面的應用）風格的端點聯結器，它可以通過拖拽連線到目標藝術板，選擇觸發轉場及具體轉場型別的手勢。

當你用Silver建立了一個工作流並且在iOS應用上進行預覽，你能體驗到一個擁有真實轉場的iOS頁面集合。這不僅讓你的原型更加真實，而且幫助你更好的利用iOS導航結構進行組織。

Silver支援三種類型的轉場順序：

1、推移轉場

【視訊】建立推移轉場

你能使用推移轉場來導航到應用內容的下一層級。比如說，聊天應用裡從對話列表到對話詳情。螢幕左側邊緣右劃能夠回到上一個介面，也能通過建立一個負責回退行為的圖層來實現。

2、模態轉場

【視訊】合併推移與模態轉場

模態轉場用於啟動一個獨立的要麼完成要麼明確放棄的任務。撰寫新郵件、Instagram上發一張照片、印象筆記裡建立一條新筆記，都屬於必須在一步或多步必須完成（或者取消）的獨立任務。取消一個模態任務，你必須建立一個包含Dismiss Modal行為的圖層。

模態轉場提供了目標藝術板出入的靈活動畫形式，你可以建立一個使用划動手勢來進行互動的模態轉場。

【視訊】使用模態轉場建立滑出導航

3、無轉場

假如你偏愛頻繁的切換到其它藝術板，可以通過將轉場模式設為None來實現。它將即刻以你連線的藝術板取代當前的藝術板。你不但可以用這種方法來展示當前藝術板的不同狀態，也可以用來建立一個基於底部標籤欄的應用原型，切換標籤時不需要任何轉場過渡，如下所示：

【視訊】使用無轉場的藝術板連線建立底部標籤應用

觸發核心iOS功能

除了建立設計流，Silver還能建立連線圖層來觸發：啟動攝像頭、瀏覽照片、啟動系統郵件、編輯簡訊、撥打電話或者在預設瀏覽器中開啟一個外部URL地址等核心iOS功能。你不必再通過仿製靜態螢幕在原型中來模擬這些功能。

下面我們舉個例子，看看如何建立連線來允許使用者在他們的iOS裝置上瀏覽照片。將選中的照片填充到一個圖層，命名為_Photo。

【視訊】建立連線用以瀏覽照片並顯示選中照片

固定的頁首和頁尾

【視訊】用Silver建立頁首與頁尾

Silver支援通過鍵盤快捷鍵建立固定的頁首和頁尾，選中要固定的圖層，點選Ctrl+Shift+H來固定頁首，點選Ctrl+Shift+F來固定頁尾，就這麼簡單。與該圖層的尺寸和位置的有關變化，都會在預覽中自動更新。

實時輸入框

【視訊】用Silver建立輸入框

有時我們要製作一個需要使用者輸入資訊的原型，比如說簡單包含使用者名稱和密碼輸入的登入頁面，或是包含諸多資訊輸入框的個人資料編輯頁面。按照以往的做法，大家可能會製作一個偽造的原型，因為再原型中模擬真實輸入框的過程太麻煩。

Silver出手，原型我有。只需要簡單設定一下，你可以在Silver中輕鬆建立常規的文字圖層以便在原型中真實模擬文字輸入框。實時輸入框引入了UITextField物件的一些功能，比如設定佔位符、在輸入框中顯示清除按鈕、選擇輸入鍵盤型別等，凡是設計需要考慮的狀態都應有盡有。

嵌入WebView

【視訊】嵌入網頁內容及Framer原型

Silver還能將矩形圖層轉換成實時WebView，這對於使用HTML構建的應用功能遲早有用，而且在已有內容裡新增新設計會更方便。

WebView還支援連線到本地Framer原型，這樣你能夠將頁面級別的互動引入到Framer中，它們與應用的其它內容融合的更棒。Framer中的一個元件依舊可以正常工作，能夠直接從Framer程式碼中呼叫Silver對應的具體功能。

關於公測

以上都是Silver內測版的功能，僅展示了一些皮毛，年底我們會為最終版提供更強大的功能。

幾周之後，我們將限量邀請部分設計師/開發者加入公測，如果你有興趣，請到silverflows.com註冊登記。

有問題或建議，或者想援助我們，請在我們的Twitter賬號@silver_flows留言。