1.4.3　視覺設(shè)計(jì)

完成頁面的交互設(shè)計(jì)后，接下來開始視覺設(shè)計(jì)。視覺設(shè)計(jì)可以分為視覺概念稿、視覺設(shè)計(jì)圖和標(biāo)注切圖。

1．視覺概念稿

在開始正式的視覺設(shè)計(jì)之前，可以挑選幾個(gè)典型的頁面設(shè)計(jì)不同的風(fēng)格稿，等客戶或者領(lǐng)導(dǎo)確定視覺風(fēng)格后，再進(jìn)入下一步工作，避免推翻重做的風(fēng)險(xiǎn)。圖1-21所示為視覺概念的過程。

圖1-21　視覺概念的示意圖

2．視覺設(shè)計(jì)圖

視覺設(shè)計(jì)也是一個(gè)很復(fù)雜的工作流程，影響一個(gè)產(chǎn)品展現(xiàn)在用戶面前最直觀的印象，需要延續(xù)用戶體驗(yàn)設(shè)計(jì)原則和良好表達(dá)產(chǎn)品風(fēng)格。視覺設(shè)計(jì)之后還需要建立標(biāo)準(zhǔn)控件庫和頁面元素集合等視覺規(guī)范，使團(tuán)隊(duì)的工作統(tǒng)一化、標(biāo)準(zhǔn)化。圖1-22所示為視覺設(shè)計(jì)的過程。

圖1-22　視覺設(shè)計(jì)的過程

3．標(biāo)注切圖

圖1-23　標(biāo)注切圖的過程

視覺設(shè)計(jì)圖完成后，需要給設(shè)計(jì)稿做標(biāo)注，方便前端工程師切圖和適配輸出。標(biāo)注的內(nèi)容主要是邊距、間距、控件寬高、控件顏色、背景顏色、字體、字體大小、字體顏色等，圖1-23所示為標(biāo)注切圖的過程。