sketch做的原型圖，如何更好地展示交互邏輯關係？

01-06

最近一直在用sketch做的原型圖，用Notebook這個插件寫了交互說明，每次導出整個模塊給UI或開發看，因為不像Axure那樣有跳轉交互，開發人員都覺得不太方便，但我覺得用sketch做原型圖，真的很好哦，所以我想請教一下，大家用sketch畫的原型圖，輸出的文件是怎麼樣的啊！希望有用sketch做原型設計的小夥伴分享一些經驗，多學習學習

可以在 Sketch 上安裝這個插件「Click-Thru Prototype」，它可以讓你把按鈕或者元素跟畫板（artboard）鏈接起來，體現頁面之間的跳轉關係，並讓你導出HTML文件，方便分享並點擊跳轉。關鍵是完全免費，也不需要註冊，上傳啥的，簡單方便。

到Github下載：markhorgan/click-thru-prototype

1. 安裝後，選擇某個元素，例如一個按鈕，從插件菜單里找到「Click——thru Prototype」選擇「Link to Artboard」

2. 然後會看到彈出框，選擇你想要跳轉的畫板即可。

3.完成所有的邏輯關係的鏈接以後，再次在插件的菜單里選擇「Export to HTML」就可以生成可點擊跳轉的，也可以反映頁面邏輯關係的文件了，也可以輕鬆分享。

需要注意的地方：畫板的命名不要用中文，要不然生成的HTML文件會看不到圖片（也就是每個畫板）

不足的地方：頁面多了，很容易忘了哪裡有連接，哪裡沒有連接，希望未來可以有更新版本可以提現這一點。

作者：何亞虎

鏈接：sketch做的原型圖，如何更好地展示交互邏輯關係？ - 何亞虎的回答

來源：知乎

著作權歸作者所有，轉載請聯繫作者獲得授權。

這個問題得問我。當初我拿到sketch的時候簡直激動壞了，以為交互界繼axure之後終於誕生了一個次時代的交互製圖工具。

然後我發現它沒有繪製邏輯圖的功能。

我瘋狂的找了很久，上國外論壇各種求助，一遍遍的google上搜sketch插件。每隔一段時間就搜一次。

然後我終於接受了現實。

這特么的坑爹玩意兒，我被「sketch」這個名字給坑了，這壓根就不是個畫交互稿的工具，丫是個做UI的工具。

所以你就別提怎麼更好的展現了，sketch壓根就不能展現邏輯關係。

我跟你推薦omni graffle，過去4年我們團隊一直都在用omni graffle，是經過各種大型商業項目千錘百鍊證明確實是目前用著最順手的交互製圖工具了。

omni這個東西跟ps一樣，有年頭了，龐大、臃腫，而且根本不是專門為交互誕生的工具，連畫戶型圖的功能都有。

所以我們團隊一直在努力尋找可以代替的工具，而且過去這兩年簡直是交互設計工具井噴的時期，我們團隊是比較喜歡嘗鮮的，從briefs、sketch、principle、hype、Adobe新出的XD等等，全部試了一遍，都是深度使用（要麼是在實際商業項目里用，要麼是在項目演練里用）。

每次都是滿懷希望的以為自己找到了，最後都失望了，還是用回omni graffle。

然後我也不推薦axure，因為我們在實際項目中逐漸放棄了製作那些可交互效果，因為不利於交付和溝通。

我們當初剛從axure轉向omni graffle的時候，我給交互團隊的參考指南寫的是「移動端項目使用omni graffle，輸出連線的頁面流程圖；web端項目使用axure，不得使用任何複雜的交互動態效果，對主要導航入口應做跳轉鏈接。」

後來我們連web端都慢慢使用omni了。因為交互稿最重要的是反應布局、界面之間的邏輯關係和跳轉關係，所以平鋪圖比sitemap要更合適，用連線來反應跳轉關係比直接用滑鼠點的要更合適，前者更一目了然。

低保真的交互效果在大部分項目中是沒有太大意義的，真正有價值的是高保真效果，視覺稿出來之後再做的，可以直接給開發和領導看的demo（可以用AE、principle做）。這些都不是在交互製圖的階段考慮的。

唉。其實我們多麼渴望能有一個好用趁手的專門用來畫原型的工具啊。

樓上有個回答是用sketch畫稿子，然後放omni裡面連線，這完全就是浪費時間。一個中等規模的項目線框圖至少都是上200+的頁面，每個頁面隨時都會發生更新修改，來回在兩個產品里倒來倒去，還不如在omni里直接做了。

當然，如果是做視覺稿的話，sketch工具還是非常贊的，我們團隊現在有一部分APP的項目開始選擇用sketch做了，至少是可以作為一個可選的技術方案去考慮了。（當時寫這篇答案的時候sketch還沒有那麼火，現在我們的項目80%都是sketch做的，基本上已經是業內標準了。之前我們最擔心的是用PS的客戶打不開sketch源文件，所以一直不太敢用sketch做項目，但是現在已經不擔心這個問題了，因為大家都用sketch）

而交互製圖工具一直都不被業內重視，最近幾年的熱點其實也是在交互動畫上，交互稿的繪圖工具估計還要好幾年才會有所發展，前幾年出來一個axure已經非常難得了。

但是axure主要是用來做web端產品的，移動端明顯就不行了，而且axure最近的發展也不太行了，一直都沒什麼動作，而且這麼多年那界面丑的跟啥一樣也不改。

然後樓上有人說principle的，可算了吧，當初我們剛拿到principle的時候，也激動的跟啥一樣，然後在最近的兩個項目里用principle搭建了完整的交互模型（就是把整個APP的功能都模擬出來，最後文件將近300M），在做的過程中那個BUG多的，我真是無力吐槽了。而且界面一旦多了，principle的內容結構就太複雜了，想修改東西很費勁，做到一半要交接給別人那更是不可能，其他人看了直接懵逼。

所以目前principle還只是作為個人玩玩，或者產品不複雜的，或者只做局部功能的演示，千萬不要像我們一樣傻乎乎的用principle把整個APP都做出來。

principle最近版本更新了component（組件）功能，結構上的問題會好一點，但是總體來說離真正成熟還差得遠。

所以，我的結論就是，在實際商業項目的生產環境里，目前還沒有發現任何一個靠譜的交互工具。老老實實用omni graffle、ai、viso這種老槍老炮吧，雖然不酷、不新潮，但是真好用，這些老傢伙們直到現在還沒死掉是有原因的。

兩個星期前，無意中打開了郵箱里Sketch的訂閱郵件，標題一下吸引了我：「Sketch News - User Flows Plugin...」

點開鏈接（User Flows）一看，「A plugin for generating flow diagrams from Artboards in Sketch」

咦，這不就是你們一直要找的東西嗎？

用上這款插件，你可以：

1. Define Links 在畫板間添加鏈接跳轉

2. Add Conditional Logic 這貨還可以根據情況，鏈接不同的頁面

3. Generate Flow Diagrams 一鍵生成頁面流程，可以從整體上查看頁面與頁面之間的鏈接跳轉關係

4. Show or Hide Connections 你可以選擇是否顯示這些線條

5. Customize Your Diagrams 最後還有一些定製功能

有興趣的朋友，可以到官網查看，傳送門：User Flows

我已經用上了，很方便。

————————更新

現在，你可以使用Invision 出品的 Craft Manager在Sketch中創建Prototype了

不用再為跳轉和交互邏輯的展示發愁了。

1.dribbble上的原型圖看不出邏輯

dribbble上面大多都是視覺設計師，他們有些原型作品並不是用來體現交互邏輯的，是完全按照視覺表現做出來的原型圖（怎麼美怎麼畫，怎麼有逼格怎麼畫）純展示性質，實用性並不高，當然dribbble的那種小圖也看不清楚你想要了解的「邏輯」。

例如下圖：

圖片來自dribbble

雖然上圖的原型圖確實很好看，原型與原型之間的線也似乎把邏輯表達的很清晰，但是這樣的交互原型圖是好的嗎？顯然並不好。因為原型連接線錯綜複雜稍不留意就容易看錯，使之看起來很複雜（裡面也有大量的曲線，其實調節曲線也會花掉許多功夫）。整個交互文檔顯得過於龐大，一個畫面裡面要交代的事情過多，這使之你的文檔的體驗變得極差，雖然他看起來很美很規範的樣子，但是他並不好用。並不能清晰的展現出交互邏輯。當然如果你想讓你做出來的原型圖美觀一些，給看你稿子的人以愉悅感，讓他們通過視覺感官認知到你的專業，也是給可以自己的稿子加分的，那麼這樣的話，當然是可以借鑒學習一下dribbble上的原型作品，但是切記不能為了美觀而美觀（花費大量時間和心思為了美觀），保持基本的整潔大方，排版正確已經足夠咯~

另外導致原型連接錯綜複雜的原因就是可能是一個頁面跳轉流程圖裡包含了不同的幾個功能，在一個流程里塞入不同的功能，確實會讓文檔變得複雜不清晰。

2.以下是我在工作中採用的方式僅供參考

例如我們要用原型來表達一個任務流程

首先我們會先有一個主流程（happy path）
主流程中一般不要出現報錯、判斷、與主流程不相關的特殊跳轉、特殊的情況等。這個主流程的目的是為了讓文檔的使用者先了解此流程的主線，了解一個正確流程的流轉路徑。

好了，主流程咱們表達完了，接下來我們就要對主流程作一個補充。

我們再把一些特殊的情況以及主流程的一些分支流程分開來寫，這樣的話就讓你的交互文檔主次清晰，更容易表達我們的交互邏輯。切記不要在一個流程中過多的表現與之不相關的流程，一次只說清楚一件事情。

如上圖從視覺上看流程是從左到右依次排開往後面走的，但不是絕對是這樣的，有時候分支流程里其實也會有一些小的分支流程的情況，這時候可以根據實際情況用線直接連接出小的分支流程，切記避免雜亂，如果分支流程過於複雜，請拉出來單獨畫出。

其實以前也有跟樓主一樣的煩惱，自己的交互文檔總是亂七八糟，這期間嘗試了不同的做法。也許以後做法也可能改變，但是有一條不能變：那就是用自己的文檔來清晰的表達出自己的設計想法，讓使用自己文檔的人有最好的體驗【我們就是做用戶體驗的嘛 : ) 】

最後希望能幫助到樓主和看我回答的人若有表達不對的請提出多多賜教共勉 : )

----------------------------------------------------------------------------------------------

2017年2月21日補充更新

其實我上面主要說的是【場景流程圖】每一個場景都是從左到右，有始有終，很清晰，每次直說一件事。讓交互設計師的上下游都能夠清晰的明白用戶通過這個流程能夠達到什麼樣的目的。但是開發同學用起來就缺了很多跳轉邏輯，判斷邏輯。

另外【頁面流程圖】就是以上我吐槽的dribbble上的圖，這種圖其實能夠清晰的表達出頁面跳轉邏輯，適合跟開發同學進行溝通。但是缺點也是顯而易見的，繪製的過程中容易讓其過於複雜，可讀性降低。

【場景流程圖】和【頁面流程圖】兩者都有優缺點，所以我們在做稿子的時候盡量把兩個結合，讓兩者進行互補，合理運用讓交互設計產出物更加的清晰明了。

這些都是我答完題之後又進行的一些總結思考，以前的答案略有偏激。

好了，希望大家都能給出最好的設計產出！

可以考慮安裝 Craft 插件，其中最新推出的 prototype 功能可以讓你快速在 sketch 里直接添加簡單的頁面交互效果，然後通過手機端 InVision app 快速預覽效果，而且這個插件還有其他很好用的功能，由國外有名的 InVision 團隊開發，親測簡單有效，題主可以試試看，因為比較簡單，我就不詳細說明了。

除此之外題主也可以嘗試用 sketch + flinto 的方式做交互，flinto 用來做交互原型是非常簡單方便的，而且功能也更為強大。

另外，principle 更適合用來做交互中的動效（它自己的產品定位就是 Animated Design），不太適合做界面之間的簡單交互表現（畫熱區都很麻煩）。

最後，也可以試試 Adobe XD，工具本身就已經將設計和交互功能融合在一起，挺有意思。

Craft 地址 https://www.invisionapp.com/craft

Flinto 地址（需要翻牆） Flinto

Adobe XD 地址 Adobe Experience Design CC (Beta)

一般不會將所有的流程放在一張紙上，通過點、線、箭頭等去連接，這樣看起來會比較累也比較複雜。

我一般的做法是會按照流程分步去做，比如刪除流程是一頁紙，從主界面點擊刪除按鈕一直到刪除完畢。然後新建流程是一頁紙。這樣最後輸出串起來輸出PDF看起來會比較清晰一些。現在在工作中這樣做去跟開發兄弟溝通還沒有遇到什麼大問題。

隨手以iphone 相簿的刪除和新建為基礎大概畫了兩張圖可以一塊探討下。（第二張圖沒有仔細畫，主要說明分步流程的意思）

謝邀！

根據你的問題描述，改成「sketch做的原型圖，如何更好地展示交互邏輯關係？」會比較好。如果題主把問題關注在「sketch 做的原型圖」上，那可能不得不說會有局限性，原型圖並不能很好的展示完整的交互邏輯。

以題主現在的原型圖來說，把所有的Artboard 都展示在一張圖上，單個流程橫向展示，這種形式就很好。可以在Artboard 左側加上大的標題「登錄流程」、「註冊流程」會比較好。因為這種流程想對比較簡單，畫箭頭其實感覺也沒太大必要。

另外，原型圖只是工作的一部分，更重要的是團隊之間的溝通。之前的工作中，交互甚至不用Notebook 插件做的這麼好，但他們在完成工作之後都會和UI、開發講一遍整個流程，大家有什麼疑問都可以直接提出來討論，沒有問題之後共享給大家。

可以在dribbble 上看看別人的展示方式：

Dribbble - Sample-Wireframe.jpg by Wei Liu

Workflow for scanning business cards app by Sergey Shevchenko

以上，希望對你有幫助！

這個我必須要推薦一下墨刀的sketch插件了！

平時我們工作里經常會遇到以下問題：

交流設計，同事設備沒有安裝 Sketch，版本不兼容；
需要細節討論，在設計稿上溝通不便，無法實時協同；
Sketch 無法完成交互及邏輯關係設計，演示最終效果；

Sketch 用戶，使用 MockingBot 插件僅3步完成高保真交互原型：

下載插件
選擇項目，導入 Sketch 設計圖
生成墨刀頁面，交互，連線頁面邏輯，運行展示。

就可以得到比擬真實 App 的高保真原型了！！！

第一步：

打開 Sketch 中的墨刀插件。

先去下載酷炫的墨刀 Sketch 插件，
打開 Sketch 後需要先選中設計圖，再打開 MockingBot 插件，進行上傳（對，首先你得有一個 Sketch ，和裡面的視覺設計圖）

值得注意：墨刀 Sketch 插件1.0版本中，可以同時選中並上傳多個 Artboard ，墨刀應用中會以 Artboard 為單位自動創建多個頁面。

第二步：

在插件界面中選擇墨刀項目，確認導入。

選擇墨刀中的項目，考慮到不少大神在墨刀中項目成百上千，我們還有搜索項目，你可以快速查找，或者按更新修改時間排序查找。
選中項目確認導入。
3 秒後顯示上傳成功！

第三步：

在墨刀查看頁面和添加動效和連線頁面關係；

回到墨刀工作區，你會發現右側頁面列表中已經自動導入了所選圖片，並分別以圖片名稱自動完成頁面命名。（機智設計師會採用統一的命名方式來提高效率哦）
你可以馬上通過拖拽連線完成頁面關係及跳轉效果，點擊運行即可查看效果。

第四步（高級炫技）：

點擊「運行」演示效果，或「分享」給同事進行協同討論。

點擊運行，在預覽界面只需雙擊就可以創建打點討論，馬上吐槽問題。
讓同事或實時溝通，細節清晰不遺漏，時間可追溯。
討論完成之後你可以修改，這個版本就可以方便歸檔了，擺脫混亂不是夢。

看到這兒，聰明的你已經完美get了這個技能。

未來版本功能預告：

2.0版本可以智能導出圖層信息，方便後續精緻的交互設計。
3.0版本會自動顯示所有設計參數，顏色、字型大小、邊距，與工程師哥哥交流更高效。

sketch里把layer整理好連到principal里做prototype不就好了，交互邏輯還是clickable prototype比較好展示吧。如果不需要動畫的話inVision也可以。

上張我的final project（freshman見笑）：

inVision簡單做一下：http://www.yihanz.com/visual/#interface

Principle - Animated Design

Free Web Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool

一覽的話還有app map：

（這個當時趕due比較low fidelity）

用axure做框圖不就好了。。。個人理解，sketch是ui的同事用的，流程裡面比較靠後，你做的原型太精細了反而容易影響到ui同事的思路。。。

sketch很難體現出平面的邏輯關係，那種帶交互的也就評審演講的時候演示有用，真正能用來可讀的還是得靠平面鋪開的，我試過多種插件，真的難用，難用至極！不要嘗試掙扎了，真的是負效率。

反而Axure可以非常簡單額勝任，那就是鏡像+連線，可以創建一個新的頁，然後肆意的使用鏡像吧！在其他頁做的東西都會被複制過來，你只需要專心的組織他們的邏輯關係。

但是，我已經很久沒用Axure了，原因嘛！它已經跟不上老司機的車速了，拖拽元件的方式非常非常不喜歡，即便我之前一直使用Axure的時候，我也只用矩形一個元件。加上他那office03版似的界面，好了不想多說了...

額外說些，使用Axure除了我前面說的平面邏輯圖，也可以使用另外一個東西與之搭配，那就是demoo，可以生成單頁的圖片然後在demoo中製作簡單的交互原型，關鍵他還是網頁，你甚至可以把所需要演示的頁的連接直接貼在文檔中，怎麼樣？讓程序員來體會你滿滿的愛意吧！

再說回sketch，反正我是沒辦法了，好在我現在是在小團隊，而且只有我1個人做產品，所以我的做法是：用MindNode補充一些邏輯說明，用flinto製作重點額交互演示，其餘的就靠嘴補充了。反正現在也不需要協作，去它喵的兼容性，我愛怎麼來就怎麼來。

你這原型太會干擾設計師了

首先Sketch是做UI的...非要用插件也可以,我是習慣各種工具只使用它的最佳功能.

principle我覺得更多的是做交互transition動效.特別是給老闆看你做了些啥酷炫的東西,在給art direction的proposal階段比較有用.比AE節省時間

AE也做動畫,做比較複雜的必須AE(比如你要隨機的閃光點,各種光效).簡單的principle性價比更高.

Axure根本就已經退出時代潮流了, 可以做但是非常費時間, 事倍功半.

真的做prototype的:

Omni我認識的一個Agency在用

我所在的公司用invision個人覺得還不錯(國外應該還有很多類似的可替代品).

墨刀用過一次, 個人更喜歡invision

強調一下一個不是很重點的事情:

一個軟體/應用的界面設計真的很影響人,invision從顏值上就比墨刀好看= =

現在Affinity的內部UI(一些icon啊之類的)就比Sketch要長得好看....

界面長得不一樣,做的人和看的人都會有不同的感覺哦...

sketch並不適合做原型你會花費大量的時間和精力在設置色彩、尺寸以及圖層對齊上而疏遠業務邏輯和失去對產品功能的把控。這樣做效率很低。反倒是在原型完成之後用sketch完成ui的最終定稿才是它擅長的。

我是sketch做好原型圖，然後導進principle做交互流程稿

贊同 @Bink 和 @孫夢超的回答：

1.使用Artboard

2.通過分支展示

3.原型圖使用黑白灰三種顏色即可

4.多當面溝通，並郵件備忘

不知道題主的工作流程,但是一般來說有交互的都是在前期線框圖就做好了(axure),而sketch做的是之後的UI視覺設計了,到這一步再做一遍交互的那要求就真是高了.

如果一定要在這一步做交互,推薦用一個叫marvel的應用(IOS),是可以在手機上用一系列圖片做出交互.使用很簡單,可以設置熱區和跳轉的目標圖片.簡單的交互完全沒問題.

嘗試一下principle 這款軟體，簡單易上手，配合著sketch 使用十分方便。太晚啦我要睡覺了，就不貼鏈接了，題主可以自行百度一下。希望對題主有幫助。