Sketch 畫原型比 Axure 好用嗎？為什麼？

12-06

因為自學UI的關係用了 Sketch，但是身為產品經理回頭去用 Axure 發現用 Sketch 畫原型還是不錯的，對齊標註什麼的用應有盡有.....好用太多。

我是堅決來唱反調的！！

產品經理早期規劃產品使用Sketch是極為不合理的，我知道題主肯定是不小心瞄到了那些看起來牛逼閃閃的產品原型圖（這裡？、這裡？還有這裡？）；是不是覺得，哇塞，好酷好專業好有逼格！但是我敢打賭，這些高保真的線框圖絕大多數都是設計師在主導並且是業餘興趣使然的作品，你放在實際生產環境中試一試？！絕對吃力不討好、嚴重拖延項目進度的不負責任的表現。

我是深有體會，一年前我幫好朋友做一個很小的項目，那段時間我也是剛剛學會Sketch，覺得有必要像Dribbble上的歪果仁一樣專業，輸出高逼格的產品原型圖......結果就是，原本我自己評估下來一周可以理順的產品，我用了近三周時間，這個過程中我一直被設計思維牽著鼻子走，而不是產品嚴謹的邏輯思維。後來我特地去翻看了Dribbble上那些拿Sketch畫線框圖的大牛們的Profile和博客，試圖去了解和學習他們在項目中是如何協作的，但是，毫無例外，我發現他們對自己的定位都是UI/UX設計師，而不是PM...

作為一個同時掌握產品+交互+開發的人，我後來在項目中即時調整了我的工作流程，看我的Dock，我是如此安排在Code之前我的開發節奏的：Axure &> Sketch &> (QC) &> ... 對比之後，發現效率極大的提升，在設計成本一定的情況下，產品策劃（Axure）和 UI設計（Sketch）的時間成本可以保持在3:1的樣子；而之前用Sketch的時候，我估計是5:1的樣子，甚至更多....

我是這麼理解我吃飯的傢伙們的：

Axure：梳理完成全部產品信息架構和功能。所以Auxre之於我的重要性他不是畫圖軟體、不是交互軟體，而更多的是幫助我從無到有梳理整個產品大的脈絡
Sketch：基於之前的線框圖增強設計感，具象之前的產品；如果產品理順了的話，設計UI在Sketch的幫助下產出簡直是飛速的，這也是Sketch之於Photoshop之流在做UI設計時候的牛逼之處。但是如果你錯誤的將Sketch定義為規劃產品的工具，那產能會十分的低下
QC：僅針對一些極為複雜和細膩的交互動畫（千萬別試圖拿QC當產品的交互工具，搞死你...），配合使用即可，也是幫助自己梳理特效的交互邏輯，避免在真實開發環境中走太多彎路。學習成本略高的軟體，我今年上半年花了大力氣學習的東西，傳送門：Quartz Composer 如何入門？（目前QC我已經摒棄了，推薦Principle這款交互特效軟體，更高效》》如何評價principle這款交互軟體？）
Coding...（業餘選手，主要是前端）

前面扯的其實已經立場鮮明的表明了我的觀點，但是還有一個可能被很多PM忽略掉的，光下面這一點就可以無視掉市面上所有的Wireframe軟體：

Axure有很好的目錄結構，層級關係！看似只是一個目錄，實際上是你整個產品信息架構組成的重要部分，很多產品經理都忽略了這塊的重要性。說實話，Axure開發團隊如果有心，制定好設計規範，配合好描述性組建，完全可以像Doxygen、Sphinx那樣根據目錄結果自動生成需求文檔。

我們再來看下Sketch的目錄，他很核心的一部分資源輸出實際上是形狀的成組以及Artboard畫板，仔細看裡面的目錄結果，跟PS沒有任何兩樣。Sketch被Bohemian Coding發明出來的初衷本來就是希望能夠短平快的畫出精緻的UI，而不需要跟臃腫不堪的PS周旋個沒完沒了，更加沒有想過用Sketch去規劃他們的產品。Sketch只是一個設計工具，僅此而已；而 @huiter 所謂的生態圈在我看來不過是支持了第三方插件而已，而所謂的插件功能也只是js寫的一堆批處理罷了。Sketch雖然很好很強大，但真心沒有必要把一個工具上升到這樣一個高度。

私不見，在兩款軟體的左側目錄結構中，Sketch的最小單位是Shape，而Axure最小單位是Page，相當於Sketch的Artboard。作為一個產品經理，我關心的是一個Page，而不是Page裡面的一個圓角按鈕啊親。

總結一下，Sketch會讓一個產品經理陷入一個不該他職業本身追求的設計怪圈中去。這裡用灰色可以顯逼格啊有木有？！圓角頭像比直角頭像更有設計感啊有木有？！對齊標註什麼的應有盡有好方便啊有木有？！... 好吧，這好像真的不應該是產品經理在規劃產品階段需要做的事情吧？！

另外，我覺得產品和設計都是產品開發環節中都很重要的兩個部分，產品設計的階段需要嚴謹嚴肅的產品態度和邏輯，UI設計則更多偏向情感和用戶體驗方面的設計；好像所調用的大腦組成部分都不一樣？兩者真心需要分開對待，同樣的選擇合適的開發工具也依然很重要～

最後的最後...補充一句：以上只是我個人在做項目時候的經驗總結以及對工具的理解，每個人對工具的使用習慣和選擇的初衷都是不一樣的，討論Axure畫原型好還是Sketch畫原型好是沒有意義的。就好比某些人群在爭執是Python牛逼還是Ruby牛逼；亦或者，知乎上的那個段子，「怎麼用WORD達到成為作家的水平」。

-
討論這種問題沒有意義。

舉個例子，目前我們團隊PM和部分UI都在用Sketch，所以Sketch顯然比Axure好用，反之亦然。
團隊協作，統一工具是大前提，大家都不同的工具還談個屁的好不好用。

說說我目前的方法：

小需求，白板上畫一下就可以直接進入UI
大點的需求，出一個帶引導線的artboard，基本上就搞定
新APP或複雜流程，肯定是高保真然後把玩N次不斷修正，所以一般用sketch+marvelapp 。把玩真的很重要。

談到高保真的問題，我把高保真定義為灰度無色彩但比例和位置都是我心中最完美的樣子（不是視覺上的完美）的交互稿（我們團隊要求每個PM都要出交互，老大也不例外），所以這個看個人的追求或團隊要求。至於說到效率問題，在軟體使用嫻熟並有組件庫積累的情況下，影響快慢的只是有沒有想清楚而已。
在想的環節，我推薦白板或紙筆，可以隨意的塗改，不用拘泥像素是否對齊之類的東西。

邏輯複雜的產品仍然逃不開PRD，比如搜索、CRM啥的。

感覺這個問題問的好莫名奇妙。哪裡有Sketch比Axure好用很多，這只是你自己的感覺罷了。工具這東西只要自己用的好那就是最好的。

Sketch用來做Mockup，最多加上做Sitemap

做完直接把Sketch文件拽到Marvel或Invision做原型，因為Sketch沒辦法做熱點交互啊，硬傷。不過據說他們團隊好像在研發這個功能了，期待～

其實為什麼要比較呢,我覺得算是互相補充了各自的不足

我看了一下討論axure的很少說到axure的團隊功能

我們公司一個端的產品就有3個一個老大兩個小弟.

老大會把需要的功能和大致流程列出來,小弟去頁面里填內容.

然後簽入. 這樣大家更新一下就可以看到一個完整的APP原型流程.

sketch只能說能完成產品的一部分內容,但是他們之間直接的可比性我覺得沒有必要太糾結了.

我本身是從設計出來做產品的,偶爾也會手癢用sketch做好圖貼到axure上面.

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

題外: 我是比較喜歡在稿紙上畫一大堆的草圖,確定了再往axure 上貼

更貼近真實效果
- 較真實的模擬字體等渲染過程
- 通過sketch mirror能夠實時在手機預覽

無限畫布、無限想像
- 腦圖、甘特圖、畫板都可以集成在一個畫布上，幫助串聯思考
- Artboard和頁面幫助梳理頁面結構

智能元件與各種插件，解放生產力
- 元件能夠提高復用率，又能便於管理
- 適合交互、視覺、前端使用，打通工作流，降低溝通成本
- 各種第三方插件滿足各種碎片化需求

開放與兼容
- 專註與專業，sketch處理完結構能夠將下游交互行為模擬交給其他工作流軟體：Briefs、invisionapp、Framer、Form、Origami

產品經理的核心競爭力是業務思維。
產品經理的核心競爭力是業務思維。
產品經理的核心競爭力是業務思維。
產品經理不是交互設計師。
產品經理不是交互設計師。
產品經理不是交互設計師。
功能經理才關注按鈕圓角還是直角。
功能經理才關注按鈕圓角還是直角。
功能經理才關注按鈕圓角還是直角。
工具哪個用的快，就用哪個。
好的產品經理用記事本都能做出用戶願意用的產品。

工具真的不重要。

重要的還是解決問題的思路和邏輯，思路和邏輯想好了用筆和紙畫更快。
Sketch和Axure相比各有優勢。
Axure優點：頁面邏輯關係清晰，速度快
缺點：醜死了
Sketch優點：可以做到高保真，
缺點：慢死了
註解：sketch做交互的過程中可以進一步考慮邏輯關係和頁面布局。
我個人是個視覺動物：so,我的解決方案是用筆畫先，然後sketch邊做邊完善，做好了用briefs製作頁面邏輯跳轉關係，結果時間長點，不過效果爽爆了。在iphone裡面模擬操作頁面交互邏輯還能利用Reflector和mac在投影儀上演示。（手裡拿著手機操作，投影儀跟著變，哇，掌控全局的感覺爽爆了，啊哈哈哈哈）
貼幾張圖下面：（IPhone媳婦拿著，將就看哈）

以上都是大體邏輯關係，真正製作的時候會有細節圖，這我就不放了！

最近用sketch輸出一個交互稿和UI稿給前端，其中一個細節的效果做得不是很好，邏輯上也有點錯誤。改了兩次仍有問題，沒辦法，只好在網上找了一個類似的方案演示了幾遍給前端看，才算搞定。
說起來，還是sketch沒有動態交互功能的造成的，本身交互設計師在做交互方案的時候就沒完全理清，更難用幾句話來描述交互邏輯和交互效果，輸出給前端，前端也是一頭霧水，進行開發以後，溝通成本也會增加。
幸虧我們前端是個軟萌妹子，要不然我早被砍死了。
畫原型，axure更利於理清邏輯，實現動態交互，而用sketch效率更高，也能清晰呈現架構和功能，各有利弊。
最後吐槽一句，產品經理花大時間用axure把交互都給做了，那還要交互設計師幹嘛。

題主自己都發現sketch好用了！

幾個特別喜歡的特點：

符合原型文件的層級結構。
常用功能齊全，快捷鍵合理方便。
sketch mirror比較方便。
各種UI組件庫很容易就能買到。
可以在原型的基礎上完成UI稿。
插件安裝容易，且插件庫發展迅速。

sketch是個生態，axure只是個工具。

我覺得裝逼比產出高質量原型重要得多得多。

麻煩能把交互設計這個標籤去掉嗎？

你可以用一字螺絲刀擰十字螺絲,但你的工具箱裏應該常備這兩種工具.

不要總想著偷懶.

Sketch適合細節控性產品經理。
1. Sketch 相比 Axure，我個人認為更高效。
2. Sketch 產出細節可以更好，但對接你活的交互設計師是一個災難。
3. Sketch 不利於體現產品的系統性思路，強於靜態頁面表現。
4. Sketch 不利於表現產品功能（或頁面）關聯邏輯

但 Sketch 很好用啊，所以我的做法是 Sketch 畫圖，然後貼在 Axure 上。

在一個工作流中討論單個工具好與壞意義不是很大，關鍵是看個人和團隊的選擇。
舉個栗子來說下基於Sketch為核心設計工具的周邊協作軟體吧：
1、產品前期的思考、溝通階段：口頭交流＋白板＋白紙＋筆，這個階段主要是發散和記錄想法。

2、產品結構和邏輯梳理階段：思維導圖軟體＋流程圖軟體。

3、產品UI設計和資源輸出：Sketch，它的優缺點討論也很多了，這裡就不多說了。

4、產品交互演示、資源管理：InVision，它本身就有同步功能也可以配合Dropbox使用。

5、面向開發的界面標註以及Guideline提取：Zeplin，在Sketch中Commnd+E一步導入。

最後，怎麼沒有交互工具？因為交互在紙＋Sketch過程中已經完善了。
最後，我們的目的是有條理的把事情做完。你應該配合團隊的選擇，除非你是主導團隊並具有強大的推動能力。
最後，不要否定一個強大的廣泛使用的工具，也不要害怕嘗試新的可能的工具。

？
你們的原型不做交互么？

我覺得人們只是用順手的產品而已，Axure生來就為原型優化，必然有很多Sketch沒有的用來做原型的好用功能，而Sketch作為以敏捷開發為目的的設計工具，也有一些天然方便的設計屬性能夠方便做出漂亮的界面。
還有一個原因是，我見到的多數用Axure做出來不經過視覺優化的原型實在是太丑了，丑到影響心情。而Sketch能夠方便簡單的稍微優化。
雖然如 @盜盜所言，視覺並不是這一階段的目的，但是一樣東西太丑了總還是會有些影響的，這也是為什麼很多人喜歡把辦公環境收拾的乾淨整潔，作家也會稍微注意自己的書法（現代作家可能會挑選漂亮好用的編輯軟體），這些是一個道理。美醜並不是最重要的，但它確實的影響你。

同樣也不是說Axure並不能做漂亮的原型，只是在這一點上，實現起來比Sketch麻煩一點罷了。

其實對於交互來說，Sketch不能做動態效果是一個大短板。

所以沒有好壞，各人根據需要選擇吧。

轉載的

我們在日常的軟體設計中經常會涉及到原型的設計。設計一個原型，無非就是三個目的：第一個目的是拿著給自己看的，為了方便之後的下一步設計；第二個目的是給開發看，說服開發，完善軟體；第三個目的是拿著給客戶看，讓客戶滿意，推動合作。

但是，在工作中經常有些小白同學拿著應當給開發看的原型去給客戶看，導致客戶不滿意，談判過程異常艱難；也有一部分人拿著應該給客戶看的東西去找開發，結果卻效率低下，有的會被開發拒絕，部分情況可能導致更嚴重的溝通問題。更有甚者拿著該給自己看的東西去給開發和客戶看，後果請自行腦補。那麼，究竟該用什麼工具做什麼原型給誰看？今天熊先生就來跟大家簡單討論一下，在目標明確的情況下，我們到底該怎麼辦。

一、給自己看

重點：草圖

工具：白板、紙筆、Balsamiq、Xmind

既然是給自己看的，那就沒什麼多說的了，隨心所欲的記錄下一切可能的想法，保證自己能看得懂，也就足夠了。這個階段里，外界的干擾越少越好。簡單方便的紙筆和白板就成了最好不過的工具，它們不會限制你的思維，任你想出無數想法。如果你希望把這些線框圖更有效的整理出來，可以使用Balsamiq，這款工具雖然沒有交互設置，但是其素描的風格相信也會為一些用戶提供靈感的來源。而且Balsamiq作為原型設計工具，組件雖然不是很多，但也完全可以滿足線框圖的要求了。當然，有些時候為了整理自己的頭緒，你可能還需要類似Xmind這種幫助思考的腦圖工具。

二、給開發人員、有經驗的客戶看

重點：交互

工具：Axure RP、Justinmind、Mockplus、UXPin

一千個讀者節就有一千個哈姆雷特，傳統的產品文檔雖然不是文學作品，但是一千個開發也會按照一個文檔給你做出一千個效果。如果你還在使用靜態的線框圖+文字描述的方法給開發看產品文檔，那麼熊先生建議你儘快試試上述四款工具。敏捷開發的情況下大多數團隊會採用原型+PRD的方法，之前幾百頁的文檔可能在加入了原型之後就變成了十幾頁。而且傳達的意思也更加的直觀，減少了誤解、提高了效率並加快了節奏。四款工具中Axure、Justinmind在功能上來說相對更加的全面，而Mockplus和UXPin則是比較輕快。個人還是比較傾向於後者，Mockplus、UXPin在功能上基本滿足了原型設計的需要。在某些特定的功能點上，比如變數和判斷，沒有做到Axure和Justinmind那麼完整。但是實際思考一下，花費了十幾分鐘甚至更久來設置一個判斷的交互，其實可能一句話的備註就說明問題了。同樣的，對於懂得軟體設計開發的客戶來說，時間寶貴，用最快速的方法表達出最接近客戶想法的設計不僅是對客戶的尊重，也是對你的工作專業性的肯定。所以，內行進行溝通的時候，Mockplus和UXPin這種更加輕快靈巧的原型設計工具在原型與備註相結合的情況下，往往會創造出更快、更好的效果。

三、給完全不懂的客戶看

重點：精緻度

工具：Origami、FramerJS

然而畢竟還是有一些會做生意但不懂軟體設計的客戶，這些客戶可能要你做一個99.999%接近真正App的原型。這個時候請使用上述兩款工具。為什麼這種不僅可以保證精緻度，還可以保證高保真的工具我到這個時候才拿出來？原因很簡單，兩款工具中，前者步驟相對複雜，後者基本依靠代碼。現在的產品開發過程可能真的不會給你這麼久去專研一個原型的效果，除非你是碰上了一個一竅不通卻又要求極高的客戶。這兩款工具無論是畫面效果還是交互動效都可以與真正的App相媲美，做到以假亂真的效果。不過由於要求高，時間成本高，不建議日常使用，可以留到最後以應防不測。

以上就是對三種情況下的基礎說明了。還有很多比較優秀的工具這裡沒有提到，希望大家還是能夠根據自己的實際情況，合理選擇工具，早日成為產品設計的大牛。

通過上面的回答，我發現身兼產品的美工還真不少

3年前用 Axure 做交互，後來用 OmniGraffle ，現在用 Sketch 做交互和視覺的人嘗試回答一下：

1. Axure 80%（就是個概數，別介意）的功能都是學習曲線陡峭的高級功能。而 Sketch 很純粹的就是圖形編輯工具。大多數時候產品文檔只是為了把事情說清楚，用不到 Axure 那 80%。（剛裝了一個最新版的 Axure，請看下圖作為初始界，滿滿當當的面板和密密麻麻的工具欄）

2. Axure 的工作流程是混雜的——可以做純靜態的文檔，也可以做互動式原型。寫文檔的人把控不住，輸出的文檔就雜亂（線性章節 vs 跳來跳去）；讀文檔的人不細心，就很容易跳過關鍵內容。更不要提導出是一坨 HTML 文檔（還需要安裝瀏覽器插件），不方便協作與管理。

3. Sketch 的工作流則相對純粹——產出文檔，只需導出 PDF——通用、線性，只要寫文檔的人組織好內容，讀文檔的人不容易遺漏內容；驗證流程，可以導出關鍵頁面的PNG，結合其他工具（InVision，Flinto，Keynote，Framer etc）輕鬆製作互動式原型。（Axure 出現的時代，交互設計師還在用 Visio 做線框圖，Axure 只要不斷增加 Feature 就好；而 Sketch 誕生的時代，各種設計師工具爆髮式出現。就像 huiter 說的，形成了生態系統，用戶可以根據自己的偏好，綜合使用各種工具。）

4. 創建內容的交互細節上，我記得 Axure 完全依賴於拖拉組件，而 Sketch 則可以方便地通過快捷鍵切換創建圖形類型。在畫流程圖的時候，把矩形拖入畫布需要將滑鼠大幅度移動，拉進畫布後還要定製樣式。而切換快捷鍵並在原地拖拽創建形狀則高效的多。這種細節上的差異，用多了體會才比較明顯。至於方便調節、復用樣式，讓文檔美美的這種 Sketch 的先天優勢就更不必說了。