以用戶爲中心思維下的WEB設計分享

輕輕的將(jiāng)手肘撐在桌子上，托著(zhe)臉來看這(zhè)個世界，眼前的一切似乎也會随之有所不同。先誠科技觀看世界的視角與感受世界的方法可能(néng)有千萬種(zhǒng)，隻要能(néng)夠下意識的將(jiāng)這(zhè)些角度和感受方法運用到日常生活中，就是設計。

讀了原妍哉的《設計中的設計》，或多或少有些感觸，設計師的工作一直是在追求藝術與設計的融合。而設計，無所謂您華麗或純淨的表現手法，都(dōu)必須完成(chéng)其所承載的或商業、或用戶訴求等目标。Web設計的核心與目标便是“以用戶爲中心的設計”，追求極緻的用戶體驗。

AnyForWeb是一家知名的WEB設計與開(kāi)發(fā)機構，爲國(guó)内外知名的機構與組織提供WEB設計與技術開(kāi)發(fā)服務。本文分享了團隊進(jìn)行WEB設計與開(kāi)發(fā)時的一些設計思維與經(jīng)驗。

一、banner的設計

在WEB項目設計中，先誠科技經(jīng)常會有banner設計需求，一般而言首屏Banner及其相關區域也是整個網頁設計中非常重要的部分。

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

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

1).圖片的手動切換方式，優化爲左右兩(liǎng)側的箭頭切換。用戶鼠标放置于圖片上時，會在圖片兩(liǎng)側出現切換按鈕，切換按鈕用矩形且帶有箭頭标識，視覺上比較醒目，而且大大增加了點擊與光标觸發(fā)區域，保證了鼠标點擊的有效性，使得圖片的切換更加方便。

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

二、交互設計

本案例是AnyForWeb爲國(guó)内某知名軟件公司的核心産品進(jìn)行的界面(miàn)和交互設計。

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

這(zhè)種(zhǒng)方式有很多缺點，比如選擇文件後(hòu)看不到預覽，一次隻能(néng)選擇一個文件，上傳過(guò)程看不到進(jìn)度。

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

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

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

三、色彩的運用

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

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

四、信息可信度設計

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

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

網站上線後(hòu)，其通過(guò)百度關鍵詞廣告帶來的精準目标客戶的訪問跳出率僅僅49%，人均PV達到3.4。這(zhè)一數字遠超絕大多數企業官網的訪問數據(國(guó)内企業網站的跳出率一般在80%以上，人均訪問PV很少能(néng)超過(guò)2)。在後(hòu)續跟蹤中，訪客與咨詢比也屬于同行中比較高的。最終爲改客戶帶來了不錯的客戶轉化。

五、網站整體定位

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

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

六、情感設計

人類的先天傾向(xiàng)在于把物品人化，把人的情感和信仰投射到物品中。所以拟人化的反應可以給産品使用者帶來巨大的樂趣和快樂。可以讓人們對(duì)産品産生更多的情感交流。所以先誠科技在WEB設計中盡可能(néng)多的運用情感化設計，來提升整個網站的用戶友好(hǎo)度。
WEB設計的最終目标是打造用戶喜愛的産品，屬于産品設計的範疇。所以一切設計要以用戶爲出發(fā)點，追求最佳的用戶體驗