輕輕的將手肘撐在桌子上，托著(zhù)臉來(lái)看這個(gè)世界，眼前的一切似乎也會(huì )隨之有所不同。我們觀(guān)看世界的視角與感受世界的方法可能有千萬(wàn)種，只要能夠下意識的將這些角度和感受方法運用到日常生活中，就是設計。

讀了原妍哉的《設計中的設計》，或多或少有些感觸，設計師的工作一直是在追求藝術(shù)與設計的融合。而設計，無(wú)所謂你華麗或純凈的表現手法，都必須完成其所承載的或商業(yè)、或用戶(hù)訴求等目標。Web設計的核心與目標便是以用戶(hù)為中心的設計，追求極致的用戶(hù)體驗。

一、banner的設計

在WEB項目設計中，我們經(jīng)常會(huì )有banner設計需求，一般而言首屏Banner及其相關(guān)區域也是整個(gè)網(wǎng)頁(yè)設計中非常重要的部分。

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

1.優(yōu)化前網(wǎng)頁(yè)首屏圖片自動(dòng)切換交互方式之外，用戶(hù)可以點(diǎn)擊圓點(diǎn)按鈕手動(dòng)切換圖片。但考慮到圖片本身的展示空間和效果，圓點(diǎn)按鈕設計的比較小，造成用戶(hù)點(diǎn)擊該按鈕時(shí)不方便。

2.banner切換圖片時(shí)，會(huì )存在圖片背景或主色調與 banner上的文字顏色融合，造成文字的視覺(jué)焦點(diǎn)會(huì )被弱化，降低文字的視覺(jué)吸引力問(wèn)題。

優(yōu)化后：

1.圖片的手動(dòng)切換方式，優(yōu)化為左右兩側的箭頭切換。用戶(hù)鼠標放置于圖片上時(shí)，會(huì )在圖片兩側出現切換按鈕，切換按鈕用矩形且帶有箭頭標識，視覺(jué)上比較醒目，而且大大增加了點(diǎn)擊與光標觸發(fā)區域，保證了鼠標點(diǎn)擊的有效性，使得圖片的切換更加方便。

2.優(yōu)化后在banner上對廣告文字增加顏色背景處理，這種手法本身是一種Metro設計風(fēng)格，符合目前WEB設計潮流。增加背景之后，最大限度的降低了圖片背景和主色調與文字色彩上的融合，更加凸顯文字的視覺(jué)表現力。

二、交互設計

本案例是AnyForWeb為國內某知名軟件公司的核心產(chǎn)品進(jìn)行的界面和交互設計。

優(yōu)化前：

優(yōu)化后:

優(yōu)化前：

傳統的文件上傳交互很簡(jiǎn)單：一個(gè)文件域要求用戶(hù)選擇文件，一個(gè)提交按鈕實(shí)現上傳功能。

這種方式有很多缺點(diǎn)，比如選擇文件后看不到預覽，一次只能選擇一個(gè)文件，上傳過(guò)程看不到進(jìn)度。

優(yōu)化后：

上傳前：上傳文件前可以查看已上傳文件，選擇布局、來(lái)源等。

上傳中：上傳大量文件時(shí)，可以添加文件描述，移除不需要的文件。上傳文件過(guò)程中最基本的需求是上傳進(jìn)度顯示，大批量上傳時(shí)不易導致用戶(hù)煩躁。

這一系列的交互，看似簡(jiǎn)單卻需要后端復雜技術(shù)的支持。用戶(hù)的操作少了，上傳文件更加方便了，也許就是這些細節，提升了軟件的用戶(hù)友好度。

三、色彩的運用

顏色是一個(gè)網(wǎng)站設計風(fēng)格定向的核心元素之一。色彩往往能夠體現產(chǎn)品的針對年齡層以及定位！而設計師對于色彩的挑選和取舍，也是完成作品中的必備環(huán)節。

凈菜配送本質(zhì)上屬于O2O模式，在這個(gè)模式下常用的是暖色調。

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

優(yōu)化前網(wǎng)頁(yè)主色調是綠色，綠色給人的感覺(jué)雖然干凈清爽，但是對于食品類(lèi)電子商務(wù)網(wǎng)頁(yè)來(lái)說(shuō)卻沒(méi)有營(yíng)造出溫暖熱烈的氛圍。

優(yōu)化后：

優(yōu)化后整個(gè)頁(yè)面是利用灰白和紅色進(jìn)行搭配，使頁(yè)面看起來(lái)更加溫暖，灰白色的背景鋪墊，達到一種突出而不突兀的視覺(jué)效果，暖色調的搭配賦予了網(wǎng)站生命力。

四、信息可信度設計

網(wǎng)站是否得到用戶(hù)的信任，則直接制約著(zhù)網(wǎng)絡(luò )營(yíng)銷(xiāo)的最終效果。除了網(wǎng)站的基本服務(wù)和功能之外，很多時(shí)候，一些看似不起眼的細節問(wèn)題往往成為用戶(hù)是否信任的關(guān)鍵。

很多網(wǎng)站在傳達信息時(shí)往往枯燥，不生動(dòng)，缺乏信任度和說(shuō)服力。案例是一家軟件企業(yè)的官方網(wǎng)站，網(wǎng)站的主要訪(fǎng)問(wèn)人群是需要購買(mǎi)軟件的企業(yè)采購人員或者信息化部門(mén)的負責人。為了改變國內多數企業(yè)網(wǎng)站給人留下的空洞，缺乏有效及有價(jià)值信息，網(wǎng)站用戶(hù)訪(fǎng)問(wèn)停留時(shí)間短，訪(fǎng)問(wèn)PV低的問(wèn)題。該項目設計時(shí)，大量運用了手寫(xiě)體的客戶(hù)評論或者是客觀(guān)的點(diǎn)評使網(wǎng)站的文字內容可以深入閱讀。 同時(shí)在業(yè)務(wù)和產(chǎn)品描述頁(yè)面，增加了網(wǎng)站的用戶(hù)所最關(guān)心和感興趣的客戶(hù)案例展示與相關(guān)資料，大大增強網(wǎng)站的信任度。在信息傳達量、信息真實(shí)度方面超越了其很多同行。

網(wǎng)站上線(xiàn)后，其通過(guò)百度關(guān)鍵詞廣告帶來(lái)的精準目標客戶(hù)的訪(fǎng)問(wèn)跳出率僅僅49%，人均PV達到3.4。這一數字遠超絕大多數企業(yè)官網(wǎng)的訪(fǎng)問(wèn)數據（國內企業(yè)網(wǎng)站的跳出率一般在80%以上，人均訪(fǎng)問(wèn)PV很少能超過(guò)2）。在后續跟蹤中，訪(fǎng)客與咨詢(xún)比也屬于同行中比較高的。最終為改客戶(hù)帶來(lái)了不錯的客戶(hù)轉化。

五、網(wǎng)站整體定位

MN是美國一家知名家居用品機構，該網(wǎng)站定位應該滿(mǎn)足兩個(gè)：作為該公司的官網(wǎng)，同時(shí)承載電子商務(wù)的功能定位，滿(mǎn)足在線(xiàn)購買(mǎi)的需求。目標用戶(hù)以女性為主，年齡層以20歲至40歲為主體人群。

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

網(wǎng)頁(yè)顏色太過(guò)單調，缺乏活力。布局也太過(guò)傳統，滿(mǎn)足了官網(wǎng)的定位，卻忽略了電子商務(wù)的網(wǎng)站需求。

優(yōu)化后：

顏色更加豐富多彩，同時(shí)保持協(xié)調性。采用了時(shí)尚撞色的表現形式，整體暖色調的使用烘托出整個(gè)網(wǎng)站的溫馨時(shí)尚氛圍，更加滿(mǎn)足了電子商務(wù)網(wǎng)站，引導用戶(hù)進(jìn)行在線(xiàn)購物的定位需求。

六、情感設計

人類(lèi)的先天傾向在于把物品人化，把人的情感和信仰投射到物品中。所以擬人化的反應可以給產(chǎn)品使用者帶來(lái)巨大的樂(lè )趣和快樂(lè )?？梢宰屓藗儗Ξa(chǎn)品產(chǎn)生更多的情感交流。所以我們在WEB設計中盡可能多的運用情感化設計，來(lái)提升整個(gè)網(wǎng)站的用戶(hù)友好度。

彈窗的常規設計：

彈窗的情感化設計：

傳統彈窗模式：傳統的設計是按照最傳統的彈框形式，是多數操作系統和瀏覽器默認的通用風(fēng)格，視覺(jué)上枯燥死板，缺乏亮點(diǎn)；語(yǔ)言上使用固有的計算機語(yǔ)言，無(wú)法與用戶(hù)產(chǎn)生強烈的情感交流。

優(yōu)化后：形象化的對話(huà)框的使用，以及擬人化的對話(huà)拉近了與用戶(hù)之間的親和力，降低了用戶(hù)對彈出框的厭惡感，增加了對彈出框的接受度（喬布斯的頭像使用，更是額外的增加了幽默感）。

WEB設計的最終目標是打造用戶(hù)喜愛(ài)的產(chǎn)品，屬于產(chǎn)品設計的范疇。所以一切設計要以用戶(hù)為出發(fā)點(diǎn)，追求最佳的用戶(hù)體驗。