在成熟的UI設計流程中，視覺稿是繞不開的環節

“為了設計這個產品的UI我們已經設計了線框圖、原型，沒有時間和精力再在這當中加一個環節了！”對于UI設計流程，我想你沒少聽到這樣的抱怨。

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

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

視覺稿（Mockup）是什么？

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

從構思到開發，中間通常會經歷三到四個不同的設計階段。

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

·繪制線框圖，規劃信息的層次結構，將內容分組，突出核心功能

·繪制包含細節的視覺稿

·將真實的交互和視覺匯集到一起構建成原型

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

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

將線框圖視作為骨架，在此基礎上加入配色，搭配好字體，注入品牌相關的素材，對內容布局進行適度調整，加入樣式合適的導航，視覺稿就出來了。

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

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

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

制作視覺稿的幾種方法

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

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

基于代碼構建視覺稿

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

使用可靠的設計工具來構建視覺稿

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

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

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

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

注意下列常見的視覺稿設計誤區

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

·期待視覺稿能夠傳達出功能。視覺稿看起來是不錯，但是它們實際上僅僅只是一個孤立的圖像，它們不足以承載網站或者APP的體驗的復雜性。真正能夠傳達功能特點的是可交互的原型。

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

·未能解決問題。許多視覺稿看起來非常漂亮，但是并不能解決實際的問題。將視覺和問題分開的誤區千萬不要踏入進去，這一定會在之后坑到自己。

結語

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