起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識你知道線框圖和原型有啥區(qū)別嗎
編者按：這篇文章出自UXPin的首席執(zhí)行官Marcin Treder。
線框圖并非是原型，但即使是經(jīng)驗豐富的設(shè)計師也可能會將兩者混為一談。實際上，兩者的差別還是非常多且明顯的，那么就讓我們通過這篇文章分辨清楚這倆概念，一勞永逸。
線框圖
線框圖是產(chǎn)品設(shè)計的低保真呈現(xiàn)方式。它有三個簡單直接而明確的目標：
1、呈現(xiàn)主體信息群
2、勾勒出結(jié)構(gòu)和布局
3、用戶交互界面的主視覺和描述
正確地創(chuàng)建了線框圖之后，它將作為產(chǎn)品的骨干而存在。
它就像一幢建筑的藍圖一樣，將細節(jié)規(guī)定地明明白白。
線框圖的視覺特性
線框的視覺特性局限性非常明顯。通常設(shè)計師會只需要使用線條、方框和灰階色彩填充（不同灰階標明不同層次）就可以完成。
簡單的矢量線框圖
一個簡單的線框圖最終需要包含的內(nèi)容有圖片、視頻、文本這些東西。所以，通常情況下，被省略的地方會用占位符來標明，而圖片通常被帶斜線的線框來替代，文本會按照排版，用一些標識性的文字所替代。
線框圖的優(yōu)勢
線框圖的制作是快速而廉價的，特別是當你使用諸如UXPin、Balsamiq、Axure這樣的軟件來制作的時候。當然，線框圖也理當是在設(shè)計之初就使用這些工具來制作。
比起創(chuàng)建一個完整細致高保真的線框圖，搜集反饋信息來得更加重要。為什么這么說呢？
一般而言，大家更注重軟件的功能、信息架構(gòu)、用戶體驗、用戶交互流程圖、可用性，這些東西，而不是考慮這些因素的美學(xué)特征。同時，在這種情況下，根據(jù)需求進行修改也無需涉及代碼調(diào)整和圖形編輯。
交互式線框圖
有的時候，設(shè)計師喜歡提高線框圖的保真度而強調(diào)用戶界面的某些方面的重要性，以及展示和快速測試、各種視覺元素之間相互作用的合理性。用以解決這些問題的方案就是使用交互式線框圖，也叫做可點擊式線框圖。
創(chuàng)建這種更加復(fù)雜的線框圖你就需要用UXPin了，它是專門用來制作線框圖和原型設(shè)計的工具了?；邮骄€框圖可能是用來向開發(fā)團隊和客戶最合適的演示工具了。當你碰上客戶的經(jīng)典問題”如果我點擊這個按鈕會發(fā)什么什么”的時候，你所需要做的就是在互動式線框圖中按下那個按鈕?！本褪沁@樣”，你只需要這樣回答。的確，這種方式令人印象深刻，引人入勝。
謹慎展示線框圖
當你需要展示的對象是一個徹頭徹尾的門外漢的時候，你就要小心了。他可能是你的客戶，也可能是參與合作的某個非技術(shù)背景主管，他們并不知道，線框圖 和最終的產(chǎn)品可能看起來毫無關(guān)系。所以，他們有可能并不能很快地明白兩者的內(nèi)在聯(lián)系和運作方式，是否要演示，如何演示，一定要拿捏好這其中的度。
這是Fernando Guillen快速手繪出來的APP的用戶操作流程圖。當然，這無疑是最早期的設(shè)計版本。
線框圖設(shè)計流程中最重要的組成部分之一，看完這張手繪的流程圖你就明白，為什么要耗費時間來向他們解釋什么是線框圖（笑），以及為什么要這么用線框圖。或者，你干脆跳過這個版本。
原型
原型的要求比線框圖/可交互式線框圖要高，它要求必須是可交互的，并且盡可能貼合最終的用戶界面的高保真模型。
制作原型的目標非常明確：盡可能真實地模擬用戶和界面之間的交互。當一個按鈕被按下的時候，相應(yīng)的操作必須被執(zhí)行，對應(yīng)頁面也必須出現(xiàn)，盡可能地模仿完整的產(chǎn)品體驗。
原型的視覺特征
毫無疑問，原型是必須囊括產(chǎn)品該有的美學(xué)特征，并且盡量貼合最終版本?；旧希斣椭谱鞒鰜淼臅r候，它就是一副畫皮，除了不具備血肉骨骼，該有的眉眼皮膚和化妝都有了，也就是說，它無需涉及HTML/CSS/JS，不用考慮服務(wù)器端的程序和數(shù)據(jù)庫實現(xiàn)。
在UXPin中制作的交互原型設(shè)計
主色調(diào)和主視覺必須到位，重點內(nèi)容理應(yīng)呈現(xiàn)出來，信息保障和版式設(shè)計也當在合理范疇以內(nèi)。點擊相應(yīng)的元素之后，原型也應(yīng)出現(xiàn)對應(yīng)的交互回饋。
原型的優(yōu)勢
原型為何如此重要？因為原型通常拿來給真正的用戶測試產(chǎn)品用的。早期的原型測試能夠節(jié)省巨量的開發(fā)成本和時間，如此一來，團隊就不會因為不合理的交互界面而讓后端的產(chǎn)品架構(gòu)都白做了。所以，對設(shè)計師和開發(fā)者而言，原型是用來測試產(chǎn)品的絕妙工具。
另外，將原型提供給用戶，并跟蹤用戶反饋，這樣的基本的用例對洞察產(chǎn)品各個細節(jié)能收到奇效的，并且可以鼓舞整個團隊。使用前文我所說的軟件，單靠設(shè)計師介入就可以快速高效地構(gòu)建原型而無需程序員介入，這是極為省事的。
設(shè)計流程
深入了解了設(shè)計的本質(zhì)，掌握線框圖和原型之間的區(qū)別之后，你就站在用戶體驗設(shè)計的世界門口。
當你能夠?qū)⑦@一系列的產(chǎn)品設(shè)計環(huán)節(jié)，整合成一個具有凝聚力、高效的工作流程，神奇的事情自然會發(fā)生。
在我管理一個用戶體驗設(shè)計部門數(shù)年之后，我在工作中碰到的最大的錯誤，就是我們將線框圖視作一次性的、非必要的設(shè)計環(huán)節(jié)。因此，我們急于推動整個產(chǎn) 品設(shè)計的進程，不會在設(shè)計線框圖的環(huán)節(jié)做過多停留，盡管這個環(huán)節(jié)是非常有用且重要的。這直接導(dǎo)致我們的線框圖看起來非常潦草凌亂，無法用作產(chǎn)品設(shè)計的藍圖 了，就更不用提基于此構(gòu)建一個健壯有效的原型和可用的產(chǎn)品了。
小貼士
在制作線框圖的時候，盡量創(chuàng)建可編輯、可重復(fù)使用的元素。這樣的話，當你在制作原型的時候，你就可以在之前的基礎(chǔ)上繼續(xù)細化這些元素就好了。
當你制作線框圖的時候，盡量搜集你的團隊和相關(guān)人員（包括客戶）的想法也意見，盡量體現(xiàn)到線框圖的設(shè)計中去。
使用你最順手的工具。
UXPin
UXPin內(nèi)置了超過900種不同的UI元素供你創(chuàng)建線框圖和原型。
Proto.io
Proto.io是一款非常健壯的原型設(shè)計工具，并且它可以基于原型輸出HTML/CSS代碼和觸摸屏互動原型，方便你在實際的設(shè)備上給用戶測試。
Balsamiq
一款流行的、長效的線框圖設(shè)計軟件，僅限于制作靜態(tài)的線框圖。
Moqups
支持直接在瀏覽器中制作線框圖。
Mockingbird
一款簡單的線框圖設(shè)計工具，不過產(chǎn)品開發(fā)止步于2010年。
Axure
Axure就無需深入介紹了吧？作為一款最流行的線框圖和原型設(shè)計程序，很多做產(chǎn)品和交互的同學(xué)已經(jīng)在用它了。
Protoshare
這也是一款能在瀏覽器中使用的線框圖和原型設(shè)計工具。
InvisionApp
這款程序可以助你基于現(xiàn)有設(shè)計制作可用的原型。不過你不能隨便畫任何東西，但是可以在不同的屏幕間隨意添加鏈接。
原文地址：sixrevisions
優(yōu)設(shè)網(wǎng)翻譯：@陳子木
總結(jié)的不錯