編者按：酒店預訂網(wǎng)站大多功能繁多，在視覺(jué)美觀(guān)上有天生劣勢，想平衡兩者非?？简炘O計師的功力，借鑒相關(guān)的優(yōu)秀網(wǎng)站是捷徑，今天@AnyForWeb_UED 從眾多在線(xiàn)預訂網(wǎng)站中提煉了10條設計的技巧。

一、用戶(hù)需要一目了然的重點(diǎn)

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

Agoda

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

二、用合適的大圖作為背景

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

如何選好圖片：《設計師找圖技巧！如何快速準確找到合適的網(wǎng)頁(yè)背景大圖？》

Airbnb

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

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

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

游多多

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

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

四、完整詳細的酒店信息

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

住哪兒

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

[page]

五、特別信息應該特別標注

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

Booking

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

六、圖文并茂的生動(dòng)點(diǎn)評頁(yè)

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

到到網(wǎng)

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

七、情感化預訂日歷

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

去哪兒網(wǎng)

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

八、互動(dòng)產(chǎn)生反饋

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

藝龍網(wǎng)

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

九、拆分復雜的流程

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

同程網(wǎng)

同程網(wǎng)站很仔細的對整個(gè)過(guò)程做了拆分。將每個(gè)比較重要的環(huán)節用口語(yǔ)化的文字表現出來(lái)，讓用戶(hù)不僅能夠對之后要做什么有了清楚的了解，同時(shí)增加了網(wǎng)站的親和力。

十、減少輸入框和必填項

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

途牛網(wǎng)

比如途牛網(wǎng)的做法，“登錄或注冊可以獲得更多優(yōu)惠”，這樣的引導也許更容易讓用戶(hù)心甘情愿的接受。