在成熟的UI設(shè)計(jì)流程中，視覺稿是繞不開的環(huán)節(jié)

“為了設(shè)計(jì)這個(gè)產(chǎn)品的UI我們已經(jīng)設(shè)計(jì)了線框圖、原型，沒(méi)有時(shí)間和精力再在這當(dāng)中加一個(gè)環(huán)節(jié)了！”對(duì)于UI設(shè)計(jì)流程，我想你沒(méi)少聽到這樣的抱怨。

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

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

視覺稿（Mockup）是什么？

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

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

·通過(guò)繪制UI草圖，從諸多想法中篩選出最有潛力的方案

·繪制線框圖，規(guī)劃信息的層次結(jié)構(gòu)，將內(nèi)容分組，突出核心功能

·繪制包含細(xì)節(jié)的視覺稿

·將真實(shí)的交互和視覺匯集到一起構(gòu)建成原型

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

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

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

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

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

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

制作視覺稿的幾種方法

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

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

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

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

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

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

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

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

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

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

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

·期待視覺稿能夠傳達(dá)出功能。視覺稿看起來(lái)是不錯(cuò)，但是它們實(shí)際上僅僅只是一個(gè)孤立的圖像，它們不足以承載網(wǎng)站或者APP的體驗(yàn)的復(fù)雜性。真正能夠傳達(dá)功能特點(diǎn)的是可交互的原型。

·功能膨脹。在視覺稿中添加各種控件并不難，不過(guò)在你并不清楚所有功能的情況下就憑空添加各種按鈕，那么這就是功能膨脹。

·未能解決問(wèn)題。許多視覺稿看起來(lái)非常漂亮，但是并不能解決實(shí)際的問(wèn)題。將視覺和問(wèn)題分開的誤區(qū)千萬(wàn)不要踏入進(jìn)去，這一定會(huì)在之后坑到自己。

結(jié)語(yǔ)

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