AnyForWeb正式推出旅游網(wǎng)站設(shè)計(jì)分析的系列文章，定時(shí)更新，本次主題為旅游網(wǎng)站中的在線酒店預(yù)訂板塊設(shè)計(jì)，歡迎關(guān)注!

　　酒店預(yù)訂也許并不是大家經(jīng)常使用的網(wǎng)站類型，但有過(guò)使用或設(shè)計(jì)經(jīng)歷的人一定會(huì)有感觸：由于這類網(wǎng)站本身需要的功能涉及比較廣泛，因此用戶體驗(yàn)變得格外重要，在視覺(jué)設(shè)計(jì)上也會(huì)有些復(fù)雜，而如何讓兩者完美并存，這是令很多設(shè)計(jì)師頭痛不已的問(wèn)題。

　　1.用戶需要一目了然的重點(diǎn)

　　進(jìn)入酒店預(yù)訂網(wǎng)站或是板塊的用戶一般來(lái)說(shuō)目的性很強(qiáng)，他們心里其實(shí)已經(jīng)有了很完整的設(shè)想，而來(lái)到網(wǎng)站只是為了完成計(jì)劃。因此，讓用戶在首頁(yè)就直觀的看到他們需要的內(nèi)容，并且盡可能的減少其他不重要內(nèi)容的出現(xiàn)，這是一個(gè)提升用戶體驗(yàn)的好方法。

　　正如Agoda的設(shè)計(jì)，網(wǎng)站首屏以令人浮想聯(lián)翩的風(fēng)景圖作為背景，酒店預(yù)訂的快捷入口最為搶眼，就連公司口號(hào)標(biāo)語(yǔ)也只是簡(jiǎn)短的出現(xiàn)在頁(yè)面上方。首頁(yè)設(shè)計(jì)以熱門內(nèi)容為主，根據(jù)大多數(shù)用戶的喜好和點(diǎn)擊查詢量列出推薦，這樣的想法確實(shí)很好，但是底部顯示的“熱門國(guó)家地區(qū)”和“熱門城市”是不是有點(diǎn)太多了…

　　2.用合適的大圖作為背景

　　用美觀的高清大圖作為網(wǎng)站背景似乎已經(jīng)成了一種萬(wàn)能的設(shè)計(jì)方法，一張大圖搭配簡(jiǎn)單的文字，就能輕輕松松讓網(wǎng)站變得莫名的高大上。在圖片的選擇上，“是否足夠美觀?”可能是我們一味的關(guān)注點(diǎn)，而“是否合適”也許對(duì)我們的整體設(shè)計(jì)更重要。這里所說(shuō)的“合適”包括很多方面，色彩、布局、大小，甚至圖片中表達(dá)的含義。

　　Airbnb的網(wǎng)站的圖片使用方面很值得借鑒。首屏主要以大圖片為主，在熙熙攘攘的人群中有一男一女快樂(lè)的行走，有一種回家的感覺(jué)。下半部分分別使用了具有各地特色的照片作為背景，讓用戶能更直觀了對(duì)當(dāng)?shù)仫L(fēng)俗有初步了解。

　　3.切換圖片時(shí)減少誤點(diǎn)可能

　　在酒店詳情頁(yè)中最受關(guān)注且最先出現(xiàn)的是關(guān)于酒店的一些圖片，而這些圖片內(nèi)容對(duì)用戶來(lái)說(shuō)可能又愛(ài)又恨。當(dāng)用戶正在瀏覽的時(shí)候會(huì)覺(jué)得圖片表現(xiàn)完整但有些雜亂，而當(dāng)用戶沒(méi)需求的時(shí)候又會(huì)因?yàn)橐恍┱５牟僮髟斐烧`點(diǎn)。如果網(wǎng)站能先展示一部分圖片，讓需要查看更多圖片的用戶點(diǎn)擊進(jìn)入一個(gè)專門的圖片板塊，并且對(duì)這些圖片進(jìn)行分類，便于用戶有針對(duì)性的快速找到自己需要的內(nèi)容，這樣的設(shè)計(jì)才更符合用戶體驗(yàn)。
 

游多多的詳情頁(yè)圖片使用了鼠標(biāo)懸停后放大圖片的效果，另外設(shè)有“全部圖片”按鈕。

　　點(diǎn)擊“全部圖片”出現(xiàn)彈窗，左側(cè)顯示關(guān)于圖片內(nèi)容類型的分類，供用戶自行選擇;右側(cè)顯示圖片和縮略圖。這種形式讓圖片部分的條理十分清晰。

　　4.完整詳細(xì)的酒店信息

　　酒店信息詳情頁(yè)中的信息內(nèi)容都大同小異，但一些細(xì)微的差別卻能令網(wǎng)站的用戶體驗(yàn)大相徑庭。大多數(shù)網(wǎng)站的介紹以“酒店簡(jiǎn)介”之類的官方信息作為首要內(nèi)容，其實(shí)，用戶實(shí)際需要的并不是這些官方資料，與其息息相關(guān)的實(shí)用型內(nèi)容才是他們最關(guān)注的。

　　住哪兒網(wǎng)酒店詳情頁(yè)的內(nèi)容排序與大多數(shù)網(wǎng)站不同，文字介紹部分以“酒店設(shè)施”、“酒店政策”、“酒店介紹”…的順序排列，真正按照用戶的實(shí)際需求來(lái)做設(shè)計(jì)。

　　5.特別信息應(yīng)該特別標(biāo)注

　　這里所說(shuō)的特別信息并不全部特指重要信息，也可以是一些網(wǎng)站方認(rèn)為需要引起用戶注意的優(yōu)惠信息、贈(zèng)送項(xiàng)目，或者數(shù)量提醒等。

　　Booking是一個(gè)專業(yè)的全球酒店預(yù)訂網(wǎng)站，網(wǎng)站中的設(shè)計(jì)都比較人性化。正如案例中顯示的酒店預(yù)訂環(huán)節(jié)，使用的文字及其色彩都以使用者角度出發(fā)，對(duì)用戶可能會(huì)感興趣的內(nèi)容作了不同顏色的顯示，這種做法很利于促成銷售。

　　6.圖文并茂的生動(dòng)點(diǎn)評(píng)頁(yè)

　　其他用戶的點(diǎn)評(píng)是很多正在選擇的用戶都會(huì)關(guān)注的板塊之一，這些點(diǎn)評(píng)意見(jiàn)可能會(huì)對(duì)他們的最終選擇起到很大的引導(dǎo)作用，因此這部分的設(shè)計(jì)更應(yīng)該被重視。常規(guī)化的劃分會(huì)讓用戶覺(jué)得沉悶單調(diào)，嘗試著設(shè)計(jì)一個(gè)活潑生動(dòng)的點(diǎn)評(píng)板塊，讓用戶更容易接受和認(rèn)可。

　　到到網(wǎng)的點(diǎn)評(píng)部分設(shè)計(jì)成了對(duì)話框的形式，并且支持圖文并茂，增加用戶的信任感，也讓用戶在瀏覽的時(shí)候更有參與感。

　　7.情感化預(yù)訂日歷

　　預(yù)訂日歷雖然只是一個(gè)很細(xì)小的環(huán)節(jié)，但是用戶很容易在這里產(chǎn)生混亂，所以給予用戶及時(shí)的交互反應(yīng)變得格外重要，色差顯示或小批注都不會(huì)顯得多余。但在這部分的設(shè)計(jì)中也要注意，區(qū)域始終應(yīng)該保持整潔，不能因?yàn)閮?nèi)容多而疏忽視覺(jué)感受。

　　去哪兒網(wǎng)的預(yù)訂日歷設(shè)計(jì)表現(xiàn)的十分體貼。在選擇日期的時(shí)候顯示淺藍(lán)色底紋，并且用小標(biāo)識(shí)告訴用戶總計(jì)天數(shù)，很大程度的減少了用戶的思考時(shí)間。

　　8.互動(dòng)產(chǎn)生反饋

　　用戶在瀏覽任何網(wǎng)站時(shí)都喜歡有一種“我不是一個(gè)人在瀏覽”的感覺(jué)，所以每次鼠標(biāo)懸停產(chǎn)生的一個(gè)小動(dòng)作都會(huì)讓用戶覺(jué)得很溫暖。

　　藝龍的首頁(yè)交互效果做的很充分，幾乎每一處懸停都會(huì)有反饋。但雖然案例網(wǎng)站的交互反應(yīng)比較多，卻也不會(huì)令人感到多余和復(fù)雜。這也給了我們一些啟發(fā)：當(dāng)一個(gè)頁(yè)面中交互動(dòng)作多的時(shí)候，需要注意產(chǎn)生的反應(yīng)最好在一個(gè)指定的范圍內(nèi)，一旦超出范圍影響到其他版塊，就會(huì)令人覺(jué)得過(guò)于繁瑣。

　　9.拆分復(fù)雜的流程

　　酒店預(yù)訂的流程大多不會(huì)很復(fù)雜，和一般網(wǎng)上購(gòu)物的流程大致類似，但首次預(yù)訂的用戶可能會(huì)少了一些安全感，而拆分并且顯示整個(gè)過(guò)程就是消除用戶不安的最好方法。

　　同程網(wǎng)站很仔細(xì)的對(duì)整個(gè)過(guò)程做了拆分。將每個(gè)比較重要的環(huán)節(jié)用口語(yǔ)化的文字表現(xiàn)出來(lái)，讓用戶不僅能夠?qū)χ笠鍪裁从辛饲宄牧私?，同時(shí)增加了網(wǎng)站的親和力。

　　10.減少輸入框和必填項(xiàng)

　　滿屏的輸入框和標(biāo)記著紅色星號(hào)的必填項(xiàng)與生俱來(lái)著一種令人反感的視覺(jué)體驗(yàn)，而很多網(wǎng)站恰巧就是這么做的!為什么一定要讓用戶必須先注冊(cè)才能預(yù)訂或者購(gòu)買?這種強(qiáng)制性的行為要求會(huì)讓用戶覺(jué)得自己處于很被動(dòng)的位置。如果網(wǎng)站能以柔和的態(tài)度解決登錄注冊(cè)問(wèn)題會(huì)不會(huì)更好?
 

         比如途牛網(wǎng)的做法，“登錄或注冊(cè)可以獲得更多優(yōu)惠”，這樣的引導(dǎo)也許更容易讓用戶心甘情愿的接受。
　　【友情提示：北京網(wǎng)站建設(shè)，北京網(wǎng)站制作，北京網(wǎng)站設(shè)計(jì)制作首選凡度網(wǎng)絡(luò)http://m.981839.cn/】