當(dāng)我們在設(shè)計(jì)中有了想法，想要以某種方式將我們的設(shè)計(jì)概念表達(dá)出來時(shí)，我們就可以用到原型制作的方法。原型設(shè)計(jì)不僅是為了表達(dá)概念和想法，更是為了設(shè)計(jì)的迭代和評估。

01?什么是原型

原型是指根據(jù)不同解決方案制作的具體產(chǎn)品，供小組成員之間或設(shè)計(jì)小組與客戶和用戶一起開發(fā)測試設(shè)計(jì)概念。

我們在制作原型的時(shí)候，最重要的目的是將想法和概念展示出來，所以什么樣的形式并不重要。我們會(huì)在不斷的迭代設(shè)計(jì)中，尋找并且設(shè)計(jì)出最適合的模型供最后的方案展示和落地。

設(shè)計(jì)要快，迭代也要快。這里講的迭代要快主要針對的就是原型設(shè)計(jì)。

MIT的Media Lab有一句非常流行的“Demo or die”，這里的Demo指的也是原型，大家可以發(fā)現(xiàn)在設(shè)計(jì)領(lǐng)域中，原型設(shè)計(jì)非常重要。

原型設(shè)計(jì)是和他人溝通的有效工具，例如產(chǎn)品經(jīng)理、技術(shù)開發(fā)、用研團(tuán)隊(duì)等。原型設(shè)計(jì)可以幫助設(shè)計(jì)師和團(tuán)隊(duì)清楚地知道界面之間的跳轉(zhuǎn)邏，還有后期進(jìn)行的用戶測試，也在很大程度上依賴于設(shè)計(jì)原型。

我們要注意的是：設(shè)計(jì)迭代的流程中設(shè)計(jì)、原型、評估測試不是一個(gè)線性的流程，而是反復(fù)的過程。

02?原型設(shè)計(jì)流程

原型設(shè)計(jì)粗略分成三個(gè)迭代的過程，分別為低保真模型、中保真模型、高保真模型。Low Fidelity通常是一些看起來比較粗糙的，比如畫的草圖、用紙模擬的、沒有顏色的，越接近前期的概念越低保真。High Fidelity是需要還原出設(shè)計(jì)的界面最終的樣子，越接近最終的產(chǎn)品就越高保真。

第一步，迭代是使用線稿、草圖，紙質(zhì)的流程圖線框圖。

第二步，我們可以進(jìn)入中保的，有UI設(shè)計(jì)過的，加入了顏色、字體、排版的可點(diǎn)擊可交互的迭代原型。

第三步，大體的流程都結(jié)束之后加入更多的細(xì)節(jié)、動(dòng)效。

Low Fidelity

· 低保真原型

低保真原型圖常見的我們有兩種形式：一是手繪，用簡單的線框和文字表示原型中的內(nèi)容；二是用簡單的灰色模塊表示需要填充的內(nèi)容。

下面的四個(gè)模板就是我們在制作低保真原型時(shí)可能用到的內(nèi)容。非常清晰地劃分了內(nèi)容的區(qū)塊，并且簡單易懂。

我們在制作手繪的原型時(shí)，可以下載一些手機(jī)的框架圖，然后在內(nèi)部填充內(nèi)容。如下圖所示，給每個(gè)界面都畫上部件按鈕，在旁邊對界面進(jìn)行標(biāo)注，以幫助后期進(jìn)行修改和迭代設(shè)計(jì)。

下面這個(gè)案例更加方便，每張便簽代表一個(gè)界面，然后繪制出內(nèi)容。還可以隨時(shí)移動(dòng)便簽的位置，方便調(diào)整其中的流程和邏輯順序。

我們也可以以上兩種方法的結(jié)合，將手機(jī)界面框裁剪下來，然后放到每個(gè)界面中去，進(jìn)行比對和模擬測試。

一個(gè)初步的原型設(shè)計(jì)就是幫助設(shè)計(jì)師首先將想法全部成列出來，通過低保真原型設(shè)計(jì)，將關(guān)鍵的界面和必備的功能展現(xiàn)出來，這些原型設(shè)計(jì)就是幫助設(shè)計(jì)師呈現(xiàn)想法、對比、初步評估和輔助迭代設(shè)計(jì)的必要步驟。

Mid Fidelity

· 中保真原型

中間階段其實(shí)就是一個(gè)迭代的過程，原型設(shè)計(jì)是需要不斷發(fā)現(xiàn)問題并改進(jìn)的過程。而不同階段的原型就是為了幫助設(shè)計(jì)師，更好的發(fā)現(xiàn)問題，不斷地完善自己的作品。

中保真圖是線框圖和草圖的數(shù)字化版本，應(yīng)具有基本的功能性，但不包含任何設(shè)計(jì)美感或圖形。這些是使用FIma等應(yīng)用程序或其他類似工具生成的。

在此階段的過程中，設(shè)計(jì)已經(jīng)產(chǎn)生了各種各樣的方案，并開始了簡化階段。通過中保真圖，我們可以刪除所有無效的想法，并完善列表中的最佳想法。此過程將配合測試，在整個(gè)設(shè)計(jì)階段中重復(fù)進(jìn)行。

High Fidelity

·高保真原型?

在高保真設(shè)計(jì)中，大多數(shù)必要的設(shè)計(jì)資源和組件都已經(jīng)開發(fā)和集成了，原型通常由HTML / CSS和JavaScript組成。我們可以去組件庫挑選使用即可，不需要從頭設(shè)計(jì)。

高保真原型可以用于測試，也可以用于展示最終的效果，高保真原型就是接近產(chǎn)品的模型，通常包含UI Design、Illustration、Motion Design。

UI主要涉及字體、顏色、排版等視覺的設(shè)計(jì)。

Illustration小插畫一般用在產(chǎn)品的登陸界面，歡迎頁面等，有時(shí)導(dǎo)覽界面也都會(huì)有一些小插圖。

Motion Design是數(shù)字視頻或動(dòng)畫的一部分，它產(chǎn)生運(yùn)動(dòng)或旋轉(zhuǎn)的錯(cuò)覺，并通常結(jié)合錄音在多媒體項(xiàng)目中使用。

也會(huì)有專門的團(tuán)隊(duì)負(fù)責(zé)視覺的設(shè)計(jì)，包括設(shè)計(jì)button、icon等。

除了這些平面設(shè)計(jì)和動(dòng)畫設(shè)計(jì)，界面還有一些動(dòng)效設(shè)計(jì)也越來越成為交互設(shè)計(jì)的重點(diǎn)，目的是為了營造更好的用戶體驗(yàn)。下面這個(gè)原型設(shè)計(jì)中的動(dòng)效就非常有互動(dòng)感。

03?設(shè)計(jì)工具推薦

我們在做原型設(shè)計(jì)的時(shí)候，最常用的就是Figma，以前用的是Photoshop和Illustrator，但由于它們都是為過去的平面設(shè)計(jì)所開發(fā)的工具，在UI設(shè)計(jì)方面的效率并不是那么高，而Figma非常輕量，非?？旖?。

UXD給大家準(zhǔn)備了Figma的基礎(chǔ)課，幫助0基礎(chǔ)的同學(xué)學(xué)習(xí)如何使用Figma更加快速便捷地設(shè)計(jì)出原型。更多詳細(xì)信息可以查看

UXD課程官網(wǎng)：

https://video.uxd001.com/index

下面，用一個(gè)簡單的教程幫助大家快速上手，如何在figma中建立簡單的原型并進(jìn)行虛擬運(yùn)行。

1.當(dāng)我們建立好了原型之后，點(diǎn)擊右上角的Prototype。

2.然后所有的圖形和Frame都會(huì)顯示一個(gè)加號，移動(dòng)和拖拉這個(gè)加號，就可以連接圖片之間的關(guān)系，引發(fā)動(dòng)態(tài)的效果。

3.當(dāng)我們完成了所有界面之間的關(guān)系連線后，我們就可以點(diǎn)擊播放按鈕，進(jìn)行原型的試運(yùn)行。

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

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

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

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

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

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