?如果你從事設(shè)計工作富稻，你經(jīng)常會聽到草圖掷邦、線框、模型和原型等術(shù)語椭赋。許多設(shè)計師交替使用這幾個術(shù)抚岗，雖然術(shù)語是相關(guān)的，但它們是不同的哪怔。
在本文中宣蔚，將回顧四種類型的可交付設(shè)計，并探索哪些工具可以幫助我們?nèi)?chuàng)建它认境。
?1. 草圖?
草圖是在一張紙上或用數(shù)字工具徒手畫的胚委，給你一個基本的概念表現(xiàn)。
什么時候叉信？
草圖在設(shè)計過程的概念化和初始可視化階段非常有用亩冬。
一圖勝千言。
人們是視覺學(xué)習(xí)者硼身，視覺比文字更能解釋想法硅急。
如何做？
草圖可以用紙和筆或者任何設(shè)計工具來創(chuàng)建佳遂。
畫草圖時要記住的事情:
不要試圖深入你的草圖：可以繪制粗略的草圖营袜，只要它們能幫助你傳達(dá)中心思想。
使用模具畫得更快丑罪。
練習(xí)瘋狂的八分法：這是是Google Ventures Design的sprint技術(shù)荚板，可讓產(chǎn)品團(tuán)隊在短時間內(nèi)可視化很多創(chuàng)意。該過程要求每個團(tuán)隊成員在五分鐘內(nèi)勾勒出八個想法吩屹。
給你的草圖拍照：有三個原因荣德。首先触机，圖像可以用作項目的文檔；其次，你可以將這些照片用于你的作品集山孔；第三侦香，像Marvel POP這樣的工具可以幫助你把筆和紙上的想法轉(zhuǎn)換成交互式的iPhone或Android原型脖卖。
?2. 線框圖?
線框圖是一種低保真度的設(shè)計產(chǎn)物窗声，它只代表UI的基本元素(線框圖看起來就像是用線設(shè)計的，這就是它的名字的由來)厌衙。線框圖是你設(shè)計的骨架——它們描繪了基本的UI距淫，成為你產(chǎn)品的藍(lán)圖。
什么時候婶希？
線框圖在產(chǎn)品設(shè)計過程的初始階段最為重要榕暇。
線框圖適用于:
評估個別頁面/屏幕的結(jié)構(gòu);
理解相關(guān)屏幕/頁面是如何一起工作的(從用戶的角度);
準(zhǔn)備詳細(xì)的項目需求文檔(線框圖可以作為很好的參考)。
如何做？
與草圖類似彤枢，線框圖也可以用紙和筆來創(chuàng)建狰晚。說到數(shù)字工具，Balsamiq可能是最有用的工具缴啡。
線框圖繪制時要記住的事情
不要給線框圖添加太多的細(xì)節(jié)壁晒。線框圖是產(chǎn)品的骨架結(jié)構(gòu)。線框圖的目的是評估設(shè)計业栅，而不是修飾細(xì)節(jié)秒咐。因此，只添加將在頁面/屏幕上顯示的基本元素碘裕。
使用顏色來吸引注意力携取。線框圖通常是用黑色和白色創(chuàng)建的，但也可以使用有限數(shù)量的顏色(比如一種或兩種對比色)來創(chuàng)建視覺重音帮孔。
添加簡短的“指向重點(diǎn)”注釋雷滋。如果你計劃向團(tuán)隊展示線框，請始終包含注釋文兢。注釋幫助創(chuàng)建上下文并快速傳遞關(guān)鍵思想惊豺。
從靜態(tài)線框創(chuàng)建可單擊的線框∏葑鳎可點(diǎn)擊的線框可以幫助其他人更好地理解您的想法。
?3.模型?
模型是設(shè)計的中高保真可視化揩页。模型提供了產(chǎn)品設(shè)計的視覺外觀旷偿，并且對于評估設(shè)計的外觀和感覺非常有用。
什么時候爆侣？
在設(shè)計過程的視覺設(shè)計階段萍程，模型是非常有用的。
模型在設(shè)計新產(chǎn)品和重新設(shè)計現(xiàn)有產(chǎn)品時都可以使用兔仰。當(dāng)團(tuán)隊想要:
評估視覺設(shè)計決策茫负。看看顏色乎赴、排版和圖像是如何協(xié)同工作的忍法。
嘗試不同的風(fēng)格。設(shè)計師可以嘗試不同的顏色組合榕吼，看看什么配色方案最適合用戶饿序。
評估設(shè)計的視覺一致性。確保產(chǎn)品中的所有屏幕看起來像整個產(chǎn)品的一部分羹蚣，而不是單個屏幕的集合原探。
評估設(shè)計的可訪問性。您的設(shè)計應(yīng)該允許具有各種能力的用戶導(dǎo)航、理解和使用您的產(chǎn)品咽弦。關(guān)注色彩對比徒蟆。請閱讀W3C關(guān)于如何為正文和圖像文本選擇適當(dāng)?shù)膶Ρ榷鹊慕ㄗh。
向涉眾展示用戶界面型型。草圖和線框圖通常需要澄清段审，而實物模型對人們來說更容易理解。
如何做输莺？
模型可以在Photoshop戚哎、Sketch、Figma和許多其他設(shè)計工具中創(chuàng)建嫂用。
創(chuàng)建模型時要記住的事情
小心Lorem Ipsum型凳。許多設(shè)計人員使用偽文本（也稱為Lorem Ipsum）填充模型。盡管這種方法可以節(jié)省設(shè)計時間嘱函，但當(dāng)設(shè)計人員用真實內(nèi)容替換虛擬內(nèi)容時甘畅，可能會引起很多問題。內(nèi)容容器的設(shè)計可能不適合實際的內(nèi)容往弓，這會導(dǎo)致布局的計劃外工作疏唾。
不要為你的模型選擇一個單一的設(shè)計思路。誘使你愛上第一個似乎是正確的想法函似，并開始改進(jìn)模型槐脏。但是，這不是最佳的設(shè)計方法撇寞。設(shè)計新產(chǎn)品時顿天，我們需要進(jìn)行試驗并嘗試各種解決方案。因此蔑担，最好嘗試盡可能多的不同想法牌废，然后再選擇你喜歡的想法。
?4. 原型?
原型是一個應(yīng)用程序/網(wǎng)頁的工作模型啤握。原型允許設(shè)計師模擬用戶交互鸟缕。與我上面提到的所有其他工件不同，原型總是交互的排抬。原型的目標(biāo)是模擬用戶和界面之間的交互懂从。
什么時候？
原型在設(shè)計過程的功能設(shè)計階段非常有用蹲蒲。
原型可以幫助你:
評估用戶旅程莫绣。原型將幫助產(chǎn)品團(tuán)隊識別交互流的潛在問題。
可用性測試悠鞍。通過在用戶中測試你的設(shè)計对室，你可以在編碼之前建立信心模燥。
如何做？
adobexd和InVision可以幫助你創(chuàng)建web掩宜、移動蔫骂、智能手表甚至語音體驗的原型(adobexd)。
原型制作時要記住的事情
為原型選擇正確的保真度牺汤。一些設(shè)計師認(rèn)為原型始終是高保真的人工制品辽旋。這不是真的。原型的逼真度應(yīng)與思維的逼真度相匹配檐迟，并且原型可以是低补胚，中，高逼真度追迟。
使用高保真原型來可視化復(fù)雜的過渡溶其。當(dāng)你需要顯示動畫狀態(tài)轉(zhuǎn)換時，Hi-fi原型非常有用敦间。
使用高保真原型與用戶一起測試概念瓶逃。您的設(shè)計越類似于真實產(chǎn)品，你將從測試參與者那里得到的反饋越詳細(xì)廓块。
創(chuàng)建編碼的原型厢绝。幾乎所有產(chǎn)品都存在技術(shù)可行性問題。并非設(shè)計人員創(chuàng)建的所有內(nèi)容都可以輕松地轉(zhuǎn)換為代碼带猴。但是對于設(shè)計人員進(jìn)行編碼和創(chuàng)建本機(jī)原型的項目昔汉，面臨技術(shù)可行性問題的風(fēng)險較低。
?總結(jié)?
在設(shè)計過程中拴清，決定使用何種交付成果靶病，都需要考慮您的產(chǎn)品和團(tuán)隊的需求。嘗試與項目的利益相關(guān)者進(jìn)行溝通贷掖，例如開發(fā)人員，項目經(jīng)理渴语，產(chǎn)品營銷人員苹威，了解最適合他們的方案。
在許多情況下驾凶，同一個設(shè)計項目可能需要創(chuàng)建所有包含以上三種設(shè)計交付成果牙甫。在合適的場合運(yùn)用它們，將幫助您更接近“完美”的設(shè)計调违。
