編者按：這篇文章出自UXPin的執行長Marcin Treder。編譯：@陳子木
線框圖並非是原型，但即使是經驗豐富的設計師也可能會將兩者混為一談。實際上，兩者的差別還是非常多且明顯的，那麼就讓我們通過這篇文章分辨清楚這倆概念，一勞永逸。
線框圖線框圖是產品設計的低保真呈現方式。它有三個簡單直接而明確的目標：
1、呈現主體信息群
2、勾勒出結構和布局
3、用戶交互界面的主視覺和描述
正確地創建了線框圖之後，它將作為產品的骨幹而存在。
它就像一幢建築的藍圖一樣，將細節規定地明明白白。
線框的視覺特性局限性非常明顯。通常設計師會只需要使用線條、方框和灰階色彩填充（不同灰階標明不同層次）就可以完成。
簡單的矢量線框圖一個簡單的線框圖最終需要包含的內容有圖片、視頻、文本這些東西。所以，通常情況下，被省略的地方會用佔位符來標明，而圖片通常被帶斜線的線框來替代，文本會按照排版，用一些標識性的文字所替代。
線框圖的優勢線框圖的製作是快速而廉價的，特別是當你使用諸如UXPin、Balsamiq、Axure這樣的軟體來製作的時候。當然，線框圖也理當是在設計之初就使用這些工具來製作。
比起創建一個完整細緻高保真的線框圖，搜集反饋信息來得更加重要。為什麼這麼說呢？
一般而言，大家更注重軟體的功能、信息架構、用戶體驗、用戶交互流程圖、可用性，這些東西，而不是考慮這些因素的美學特徵。同時，在這種情況下，根據需求進行修改也無需涉及代碼調整和圖形編輯。
交互式線框圖有的時候，設計師喜歡提高線框圖的保真度而強調用戶界面的某些方面的重要性，以及展示和快速測試、各種視覺元素之間相互作用的合理性。用以解決這些問題的方案就是使用交互式線框圖，也叫做可點擊式線框圖。
創建這種更加複雜的線框圖你就需要用UXPin了，它是專門用來製作線框圖和原型設計的工具了。互動式線框圖可能是用來向開發團隊和客戶最合適的演示工具了。當你碰上客戶的經典問題」如果我點擊這個按鈕會發什麼什麼」的時候，你所需要做的就是在互動式線框圖中按下那個按鈕。」就是這樣」，你只需要這樣回答。的確，這種方式令人印象深刻，引人入勝。
謹慎展示線框圖當你需要展示的對象是一個徹頭徹尾的門外漢的時候，你就要小心了。他可能是你的客戶，也可能是參與合作的某個非技術背景主管，他們並不知道，線框圖和最終的產品可能看起來毫無關係。所以，他們有可能並不能很快地明白兩者的內在聯繫和運作方式，是否要演示，如何演示，一定要拿捏好這其中的度。
這是Fernando Guillen快速手繪出來的APP的用戶操作流程圖。當然，這無疑是最早期的設計版本。
線框圖設計流程中最重要的組成部分之一，看完這張手繪的流程圖你就明白，為什麼要耗費時間來向他們解釋什麼是線框圖（笑），以及為什麼要這麼用線框圖。或者，你乾脆跳過這個版本。
原型原型的要求比線框圖/可交互式線框圖要高，它要求必須是可交互的，並且儘可能貼合最終的用戶界面的高保真模型。
製作原型的目標非常明確：儘可能真實地模擬用戶和界面之間的交互。當一個按鈕被按下的時候，相應的操作必須被執行，對應頁面也必須出現，儘可能地模仿完整的產品體驗。
原型的視覺特徵毫無疑問，原型是必須囊括產品該有的美學特徵，並且儘量貼合最終版本。基本上，當原型製作出來的時候，它就是一副畫皮，除了不具備血肉骨骼，該有的眉眼皮膚和化妝都有了，也就是說，它無需涉及HTML/CSS/JS，不用考慮伺服器端的程序和資料庫實現。
在UXPin中製作的交互原型設計
主色調和主視覺必須到位，重點內容理應呈現出來，信息保障和版式設計也當在合理範疇以內。點擊相應的元素之後，原型也應出現對應的交互回饋。
原型的優勢原型為何如此重要？因為原型通常拿來給真正的用戶測試產品用的。早期的原型測試能夠節省巨量的開發成本和時間，如此一來，團隊就不會因為不合理的交互界面而讓後端的產品架構都白做了。所以，對設計師和開發者而言，原型是用來測試產品的絕妙工具。
另外，將原型提供給用戶，並跟蹤用戶反饋，這樣的基本的用例對洞察產品各個細節能收到奇效的，並且可以鼓舞整個團隊。使用前文我所說的軟體，單靠設計師介入就可以快速高效地構建原型而無需程式設計師介入，這是極為省事的。
設計流程深入了解了設計的本質，掌握線框圖和原型之間的區別之後，你就站在用戶體驗設計的世界門口。
當你能夠將這一系列的產品設計環節，整合成一個具有凝聚力、高效的工作流程，神奇的事情自然會發生。
在我管理一個用戶體驗設計部門數年之後，我在工作中碰到的最大的錯誤，就是我們將線框圖視作一次性的、非必要的設計環節。因此，我們急於推動整個產品設計的進程，不會在設計線框圖的環節做過多停留，儘管這個環節是非常有用且重要的。這直接導致我們的線框圖看起來非常潦草凌亂，無法用作產品設計的藍圖了，就更不用提基於此構建一個健壯有效的原型和可用的產品了。
小貼士在製作線框圖的時候，儘量創建可編輯、可重複使用的元素。這樣的話，當你在製作原型的時候，你就可以在之前的基礎上繼續細化這些元素就好了。
當你製作線框圖的時候，儘量搜集你的團隊和相關人員（包括客戶）的想法也意見，儘量體現到線框圖的設計中去。
使用你最順手的工具。
UXPinUXPin內置了超過900種不同的UI元素供你創建線框圖和原型。
Proto.ioroto.io是一款非常健壯的原型設計工具，並且它可以基於原型輸出HTML/CSS代碼和觸控螢幕互動原型，方便你在實際的設備上給用戶測試。
Balsamiq一款流行的、長效的線框圖設計軟體，僅限於製作靜態的線框圖。
Moqups支持直接在瀏覽器中製作線框圖。
Mockingbird一款簡單的線框圖設計工具，不過產品開發止步於2010年。
AxureAxure就無需深入介紹了吧？作為一款最流行的線框圖和原型設計程序，很多做產品和交互的同學已經在用它了。
Protoshare這也是一款能在瀏覽器中使用的線框圖和原型設計工具。
InvisionApp這款程序可以助你基於現有設計製作可用的原型。不過你不能隨便畫任何東西，但是可以在不同的屏幕間隨意添加連結。
優設網翻譯：@陳子木
本文由優設網原創翻譯
微信小程序設計規範（優化版）必須要看！
2017主流UI設計「無框界面」
2017年度視覺設計趨勢
登錄註冊的奧義
騰訊30多個LOGO的重設計，都是靠這個思路完成的
回復「源文件」查看源文件下載
回復「App」查看《一款APP從設計稿到切圖全紀錄》
回復「字體」查看《資深設計師深度解讀如何設計特效字體》
回復「海報」查看《暴風資深設計師解密如何打造一流海報》
回復「專題」查看《手把手教你做專題頁面設計》
回復「學生作品」查看竹子老師UI設計培訓學生作品集
聊設計是熱門UI設計書籍《術與道-移動應用設計必修課》
作者創辦的設計公眾號，分享原創設計文章
聊設計｜公眾號
微信ID：liaosheji2010