如果您從事設(shè)計(jì)工作，您會(huì)經(jīng)?？吹街T如草圖、線框、模型和原型之類的術(shù)語(yǔ)。 許多設(shè)計(jì)師互換使用這些術(shù)語(yǔ)，盡管這些術(shù)語(yǔ)相關(guān)，但它們是不同的。

在本文中，我們將回顧四種類型的設(shè)計(jì)可交付成果，并探討哪些工具可以幫助我們創(chuàng)建它們。

1.素描

草圖是徒手繪制在一張紙上或使用數(shù)字工具繪制的，可為您提供基本的概念表示。

什么時(shí)候？

草圖在設(shè)計(jì)過(guò)程的概念化和初始可視化階段特別有用。

一張圖片勝過(guò)千言萬(wàn)語(yǔ)。

人們是視覺(jué)學(xué)習(xí)者，視覺(jué)效果比文字更能解釋感知。

怎么做？

可以使用紙和鉛筆或任何設(shè)計(jì)工具創(chuàng)建草圖。

素描時(shí)要注意的事項(xiàng)：

不要試圖在你的草圖中畫(huà)得太深：粗略的草圖很好，只要它們能幫助你傳達(dá)你的中心思想。

使用卷筆刀畫(huà)得更快。

實(shí)踐瘋狂的八法則：這是一項(xiàng)很棒的技術(shù)，可以讓產(chǎn)品團(tuán)隊(duì)在短時(shí)間內(nèi)將大量想法形象化。 該過(guò)程要求每個(gè)團(tuán)隊(duì)成員在五分鐘內(nèi)繪制出八種看法。

為您的草圖拍照：有三個(gè)觸發(fā)器。 首先，圖像可以用作項(xiàng)目的文檔； 其次，您可以將這張照片用于您的作品集； 第三，像 POP 這樣的工具可以幫助您將筆和紙的想法轉(zhuǎn)化為交互或原型。

2.線框

線框是一種低保真設(shè)計(jì)工件，僅代表 UI 的基本元素（線框看起來(lái)好像是用線條設(shè)計(jì)的，這也是它的名字來(lái)源）。 線框是您設(shè)計(jì)的骨架——它們勾勒出基本的 UI 并成為您產(chǎn)品的新藍(lán)圖。

什么時(shí)候？

線框圖在產(chǎn)品設(shè)計(jì)過(guò)程的初始階段最為重要。

線框適用于：

評(píng)估某些頁(yè)面/屏幕的結(jié)構(gòu)；

了解相關(guān)屏幕/頁(yè)面如何協(xié)同工作（從用戶的角度來(lái)看）；

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

怎么做？

與草圖類似，線框也可以用筆和紙創(chuàng)建。 說(shuō)到數(shù)字工具，可能是最有用的工具。

線框圖時(shí)要記住的事情

不要在線框上添加太多細(xì)節(jié)。 線框是產(chǎn)品的骨架結(jié)構(gòu)。 線框圖的目的是評(píng)估設(shè)計(jì)，而不是打磨細(xì)節(jié)。 因此，只添加將顯示在頁(yè)面/屏幕上的基本元素。

使用顏色來(lái)吸引注意力。 線框通常以紅色和藍(lán)色創(chuàng)建，但也可以使用有限數(shù)量的顏色（例如一種或兩種對(duì)比色）來(lái)創(chuàng)建視覺(jué)重點(diǎn)。

添加簡(jiǎn)短的“點(diǎn)對(duì)點(diǎn)”注釋。 如果您打算向團(tuán)隊(duì)展示線框，請(qǐng)仍然包含評(píng)論。 評(píng)論有助于創(chuàng)建上下文并快速傳達(dá)關(guān)鍵想法。

從靜態(tài)線框創(chuàng)建可點(diǎn)擊的線框。 可點(diǎn)擊的線框可以幫助其他人更好地理解您的想法。

3.型號(hào)

模型是設(shè)計(jì)的中高保真度可視化。 模型提供了產(chǎn)品設(shè)計(jì)的視覺(jué)外觀，但對(duì)于評(píng)估設(shè)計(jì)的外觀和感覺(jué)非常有用。

什么時(shí)候？

模型在設(shè)計(jì)過(guò)程的視覺(jué)設(shè)計(jì)階段非常有用。

在設(shè)計(jì)新產(chǎn)品和重新設(shè)計(jì)現(xiàn)有產(chǎn)品時(shí)都可以使用模型。 當(dāng)團(tuán)隊(duì)想要：

評(píng)估視覺(jué)設(shè)計(jì)決策。 查看顏色、排版和圖像如何協(xié)同工作。

嘗試不同的風(fēng)格。 設(shè)計(jì)師可以嘗試不同的顏色組合，看看哪種配色方案最適合用戶。

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

評(píng)估設(shè)計(jì)的可訪問(wèn)性。 您的設(shè)計(jì)應(yīng)該允許各種能力的用戶瀏覽、理解和使用您的產(chǎn)品。 專注于色調(diào)對(duì)比。 請(qǐng)閱讀 W3C 關(guān)于如何為文本和圖像文本選擇合適的對(duì)比度的建議。

向利益相關(guān)者展示用戶界面。 草圖和線框通常需要澄清，而模型更容易讓人理解。

怎么做？

可以在 、 、Figma 和許多其他設(shè)計(jì)工具中創(chuàng)建模型。

創(chuàng)建模型時(shí)的注意事項(xiàng)

當(dāng)心 Lorem Ipsum。 許多設(shè)計(jì)師使用虛擬文本（通常稱為 ）填充模型。 雖然這些技術(shù)可以節(jié)省設(shè)計(jì)時(shí)間，但當(dāng)設(shè)計(jì)人員用真實(shí)內(nèi)容替換虛擬內(nèi)容時(shí)，它們可能會(huì)導(dǎo)致很多問(wèn)題。 內(nèi)容容器的設(shè)計(jì)可能不適合實(shí)際內(nèi)容，這可能會(huì)導(dǎo)致布局無(wú)法正常工作。

不要為您的模型選擇單一的設(shè)計(jì)理念。 迫使你愛(ài)上第一個(gè)看似正確的觀點(diǎn)并開(kāi)始改進(jìn)模型。 此外，這不是最好的設(shè)計(jì)方式。 在設(shè)計(jì)新產(chǎn)品時(shí)，我們需要試驗(yàn)和嘗試各種解決方案。 因此，在選擇自己喜歡的觀點(diǎn)之前，最好嘗試盡可能多的不同觀點(diǎn)。

4.原型

原型是應(yīng)用程序/網(wǎng)頁(yè)的工作模型。 原型允許設(shè)計(jì)者模擬用戶交互。 與我在其中提到的所有其他空腔不同，原型始終是交互式的。 原型設(shè)計(jì)的目標(biāo)是模擬用戶和界面之間的交互。

什么時(shí)候？

原型在設(shè)計(jì)過(guò)程的功能設(shè)計(jì)階段特別有用。

原型可以幫助您：

評(píng)估用戶旅程。 原型將幫助產(chǎn)品團(tuán)隊(duì)識(shí)別交互流程中的潛在問(wèn)題。

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

怎么做？

和原型 ( )，可以幫助您創(chuàng)建 Web、移動(dòng)、智能手表，甚至語(yǔ)音體驗(yàn)。

原型設(shè)計(jì)時(shí)要記住的事情

為您的原型選擇正確的保真度。 一些設(shè)計(jì)師覺(jué)得原型仍然是高保真人工制品。 這不是真的。 原型的保真度應(yīng)該與頭腦的保真度相匹配，原型可以是低保真度、中保真度或高保真度。

使用高保真原型可視化復(fù)雜的過(guò)渡。 當(dāng)您需要顯示動(dòng)畫(huà)狀態(tài)轉(zhuǎn)換時(shí)，高保真原型特別有用。

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

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

總結(jié)

在設(shè)計(jì)過(guò)程中sketch視覺(jué)設(shè)計(jì)教程，決定使用哪個(gè)可交付成果需要考慮您的產(chǎn)品和團(tuán)隊(duì)的需求。 嘗試與項(xiàng)目的利益相關(guān)者，如開(kāi)發(fā)人員、項(xiàng)目主管、產(chǎn)品營(yíng)銷人員進(jìn)行溝通，了解最適合他們的解決方案。

在許多情況下sketch視覺(jué)設(shè)計(jì)教程，同一個(gè)設(shè)計(jì)項(xiàng)目可能需要?jiǎng)?chuàng)建所有三個(gè)設(shè)計(jì)可交付成果。 在正確的地方使用它們將幫助您更接近“完美”的設(shè)計(jì)。

如有侵權(quán)請(qǐng)聯(lián)系刪除！