這種交互線框圖是用什麼工具畫出來的？

01-23

但凡別緻的東西都是自定義的，這種應該是 AI 做的。

要說圖片里的是什麼做的一時不可知，如果是類似的線框圖的話，Axure就可以~

想要什麼線條，想線條兩端是什麼樣樣式，線條顏色一切都可以調~~~

畫完之後嫌頁面不夠大展示不全可以導出圖片。善於工具，Axure還是很強大的。

Sketch可以，需要把文字和線條調整到畫板之外，線條可以用組的形勢，或者點九的圖片。

推薦用onmigraffle，因為我做了一套現成的模版，只需要添加圖片和文字線條就可以了。

如圖：

擦，不支持gif，這知乎體驗差勁啊！

這是sketch做的

線框圖工具在產品設計前期有著至關重要的作用。脫去了視覺的外殼，設計師能夠清晰地將產品的特點用簡單的線條描繪出來，且不落下任一重要的細節。當客戶想了解你的移動應用工作過程時，如果只是簡單地進行口頭解釋，或撰寫文檔，可能要用掉用戶不少腦細胞來想像。但此時如果你將做好的線框圖頁面按照順序發過去，既能清晰表達你的思路，又能節省雙方的時間。

在線框圖工具沒有出現之前，設計師，產品經理們用紙筆來勾畫線框圖，或者直接用PS來畫。自從有了專業的線框圖繪製工具，設計師與客戶，開發人員的交流方便了不少。對於設計新手來說，利用線框圖工具來鍛煉自己的產品設計能力是很有必要的，更何況越來越多的公司在面試產品經理和UX設計師時也要求應聘者能熟練使用一到兩種工具。但設計工具大多價格不菲，經驗較少的設計師在做選擇時要花不少功夫。實際上，對於新手，甚至是大部分經驗豐富的設計者來說，許多免費的線框圖工具就能滿足基本需求。以下我主要介紹三款口碑不錯的線框圖工具，另附上免費的下載通道，希望對你有幫助。

在介紹前，為了幫你選出最適合的工具，請問自己這樣幾個問題：

1. 我有多少時間來學習這款工具？

2. 我對保真度有什麼要求？一般來說線框圖要求中低保真，從而能保證設計速度。

3. 我需要在哪幾種終端上操作，演示或分享我的線框圖？

4. 我對產品有無其他特殊需求，如：需要多種演示方式來適應不同情況？

5. 我的相關技能如何？是否能快速上手這款工具？該工具對代碼能力有無要求？

了解了這些問題的答案後，就來看看下面這些工具合不合你胃口吧。

1. Axure

免費試用時間：1個月

平台：Mac/PC

功能：製作流程圖，線框圖。靈活拖拽組件，內置組件包，自定義你的圖表。

難度：

保真度：中高保真

是否需要代碼能力？需要一些

2. Mockplus

免費試用時間：永久免費

平台： Windows, Mac, Android, IOS

基礎功能：

簡單快速地進行原型和線框圖設計。

適用於桌面應用，手機app，平板應用等。

快速演示，修改，分享。

難度：

保真度：中度保真

是否需要代碼能力？否

3. Justinmind

免費試用時間：1個月

平台：Mac/PC

基礎功能：

上傳原型，高效地獲得反饋。便於行業分析師，用戶體驗設計師，產品開發人員及產品經理進行溝通。

難度：

是否需要代碼能力？否

這些免費又好用的線框圖工具中，一定有一款適合你。以下3篇文章進一步詳細地介紹了這三款工具，有興趣的話可以讀讀看：

Mockplus：什麼讓我成為好的線框圖工具？

Axure深度解析

Justinmind功能概覽

最近也在做交互線框圖，感覺這種交互線框圖既清晰明了又很有設計感。

Dribbble - Kitchenware Pro

類似這種線框圖，dribble 上有很多，有說是sketch畫的。剛用sketch一段時間，感覺鋼筆工具太難用了，一想到那完美的圓角就放棄了，現在用Ai畫。

還有一些線框圖的線有不同的顏色，線之間還有說明，有的甚至有圖例，標註不同的線是什麼意思，類似施工圖一樣，頓時感覺好專業。

抱著相同的疑問我也隨便在網上找了找資源，dribbble 上也有人問類似的問題，Dribbble - User Flow by Eric Ressler 從下面的回答中，推薦了Omnigraffle，同時也有人會用Ai，我也是用Ai，但感覺6米的畫布還是不夠大。

類似的討論還有：Dribbble - Simplified Checkout Process by Michael Pons

另外一個資源：http://uxkits.com/ 點開的網站太多，不知道從哪點進來的了。

知乎上也有類似的提問，請問線框圖和原型圖的區別？ - 原型工具@尤文文請問yoyo有沒有相關經驗和資源可以分享？比如規則，方法等。感謝！記得你好像用過Indesign 做交互圖？但後來沒找到文章。

只是想要做出來的話答案非常多，我相信PowerPoint 也能畫（事實上用PowerPoint 畫線框圖也不是什麼大新聞），畫圖應該也可以，就是要費一點功夫。

但是如果想要比較有效率地畫，那答案就比較有限了。首先應該是illustrator和sketch，不管是做具體每一屏的內容，還是安排整個流程，都相當方便。

還有一些專門的線框圖工具，譬如Axure 和omnigraffle。我個人使用Axure經驗有限，並且是若干個版本之前，當時的印象是更側重低保真，輸出文檔和交互原型，在對圖形的操作上（譬如提問圖片中標號的水滴形狀）幾乎還不如PowerPoint。不過現在版本應該有所改觀。Omnigraffle我不是很有經驗，有同事用，效果是可以做得不錯的。但問題是 Ai 和 Sketch 如此主流，似乎設計師至少要掌握一種，於是為什麼還要用Axure和Omnigraffle呢？不過也有說法認為後兩者是更多針對產品經理。

最後是Photoshop。當然可以做，但是我並不推薦。我個人的意見是，Photoshop本身的使用邏輯和界面決定了它是數碼繪畫，圖像處理和視覺設計工具，不是交互設計工具。就算新版本加入更方便的選取或者矢量操作工具，這種基於圖層，無法方便地並置整個流程的界面仍然與交互設計的本質相悖。題主給出的這張圖片並不只是一個結果，它也是一種設計過程和思考方式。

sketch

產品經理常用的兩大交互類工具：

1、Axure

2、Sketch

有些畫原型圖的工具，比如墨刀，可以自動生成。

都可以，這只是交互設計中比較次要的環節，當然不是說不注重交付件的美感，閱讀性。

關鍵還是對需求的梳理、把握、轉換，多斟酌流程、框架、細節對整個交互更有幫助。

最後，歡迎關注我的公眾號「大貓的設計本」，裡面有N多乾貨，免費下載100+電子設計書籍。

歡迎騷擾，有問必答！對你有幫助，那是極好的。