一場說走就走的旅行少不了一家精挑細選的酒店。出門在外，沒有一個舒适的住處，恐怕旅行的記憶也并不是那麼美好。大牌酒店住不起，小衆酒店成本效益高，但哪家最合适？網上攻略必不可少。
作為主觀性非常強的視覺性動物，選擇酒店的時候除了看價格，當然也會更看重酒店的網頁設計風格。如果酒店的網站設計都亂糟糟，那酒店自身可想而知。作為提升酒店形象的門戶，酒店網站設計一定不能馬虎。
如何設計具有現代感的酒店網站？個人分析可以從以下幾點要素出發：
1. 響應式設計：網站必須支援跨裝置浏覽。
2. 卓越的使用者體驗：簡化的網站浏覽流程可以帶來很好的使用者體驗。因為如果難以找到常見的頁面或到達預訂頁面完成購買，很可能就會導緻使用者的流失。
3. 講故事：你的網站是否了解一旦客人入住酒店會怎樣？它是否可以為接下來的行程做指引？
4. 便捷預定：盡可能簡化預訂過程以獲得最大回報。繁瑣的使用者資訊和付款資訊填寫都有可能造成使用者的流失。
5. 視覺逼真：最好和最有效的網站是吸引通路者花時間探索的網站。專業攝影和視訊都是講故事的絕佳媒介，尤其是對于酒店和度假村。
9款優秀的小衆酒店網站設計1.
赤坂覺醒酒店酒店所在地：日本
網站設計特色：動态天氣圖示 ，酒店内部背景圖
Hotel Risveglio Akasaka酒店是一家2015年開業的酒店，據住過的使用者回報是一家處處展現設計感的酒店。無論是酒店房間的設計還是酒店大廳的設計都赢得使用者的好評。
網站整體UI設計簡潔，明了。網站首頁以酒店内部裝修圖檔作為背景。配上簡潔的字型和圖示，整個界面幹淨典雅。
輪播圖的展現方式給使用者提供了多元度的空間體驗感，黑白灰的建築設計和恰到好處的燈光，舒适又不單調。城市和天氣的設計非常的貼心，滾動導航自然引導使用者到預訂頁面，提高網頁會話率和訂購量。
2.
Casangelina酒店所在地：意大利
網站設計特色：動态引導、背景音樂
作為世界十大懸崖酒店之一的Casangelina酒店位于Amalfi海岸的懸崖上，客人可在酒店露台的全景室外遊泳池放松身心，有摩洛哥風格的酒吧喝香槟，當然少不了私人廚房和管家服務，乘坐玻璃觀景電梯下降200級台階前往海灘，還能搭乘酒店的私人遊船到其他島嶼曬太陽吃海鮮。
網站UI設計仍以簡潔風格為主，滾動區圖檔與字型的融合增強了網頁浏覽時的沉浸感。界面與使用者體驗設計融為一體。背景音樂和動态的酒店全景視訊讓你從它的網頁設計就能感覺到整個酒店的優雅氣息。
3.
Harbor Suites酒店酒店所在地：希臘
網站設計特色：響應式設計
這個網站從它的網頁導航圖展現出這是一家為商務和休閑旅遊遊客而設計的酒店。優越的地理位置為商務人群或休閑遊客都提供了極大的便利。
網站的響應式布局為其一大特色。重要資訊的展示如線上預訂，房間預覽和網站導航都在視覺的正中心和視覺焦點處，可以引導使用者友善快速的打開網頁。
循序漸進的頁面動畫和卡片式資訊展示增加了使用者對該酒店特色的了解，網頁資料展示非常豐富。
4.
NISEKO HAKUUNSO網站設計特色：季節性UI設計
這個網站以冬夏為主題展示了不同季節裡酒店的外部環境特色。預設的冬季主題以飄動的雪花和遠處的富士山為背景，與酒店的“白雲”主題呼應。雖然雪花的動态UI設計很吸引眼球，但也并不妨礙使用者注意到深色背景上的白色導航欄。
5.
Swissotel酒店所在國家：瑞士
網站設計特色：Banner橫幅
Swissotel是一個國際連鎖酒店，白色背景加上深色色調，banner橫幅整齊分隔，使得網站整體看起來非常整潔幹淨的感覺。CTA位置的留白使得你的網頁布局有明顯的對比，也适合使用者的閱讀習慣。
其他度假酒店網站設計：
6.
聖莫裡茲-世界之頂 7.
Carrier豪華定制假期 8.
德克薩斯州城市Weslaco網站 9.
Ruta a la Aventura- 綠色森林探險遊網站
一個酒店網站設計的成型一般會經曆非常多的設計流程。從原型設計開始就奠定了整個網站的頁面布局和排版。好用的工具将會助你事半功倍。我将以
Mockplus制作的網站原型設計為例，帶你領略這款快速原型設計工具的魅力。
如何使用Mockplus設計屬于您自己的酒店網站原型呢？首先，我們需要總結以上9款小衆酒店網站設計的5大共同點：
大圖檔背景
酒店名稱或酒店主題Logo居中顯示
導航欄資訊靠網站邊緣顯示
輔助特色功能性圖示展示
輔助GIF動态圖檔展示。
總結出這些共同點之後，我們就可以開始着手使用Mockplus進行酒店或者其他類型的
網站原型設計的創作了。如果你是個人使用者，喜歡自由快速的原型設計，不受其他成員的幹擾，可以選擇使用Mockplus個人版。如果你是5人左右的小團隊，需要團隊協作和項目管理，可以使用Mockplus3.3的團隊版功能。（
Mockplus3.3上新，免費體驗團隊管理和所有專業版功能！）
好了，廢話不多說，開始準備你的網站原型設計吧。賬号軟體什麼的自己去準備哈。（有的直接登入，沒有的可以去官網
免費申請。
第一步，打開軟體選擇建立網頁項目。
第二步,熟悉軟體界面：
左側從上到下依次為常用工具菜單欄，隐藏項目樹，圖示、元件庫以及其細分欄目。
中間為原型設計操作界面
右側為元件屬性面闆、互動參數屬性面闆以及頁面屬性面闆。
第三步：使用“圖檔”元件導入logo圖檔以及大張頁面圖檔做網頁背景圖
第四步：使用Mockplus快速功能：
格子和自動填充功能快速制作相似格式的頁面内容。
元件樣式功能同時為多個同類型的元件進行樣式設定，省時又便捷。
第五步：添加互動：頁面與頁面間的跳轉互動，或元件與元件間的互動。（
如何在Mockplus中設定互動 第六步：點選F5實時預覽或導出示範包預覽。
總結：中還有許多有用的功能可以幫助你進行快速的網站原型設計或手機應用原型設計。以上的9款酒店網站設計案例也是相當不錯的。閑暇時間，可以一邊參考案例，一邊利用Mockplus進行執行個體模拟，自己動手設計一個屬于自己的酒店網站或者其他類型的網站。對于提升自己的設計水準和快速捕捉設計靈感也是一件非常不錯的事。