這次把之前做的郵箱驗(yàn)證配圖設(shè)計(jì)的過(guò)程分解拿來(lái)跟大家一起分享。

當(dāng)接到這個(gè)需求的時(shí)候，開(kāi)始考慮哪種配圖方案更能輔助文字為用戶呈現(xiàn)一個(gè)良好的頁(yè)面形象,當(dāng)遇到操作失敗時(shí)如何能更好的消除訪客的挫敗感，輔助訪客完成訪問(wèn)目標(biāo)。 提供個(gè)性化的友好界面并提升訪問(wèn)體驗(yàn)?zāi)兀?/P>

我腦海中大概設(shè)想了幾種構(gòu)思，然后開(kāi)始考慮設(shè)計(jì)一個(gè)比較有意思的小場(chǎng)景來(lái)體現(xiàn)用戶的郵箱驗(yàn)證情況。能夠更好的提高用戶體驗(yàn)效果，首先這個(gè)配圖要有小易的形象出現(xiàn)，讓我們來(lái)看看小易的基礎(chǔ)形象。

怎樣讓它和郵箱聯(lián)系上呢？網(wǎng)上搜了一下郵筒的素材，找到一個(gè)紅色的郵筒。

讓我們的小易當(dāng)一個(gè)送信使者吧，于是借用小易和一個(gè)擬人化的郵筒虛擬了兩個(gè)情景小故事來(lái)體現(xiàn)驗(yàn)證成功與失敗。

首先在需要配圖的區(qū)域用草稿畫(huà)好大致的構(gòu)圖，在草稿的基礎(chǔ)上把多余的線條理清(一般情況下我都是使用flash繪制的矢量圖)，得出下面兩張圖。

郵箱驗(yàn)證成功時(shí)，小易成功的把信件送到郵筒的嘴里，兩者之間氣氛很融洽；

郵箱驗(yàn)證失敗時(shí)，小易手里的信件損壞了無(wú)法傳送，很沮喪。

然后開(kāi)始上底色，這時(shí)候要注意兩張配圖都要使用一樣的色指定并且要融合頁(yè)面的整體顏色來(lái)搭配和統(tǒng)一。參考搜索素材的形和色來(lái)繪制配圖，有時(shí)候比憑空想象的效果來(lái)的好，正因?yàn)樵O(shè)計(jì)都是來(lái)源于生活。

之后開(kāi)始潤(rùn)色描繪細(xì)節(jié)加強(qiáng)體感，

加入早已整理好的文字，調(diào)整位置，然后把文字跟配圖一起放置在頁(yè)面中整體再調(diào)整，發(fā)現(xiàn)配圖感覺(jué)有些空洞于是加入一些小背景渲染氣氛豐富畫(huà)面后效果更好一些最終效果如下~

其實(shí)類似頁(yè)面還有很多方式都可以做配圖，也能呈現(xiàn)出不同的效果，以上配圖只是跟大家分享的其中一個(gè)案例，在網(wǎng)頁(yè)中的配圖時(shí)常都以各種方式呈現(xiàn)在用戶眼前，下圖中收集了一部分在網(wǎng)頁(yè)中的配圖跟大家一起欣賞。都是由同事們一起設(shè)計(jì)的成果，再次感謝大家。

不足之處還望大家多多提出寶貴的意見(jiàn)一起改進(jìn)。

原文：http://www.xmued.com/?p=1799