漲姿勢！交互作品集中的線框圖和原型圖應該怎麼做？區別在哪裡！？

線框圖和原型圖是互動設計中重要的表達圖紙，很多同學在做設計的時候對這兩種圖紙的使用都分不清，本文將全面帶大家解讀交互線框圖和原型圖的區別以及他們的正確使用方法，文章共5998字，閱讀需要9分鐘。

01

線框圖和原型圖

1.它們有什麼區別？

如果同學們對UX或者UI設計有略微的了解，就會發現這三張圖片看著很眼熟。最右邊的就是通常我們手機中的APP的樣子，但是它在設計階段並不是一開始就用最後的效果圖來呈現，我們在設計的早期、中期以及後期會運用到不同類型的設計效果圖去展示我們的設計，以及去進行迭代、去進行分析和改進。

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

這三類涵蓋了大多數我們在設計階段能夠了解到的、應用到的類別，最左邊是線框圖的模板，視覺稿是靜止的，最右邊的原型圖是能夠進行交互的、能夠去進行點擊的，用戶能夠跟它進行交互、點擊、滑動、拖動這樣的行為，它就是我們最終原型圖的呈現。 

2.什麼是線框圖？

線框圖英文叫做Wireframe。線框圖有很強烈的特徵，首先它是低保真的形態來呈現，低保真英文也叫做Low Fidelity，它在設計的過程中不用在意細枝末節，比如在Text欄位我們需要用什麼字體、字體的大小、自重等等這些在線框圖階段是不用去考慮的，不用去在意繪製過程中涉及的細節，我們主要是想利用線框圖進行呈現的是我們設計圖的主幹與核心，以及它能夠更高效地用線框圖框框的形式把整個產品的結構和布局給勾勒出來，這就是它的意義所在。

線框圖的主要表現形式，我們通常都會用中性色，也就是黑白灰，或者再加四五個左右的跳躍色來進行製作。但主要還是集中用中性色，因為在線框圖的階段我們並不需要去在意顏色的選擇，但是它必須能夠表達出整個設計的思想、結構和布局。

我們為什麼要去設計線框圖呢？如果大家對設計過程有所了解，應該不難發現我們設計線框圖需要進行非常多版本的迭代，在實際情況中，線框圖的第一個版本不是所有人都能夠同意的，第一版成為我們最終版的情況真的很少發生，所以在設計的過程中就需要非常高效、有效的迭代方式。

這就需要你去利用線框圖，讓它能夠在設計早期就非常快速地、高效地獲得別人的反饋和意見，因為它不用去在意設計的細枝末節，所以我們就利用中性色和比較固有的字體或者字重在設計當中進行表達，讓它能夠非常快速地去進行迭代。

大家看左邊的示意圖，這是我自己在我的學生項目當中製作的線框圖，我這裡主要想體現的是我想在產品當中展現哪些信息、我要在哪些地方展現哪些信息、我要利用什麼樣的方式，比如我是用List Layout還是Carousel Layout，或者是把這些信息用卡片Card的形式呈現出來；又比如我在這邊會用深藍色把連結的形式把它體現出來，在融合和中性色同時，我們也可以去加最多一個比較跳躍的顏色，把它Highlight出來，高亮出來代表我這個是Link或者按鈕之類的呈現效果和方式。

總地來說，製作線框圖的目的是我們能夠在設計的早期快速進行交流和反饋，讓我們能夠更高效地去進行迭代。

3.什麼是原型圖？

原型圖英文叫Prototype。那原型圖又是什麼呢？它有和線框圖以及別的效果圖非常好區別的方法。原型圖最核心的點就是要以交互的方式去進行呈現，我的用戶不管是什麼人，我的老闆或者我組裡的工程師也好，他們要的最終呈現的方式是可以讓用戶能夠跟它用交互、點擊滑動的形式去進行呈現。

通常原型圖都是以高保真的方式進行呈現的，因為我們的目標是要去模擬用戶的操作流程並把它用於最後的測試即用戶交互的階段，所以這就是通常我們為什麼要去製作原型圖的原因。但是大家也可以看到，我右邊的圖片並不是高保真（High Fidelity）的，這看著不像最終的效果圖。所以也有時候我們的原型圖也是可以是低保真（Low Fidelity）的也沒有問題，主要是看我們製作原型圖的目的是什麼、目標是什麼 。

我們是想要把交互的模式在前期用線框圖的形式做出來，然後在設計的前期進行模擬流程和測試，還是我們最後要以高保真的形式去進行最後的用戶測試，或者我們把原型圖用交互的形式呈現出來，讓我們別的組的人或者我們的用戶能夠更加高效有效地了解產品是什麼樣的，產品是怎麼樣進行流程的或怎麼樣去進行交互的。

4.在設計不同階段的原型圖

原型圖在不同階段也有不同進行呈現的流程，我們可以看到最左邊的原型圖是以草圖Sketch的方式來呈現的，我們並不用特別去在意我東西要放多大、圖片放多大、字體字號或者以什麼樣的UI形式去呈現，這些我們在草圖階段是不用去考量的。

我們做草圖原型圖的主要目標就要在設計的前期了解用戶使用產品的流程，像現在很多原型圖它都會放小箭頭，它想要了解到比如我用戶點擊了這按鈕，那下一個界面會是什麼樣的；比如我滑動了這個頁面，那下個界面呈現的效果會是如何的，所以在原型圖裡，我們主要測試的是交互的流程以及其他想要測試的東西。這個流程是以草圖的方式呈現，比如我們的Sketch可以是以線框圖的方式進行呈現，比如我剛才說的都是它很通用的概念，只要我們能夠把用戶的模型做出來，那就是它的原型圖。還有最多的一類就是以最終視覺稿的方式去進行呈現。

02

如何設計與應用線框圖和原型圖

1.如何製作線框圖

Wireframe顧名思義，它是用線和框所組成的，簡單來說就是畫框框的一個過程，專業一點的說法是線框圖以佔位符（Placeholder，Placeholder它並不是真實的UI元素）的形式，把線框放在設計頁，然後用線框來表示出頁面中會有圖片，比如我會用線表示我我這裡會考慮放一段文字、標題、Tag之類的東西。

所以Wireframe是用我們專業所說的佔位符Placeholder組成的，比如我圖片或者照片我們通常都是用X，在正方形、長方形這類矩形當中以在中間畫X的形式/畫叉叉的形式來表達，讓用戶知道這裡表示應該圖片、照片。還有一個表達形式是我們會把整個矩形變成灰色，可以把它改成我先把東西先放在這裡，我考慮到我要把另一方在後期的視覺效果圖當中換成照片，我們的標題和文字用線的形式進行表現。

大家會問，這圖片裡有很多不同的字的元素，有些我想要放標題，我想要放超大的高亮來吸引用戶的注意，我下面會想加一行很小的字補充說明，那請問我怎麼進行區分？

其實這種情況它也是非常好進行區分的，我們可以運用不同的字重或者我們如果是放真實的一段話，就可以去利用不同的字重和字號進去區分，我現在暫時把它定為10 pixel，那我上面最大的標題可以它換成32 Pixel，這樣就可以區分開來了。那還有一個方式就是我們以線條的形式，我們想要在最終效果圖當中比較大的字號，我們可以把線加粗加寬，比較常規的字我們可以用1 Pixel或者2 Pixel的線去進行呈現，這都是沒有問題的。

在設計的過程當中，線框圖或者我們最後的高保真效果圖都是用同一個軟體進行設計的。比較常見的UI或者UX設計軟體第一個有Sketch，比較老牌的很多軟體公司或者網際網路公司都會用Sketch；我們也還會用Figma，因為它相對比較於Sketch可以更好地在網絡上線上進行合作，所有的東西都是Based On Cloud，可以去和別人在線上進行實時高效的合作，所以我自己比較喜歡用Figma。

大家不要忘記了，我們最常見的是我們的紙和筆，我們在設計最前期最簡單的方法是我們拿起筆，在紙上進行草圖的繪製，我們在草圖的繪製當中，一般來說是以非常低保真的形式進行呈現，因為我們是想要儘量去頭腦風暴去想更多的Idea，在我們的紙上進行快速的描繪。通過紙和筆製作可以製作Wireframe，這是沒有問題的。 

我在這裡想跟大家展現的是我自己在個人項目為Side Project當中製作的線框圖，大家可以看到，我並沒有完完全全地按照我剛剛的設計規範，就是我要把它用線條進行表示。我個人的意見是我們可以時不時地進行改善，只要在我們所有的項目當中做的線框圖都是以非常統一、整合、一致的形式表達就可以了。

就比我們在某線框圖當中，我現在的照片或者圖片是以灰色框去呈現的，那我就要把設計的規範應用到我所有的線框圖當中，這樣我自己或者是別人看到灰色框框的第一時間就能反應出來這個就是圖片的Placeholder。

還有一些表達形式文字也可以做到，用具體的文字呈現出來，因為在線框圖的製作過程當中所有的東西都是暫時的，字也可以是我隨便寫的Placeholder，我主要是想利用線框圖表達我什麼東西在什麼地方以及我整個界面的結構和布局，比如我在最上面會想要放一個Hamburger Bar，一個Menu，然後我在這邊就會有非常大的標題去吸引用戶的注意，我下面會有Search Bar搜索欄以及今天想強力推送的東西，我在小卡片裡用線框圖展現了我整個文字Hierarchy的呈現，比如在最上面標題要比較大，下面的比較小，那我就把它換成小一號的字體進行呈現。

我想要這些食物的呈現方式是想要有卡片或者是我比較類似的行事方式去呈現它，我做的目的是我想要在設計的前期把整個APP的框架先搭建出來，大概什麼地方放什麼並且都以比較通用General的結構把它呈現出來，那就足夠了。我們製作的線框圖的目的是我們可以給用戶看以及讓用戶進行測試，把Wireframe線框圖做成原型圖，我們進行早期的測試都沒有問題，主要看我們如何去製作以及我們為什麼要去製作它。

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

我個人覺得製作原型圖，特別是以高保真的效果呈現原型圖，如果是剛接觸UI或者UX的同學會沒有那麼熟悉。大家做得最多的是點擊或者是滾動的呈現方式。

我跟大家說的Prototype它通常是以高保真的效果來模擬最終產品的交互流程，所以它有的時候會有很多種狀況，比如我們在手機端App當中，我們會有不同的手勢進行交互，我們在網頁端會有不同的轉場方式，我們會通過鍵盤進行交互，我們也可以通過我們手在屏幕上進行觸擊，所以它有非常多的交互模式以及最後動效的呈現，所以原型圖相比於線框圖製作相比較來說更複雜一點。

大家可以看到我右邊的效果圖有很多線指來指去，這就是我們原型圖Prototype背後的核心。比如我在Wireframe A上點了左上角，我下面會到什麼樣的界面，我點了按鈕我下面會到什麼樣的界面，點了圖片上面信息或者我Hover Over上的效果，所以原型圖的核心就是交互的表現形式。

我們的傻瓜軟體Marvel和Invision都是以這樣的操作流程去進行原型圖製作的，同學們如果完全不會編程也不用擔心，這些軟體是不需要編程背景、編程能力的。

Figma和Principle也像我剛才說的，它也是我們現在工作當中比較常見的製作原型圖的軟體，Figma是製作UI和UX比較強力的工具和助手；Principle可以製作比較流暢的Prototype去調節每一幀的呈現方式；原理也可以應用到After Effects，After Effects製作動效比較多，但是它也可以把它應用到我們原型圖中，如果我們想完成比較Fancy，看上去比較比較厲害，比較小的Micro Interaction，大家也可以通過After Effects去製作Prototype。

最後兩個想跟大家提的兩個軟體是Framer和ProtoPie，這兩個是需要一定的編程基礎的，是以半Design和半Coding結合的模式去進行原型圖的呈現，所以大家也可以想到相對來說比較複雜的工具在最終呈現我們Prototype的時候，更能夠還原我們真實想要呈現的效果。如果這個APP真的上線，它想要有一個什麼樣的效果，複雜的工具就能夠做得非常的細緻以及能夠非常高水準地還原我們原型圖。

大家不要忘了還有最簡單基礎的紙和筆，大家想在設計的早期進行原型圖的設計，不妨可以利用自己的紙和筆去進行用戶測試，大家說不定可以獲得意想不到的收穫，然後在我們設計的中期和後期進行改進。最後一點，會編程的同學也可以通過寫代碼、應用編程這種能力去進行原型圖的設計。

不知道大家有沒有在工作當中會遇到這樣的職位，在網際網路行業都會有職位叫做User Experience Engineer，或者UI Prototyper，或者是我們所說的UX Engineer。為什麼會有這樣一個崗位的存在呢？他們每天的工作就是把設計師交付給我的圖片，利用編程的形式把原型圖製作出來。

他們或者也可以和設計師合作，利用原型圖把效果圖呈現出來，這些不需要後段的代碼，只要把前段的代碼寫完就可以了，然後利用這些效果圖和我們組隊進行交流溝通，比較複雜的元素呈現可以去用電腦和編程的效果去呈現，因為有的東西沒有辦法用單純的UI或者UX軟體去達到目的。

掃碼獲取作品集和留學諮詢

UXD錄取大數據

近幾年，UXD已經幫助數百位學生錄取到了海外頂級名校。UXD的交互錄取數據基於了2020Fall所有課程學員錄取結果統計，通過多年的積澱，處於行業領軍者地位，近三年來錄取率逐年上升，均遠高於行業平均值，其中美國交互名校CMU達到了35%，英國名校倫藝則達到了82%。美國綜合類大U卡內基梅隴共有7枚錄取，分布於MHCI、MIIPS、METALS、MDES和ETC等幾個熱門分支專業。英國方向則在皇藝和倫藝保持了決對的錄取優勢，分別達到了50%和82%。歐洲錄取主要集中在AHO、TUD和Polimi等幾所重要的交互/服務學校，均保持了極高的錄取率。

註：錄取率計算方式為（該校當季錄取學員數/UXD該校當季總申請人數），其中一人同時錄取兩個專業記做2個錄取名額統計。

▏美國院校：

▏英國院校：

▏歐洲院校：

▏亞洲院校：

同時為了更好地讓同學們更好地了解當下的申請趨勢，獲取更多的申請經驗和心得。UXD邀請優秀的設計學生，參與申請經驗談專欄採訪，試圖通過文字還原最真實的申請過程，讓大家能從中獲取寶貴的經驗。