手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

網(wǎng)站設(shè)計之二:旅游網(wǎng)站設(shè)計分析!教你10個小技巧

2022-6-13    博博

編者按:酒店預(yù)訂網(wǎng)站大多功能繁多,在視覺美觀上有天生劣勢,想平衡兩者非常考驗(yàn)設(shè)計師的功力,借鑒相關(guān)的優(yōu)秀網(wǎng)站是捷徑,今天@AnyForWeb_UED 從眾多在線預(yù)訂網(wǎng)站中提煉了10條設(shè)計的技巧 >>>


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


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


Agoda


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


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


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

如何選好圖片:《設(shè)計師找圖技巧!如何快速準(zhǔn)確找到合適的網(wǎng)頁背景大圖?》


Airbnb


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


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


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


游多多


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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

旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


四、完整詳細(xì)的酒店信息


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


住哪兒


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


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


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


Booking


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


六、圖文并茂的生動點(diǎn)評頁


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


到到網(wǎng)


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


七、情感化預(yù)訂日歷


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


去哪兒網(wǎng)


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


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


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


藝龍網(wǎng)


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


九、拆分復(fù)雜的流程


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


同程網(wǎng)


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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


十、減少輸入框和必填項(xiàng)


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


途牛網(wǎng)


旅游網(wǎng)站設(shè)計分析!教你10個小技巧

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

作者:程遠(yuǎn)

轉(zhuǎn)載請注明:優(yōu)設(shè)網(wǎng)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計m.88yangsc.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計公司



更多精彩文章:

網(wǎng)站設(shè)計之一:怒馬!超實(shí)用的單頁網(wǎng)站設(shè)計指南(附大量資源)

網(wǎng)站設(shè)計之二:旅游網(wǎng)站設(shè)計分析!教你10個小技巧

網(wǎng)站設(shè)計之三:實(shí)例教學(xué)!如何將極簡風(fēng)格的原則運(yùn)用到網(wǎng)站設(shè)計中?

網(wǎng)站設(shè)計之四:另辟蹊徑談創(chuàng)新!提升網(wǎng)站設(shè)計形式的幾種方法

網(wǎng)站設(shè)計之五:經(jīng)驗(yàn)分享:移動網(wǎng)站設(shè)計應(yīng)該避免的“七宗罪”

網(wǎng)站設(shè)計之六:4000 字快速回顧20多年的網(wǎng)頁設(shè)計發(fā)展史!

網(wǎng)站設(shè)計之七:騰訊出品!2021-2022設(shè)計趨勢報告:動態(tài)篇

網(wǎng)站設(shè)計之八:為什么千萬別隨便學(xué)國外的極簡設(shè)計?

網(wǎng)站設(shè)計之九:高手出品!2020~2021年UI界面設(shè)計趨勢

網(wǎng)站設(shè)計之十:如何做好網(wǎng)頁頭部內(nèi)容設(shè)計?來看 58 設(shè)計師的總結(jié)!






分享本文至:

日歷

鏈接

個人資料

存檔