線框圖和原型圖的區別是什麼？

01-29

剛開始學，不是很清晰。

用什麼工具？做什麼原型？給誰看？

作者：熊先生

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

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

一、給自己看

重點：草圖

工具：白板、紙筆、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相媲美，做到以假亂真的效果。不過由於要求高，時間成本高，不建議日常使用，可以留到最後以應防不測。

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

線框圖是原型圖的一種

你可以把原型圖想像成一個大類，他下面按照階段或者精細程度可分為：

草圖或者手稿：一般指前期具有了一個大致的想法，為了記錄，快速的從紙上或者小黑板上勾勒出來的。

線框圖：開始考慮大致的布局以及元素定義了。一般只用黑白灰的面、線、字表示，可用axure或者其他設計軟體完成。大部分的產品到這一步就可以了，直接交給設計師去完成界面設計。

高保真原型：完成效果跟真實的產品基本無異，而且還帶有動態交互效果的。一般由UI設計師或者交互設計師完成。

首先聲明：線框圖不是原型。

從功能上來說，原型代表了最終產品，常用於潛在用戶測試；線框圖常用於項目初期，展示布局和功能，用於討論和反饋。

原型可以在線框圖的基礎上進行設細化和設計。

用建築打個比方：線框圖就是建築框架，原型圖就是毛坯房，效果圖就是精裝修。

——分割線———————————————————————————

下面是廣告時間，沒時間看的可以選擇忽略

我們正在做一款快速界面原型及分享工具，使用它你可以輕鬆創建模擬度極高的APP交互原型，支持頁面鏈接、動作手勢等，還能做出各種頁面動畫效果，為您帶來最逼真的原型體驗。歡迎前去下載：乎之原型