線框圖和原型圖是交互設(shè)計(jì)中重要的表達(dá)圖紙，很多同學(xué)在做設(shè)計(jì)的時(shí)候?qū)@兩種圖紙的使用都分不清，本文將全面帶大家解讀交互線框圖和原型圖的區(qū)別以及他們的正確使用方法。

01 線框圖和原型圖

1.它們有什么區(qū)別？

如果同學(xué)們對(duì)UX或者UI設(shè)計(jì)有略微的了解，就會(huì)發(fā)現(xiàn)這三張圖片看著很眼熟。最右邊的就是通常我們手機(jī)中的APP的樣子，但是它在設(shè)計(jì)階段并不是一開始就用最后的效果圖來(lái)呈現(xiàn)，我們?cè)谠O(shè)計(jì)的早期、中期以及后期會(huì)運(yùn)用到不同類型的設(shè)計(jì)效果圖去展示我們的設(shè)計(jì)，以及去進(jìn)行迭代、去進(jìn)行分析和改進(jìn)。

所以大家應(yīng)該能夠感覺(jué)出來(lái)從最左到最右是慢慢去Refine、慢慢去改進(jìn)、慢慢去提高設(shè)計(jì)效果的過(guò)程。最左邊的線框圖是最粗糙的，比較像前期像草圖；中間的視覺(jué)稿稍好一點(diǎn)，我把排版、文字、整個(gè)框架都確定了下來(lái)；最右邊的原型圖甚至可以去做有點(diǎn)擊能力、交互能力的原型，讓用戶能夠真的在手機(jī)上點(diǎn)擊進(jìn)行交互。

這三類涵蓋了大多數(shù)我們?cè)谠O(shè)計(jì)階段能夠了解到的、應(yīng)用到的類別，最左邊是線框圖的模板，視覺(jué)稿是靜止的，最右邊的原型圖是能夠進(jìn)行交互的、能夠去進(jìn)行點(diǎn)擊的，用戶能夠跟它進(jìn)行交互、點(diǎn)擊、滑動(dòng)、拖動(dòng)這樣的行為，它就是我們最終原型圖的呈現(xiàn)。

2.什么是線框圖？

線框圖英文叫做Wireframe。線框圖有很強(qiáng)烈的特征，首先它是低保真的形態(tài)來(lái)呈現(xiàn)，低保真英文也叫做Low Fidelity，它在設(shè)計(jì)的過(guò)程中不用在意細(xì)枝末節(jié)，比如在Text字段我們需要用什么字體、字體的大小、自重等等這些在線框圖階段是不用去考慮的，不用去在意繪制過(guò)程中涉及的細(xì)節(jié)，我們主要是想利用線框圖進(jìn)行呈現(xiàn)的是我們?cè)O(shè)計(jì)圖的主干與核心，以及它能夠更高效地用線框圖框框的形式把整個(gè)產(chǎn)品的結(jié)構(gòu)和布局給勾勒出來(lái)，這就是它的意義所在。

線框圖的主要表現(xiàn)形式，我們通常都會(huì)用中性色，也就是黑白灰，或者再加四五個(gè)左右的跳躍色來(lái)進(jìn)行制作。但主要還是集中用中性色，因?yàn)樵诰€框圖的階段我們并不需要去在意顏色的選擇，但是它必須能夠表達(dá)出整個(gè)設(shè)計(jì)的思想、結(jié)構(gòu)和布局。

我們?yōu)槭裁匆ピO(shè)計(jì)線框圖呢？如果大家對(duì)設(shè)計(jì)過(guò)程有所了解，應(yīng)該不難發(fā)現(xiàn)我們?cè)O(shè)計(jì)線框圖需要進(jìn)行非常多版本的迭代，在實(shí)際情況中，線框圖的第一個(gè)版本不是所有人都能夠同意的，第一版成為我們最終版的情況真的很少發(fā)生，所以在設(shè)計(jì)的過(guò)程中就需要非常高效、有效的迭代方式。

這就需要你去利用線框圖，讓它能夠在設(shè)計(jì)早期就非?？焖俚亍⒏咝У孬@得別人的反饋和意見，因?yàn)樗挥萌ピ谝庠O(shè)計(jì)的細(xì)枝末節(jié)，所以我們就利用中性色和比較固有的字體或者字重在設(shè)計(jì)當(dāng)中進(jìn)行表達(dá)，讓它能夠非常快速地去進(jìn)行迭代。

大家看左邊的示意圖，這是我自己在我的學(xué)生項(xiàng)目當(dāng)中制作的線框圖，我這里主要想體現(xiàn)的是我想在產(chǎn)品當(dāng)中展現(xiàn)哪些信息、我要在哪些地方展現(xiàn)哪些信息、我要利用什么樣的方式，比如我是用List Layout還是Carousel Layout，或者是把這些信息用卡片Card的形式呈現(xiàn)出來(lái)；又比如我在這邊會(huì)用深藍(lán)色把鏈接的形式把它體現(xiàn)出來(lái)，在融合和中性色同時(shí)，我們也可以去加最多一個(gè)比較跳躍的顏色，把它Highlight出來(lái)，高亮出來(lái)代表我這個(gè)是Link或者按鈕之類的呈現(xiàn)效果和方式。

總地來(lái)說(shuō)，制作線框圖的目的是我們能夠在設(shè)計(jì)的早期快速進(jìn)行交流和反饋，讓我們能夠更高效地去進(jìn)行迭代。

3.什么是原型圖？

原型圖英文叫Prototype。那原型圖又是什么呢？它有和線框圖以及別的效果圖非常好區(qū)別的方法。原型圖最核心的點(diǎn)就是要以交互的方式去進(jìn)行呈現(xiàn)，我的用戶不管是什么人，我的老板或者我組里的工程師也好，他們要的最終呈現(xiàn)的方式是可以讓用戶能夠跟它用交互、點(diǎn)擊滑動(dòng)的形式去進(jìn)行呈現(xiàn)。

通常原型圖都是以高保真的方式進(jìn)行呈現(xiàn)的，因?yàn)槲覀兊哪繕?biāo)是要去模擬用戶的操作流程并把它用于最后的測(cè)試即用戶交互的階段，所以這就是通常我們?yōu)槭裁匆ブ谱髟蛨D的原因。但是大家也可以看到，我右邊的圖片并不是高保真（High Fidelity）的，這看著不像最終的效果圖。所以也有時(shí)候我們的原型圖也是可以是低保真（Low Fidelity）的也沒(méi)有問(wèn)題，主要是看我們制作原型圖的目的是什么、目標(biāo)是什么 。

我們是想要把交互的模式在前期用線框圖的形式做出來(lái)，然后在設(shè)計(jì)的前期進(jìn)行模擬流程和測(cè)試，還是我們最后要以高保真的形式去進(jìn)行最后的用戶測(cè)試，或者我們把原型圖用交互的形式呈現(xiàn)出來(lái)，讓我們別的組的人或者我們的用戶能夠更加高效有效地了解產(chǎn)品是什么樣的，產(chǎn)品是怎么樣進(jìn)行流程的或怎么樣去進(jìn)行交互的。

4.在設(shè)計(jì)不同階段的原型圖

原型圖在不同階段也有不同進(jìn)行呈現(xiàn)的流程，我們可以看到最左邊的原型圖是以草圖Sketch的方式來(lái)呈現(xiàn)的，我們并不用特別去在意我東西要放多大、圖片放多大、字體字號(hào)或者以什么樣的UI形式去呈現(xiàn)，這些我們?cè)诓輬D階段是不用去考量的。

我們做草圖原型圖的主要目標(biāo)就要在設(shè)計(jì)的前期了解用戶使用產(chǎn)品的流程，像現(xiàn)在很多原型圖它都會(huì)放小箭頭，它想要了解到比如我用戶點(diǎn)擊了這按鈕，那下一個(gè)界面會(huì)是什么樣的；比如我滑動(dòng)了這個(gè)頁(yè)面，那下個(gè)界面呈現(xiàn)的效果會(huì)是如何的，所以在原型圖里，我們主要測(cè)試的是交互的流程以及其他想要測(cè)試的東西。這個(gè)流程是以草圖的方式呈現(xiàn)，比如我們的Sketch可以是以線框圖的方式進(jìn)行呈現(xiàn)，比如我剛才說(shuō)的都是它很通用的概念，只要我們能夠把用戶的模型做出來(lái)，那就是它的原型圖。還有最多的一類就是以最終視覺(jué)稿的方式去進(jìn)行呈現(xiàn)。

02 如何設(shè)計(jì)與應(yīng)用線框圖和原型圖

1.如何制作線框圖

Wireframe顧名思義，它是用線和框所組成的，簡(jiǎn)單來(lái)說(shuō)就是畫框框的一個(gè)過(guò)程，專業(yè)一點(diǎn)的說(shuō)法是線框圖以占位符（Placeholder，Placeholder它并不是真實(shí)的UI元素）的形式，把線框放在設(shè)計(jì)頁(yè)，然后用線框來(lái)表示出頁(yè)面中會(huì)有圖片，比如我會(huì)用線表示我我這里會(huì)考慮放一段文字、標(biāo)題、Tag之類的東西。

所以Wireframe是用我們專業(yè)所說(shuō)的占位符Placeholder組成的，比如我圖片或者照片我們通常都是用X，在正方形、長(zhǎng)方形這類矩形當(dāng)中以在中間畫X的形式/畫叉叉的形式來(lái)表達(dá)，讓用戶知道這里表示應(yīng)該圖片、照片。還有一個(gè)表達(dá)形式是我們會(huì)把整個(gè)矩形變成灰色，可以把它改成我先把東西先放在這里，我考慮到我要把另一方在后期的視覺(jué)效果圖當(dāng)中換成照片，我們的標(biāo)題和文字用線的形式進(jìn)行表現(xiàn)。

大家會(huì)問(wèn)，這圖片里有很多不同的字的元素，有些我想要放標(biāo)題，我想要放超大的高亮來(lái)吸引用戶的注意，我下面會(huì)想加一行很小的字補(bǔ)充說(shuō)明，那請(qǐng)問(wèn)我怎么進(jìn)行區(qū)分？

其實(shí)這種情況它也是非常好進(jìn)行區(qū)分的，我們可以運(yùn)用不同的字重或者我們?nèi)绻欠耪鎸?shí)的一段話，就可以去利用不同的字重和字號(hào)進(jìn)去區(qū)分，我現(xiàn)在暫時(shí)把它定為10 pixel，那我上面最大的標(biāo)題可以它換成32 Pixel，這樣就可以區(qū)分開來(lái)了。那還有一個(gè)方式就是我們以線條的形式，我們想要在最終效果圖當(dāng)中比較大的字號(hào)，我們可以把線加粗加寬，比較常規(guī)的字我們可以用1 Pixel或者2 Pixel的線去進(jìn)行呈現(xiàn)，這都是沒(méi)有問(wèn)題的。

在設(shè)計(jì)的過(guò)程當(dāng)中，線框圖或者我們最后的高保真效果圖都是用同一個(gè)軟件進(jìn)行設(shè)計(jì)的。比較常見的UI或者UX設(shè)計(jì)軟件第一個(gè)有Sketch，比較老牌的很多軟件公司或者互聯(lián)網(wǎng)公司都會(huì)用Sketch；我們也還會(huì)用Figma，因?yàn)樗鄬?duì)比較于Sketch可以更好地在網(wǎng)絡(luò)上線上進(jìn)行合作，所有的東西都是Based On Cloud，可以去和別人在線上進(jìn)行實(shí)時(shí)高效的合作，所以我自己比較喜歡用Figma。

大家不要忘記了，我們最常見的是我們的紙和筆，我們?cè)谠O(shè)計(jì)最前期最簡(jiǎn)單的方法是我們拿起筆，在紙上進(jìn)行草圖的繪制，我們?cè)诓輬D的繪制當(dāng)中，一般來(lái)說(shuō)是以非常低保真的形式進(jìn)行呈現(xiàn)，因?yàn)槲覀兪窍胍M量去頭腦風(fēng)暴去想更多的Idea，在我們的紙上進(jìn)行快速的描繪。通過(guò)紙和筆制作可以制作Wireframe，這是沒(méi)有問(wèn)題的。

我在這里想跟大家展現(xiàn)的是我自己在個(gè)人項(xiàng)目為Side Project當(dāng)中制作的線框圖，大家可以看到，我并沒(méi)有完完全全地按照我剛剛的設(shè)計(jì)規(guī)范，就是我要把它用線條進(jìn)行表示。我個(gè)人的意見是我們可以時(shí)不時(shí)地進(jìn)行改善，只要在我們所有的項(xiàng)目當(dāng)中做的線框圖都是以非常統(tǒng)一、整合、一致的形式表達(dá)就可以了。

就比我們?cè)谀尘€框圖當(dāng)中，我現(xiàn)在的照片或者圖片是以灰色框去呈現(xiàn)的，那我就要把設(shè)計(jì)的規(guī)范應(yīng)用到我所有的線框圖當(dāng)中，這樣我自己或者是別人看到灰色框框的第一時(shí)間就能反應(yīng)出來(lái)這個(gè)就是圖片的Placeholder。

還有一些表達(dá)形式文字也可以做到，用具體的文字呈現(xiàn)出來(lái)，因?yàn)樵诰€框圖的制作過(guò)程當(dāng)中所有的東西都是暫時(shí)的，字也可以是我隨便寫的Placeholder，我主要是想利用線框圖表達(dá)我什么東西在什么地方以及我整個(gè)界面的結(jié)構(gòu)和布局，比如我在最上面會(huì)想要放一個(gè)Hamburger Bar，一個(gè)Menu，然后我在這邊就會(huì)有非常大的標(biāo)題去吸引用戶的注意，我下面會(huì)有Search Bar搜索欄以及今天想強(qiáng)力推送的東西，我在小卡片里用線框圖展現(xiàn)了我整個(gè)文字Hierarchy的呈現(xiàn)，比如在最上面標(biāo)題要比較大，下面的比較小，那我就把它換成小一號(hào)的字體進(jìn)行呈現(xiàn)。

我想要這些食物的呈現(xiàn)方式是想要有卡片或者是我比較類似的行事方式去呈現(xiàn)它，我做的目的是我想要在設(shè)計(jì)的前期把整個(gè)APP的框架先搭建出來(lái)，大概什么地方放什么并且都以比較通用General的結(jié)構(gòu)把它呈現(xiàn)出來(lái)，那就足夠了。我們制作的線框圖的目的是我們可以給用戶看以及讓用戶進(jìn)行測(cè)試，把Wireframe線框圖做成原型圖，我們進(jìn)行早期的測(cè)試都沒(méi)有問(wèn)題，主要看我們?nèi)绾稳ブ谱饕约拔覀優(yōu)槭裁匆ブ谱魉?/p>

2.如何制作原型圖（Prototype）？

我個(gè)人覺(jué)得制作原型圖，特別是以高保真的效果呈現(xiàn)原型圖，如果是剛接觸UI或者UX的同學(xué)會(huì)沒(méi)有那么熟悉。大家做得最多的是點(diǎn)擊或者是滾動(dòng)的呈現(xiàn)方式。

我跟大家說(shuō)的Prototype它通常是以高保真的效果來(lái)模擬最終產(chǎn)品的交互流程，所以它有的時(shí)候會(huì)有很多種狀況，比如我們?cè)谑謾C(jī)端App當(dāng)中，我們會(huì)有不同的手勢(shì)進(jìn)行交互，我們?cè)诰W(wǎng)頁(yè)端會(huì)有不同的轉(zhuǎn)場(chǎng)方式，我們會(huì)通過(guò)鍵盤進(jìn)行交互，我們也可以通過(guò)我們手在屏幕上進(jìn)行觸擊，所以它有非常多的交互模式以及最后動(dòng)效的呈現(xiàn)，所以原型圖相比于線框圖制作相比較來(lái)說(shuō)更復(fù)雜一點(diǎn)。

大家可以看到我右邊的效果圖有很多線指來(lái)指去，這就是我們?cè)蛨DPrototype背后的核心。比如我在Wireframe A上點(diǎn)了左上角，我下面會(huì)到什么樣的界面，我點(diǎn)了按鈕我下面會(huì)到什么樣的界面，點(diǎn)了圖片上面信息或者我Hover Over上的效果，所以原型圖的核心就是交互的表現(xiàn)形式。

我們的傻瓜軟件Marvel和Invision都是以這樣的操作流程去進(jìn)行原型圖制作的，同學(xué)們?nèi)绻耆粫?huì)編程也不用擔(dān)心，這些軟件是不需要編程背景、編程能力的。

Figma和Principle也像我剛才說(shuō)的，它也是我們現(xiàn)在工作當(dāng)中比較常見的制作原型圖的軟件，F(xiàn)igma是制作UI和UX比較強(qiáng)力的工具和助手；Principle可以制作比較流暢的Prototype去調(diào)節(jié)每一幀的呈現(xiàn)方式；原理也可以應(yīng)用到After Effects，After Effects制作動(dòng)效比較多，但是它也可以把它應(yīng)用到我們?cè)蛨D中，如果我們想完成比較Fancy，看上去比較比較厲害，比較小的Micro Interaction，大家也可以通過(guò)After Effects去制作Prototype。

最后兩個(gè)想跟大家提的兩個(gè)軟件是Framer和ProtoPie，這兩個(gè)是需要一定的編程基礎(chǔ)的，是以半Design和半Coding結(jié)合的模式去進(jìn)行原型圖的呈現(xiàn)，所以大家也可以想到相對(duì)來(lái)說(shuō)比較復(fù)雜的工具在最終呈現(xiàn)我們Prototype的時(shí)候，更能夠還原我們真實(shí)想要呈現(xiàn)的效果。如果這個(gè)APP真的上線，它想要有一個(gè)什么樣的效果，復(fù)雜的工具就能夠做得非常的細(xì)致以及能夠非常高水準(zhǔn)地還原我們?cè)蛨D。

大家不要忘了還有最簡(jiǎn)單基礎(chǔ)的紙和筆，大家想在設(shè)計(jì)的早期進(jìn)行原型圖的設(shè)計(jì)，不妨可以利用自己的紙和筆去進(jìn)行用戶測(cè)試，大家說(shuō)不定可以獲得意想不到的收獲，然后在我們?cè)O(shè)計(jì)的中期和后期進(jìn)行改進(jìn)。最后一點(diǎn)，會(huì)編程的同學(xué)也可以通過(guò)寫代碼、應(yīng)用編程這種能力去進(jìn)行原型圖的設(shè)計(jì)。

不知道大家有沒(méi)有在工作當(dāng)中會(huì)遇到這樣的職位，在互聯(lián)網(wǎng)行業(yè)都會(huì)有職位叫做User Experience Engineer，或者UI Prototyper，或者是我們所說(shuō)的UX Engineer。為什么會(huì)有這樣一個(gè)崗位的存在呢？他們每天的工作就是把設(shè)計(jì)師交付給我的圖片，利用編程的形式把原型圖制作出來(lái)。

他們或者也可以和設(shè)計(jì)師合作，利用原型圖把效果圖呈現(xiàn)出來(lái)，這些不需要后段的代碼，只要把前段的代碼寫完就可以了，然后利用這些效果圖和我們組隊(duì)進(jìn)行交流溝通，比較復(fù)雜的元素呈現(xiàn)可以去用電腦和編程的效果去呈現(xiàn)，因?yàn)橛械臇|西沒(méi)有辦法用單純的UI或者UX軟件去達(dá)到目的。

更多知識(shí)干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計(jì)分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對(duì)于設(shè)計(jì)初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過(guò)程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫(kù)，這些素材庫(kù)能幫助同學(xué)們完成最初的設(shè)計(jì)想法積累，基于這樣的基礎(chǔ)再進(jìn)行個(gè)性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費(fèi)拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計(jì)學(xué)院是尤克斯國(guó)際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計(jì)專業(yè)的頂級(jí)設(shè)計(jì)學(xué)院。除了一對(duì)一設(shè)計(jì)課、基礎(chǔ)技能課程、小組課題、設(shè)計(jì)評(píng)圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計(jì)劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計(jì)理論系統(tǒng)講座、申請(qǐng)必備知識(shí)解析等。

本文版權(quán)歸UXD尤克斯所有??

部分圖片來(lái)自于網(wǎng)絡(luò)??

如有侵權(quán)請(qǐng)與我們聯(lián)系