以用(yòng)戶為(wèi)中心思維下(xià)的(®₩de)WEB設計(jì)分(fēn)享

輕輕的(de)将手肘撐在桌子(zǐ)上(shàng)，托著(zε'he)臉來(lái)看(kàn)這(zhè)個(gè)世界，眼前的(de)一(y✔∏αī)切似乎也(yě)會(huì)随之有(yǒu)所不(bù)同。先誠科(kē)技(jì∏↓±')觀看(kàn)世界的(de)視(shì)角與感受世界的(de)方法可(kě)÷β 能(néng)有(yǒu)千萬種，隻要(yào)能(néng)夠下(xi λà)意識的(de)将這(zhè)些(xiē)角度和(h®‍ ₩é)感受方法運用(yòng)到(dào)日(rì)常生(shēng)活←₩₹♦中，就(jiù)是(shì)設計(jì)。

讀(dú)了(le)原妍哉的(de)《設計(jì)中的(de≈"‌)設計(jì)》，或多(duō)或少(shǎo)有(yǒu)些♦★(xiē)感觸，設計(jì)師(shī)的(de↑±✔)工(gōng)作(zuò)一(yī)直是(shì)在追求藝術(shù)與設計(jì)的(¶←€de)融合。而設計(jì)，無所謂您華麗(lσ✘∞∏ì)或純淨的(de)表現(xiàn)手法，都(dōu)必須完‍♦成其所承載的(de)或商業(yè)、或用(yòng)戶訴求等目标。Web設計(jì)的(de)核心>©與目标便是(shì)“以用(yòng)戶為(wèi)中心的(de)設計(jì)”，追求極緻的(✔ de)用(yòng)戶體(tǐ)驗。

AnyForWeb是(shì)一(yī)家(jiā)知¶λ¥↑(zhī)名的(de)WEB設計(jì)與開(kāi)發機(jī)構，為(wèσ≥↔i)國(guó)內(nèi)外(wài)知(zhī)名的(de)λ"★機(jī)構與組織提供WEB設計(jì)與技(jì)術(shù)開(kāi)發服務。α♣÷本文(wén)分(fēn)享了(le)團隊進行(xíng)WEB設計(jì)與開(kāi)發時(π&shí)的(de)一(yī)些(xiē)設計(jì)思維與經驗。

一(yī)、banner的(de)設計(jì)

在WEB項目設計(jì)中，先誠科(kē)技(jì)經常會(hu≈Ω♣ì)有(yǒu)banner設計(jì)需求，一£↑☆ (yī)般而言首屏Banner及其相(xiàng)關區(qū)域也(✘♠yě)是(shì)整個(gè)網頁設計(jì)中非常重要(yào)的(←∑∞≠de)部分(fēn)。

1.優化(huà)前網頁首屏圖片自(zì)動切換交≠•互方式之外(wài)，用(yòng)戶可(kě)以點擊圓‍→£λ點按鈕手動切換圖片。但(dàn)考慮到(dào)圖片本身(shē ®$↔n)的(de)展示空(kōng)間(jiān)和(hé)效果，圓點按鈕設計(jì)×₽的(de)比較小(xiǎo)，造成用(yòng)戶點擊該按鈕時(∞"÷"shí)不(bù)方便。

2.banner切換圖片時(shí)，會(huì)存在圖片背景或主 ±色調與 banner上(shàng)的(de)文(wén)字顔₽¥€色融合，造成文(wén)字的(de)視(shì)覺焦點會(hu✘​'<ì)被弱化(huà)，降低(dī)文(wén)字的(de)視(shì)覺>≈↓吸引力問(wèn)題。

1).圖片的(de)手動切換方式，優化(huà)為(★‌wèi)左右兩側的(de)箭頭切換。用(yòn∏ g)戶鼠标放(fàng)置于圖片上(shàng)時(shí)，會(huì)在β  圖片兩側出現(xiàn)切換按鈕，切換按鈕用(yòng)矩形且帶有(yǒu)箭頭标識，視(•¥shì)覺上(shàng)比較醒目，而且大φδ(dà)大(dà)增加了(le)點擊與光(guāng)标觸發區(qū)域，保證了(le)鼠标點擊的☆₹(de)有(yǒu)效性，使得(de)圖片的(de₹₽§)切換更加方便。

2).優化(huà)後在banner上(shàng)對(duì)廣告文(wén)字增加顔色背景處α •理(lǐ)，這(zhè)種手法本身(shēn)是(shì​£)一(yī)種Metro設計(jì)風(fēng)格，符合目前WEB設計(jì)潮流。增α♣加背景之後，最大(dà)限度的(de)降低" α₹(dī)了(le)圖片背景和(hé)主色調¶σ" 與文(wén)字色彩上(shàng)的(de)融合，更加凸顯文(wén)字的(de)視☆☆β (shì)覺表現(xiàn)力。

二、交互設計(jì)

本案例是(shì)AnyForWeb為(wèi)國(guó)內(λ≈←§nèi)某知(zhī)名軟件(jiàn)公司的(de)核心産品進行(xíng)的(de)界面λ♥和(hé)交互設計(jì)。

傳統的(de)文(wén)件(jiàn)上(shàng)傳交互很(hěn)簡¥✔單：一(yī)個(gè)文(wén)件(jiàn)域要(yào)求用(yòng)©↔戶選擇文(wén)件(jiàn)，一(y<λī)個(gè)提交按鈕實現(xiàn)上(shàng)傳功能(néng)。

這(zhè)種方式有(yǒu)很(hěn)多(duō)缺點，比如(rú)選擇₹$文(wén)件(jiàn)後看(kàn)不(bù)到↑→¥(dào)預覽，一(yī)次隻能(néng)選擇一(y‌✘∞ī)個(gè)文(wén)件(jiàn)，上(shàng)傳過程看(kàn)不≈φ (bù)到(dào)進度。

上(shàng)傳前：上(shàng)傳文(wén)件(jiàn)前可(kě)以查看(k☆×®àn)已上(shàng)傳文(wén)件(jiàn)→≥δ₹，選擇布局、來(lái)源等。

上(shàng)傳中：上(shàng)傳大(dà)量文(wén)件(jiàn)時(shí)，可(k✔∑ě)以添加文(wén)件(jiàn)描述，移除不(bù)需要(yào)的(de)文(&×€wén)件(jiàn)。上(shàng)傳文(wén)件(ji>πàn)過程中最基本的(de)需求是(shì)上(shàng)傳進度顯示，大∏×®≥(dà)批量上(shàng)傳時(shí)不(bù)易←λ•®導緻用(yòng)戶煩躁。

這(zhè)一(yī)系列的(de)交互，看(kàn∑&©∏)似簡單卻需要(yào)後端複雜(zá)技(jì)術(shù)的(de)支持。用(yòng)€α戶的(de)操作(zuò)少(shǎo)了(le)，上(shàng)傳文(wénσ♠)件(jiàn)更加方便了(le)，也(yě)許就(jiù)是(shì)這(zhè)些(Ω± ✘xiē)細節，提升了(le)軟件(jiàn)的(de)用(yòng)戶友(yǒ₽ •u)好(hǎo)度。

三、色彩的(de)運用(yòng)

顔色是(shì)一(yī)個(gè)網站(zh£₩↕àn)設計(jì)風(fēng)格定向的(de)核心元素之一(yī£>✘€)。色彩往往能(néng)夠體(tǐ)現(xiàn)産品¶→ ®的(de)針對(duì)年(nián)齡層以及定位!而設計(jì)師(shī)對(duì)于色‌∏±彩的(de)挑選和(hé)取舍，也(yě)是£♦ ‌(shì)完成作(zuò)品中的(de)必備環節。

淨菜配送本質上(shàng)屬于O2O模式，在這(zhè)個(gè)模式φ↔£下(xià)常用(yòng)的(de)是(shì)暖色調。

四、信息可(kě)信度設計(jì)

網站(zhàn)是(shì)否得(de)到(dào)用(yòng)戶的(de)信任，則直接制(z♦←hì)約著(zhe)網絡營銷的(de)最λΩ≥終效果。除了(le)網站(zhàn)的(de)β<‌基本服務和(hé)功能(néng)之外(wài)，很(hěλ™n)多(duō)時(shí)候，一(yī)些(xiē)看(kàn)似不(bù)÷→<α起眼的(de)細節問(wèn)題往往成為(wèi)用(α≠≤yòng)戶是(shì)否信任的(de)關鍵。

很(hěn)多(duō)網站(zhàn)在傳達信息時(shí)往往枯燥，不(b₽♦ù)生(shēng)動，缺乏信任度和(hé)說(shuō★ε‌&)服力。案例是(shì)一(yī)家(jiā)軟件(jiàn)企業(yè)的(  de)官方網站(zhàn)，網站(zhàn)的(de)主要(yào)‍£ 訪問(wèn)人(rén)群是(shì)需要≥β(yào)購(gòu)買軟件(jiàn)的(¥‍de)企業(yè)采購(gòu)人(rén)員(yuán≠✔‌)或者信息化(huà)部門(mén)的(de)負責人(ré≈ n)。為(wèi)了(le)改變國(guó)內(nèi)多<≈(duō)數(shù)企業(yè)網站(zhàn)給人(rénφ↑)留下(xià)的(de)空(kōng)洞₽λ，缺乏有(yǒu)效及有(yǒu)價值信息，網站(zh ¥ ×àn)用(yòng)戶訪問(wèn)停留時(shí)間(jiān)←¥短(duǎn)，訪問(wèn)PV低(dī)的(de)問(wèn)題。該項目設計(jì)≥↑₽π時(shí)，大(dà)量運用(yòng)了(l★¶γe)手寫體(tǐ)的(de)客戶評論或者是(shì)客 €觀的(de)點評使網站(zhàn)的(de)文(wén)字內(nèi)容可(kě)以<α'>深入閱讀(dú)。 同時(shí)在業(yè)務和(hé)産品描述頁面，增加了(le)網站(zh≠>← àn)的(de)用(yòng)戶所最關心和(hé)感興趣的(de)客戶✔←案例展示與相(xiàng)關資料，大(dà)大(dà)增強網站♣ ®(zhàn)的(de)信任度。在信息傳達量、信息真實度方面超越了(le)其很(hěn)多(duō)←<≈↕同行(xíng)。

網站(zhàn)上(shàng)線後，其通(tōng)♥∑過百度關鍵詞廣告帶來(lái)的(de)精準目标客戶的(de)訪問(wèn)跳(tiào)出率僅僅≠ε49%，人(rén)均PV達到(dào)3.4。這(zhè)一(≤$✘yī)數(shù)字遠(yuǎn)超絕大(dà)多(duō)數(shù)企業(yè)官網的(de)∏π訪問(wèn)數(shù)據(國(guó)內(nèi)企業(yè)網站(z​<∑hàn)的(de)跳(tiào)出率一(yī)般在80%以上 " (shàng)，人(rén)均訪問(wèn)PV很(hěn)少(shǎo)能(néng₽↔∏¥)超過2)。在後續跟蹤中，訪客與咨詢比也(yě)屬于同行(xíng)中比較高±"> (gāo)的(de)。最終為(wèi)改客戶帶來(lái)了(le)不©•♦(bù)錯(cuò)的(de)客戶轉化(hu$®♠à)。

五、網站(zhàn)整體(tǐ)定位

MN是(shì)美(měi)國(guó)一(yī)家(jiā)知(₽‍↔αzhī)名家(jiā)居用(yòng)品機(jī)構，該網☆λα站(zhàn)定位應該滿足兩個(gè)：作(zuò)為(wèi)該公司的(de)官網，同時γ♠♣​(shí)承載電(diàn)子(zǐ)商務的(de)功能≥ε€(néng)定位，滿足在線購(gòu)買的(♠₹¥∑de)需求。目标用(yòng)戶以女(nǚ)性為(wèi)主，年(nián®φε↑)齡層以20歲至40歲為(wèi)主體(tǐ)人(r☆€<γén)群。

顔色更加豐富多(duō)彩，同時(shí)保持協調性。采用(yòng)了(le)時β✘(shí)尚撞色的(de)表現(xiàn)形式，整體(​§tǐ)暖色調的(de)使用(yòng)烘托出整個(gè)網站(zhàn)的(deσ€)溫馨時(shí)尚氛圍，更加滿足了(le)電(diàn)子(zǐ)商務網站®λ(zhàn)，引導用(yòng)戶進行(xíng)在線購(gòu)物(wù)的(de‌¥ε)定位需求。

六、情感設計(jì)

人(rén)類的(de)先天傾向在于把物(wù)品人(rén)化(huà)，把人'£≤​(rén)的(de)情感和(hé)信仰投‍✔π'射到(dào)物(wù)品中。所以拟人(ε↕ rén)化(huà)的(de)反應可(kě)✘β‌以給産品使用(yòng)者帶來(lái)巨大(dà)的(de)樂(yu→®è)趣和(hé)快(kuài)樂(yuè)。可(kě)以讓人(rén)們對(duì)産品産生♦β(shēng)更多(duō)的(de)情感交流。所以先誠科(k♠§><ē)技(jì)在WEB設計(jì)中盡可(kě)能γ✔↓®(néng)多(duō)的(de)運用(yòng)情感化(huà)設計(σ♠©jì)，來(lái)提升整個(gè)網站(zhàn)的(de)用↔®​¥(yòng)戶友(yǒu)好(hǎo)度。
WEB設計(jì)的(de)最終目标是(shì)打造用(yòng)£♠δ戶喜愛(ài)的(de)産品，屬于産品設計(jì)的(de)範疇φ♠∞。所以一(yī)切設計(jì)要(yào)以用(yòng)戶為(wè™✔¥δi)出發點，追求最佳的(de)用(yòng)戶體(tǐ)驗