交互設(shè)計(jì)產(chǎn)出過程中，我們經(jīng)常會聽到一些專業(yè)術(shù)語Sketch草圖，Wireframe線框，Prototype原型和Mockup樣機(jī)。但是大家總是分不清這些圖紙之間用途的區(qū)別。

今天UXD就帶同學(xué)們橫向?qū)Ρ冗@四種常見的交互設(shè)計(jì)產(chǎn)出產(chǎn)物，探討他們的使用時(shí)間、使用方式以及注意事項(xiàng)，從此見到他們再也不會傻傻分不清。

01?Sketch

Sketch是寫在紙上或數(shù)字工具中的手繪圖，是用于提供概念的基本表示方法。

When什么時(shí)候使用：

在設(shè)計(jì)過程的概念化和初始可視化階段，Sketch可能會非常有用。一張圖片勝過千言萬語。人們是視覺學(xué)習(xí)者，視覺可以比單詞文字更好地解釋思想。

How如何使用：

可以使用筆和紙或幾乎任何設(shè)計(jì)工具來創(chuàng)建Sketch。

Sketch時(shí)要記住的事情：

?不要嘗試細(xì)節(jié)化Sketch?？梢岳L制粗略的Sketch，只要它們可以幫助你傳達(dá)主要思想。

?使用模具可以更快地繪制，這點(diǎn)對于手繪能力較差的同學(xué)非常有幫助。

?練習(xí)Crazy Eights方法，Crazy Eights是Google Ventures Design的sprint技術(shù)，可讓產(chǎn)品團(tuán)隊(duì)在短時(shí)間內(nèi)可視化很多創(chuàng)意。該過程要求每個(gè)團(tuán)隊(duì)成員在五分鐘內(nèi)勾勒出八個(gè)想法。

?為Sketch拍照。這有三個(gè)原因：首先，圖像可以用作項(xiàng)目的文檔。其次，你將可以使用這些照片作為你的投資組合。第三，Marvel POP之類的工具可以幫助你將筆和紙的想法轉(zhuǎn)變?yōu)榻换ナ絠Phone或Android原型。

Its possible to turn any sketch or image into an interactive prototype. Image by?Marvel

02?Wireframe

Wireframe是低保真度的設(shè)計(jì)工件，僅表示UI的基本元素（Wireframe看起來就像是用線設(shè)計(jì)的，這就是名稱的來歷）。Wireframe充當(dāng)設(shè)計(jì)的骨架，它們描繪了基本的UI，并成為產(chǎn)品的藍(lán)圖。

When什么時(shí)候使用：

Wireframe在產(chǎn)品設(shè)計(jì)過程的初始階段最為相關(guān)。Wireframe可用于：

?評估單個(gè)頁面/屏幕的結(jié)構(gòu)；

?了解相關(guān)屏幕/頁面如何協(xié)同工作（從用戶角度）；

?準(zhǔn)備詳細(xì)的項(xiàng)目需求文檔（Wireframe可以作為很好的參考）。

How如何使用：

類似于Sketch，可以使用筆和紙創(chuàng)建Wireframe。在數(shù)字工具方面，Balsamiq也許是最有用的工具。

制作Wireframe時(shí)要記住的事情：

?不要給Wireframe添加太多細(xì)節(jié)。Wireframe是產(chǎn)品的準(zhǔn)系統(tǒng)結(jié)構(gòu)。Wireframe的目的是評估設(shè)計(jì)，而不是拋光細(xì)節(jié)。因此，僅添加將在頁面/屏幕上顯示的基本元素。

?使用顏色引起注意。Wireframe傳統(tǒng)上是用黑白創(chuàng)建的，但是可以使用有限數(shù)量的顏色（例如，一種或兩種對比色）來創(chuàng)建視覺強(qiáng)調(diào)。

?添加簡短的注釋。如果你打算向團(tuán)隊(duì)展示W(wǎng)ireframe，請?zhí)砑幼⑨?。注釋有助于?chuàng)建上下文并快速交付關(guān)鍵思想。

?從靜態(tài)Wireframe創(chuàng)建可單擊的Wireframe?？牲c(diǎn)擊的Wireframe可以幫助其他人更好地理解你的想法。

03?Prototype

Prototype是應(yīng)用程序/網(wǎng)頁的工作模型。Prototype允許設(shè)計(jì)人員模擬用戶交互。與上面提到的所有其他工件不同，Prototype始終是交互式的。Prototype的目的是模擬用戶與界面之間的交互。

When什么時(shí)候使用：

在設(shè)計(jì)過程的功能設(shè)計(jì)階段，Prototype可能會很有幫助。Prototype可以幫助你：

?評估用戶旅程。Prototype將幫助產(chǎn)品團(tuán)隊(duì)確定交互流程中的潛在問題。

?測試可用性。通過與用戶一起測試設(shè)計(jì)，你可以在編碼之前建立信心。

How如何使用：

Figma可以幫助你為Web，移動，智能手表甚至語音體驗(yàn)等各種界面創(chuàng)建Prototype。

Prototype制作時(shí)要記住的事情：

?為Prototype選擇正確的保真度。一些設(shè)計(jì)師認(rèn)為Prototype始終是高保真的人工制品，這是錯(cuò)誤的想法。Prototype的保真度應(yīng)與思維的保真度相匹配，并且Prototype可以是低保真度，中保真度和高保真度。

?使用高保真原型來獲得可視化復(fù)雜的過渡。當(dāng)你需要顯示動畫狀態(tài)轉(zhuǎn)換時(shí)，Hi-fi原型非常有用。

?使用高保真原型與用戶一起測試概念。你的設(shè)計(jì)越類似于真實(shí)產(chǎn)品，你將從測試參與者那里得到越詳細(xì)的反饋。

?創(chuàng)建編碼的原型。幾乎所有產(chǎn)品都存在技術(shù)可行性問題。并非設(shè)計(jì)人員創(chuàng)建的所有內(nèi)容都可以輕松地轉(zhuǎn)換為代碼。但是對于設(shè)計(jì)人員進(jìn)行編碼和創(chuàng)建本機(jī)原型的項(xiàng)目，面臨技術(shù)可行性問題的風(fēng)險(xiǎn)較低。

04?Mockup

Mockup是設(shè)計(jì)的中保真度或高保真度可視化。Mockup可提供產(chǎn)品設(shè)計(jì)的視覺效果，非常適合評估設(shè)計(jì)的外觀。

When什么時(shí)候使用：

在設(shè)計(jì)過程的可視化設(shè)計(jì)階段，Mockup可能會很有幫助。在設(shè)計(jì)新產(chǎn)品和重新設(shè)計(jì)現(xiàn)有產(chǎn)品時(shí)都可以使用模型。當(dāng)團(tuán)隊(duì)想要：

?評估視覺設(shè)計(jì)決策。了解顏色，版式和圖像如何協(xié)同工作。

?嘗試各種樣式。設(shè)計(jì)師可以嘗試不同的顏色組合，并查看哪種顏色方案最適合用戶。

?評估設(shè)計(jì)的視覺一致性。確保產(chǎn)品中的所有屏幕看起來像整個(gè)產(chǎn)品的一部分，而不是單個(gè)屏幕的集合。

?評估設(shè)計(jì)的可訪問性。你的設(shè)計(jì)應(yīng)允許所有能力的用戶瀏覽，理解和使用你的產(chǎn)品。專注于色彩對比，閱讀有關(guān)如何為正文和圖像文本選擇合適的對比度的W3C建議。

?向利益相關(guān)者展示用戶界面。Sketch和Wireframe通常需要澄清，使人們更容易理解模型。

How如何使用：

可以在Photoshop，Sketch，F(xiàn)igma和許多其他設(shè)計(jì)工具中，借助樣機(jī)模版快速創(chuàng)建模型。

創(chuàng)建模型時(shí)要記住的事情：

?小心Lorem Ipsum。許多設(shè)計(jì)人員使用偽文本（也稱為Lorem Ipsum）填充模型。盡管這種方法可以節(jié)省設(shè)計(jì)時(shí)間，但當(dāng)設(shè)計(jì)人員用真實(shí)內(nèi)容替換虛擬內(nèi)容時(shí)，可能會引起很多問題。內(nèi)容容器的設(shè)計(jì)可能不適合實(shí)際的內(nèi)容，這會導(dǎo)致布局的重新規(guī)劃。

?不要為模型選擇一個(gè)單一的設(shè)計(jì)思路。設(shè)計(jì)新產(chǎn)品時(shí)，我們需要進(jìn)行實(shí)驗(yàn)并嘗試各種解決方案。因此，最好嘗試盡可能多的不同想法，然后再選擇你喜歡的想法。

UXD官網(wǎng)也給同學(xué)們準(zhǔn)備了相應(yīng)的課程講解，感興趣同學(xué)們可以點(diǎn)擊下方鏈接進(jìn)行學(xué)習(xí)。網(wǎng)址：https://video.uxd001.com/page/762019

更多知識干貨以及其他海外留學(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)拿！添加小助手即可獲?。?/p>

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)講座、申請必備知識解析等。

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

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

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