網(wǎng)頁(yè)視覺設(shè)計(jì)原則關(guān)系到網(wǎng)站的用戶體驗(yàn)。然而對(duì)于網(wǎng)頁(yè)的設(shè)計(jì)原則，需要網(wǎng)頁(yè)設(shè)計(jì)師充分了解設(shè)計(jì)原則才能設(shè)計(jì)出更好的網(wǎng)頁(yè)。今天洛壹網(wǎng)絡(luò)繼續(xù)為大家介紹一下網(wǎng)頁(yè)的視覺設(shè)計(jì)原則。

讓頁(yè)面有層次有重點(diǎn)

交互設(shè)計(jì)師完成頁(yè)面布局設(shè)計(jì)，突出頁(yè)面重點(diǎn)，方便用戶瀏覽信息、完成任務(wù)。視覺設(shè)計(jì)階段，好的設(shè)計(jì)稿對(duì)于延續(xù)前期交互理念，引導(dǎo)用戶操作是非常有幫助的。

模擬現(xiàn)實(shí)世界匹配用戶心智模型

原型設(shè)計(jì)中常說，操作方式要符合用戶的心智模型，其實(shí)視覺設(shè)計(jì)也一樣。把一些現(xiàn)實(shí)元素拿來(lái)，模擬真實(shí)世界，會(huì)給用戶身臨其境的感覺。

插圖讓產(chǎn)品更有情感

插圖在文章頁(yè)面中很多，我這里只舉錯(cuò)誤頁(yè)的例子。大家都有感觸，錯(cuò)誤的體驗(yàn)是非常不好的，但設(shè)計(jì)師卻用一張張插圖，讓這種挫敗和焦躁的感覺降到了最低，化解了用戶的負(fù)面情緒，同時(shí)產(chǎn)品也更有味道了。

9、巧用Icon，頁(yè)面更精彩

Icon設(shè)計(jì)是視覺設(shè)計(jì)非常重要的一部分，很多晦澀難懂的內(nèi)容，配上Icon圖形化解釋，會(huì)更容易理解。相反，如果圖標(biāo)的設(shè)計(jì)元素不合適，或是將圖標(biāo)將背景亂用，也會(huì)干擾用戶理解。

10、柵格化提升用戶體驗(yàn)和開發(fā)成本

柵格化在視覺設(shè)計(jì)中，越來(lái)越受重視，究其原來(lái)，主要是三點(diǎn)：一是可以統(tǒng)一頁(yè)面的布局，提升用戶的瀏覽操作體驗(yàn);二是將頁(yè)面模塊的尺寸標(biāo)準(zhǔn)化，降低開發(fā)和維護(hù)的成本;最后，柵格化也是網(wǎng)頁(yè)設(shè)計(jì)專業(yè)度的體現(xiàn)。

        至此，視覺設(shè)計(jì)原則講完了。

說了這么多，最后簡(jiǎn)單談?wù)勛鳛榻换ピO(shè)計(jì)師的我們?cè)撛趺醋霭?。思考這個(gè)問題之前，還請(qǐng)大家把以上的原則再?gòu)?fù)習(xí)一遍：

1. 通過字體表達(dá)產(chǎn)品風(fēng)格

2. 通過配色展示產(chǎn)品定位

3. 營(yíng)造統(tǒng)一的品牌形象

4. 造型讓產(chǎn)品更有沖擊力

5. 重要內(nèi)容留在首屏

6. 讓頁(yè)面有層次有重點(diǎn)

7. 模擬現(xiàn)實(shí)世界匹配用戶心智模型

8. 插圖讓產(chǎn)品更有情感

9. 巧用Icon頁(yè)面更精彩

10. 柵格化提升用戶體驗(yàn)和開發(fā)成本

        總的來(lái)說，我們可以把這10個(gè)內(nèi)容歸成兩類，一個(gè)完全是視覺設(shè)計(jì)師的領(lǐng)域，以溝通為主;另一個(gè)，交互可以和視覺設(shè)計(jì)配合完成，溝通以外注重交付物的傳遞。

        第一類包括：通過字體表達(dá)產(chǎn)品風(fēng)格、通過配色展示產(chǎn)品定位、營(yíng)造統(tǒng)一的品牌形象、造型讓產(chǎn)品更有沖擊力、模擬現(xiàn)實(shí)世界匹配用戶心智模型。

       了解這些內(nèi)容，了解視覺設(shè)計(jì)師能做哪些提升體驗(yàn)的事情，才能更好地和他們溝通。讓視覺設(shè)計(jì)師提早了解需求，獲得對(duì)等的產(chǎn)品信息，才能更好地發(fā)揮設(shè)計(jì)的力量。

        第二類包括：重要內(nèi)容留在首屏、讓頁(yè)面有層次有重點(diǎn)、插圖讓產(chǎn)品更有情感、巧用Icon頁(yè)面更精彩、柵格化提升用戶體驗(yàn)和開發(fā)成本。

        這類原則，除了和視覺設(shè)計(jì)師有效溝通，最好在自己的交付物——原型以及講解中有所體現(xiàn)。比如原型中通過不同灰度色塊表現(xiàn)設(shè)計(jì)重點(diǎn)、注重各個(gè)組件的柵格化、為重點(diǎn)內(nèi)容設(shè)置插圖和Icon的占位符等等。通過這種對(duì)視覺設(shè)計(jì)的理解、交付物形式的傳遞，配合視覺設(shè)計(jì)師做出更符合產(chǎn)品需求以及用戶體驗(yàn)的產(chǎn)品。