AAA教育

在設(shè)計(jì)APP和網(wǎng)頁(yè)界面的時(shí)候，不少設(shè)計(jì)團(tuán)隊(duì)會(huì)直接跳過(guò)視覺(jué)稿（Mockup）設(shè)計(jì)。的確，從頭腦風(fēng)暴，需求分析，到線框圖，原型，整個(gè)設(shè)計(jì)流程后面還有不少環(huán)節(jié)，但是視覺(jué)稿的設(shè)計(jì)和前面這些環(huán)節(jié)同樣重要，即使是按照精益設(shè)計(jì)原則或者快速原型設(shè)計(jì)的需求來(lái)看，它也是不可或缺的部分。

今天，讓我們來(lái)聊聊設(shè)計(jì)流程中的視覺(jué)稿是什么，以及如何創(chuàng)建有效的視覺(jué)稿，完善設(shè)計(jì)流程。

視覺(jué)稿（Mockup）是什么？

線框圖（Wireframe），原型（Prototype）和視覺(jué)稿（Mockup）這三者之間相互關(guān)聯(lián)，有相似性，但是截然不同，但是對(duì)于許多人而言，它們依然令人感到迷惑。想要明白它們之間的差異和關(guān)聯(lián)，最好的辦法是通過(guò)具體的設(shè)計(jì)流程和實(shí)際運(yùn)用來(lái)了解。

從構(gòu)思到開(kāi)發(fā)，中間通常會(huì)經(jīng)歷三到四個(gè)不同的設(shè)計(jì)階段。

• 通過(guò)繪制UI草圖，從諸多想法中篩選出最有潛力的方案
• 繪制線框圖，規(guī)劃信息的層次結(jié)構(gòu)，將內(nèi)容分組，突出核心功能
• 繪制包含細(xì)節(jié)的視覺(jué)稿
• 將真實(shí)的交互和視覺(jué)匯集到一起構(gòu)建成原型

這樣的幾個(gè)階段構(gòu)成使得設(shè)計(jì)師可以低成本、快速地測(cè)試和迭代它們的想法，設(shè)計(jì)產(chǎn)品框架。這不僅僅適用于全新的產(chǎn)品搭建，而且適宜于界面的新版本更新。

接下來(lái)，我們不妨專注于視覺(jué)稿的設(shè)計(jì)環(huán)節(jié)。線框圖是低保真的，而視覺(jué)稿則是增加了細(xì)節(jié)，但是并未加入交互，和高保真的原型相比，它算得上是中等保真度。視覺(jué)稿是靜態(tài)的，細(xì)節(jié)豐富高還原度的，所以你可以通過(guò)這一特征來(lái)區(qū)分它。

將線框圖視作為骨架，在此基礎(chǔ)上加入配色，搭配好字體，注入品牌相關(guān)的素材，對(duì)內(nèi)容布局進(jìn)行適度調(diào)整，加入樣式合適的導(dǎo)航，視覺(jué)稿就出來(lái)了。

那么為什么要加入視覺(jué)稿的設(shè)計(jì)環(huán)節(jié)呢？因?yàn)橐曈X(jué)稿是清晰傳達(dá)視覺(jué)要求的最有效方法之一，對(duì)于甲方、開(kāi)發(fā)等利益相關(guān)者而言尤其重要，如果沒(méi)有視覺(jué)稿，而是轉(zhuǎn)而借助早期的低保真線框圖來(lái)展現(xiàn)產(chǎn)品進(jìn)度，無(wú)疑是會(huì)讓人覺(jué)得不舒服的。雖然視覺(jué)稿不具備交互性，但是對(duì)于經(jīng)驗(yàn)豐富的開(kāi)發(fā)者或者其他參與者，是可以從中獲得大量的有效信息的。

“視覺(jué)稿在線框圖的基礎(chǔ)上發(fā)展而來(lái)，更具有組織性也更符合團(tuán)隊(duì)的愿景，它額外的優(yōu)勢(shì)在于，通過(guò)優(yōu)秀的視覺(jué)，向利益相關(guān)者呈現(xiàn)出更為有效的信息。”——Marcello Graciolli

基本上，視覺(jué)稿是線框圖和原型之間的粘合劑。

 

制作視覺(jué)稿的幾種方法

讓許多UI設(shè)計(jì)師抵觸視覺(jué)稿這一設(shè)計(jì)環(huán)節(jié)的原因在于，視覺(jué)稿看起來(lái)耗費(fèi)時(shí)間，但是吃力不討好。

幸運(yùn)的是，有幾種方法能夠確保在不降低效率的情況下更快地制作視覺(jué)稿，這對(duì)于UI設(shè)計(jì)師而言，就不會(huì)太影響整體的效率和開(kāi)發(fā)進(jìn)度了。

 

基于代碼構(gòu)建視覺(jué)稿

對(duì)于懂得代碼的UI設(shè)計(jì)師而言，視覺(jué)稿并不一定都是畫(huà)出來(lái)的哦。通過(guò)盡早使用代碼來(lái)構(gòu)建，降低后期開(kāi)發(fā)的時(shí)間，不過(guò)這需要設(shè)計(jì)師有嫻熟的代碼使用技巧，否則后期代碼不具備可用性，將會(huì)限制你的產(chǎn)品研發(fā)。

使用可靠的設(shè)計(jì)工具來(lái)構(gòu)建視覺(jué)稿

許多設(shè)計(jì)師會(huì)盡量使用他們所細(xì)化你的設(shè)計(jì)工具來(lái)制作UI視覺(jué)稿，使用Photoshop 和 Sketch 等工具都能制作出像素完美的靜態(tài)視覺(jué)稿。

在設(shè)計(jì)工具中構(gòu)建視覺(jué)稿的決定性因素在于，工作量和設(shè)計(jì)的可復(fù)用性。如果你設(shè)計(jì)完視覺(jué)稿之后，在原型階段還需要重新搭建一遍的話，無(wú)疑是令人難以接受的。好在以Justinmind 為代表的一些新興的原型工具能夠同PS、AI、Sketch 這些工具進(jìn)行無(wú)縫接駁，你可以在這些原型工具中直接調(diào)用。在Justinmind 中，即使是SVG文件和畫(huà)板都是完全可編輯的。

 

使用原型工具來(lái)制作視覺(jué)稿

如果你想徹底告別工具之間差異性，不如使用原型工具來(lái)“降維打擊”制作視覺(jué)稿。這個(gè)時(shí)候，你需要篩選出一款具有相對(duì)完善的UI元素庫(kù)的工具來(lái)幫你制作保真度較高的視覺(jué)稿。這款工具應(yīng)該可以讓你充分地調(diào)用豐富的字體和圖標(biāo)資源（比如Justinmind就集成了Google Fonts），確保你的設(shè)計(jì)足夠順暢。

 

注意下列常見(jiàn)的視覺(jué)稿設(shè)計(jì)誤區(qū)

剛開(kāi)始制作視覺(jué)稿的UI設(shè)計(jì)師常常會(huì)犯下下面的錯(cuò)誤：

• 期待視覺(jué)稿能夠傳達(dá)出功能。視覺(jué)稿看起來(lái)是不錯(cuò)，但是它們實(shí)際上僅僅只是一個(gè)孤立的圖像，它們不足以承載網(wǎng)站或者APP的體驗(yàn)的復(fù)雜性。真正能夠傳達(dá)功能特點(diǎn)的是可交互的原型。
• 功能膨脹。在視覺(jué)稿中添加各種控件并不難，不過(guò)在你并不清楚所有功能的情況下就憑空添加各種按鈕，那么這就是功能膨脹。
• 未能解決問(wèn)題。許多視覺(jué)稿看起來(lái)非常漂亮，但是并不能解決實(shí)際的問(wèn)題。將視覺(jué)和問(wèn)題分開(kāi)的誤區(qū)千萬(wàn)不要踏入進(jìn)去，這一定會(huì)在之后坑到自己。

結(jié)語(yǔ)

當(dāng)你真正開(kāi)始將視覺(jué)稿視作為連接線框圖和原型的中間組織，它的重要性和功能性會(huì)更好地呈現(xiàn)在你面前。通過(guò)視覺(jué)稿來(lái)消除視覺(jué)上可能潛在的問(wèn)題，UI設(shè)計(jì)師也可以在這個(gè)階段更好的釋放自己的創(chuàng)造力，專注于功能、層次結(jié)構(gòu)和體驗(yàn)。