網(wǎng)站設(shè)計(jì)要義：別讓我想，也別讓我停

網(wǎng)站設(shè)計(jì)要義：別讓我想，也別讓我停。設(shè)計(jì)師的每一個(gè)動(dòng)作，都能看出背后電子商務(wù)正在發(fā)生的變化。

　　京東商城變得好看了一點(diǎn)。

　　2月初，京東推出了最新的頁面設(shè)計(jì)，頁面寬度擴(kuò)展到1210像素，同時(shí)改變了原來單純按照品類劃分的展示方式，新首頁將按照主題劃分在6個(gè)樓層里。每個(gè)樓層再設(shè)1個(gè)特價(jià)商品和4個(gè)商品分類標(biāo)簽，而不是原來以“瘋狂搶購(gòu)”和“特價(jià)專區(qū)”為主體的頁面結(jié)構(gòu)。

　　這個(gè)改動(dòng)的核心變化是：在頁面沒有變得更擁擠的前提下，增加了60個(gè)廣告位。因?yàn)榭此茖挿旱拇箢悾鋵?shí)每個(gè)標(biāo)簽下容納的商品信息增加了，如果考慮4個(gè)滾動(dòng)商品信息位的話，視覺上并沒有給用戶增加負(fù)擔(dān)。2周后，京東拿掉了新版主頁上的“返回舊版”鏈接，正式完成頁面改版。

　　雖然仍然有用戶抱怨他們需要不停地滾動(dòng)屏幕，商品展示也太過眼花繚亂，但僅僅從視覺效果上看，京東似乎已經(jīng)在努力去除那種嘈雜的瀏覽方式。不是盡量多地展示單件商品，而是盡量多地展示產(chǎn)品類別：這符合京東想變成百貨電商的意圖。

　　網(wǎng)頁設(shè)計(jì)師Steve Krug在他寫的那本《點(diǎn)石成金—訪客至上的網(wǎng)頁設(shè)計(jì)秘笈》里說，別妄想用戶會(huì)認(rèn)真地看你所設(shè)計(jì)的每一個(gè)板塊，他們不是閱讀，而是掃描。

　　在交互設(shè)計(jì)中，存在著幾條普遍的法則令網(wǎng)頁設(shè)計(jì)更有效。最重要的一條是“別讓我思考”，越簡(jiǎn)潔越好。比如不要因?yàn)槠婀值谋磉_(dá)方式強(qiáng)迫用戶停下來思考，“搜索”要比“快速搜索”體驗(yàn)好。

　　“每個(gè)問號(hào)都會(huì)加重我們的認(rèn)知負(fù)擔(dān)。這種干擾也許很輕微，但它們會(huì)累計(jì)起來，有時(shí)候這樣的干擾不用太多，就足夠讓我們抓狂。”Steve Krug說。

　　網(wǎng)頁的外表其實(shí)并不重要。如果它好看，當(dāng)然更好；如果它不好看，可能京東會(huì)有更多的思考。

　　絕大多數(shù)主流電商的主頁都被信息塞得滿滿的，它們把首頁設(shè)計(jì)成貨架式，盡可能地將商品鋪開，把網(wǎng)站整體的信息架構(gòu)展現(xiàn)出來。因?yàn)橄M(fèi)者在購(gòu)物時(shí)往往沒有確定的目的，商品展示和推薦可以刺激他們的購(gòu)物欲，產(chǎn)生更多的二次跳轉(zhuǎn)。

　　有圖片優(yōu)勢(shì)的奢侈品網(wǎng)站大多都不會(huì)考慮貨架式的首頁設(shè)計(jì)，比如阿瑪尼在線商店，因?yàn)樗嬖诘哪康睦?，品牌展示意義大過賣貨。團(tuán)購(gòu)網(wǎng)站吸引用戶的有效做法是省略不必要的文字，僅僅展示誘人的圖片加誘人的價(jià)格。

　　單就電子商務(wù)網(wǎng)站而言，它們除了B2C，還有B2B2C；銷售的類別早就突破了數(shù)碼產(chǎn)品和家用電器，向百貨類進(jìn)發(fā)；也有專注于創(chuàng)意設(shè)計(jì)單品和奢侈品；而最近火起來的Pinterest式網(wǎng)站，用像瀑布一樣沒完沒了的載入方式不斷呈現(xiàn)更多單品，而圖片的組合方式又不會(huì)讓你覺得粗陋無趣。

　　青蛙設(shè)計(jì)創(chuàng)意總監(jiān)Mario Van Der Meulen最欣賞這樣的電子商務(wù)交互體驗(yàn)：我來買東西，你記住我是個(gè)男性用戶，而且我喜歡相機(jī)。下次再來購(gòu)物時(shí)，左右的推薦欄中就出現(xiàn)了相機(jī)推薦，亞馬遜就是這樣。

　　他認(rèn)為就B2C而言，如果用戶的購(gòu)物步驟從原先的7步減少到3步，同時(shí)網(wǎng)頁設(shè)計(jì)師的設(shè)計(jì)令用戶買了更多的東西，那就是有效的。

　　但是絕大多數(shù)電子商務(wù)網(wǎng)站都會(huì)在用戶選擇“去購(gòu)物車結(jié)算”時(shí)，加入一個(gè)推薦購(gòu)買頁面，類似再買多少錢就可免運(yùn)費(fèi)的湊單頁面、“購(gòu)買過這件商品的用戶還買了”頁面，或者是“猜你喜歡”。這個(gè)設(shè)計(jì)增加了用戶購(gòu)物流程，有違簡(jiǎn)潔的原則。但是就像有人喜歡自助購(gòu)物，有人更喜歡有店員推薦一樣，這一步設(shè)計(jì)雖然使一部分用戶要多點(diǎn)擊一次才能完成購(gòu)物，但卻滿足另一部分用戶“逛一逛”的需求，而且有機(jī)會(huì)幫網(wǎng)站提高客單價(jià)。

　　Mario說，簡(jiǎn)潔可以是畫面上的，也可以是操作上的。比如從偏重增加高光、亮麗的水晶按鈕、圖案的頁面設(shè)計(jì)，向Windows 8的大方塊靠攏是一種畫面上的簡(jiǎn)化。然而，好的設(shè)計(jì)并非單純做減法，一個(gè)成功的網(wǎng)站同時(shí)還應(yīng)加入特有的品牌身份標(biāo)識(shí)。把亞馬遜、蘋果的Logo拿掉，僅看頁面，你還是能一眼認(rèn)出它們。

　　名叫Gilt.com的精品購(gòu)物網(wǎng)站，在Mario看來就在滿足畫面和操作極簡(jiǎn)的同時(shí)又具備獨(dú)有的品牌特色上做得很好。它采取類似Windows 8界面的商品及圖片的簡(jiǎn)單展示，無需跳轉(zhuǎn)頁面，用戶將鼠標(biāo)移到他中意的商品圖片后，對(duì)應(yīng)表單下方就會(huì)顯示出S、M、L各種尺碼是否有庫存，點(diǎn)擊尺碼就能直接進(jìn)入購(gòu)物車。它還會(huì)記住你的信用卡號(hào)碼，下次購(gòu)物時(shí)你只需輸入信用卡后三位安全碼即可，省去了復(fù)雜的購(gòu)物程序又保證了安全感。

　　更多人已經(jīng)逐漸用移動(dòng)設(shè)備購(gòu)物，這要比網(wǎng)頁更加簡(jiǎn)單。凡客來自移動(dòng)客戶端的成交量已經(jīng)達(dá)到10%，樂淘網(wǎng)2011年7月份來自手機(jī)客戶端、Wap站點(diǎn)的訂單量占總訂單的比例已接近20%。而2012年，美國(guó)移動(dòng)電子商務(wù)銷售額將達(dá)60億美元，這個(gè)數(shù)字在2010年為30億。

　　京東的設(shè)計(jì)師對(duì)這次化簡(jiǎn)為繁改版的說明是由于戰(zhàn)略改變。為此他們才擴(kuò)充了品類，讓更多二級(jí)頁面的促銷信息浮上主頁，希望能迎合女性消費(fèi)習(xí)慣，帶來一種逛街感。

　　從去年8月開始，京東對(duì)網(wǎng)頁的設(shè)計(jì)做循環(huán)的持續(xù)改進(jìn)。王宇是京東商城用戶體驗(yàn)部門的高級(jí)經(jīng)理，他的團(tuán)隊(duì)有40人左右，分成交互設(shè)計(jì)、視覺設(shè)計(jì)、前端開發(fā)、數(shù)據(jù)支持和測(cè)試四個(gè)小組，每次修正后他們后續(xù)根據(jù)用戶點(diǎn)擊情況、跳轉(zhuǎn)率、周圍人感性反應(yīng)等多種途徑的反饋再做修改。他們還在網(wǎng)頁上設(shè)置問卷，征求用戶意見。

　　而在國(guó)外的同行們看來，最有效的辦法是做用戶測(cè)試。細(xì)微差別的優(yōu)劣令人難以決斷，但操作時(shí)的直覺會(huì)顯現(xiàn)出區(qū)別。Krug堅(jiān)持，如果想建立一個(gè)優(yōu)秀的網(wǎng)站，一定要測(cè)試。為一個(gè)網(wǎng)站工作幾個(gè)星期會(huì)讓設(shè)計(jì)師失去新鮮感，測(cè)試會(huì)提醒設(shè)計(jì)師不是每個(gè)人的想法都和你一樣。

　　針對(duì)首頁變寬問題，京東相關(guān)負(fù)責(zé)人稱首頁能夠根據(jù)顯示設(shè)備的尺寸和分辨率自動(dòng)切換尺寸，以滿足移動(dòng)用戶的視覺效果和操作體驗(yàn)。但事實(shí)是，即使使用寬屏顯示器，喜歡開著收藏夾的用戶不得不來回滑動(dòng)滾軸才能看全京東的主頁。

　　京東的交互設(shè)計(jì)師們很苦惱，負(fù)責(zé)交互設(shè)計(jì)的趙汗青告訴《第一財(cái)經(jīng)周刊》：“有些需求是彼此互補(bǔ)的，要做的是想到一種好的執(zhí)行辦法。有些需求不是那么互補(bǔ)，那就是商業(yè)力量之間的較量。商業(yè)設(shè)計(jì)領(lǐng)域很難說哪個(gè)設(shè)計(jì)是最好的，只能說哪個(gè)設(shè)計(jì)最有效。”

　　他承認(rèn)，從用戶角度一鍵下單最好，但為了讓用戶買更多，他們會(huì)在用戶選好后增加一個(gè)推薦頁面。設(shè)計(jì)師每天做最多的是選擇題，給用戶帶來的收益是否超過給他們帶來的麻煩。“所以說純藝術(shù)家都瘋了。”

　　由于痛苦選擇產(chǎn)生的分裂在第一屏和第二屏形成了鮮明的對(duì)比。不少用戶很喜歡第一屏，居中后突出的搜索框更順手，橫向分類導(dǎo)航更精簡(jiǎn)，在第一屏就能看見手機(jī)充值，彩票，機(jī)票信息，用起來更方便。而對(duì)于第二屏開始的改變，他們覺得冗余。有不少互聯(lián)網(wǎng)媒體直接將其解讀為為了增加廣告位，賺取廣告費(fèi)。

　　廣告是電子商務(wù)網(wǎng)站的一大收入來源。大型電子商務(wù)網(wǎng)站能像一個(gè)房東一樣把頁面位子租給某個(gè)品牌，讓某個(gè)品牌自己去打理。任何項(xiàng)目，只要在主頁上有一個(gè)醒目的鏈接，肯定會(huì)得到更多的訪問量，這會(huì)讓其他的利益相關(guān)者想到：“為什么我不來一個(gè)？”

　　根據(jù)Business Insider的報(bào)道，亞馬遜正在快速擴(kuò)張自己的廣告業(yè)務(wù)，他們不僅出售自己和第三方合作伙伴的商品，而且開始介入出售那些與它沒有合作關(guān)系的第三方機(jī)構(gòu)的廣告和鏈接。亞馬遜將這些廣告和鏈接置于商品頁面的底端。依靠這樣的方式，亞馬遜每年大約從中獲得近10億美元的收入。如果考慮到亞馬遜在電子商務(wù)的領(lǐng)導(dǎo)者角色，這已經(jīng)足夠讓另一個(gè)廣告公司─谷歌心生憂慮。

　　廣告總是跟購(gòu)物在一起才完美，但在Krug看來，這種盲目擴(kuò)充主頁推薦量的行為總是反復(fù)出現(xiàn)。“問題是，在主頁上增加更多項(xiàng)目所得到的和付出的并不一致。得到推介的欄目獲得了巨大的訪問量，而由于主頁變得更混亂而造成的有效性總體損失則要由所有的欄目一同承擔(dān)。”

　　所謂改版，必須做到現(xiàn)在做的東西必須比以前好才是成功的。無論出于怎樣的商業(yè)目的，如果不注重用戶體驗(yàn)，用戶最終都會(huì)跑到其他網(wǎng)站上去。用戶永遠(yuǎn)不會(huì)排斥更容易、更快速、更簡(jiǎn)明的交互體驗(yàn)。

　　設(shè)計(jì)的價(jià)值，可能跟技術(shù)、平臺(tái)和廣告都有關(guān)系。Pinterest瀑布式頁面設(shè)計(jì)之所以讓很多網(wǎng)站趨之若鶩，因?yàn)樗o“如何使用戶黏在頁面上”帶來了新思路。在你看著網(wǎng)站不斷載入內(nèi)容的時(shí)候，你的時(shí)間也不斷流逝，但你不會(huì)感到厭煩。

　　Mario說：“我并不介意瀑布式的加載，因?yàn)樗羞\(yùn)作良好的現(xiàn)場(chǎng)感，可以使我們無盡地發(fā)現(xiàn)還有一個(gè)龐大而活躍的社區(qū)。”對(duì)于購(gòu)物網(wǎng)站來說，沒完沒了……沒準(zhǔn)也是一件好事。