AAA教育

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

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

視覺稿（Mockup）是什么？

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

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

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

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

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

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

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

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

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

 

制作視覺稿的幾種方法

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

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

 

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

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

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

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

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

 

使用原型工具來制作視覺稿

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

 

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

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

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

結(jié)語

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