如何設(shè)計(jì)有效的ui視覺稿

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

      什么是視覺稿

      線框圖、原型和視覺稿是相互關(guān)聯(lián)的、有相似的，但又不同，對(duì)許多人來(lái)說(shuō)，它們?nèi)匀涣钊死Щ�。理解它們之間的差異和關(guān)聯(lián)的最佳方法是通過特定的設(shè)計(jì)過程和實(shí)際運(yùn)用來(lái)了解。

      從構(gòu)思到開發(fā)，通常有三到四個(gè)不同的設(shè)計(jì)階段：

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

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

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

      (4)將真實(shí)的互動(dòng)和視覺結(jié)合起來(lái)，構(gòu)建一個(gè)原型。

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

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

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

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

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

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

      制作視覺稿的方法

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

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

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

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

      2.使用可靠的設(shè)計(jì)工具

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

      3.使用原型工具

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

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

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