送給真正的互聯網人一頓干貨早餐

【小咖導讀】垂直網站速來以產品為王，繁雜的功能堆砌很容易造成用戶體驗的折扣，本文以酒店產品為案例，例舉了十條設計技巧，經典案例，希望能幫助到大家。

酒店預訂網站大多功能繁多，在視覺美觀上有天生劣勢，想平衡兩者非常考驗設計師的功力，借鑒相關的優秀網站是捷徑，今天@AnyForWeb_UED 從眾多在線預訂網站中提煉了10條設計的技巧

一

用戶需要一目了然的重點

進入酒店預訂網站或是板塊的用戶一般來說目的性很強，他們心里其實已經有了很完整的設想，而來到網站只是為了完成計劃。因此，讓用戶在首頁就直觀的看到他們需要的內容，并且盡可能的減少其他不重要內容的出現，這是一個提升用戶體驗的好方法。

Agoda

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

二

用合適的大圖作為背景

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

Airbnb

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

三

切換圖片時減少誤點可能

在酒店詳情頁中最受關注且最先出現的是關于酒店的一些圖片，而這些圖片內容對用戶來說可能又愛又恨。當用戶正在瀏覽的時候會覺得圖片表現完整但有些雜亂，而當用戶沒需求的時候又會因為一些正常的操作造成誤點。如果網站能先展示一部分圖片，讓需要查看更多圖片的用戶點擊進入一個專門的圖片板塊，并且對這些圖片進行分類，便于用戶有針對性的快速找到自己需要的內容，這樣的設計才更符合用戶體驗。

游多多

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

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

四

完整詳細的酒店信息

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

住哪兒

住哪兒網酒店詳情頁的內容排序與大多數網站不同，文字介紹部分以“酒店設施”、“酒店政策”、“酒店介紹”…的順序排列，真正按照用戶的實際需求來做設計。

五

特別信息應該特別標注

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

Booking

Booking是一個專業的全球酒店預訂網站，網站中的設計都比較人性化。正如案例中顯示的酒店預訂環節，使用的文字及其色彩都以使用者角度出發，對用戶可能會感興趣的內容作了不同顏色的顯示，這種做法很利于促成銷售。

六

圖文并茂的生動點評頁

其他用戶的點評是很多正在選擇的用戶都會關注的板塊之一，這些點評意見可能會對他們的最終選擇起到很大的引導作用，因此這部分的設計更應該被重視。常規化的劃分會讓用戶覺得沉悶單調，嘗試著設計一個活潑生動的點評板塊，讓用戶更容易接受和認可。

到到網

到到網的點評部分設計成了對話框的形式，并且支持圖文并茂，增加用戶的信任感，也讓用戶在瀏覽的時候更有參與感。

七

情感化預訂日歷

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

去哪兒網

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

八

互動產生反饋

用戶在瀏覽任何網站時都喜歡有一種“我不是一個人在瀏覽”的感覺，所以每次鼠標懸停產生的一個小動作都會讓用戶覺得很溫暖。

藝龍網

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

九

拆分復雜的流程

酒店預訂的流程大多不會很復雜，和一般網上購物的流程大致類似，但首次預訂的用戶可能會少了一些安全感，而拆分并且顯示整個過程就是消除用戶不安的最好方法。

同程網

同程網站很仔細的對整個過程做了拆分。將每個比較重要的環節用口語化的文字表現出來，讓用戶不僅能夠對之后要做什么有了清楚的了解，同時增加了網站的親和力。

十

減少輸入框和必填項

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

途牛網

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

更多推薦

回復“51”：目前最好的關于用戶運營文章：用戶運營的定義、演變和方法論

回復“52”：百度移動云高級美女產品經理：O2O日趨火爆，下個估值過億的上門美業將花落誰家？

回復“53”：為什么我們都來北上廣？此生若得安穩，誰愿顛沛流離！--PMcaff獻給所有奮斗的互聯網人

回復“54”：2015版App推廣全攻略：你所不知道的撕逼營銷，事件營銷和PR傳播。

回復“55”：火爆了，5000位來自百度阿里騰訊Amazon的產品經理瘋搶的課程現場。

回復“56”：微視已死，騰訊戰略放棄微視，大牛紛紛離職，PMcaff--行業內部解讀。

回復“57”：Uber產品經理首次在中國自述產品理念：我們看中的并非只是錢。

回復“58”：產品經理們是如何越過 iOS 沙盒機制的？

回復“59”：如何避免開發一款失敗的產品？

回復“60”：你可能不知道的學習的15個APP設計技巧！

原創或推薦文章請發送至郵箱：xiaoxi@pmcaff.com

pmcaff合作媒體：Chinaz

總結

以上是生活随笔為你收集整理的【干货】功能堆砌or视觉美观？看优秀PM如何权衡的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。