UI視覺稿的設計環(huán)節(jié)，按照精益設計原則或者快速原型設計的需求來看，它也是不可或缺的部分。今天小編主要給大家分享如何設計有效的ui視覺稿，希望對你們有幫助!

什么是視覺稿？

      線框圖、原型和視覺稿是相互關聯(lián)的、有相似的，但又不同，對許多人來說，它們?nèi)匀涣钊死Щ蟆＠斫馑鼈冎�間的差異和關聯(lián)的最佳方法是通過特定的設計過程和實際運用來了解。

從構思到開發(fā)，通常有三到四個不同的設計階段：

      (1)通過繪制UI草圖，從各種想法中篩選出最有潛力的方案。

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

      (3)繪制有細節(jié)的視覺稿。

      (4)將真實的互動和視覺結(jié)合起來，構建一個原型。

      這些階段使設計師能夠以低成本、快速的測試和迭代他們的想法，設計產(chǎn)品框架。這不僅適用于新產(chǎn)品的構建，也適用于界面的新版本更新。

      線框圖是低保真的，而視覺稿增加了細節(jié)，但沒有包含交互，和高保真原型相比，它算得上是中等保真度。視覺稿是靜態(tài)的，細節(jié)豐富，高度簡約，所以你可以通過這個特性來區(qū)分它。

      以線框圖為骨架，在此基礎上添加配色，匹配字體，注入與品牌相關的材料，適度調(diào)整內(nèi)容布局，添加適當?shù)膶Ш剑�視覺稿就出來了。

      那么，為什么要加入視覺稿的設計環(huán)節(jié)呢?由于視覺稿是清晰傳達視覺需求的最有效的方法之一，因此對于涉眾(如甲方和開發(fā)人員)來說尤為重要。

      如果沒有視覺稿，可以用早期的低保真線框來顯示產(chǎn)品進展，這無疑會讓人感到不舒服。雖然視覺稿不具備交互，但是可以從經(jīng)驗豐富的開發(fā)人員或其他參與者那里獲得很多有用的信息。

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

制作視覺稿的方法：

      許多UI設計師與抵觸視覺稿的原因是，視覺稿似乎需要時間，吃力不討好。

      幸運的是，有幾種方法可以在不影響效率的情況下更快地給制作視覺稿，不會影響UI設計師的整體效率和開發(fā)進度。

UI視覺稿設計學習1.基于代碼構建視覺稿

      對于了解代碼的UI設計師來說，不一定要繪制視覺稿，通過代碼進行構建，減少了后期開發(fā)的時間，但這需要設計師熟練地使用代碼，否則后期代碼不可用，將限制產(chǎn)品開發(fā)。

UI視覺稿設計學習2.使用可靠的設計工具

      許多設計師會嘗試使用設計工具來創(chuàng)建UI視覺稿，用Photoshop和Sketch等工具可以創(chuàng)建完美的靜態(tài)視覺效果。

UI視覺稿設計學習3.使用原型工具

      如果想告別工具之間的差異，那么最好使用原型工具創(chuàng)建一個用于“降維打擊”的視覺稿。此時，你需要過濾掉一款具有相對完整的UI元素庫的工具，以幫助你創(chuàng)建一個保真度較高的視覺稿。

      這個工具應讓你充分調(diào)用豐富的字體和圖標資源(例如Justinmind集成了谷歌字體)，以確保你的設計足夠順暢。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.dedgn.cn/news-id-24152.html 違者必究！部分文章來源于網(wǎng)絡由培訓無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們，了解更多相關資訊請關注UI設計頻道查看更多，了解相關專業(yè)課程信息您可在線咨詢也可免費申請試課。關注官方微信了解更多：150 3333 6050