制作交交互原型制作起來(lái)雖然并不困難但是卻是十分重要的，因?yàn)樗墙换ピO(shè)計(jì)師想法的呈現(xiàn)，體現(xiàn)交互設(shè)計(jì)師的水準(zhǔn)，同時(shí)交互之后的工作也將圍繞著原型圖展開(kāi)。

    很多剛剛上手的設(shè)計(jì)師在畫(huà)交互原型的時(shí)候并沒(méi)有對(duì)其引起重視，導(dǎo)致在進(jìn)行后面的工作中遇到阻礙，因?yàn)檫@樣的經(jīng)歷我認(rèn)為不管是交互設(shè)計(jì)師還是剛開(kāi)始學(xué)習(xí)交互設(shè)計(jì)的小伙伴都應(yīng)該重視交互原型，為此，讓我們從頭開(kāi)始認(rèn)識(shí)交互原型。

 

交互原型是什么？

     交互原型就是將抽象的產(chǎn)品概念進(jìn)行具體的可視化。說(shuō)白了就是將腦子里的設(shè)計(jì)想法畫(huà)出來(lái)。因此不只是交互有原型在其他行業(yè)也有原型。

（《西游降魔》魚(yú)妖原型圖）

     而交互原型原型與其他原型不同的地方就是它主要體現(xiàn)產(chǎn)品的信息架構(gòu)、內(nèi)容、功能和交互方式。

 

交互原型的目的

   原型的主要目的是為了溝通最初的產(chǎn)品構(gòu)想。因此在畫(huà)交互原型最主要的就是要清晰易懂，結(jié)構(gòu)分明。而很多設(shè)計(jì)師往往會(huì)走入美觀的歧途，雖然美觀的交互原型卻是會(huì)讓人有更好的直觀感受但是，視覺(jué)方面的優(yōu)化會(huì)由UI設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師來(lái)完成，交互設(shè)計(jì)師在畫(huà)原型的時(shí)候最主要是要進(jìn)行交互功能上的優(yōu)化，并且清晰易懂地表現(xiàn)出來(lái)，從可以方便地與產(chǎn)品經(jīng)理交流，同時(shí)也讓接下來(lái)的UI設(shè)計(jì)更加易于展開(kāi)。

 

交互原型的分類(lèi)

現(xiàn)今的交互原型大概分為以下幾類(lèi)

      紙質(zhì)原型

      低保真原型

      高保真原型

      電子原型

其中紙質(zhì)原型和低保真原型主要用于溝通調(diào)整和審評(píng)，高保真主要用于原型說(shuō)明文檔中。

1紙質(zhì)原型。

紙質(zhì)原型就是手繪原型，可以畫(huà)在紙或者是白板上，一般來(lái)說(shuō)，很多設(shè)計(jì)師都是在和產(chǎn)品經(jīng)理討論或者參加產(chǎn)品的討論會(huì)的時(shí)候就能大概的勾勒出原型的樣式。紙質(zhì)原型快速，直接，方便與和產(chǎn)品人員進(jìn)行溝通，同時(shí)方便修改。紙質(zhì)原型主要表現(xiàn)的是界面的結(jié)構(gòu)排布和邏輯。

我認(rèn)為紙質(zhì)原型是其他交互原型的基礎(chǔ)，這一點(diǎn)對(duì)于剛剛上手的交互設(shè)計(jì)師來(lái)說(shuō)更是如此。

     我經(jīng)?？匆?jiàn)這樣一類(lèi)設(shè)計(jì)師，就是一開(kāi)始就用電腦畫(huà)原型圖，實(shí)際上這樣的方式并不值得提倡，因?yàn)樽鳛樵O(shè)計(jì)是我們要明白設(shè)計(jì)師真正的價(jià)值不在于軟件操作是否熟練，而在于能夠跟上時(shí)代和人群需求的快速的反應(yīng)能力以及對(duì)于問(wèn)題的良好的解決能力。而快速的反應(yīng)能力會(huì)讓設(shè)計(jì)師有靈活的思維有助與其解決問(wèn)題。紙質(zhì)交互原型的優(yōu)勢(shì)就是快速，靈活。你可以隨時(shí)隨地掏出紙筆畫(huà)下你一閃而過(guò)的想法，可以十分方便地和產(chǎn)品經(jīng)理討論某個(gè)界面的設(shè)計(jì)，并且能馬上作出修改。長(zhǎng)期以往，你的思維和效率就會(huì)得到很大的提高。

2、低保真原型。

低保真原型是紙質(zhì)原型的進(jìn)化版就是用軟件制作的對(duì)于產(chǎn)品較簡(jiǎn)單的模擬，就是將紙質(zhì)原型用軟件復(fù)述出來(lái)。和紙質(zhì)原型相同，低保真原型不需要太多的細(xì)節(jié)，主要還是簡(jiǎn)單快速地表達(dá)界面的結(jié)構(gòu)和邏輯。并且加入對(duì)界面交互關(guān)系的展示。同時(shí)，與高保真的原圖相比，低保真的原型圖也較為容易修改。

3、高保真原型圖。

高保真原圖就是原型圖的究極進(jìn)化形態(tài)。通常指?高保真灰度線框圖或產(chǎn)品演?示Demo，高保真原型圖常常通過(guò)灰度的不同來(lái)區(qū)分界面模塊展示界面的結(jié)構(gòu)，各個(gè)部分之間的邏輯關(guān)系。其界?布局和交互效果與實(shí)際產(chǎn)品完全等效,體驗(yàn)上也與真實(shí)產(chǎn)品接近，這就要求高保真原型圖需要加入產(chǎn)品的細(xì)節(jié)，同時(shí)可以進(jìn)行一定的界面的美化。

 

交互原型如何繪制

1、 知道要畫(huà)什么

在畫(huà)交互原型圖之前你首先要問(wèn)自己幾個(gè)問(wèn)題。這個(gè)產(chǎn)品的框架什么？有哪些流程？其中包含了哪些內(nèi)容或者功能？不同功能之間的關(guān)系是什么？

倘若你覺(jué)得思考這些問(wèn)題讓你覺(jué)得有些混亂，沒(méi)關(guān)系少年，你只需要一個(gè)結(jié)構(gòu)圖就可以解決這個(gè)問(wèn)題，不要998不要98，免費(fèi)技能帶回家!

首先，你需要一張紙和一支筆。

然后，寫(xiě)下這個(gè)產(chǎn)品大概的框架，（可以先找?guī)讉€(gè)結(jié)構(gòu)簡(jiǎn)單的APP練習(xí)一下）以“懶人天氣”這個(gè)APP為例

接下來(lái)，列出每個(gè)部分的相關(guān)流程，如添加天氣定位：添加按鈕→輸入城市→定位城市→加入城市類(lèi)表

再來(lái)，列出其包含哪些內(nèi)容。

 最后標(biāo)注上各個(gè)功能之間相互的關(guān)系是什么。就可以成基本的梳理了。

2、知道如何設(shè)計(jì)頁(yè)面

   在進(jìn)行總體的結(jié)構(gòu)分析之后我們就進(jìn)入第二階段，頁(yè)面的設(shè)計(jì)。頁(yè)面的交互設(shè)計(jì)不是將界面用好看的方式展現(xiàn)出來(lái)，而是要以解決用戶的痛點(diǎn)為出發(fā)點(diǎn)來(lái)設(shè)計(jì)界面。要讓界面更加友好、人性化。為此，我們需要注意一下幾點(diǎn)：

①明確用戶的主要痛點(diǎn)。要知道用戶用這個(gè)產(chǎn)品的主要目的是什么，并一起為核心進(jìn)行設(shè)計(jì)。

②一個(gè)頁(yè)面解決一個(gè)用戶痛點(diǎn)。不要貪多，盡量簡(jiǎn)單明了，有些設(shè)計(jì)師總是有很多想法，并且喜歡將所想到的功能一股腦地對(duì)方在一起，這就會(huì)讓產(chǎn)品顯得復(fù)雜又難用，因此要懂得取舍，一個(gè)頁(yè)面解決一個(gè)最迫切的問(wèn)題就可以了。

抓住頁(yè)面元素之間的主次關(guān)系。在同一個(gè)頁(yè)面中同樣要分清主次，將主要的部分以較為顯眼的方式放在重點(diǎn)位置，要讓用戶能夠快速地抓住重點(diǎn)。比如在一個(gè)登入頁(yè)面中，一般來(lái)說(shuō)，大部分的用戶是知道自己的用戶信息的，因此用“戶名”和“密碼”兩個(gè)模塊往往占位較大被放在顯眼的位置，如界面中間，而有少部分的用戶忘了密碼，因此“忘記密碼”這個(gè)模塊往往是占位較小并且放在較不顯眼的位置。

③模塊化設(shè)計(jì)。所謂的模塊化設(shè)計(jì)就是將一個(gè)界面里的元素歸納整合成幾個(gè)不同的小模塊。這樣不僅能方便設(shè)計(jì)師進(jìn)行修改同時(shí)也讓?zhuān)卜疟氵M(jìn)行模塊的復(fù)用提高效率，這種復(fù)用可以用于在同一個(gè)版本的界面設(shè)計(jì)上，如將頭像和用戶名組成一個(gè)模塊不僅可以出現(xiàn)在用戶信息中還可以放在首頁(yè)等其他地方，不僅如此，模塊化設(shè)計(jì)還可以方便于版本升級(jí)設(shè)計(jì)，在升級(jí)的過(guò)程中不可能每個(gè)部分都和原來(lái)的版本不一樣，因此我們可以從原有的部分找出可使用的模塊，有利于提高工作效率。

3、如何畫(huà)原型圖

①通過(guò)明暗對(duì)比來(lái)畫(huà)原型圖。在畫(huà)原型圖時(shí)一般用同一種顏色來(lái)表示其層次邏輯關(guān)系，大多數(shù)情況下設(shè)計(jì)師們會(huì)默認(rèn)使用灰色來(lái)繪制原型圖，通過(guò)灰色的深淺來(lái)表示不同元素之間的關(guān)系和結(jié)構(gòu)。

②合理的布局。在布局的時(shí)候盡量遵循簡(jiǎn)單、整潔的原則。沒(méi)有人喜歡復(fù)雜混亂的布局，這不僅并不會(huì)給用戶帶來(lái)探索產(chǎn)品功能的樂(lè)趣，反而會(huì)讓用戶有卸載的沖動(dòng)。因此，干凈整潔的布局是會(huì)讓用戶體驗(yàn)變得十分舒適，友好。而在設(shè)計(jì)整潔的界面的時(shí)候盡量要遵循不要將橫排和豎排混用，因?yàn)檫@很容易造成界面的混亂，讓原本很簡(jiǎn)單的操作變得十分復(fù)雜。