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

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

AnyForWeb是一家知名的WEB設(shè)計與開發(fā)機構(gòu)，為國內(nèi)外知名的機構(gòu)與組織提供WEB設(shè)計與技術(shù)開發(fā)服務(wù)。本文分享了團隊進行WEB設(shè)計與開發(fā)時的一些設(shè)計思維與經(jīng)驗。

一、banner的設(shè)計

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

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

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

2.banner切換圖片時，會存在圖片背景或主色調(diào)與 banner上的文字顏色融合，造成文字的視覺焦點會被弱化，降低文字的視覺吸引力問題。

優(yōu)化后：

1.圖片的手動切換方式，優(yōu)化為左右兩側(cè)的箭頭切換。用戶鼠標放置于圖片上時，會在圖片兩側(cè)出現(xiàn)切換按鈕，切換按鈕用矩形且?guī)в屑�頭標識，視覺上比較醒目，而且大大增加了點擊與光標觸發(fā)區(qū)域，保證了鼠標點擊的有效性，使得圖片的切換更加方便。

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

二、交互設(shè)計

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

優(yōu)化前：

優(yōu)化后:

優(yōu)化前：

傳統(tǒng)的文件上傳交互很簡單：一個文件域要求用戶選擇文件，一個提交按鈕實現(xiàn)上傳功能。

這種方式有很多缺點，比如選擇文件后看不到預(yù)覽，一次只能選擇一個文件，上傳過程看不到進度。

優(yōu)化后：

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

上傳中：上傳大量文件時，可以添加文件描述，移除不需要的文件。上傳文件過程中最基本的需求是上傳進度顯示，大批量上傳時不易導(dǎo)致用戶煩躁。

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

三、色彩的運用

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

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

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

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

優(yōu)化后：

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

四、信息可信度設(shè)計

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

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

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

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

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

優(yōu)化前：

優(yōu)化后：

優(yōu)化前：

網(wǎng)頁顏色太過單調(diào)，缺乏活力。布局也太過傳統(tǒng)，滿足了官網(wǎng)的定位，卻忽略了電子商務(wù)的網(wǎng)站需求。

優(yōu)化后：

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

六、情感設(shè)計

人類的先天傾向在于把物品人化，把人的情感和信仰投射到物品中。所以擬人化的反應(yīng)可以給產(chǎn)品使用者帶來巨大的樂趣和快樂。可以讓人們對產(chǎn)品產(chǎn)生更多的情感交流。所以我們在WEB設(shè)計中盡可能多的運用情感化設(shè)計，來提升整個網(wǎng)站的用戶友好度。

彈窗的常規(guī)設(shè)計：

彈窗的情感化設(shè)計：

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

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