在做功能或者設(shè)計時，如果我們能多想一步，做多一點，就能給用戶帶來更好的體驗，獲得更好的反饋。本文作者分享了對預(yù)訂酒店過程中的內(nèi)容和預(yù)訂工具的設(shè)計思考，希望能幫到大家。

為什么要做酒店內(nèi)容新體驗？

現(xiàn)階段很多用戶去旅行之前，都會經(jīng)歷這樣的過程，先去內(nèi)容平臺上瀏覽大量的旅行相關(guān)的帖子、短視頻，當(dāng)心目中有了比較理想的目的地和玩法，再跳轉(zhuǎn)預(yù)訂軟件，去訂酒店。

那么，既然用戶有內(nèi)容訴求，我們經(jīng)過多年的旅行相關(guān)沉淀，為什么不在訂酒店的地方，把內(nèi)容更好地展示出來？

首先來回顧一下，關(guān)于如何更好地訂酒店，我們經(jīng)歷了幾個不同的產(chǎn)品階段。

第一個階段：有的住，給用戶提供安全可靠的預(yù)訂工具；

第二個階段：有的選，在安全可靠的基礎(chǔ)上挖掘出更多舒適的酒店相關(guān)設(shè)施玩法；

現(xiàn)在第三個階段需要提供有價值認(rèn)同，有精神追求的酒店內(nèi)容新體驗；

在了解大量旅行相關(guān)的內(nèi)容之后，發(fā)現(xiàn)在特種兵和躺平這兩種極端之外，有種比較現(xiàn)實又理性的，關(guān)注度最高的旅行追求，那就是——松弛感。

我們通常說的有松弛感的狀態(tài)，并不是純粹的放松就行，而是需要一個大前提，得有確定的能力圈使你有自信的來源。

比如我們比較確定的是，旅行的內(nèi)容和酒店的推薦，在這個安全感的基礎(chǔ)上，才能更加從容優(yōu)雅地給用戶提供逛的空間。

松弛經(jīng)濟(jì)這種消費趨勢，也正好符合這個階段我們想要呈現(xiàn)給用戶的內(nèi)容方式，提供有價值認(rèn)同的旅行體驗。

設(shè)計策略

如何把松弛感這種抽象的概念落實到設(shè)計上呢？

通過一些線上實際案例的探索之后，提煉出來的設(shè)計策略有內(nèi)容、布局、質(zhì)感這三個部分；以下圍繞這三個部分展開講講：

01 內(nèi)容「代入感」

我們想給用戶的「內(nèi)容」是由文字、圖片、視頻這些因素組成。

內(nèi)容的目的，是如何在最短的時間，在有限的手機(jī)屏幕上，有效地吸引注意力，讓用戶產(chǎn)生出行或者下單購買的意愿，所以用什么方式呈現(xiàn)圖、文、視頻就尤為重要。

01-1 ?內(nèi)容：動詞+名詞，描繪畫面感

要推薦什么主題內(nèi)容，取決于往年用戶的高頻搜索的主題詞，按照我們原來的做法，通常會使用「親子房」「山景酒店」等等這樣模式化的標(biāo)題；但是現(xiàn)在，不滿足于「沒有感情的訂酒店工具」這樣的形象，所以在內(nèi)容入口上描繪出畫面感，產(chǎn)生遐想的空間。

具體的做法可以歸納為三個小技巧：

從古詩詞的寫作手法上吸取經(jīng)驗。

比如“大漠孤煙直，長河落日圓”，不強調(diào)形容詞，而是用最樸素的：動詞+名詞，來調(diào)動情緒。

把上一個小技巧落實到山景酒店這個案例中，同樣推薦山景酒店，四季給到完全不同的畫面感，在不同的時令要體驗不同的美景和美食，是中國人自古以來的浪漫。是運用AI積累和學(xué)習(xí)，幫助我們拓展更多的靈感。

01-2 ?內(nèi)容：圖片&視頻?技術(shù)升級

內(nèi)容的圖片視頻部分，經(jīng)歷了1.0「質(zhì)量關(guān)」到今年的1.5階段「內(nèi)容關(guān)」。

「質(zhì)量關(guān)」是通過美學(xué)視角，對圖片質(zhì)量提升進(jìn)行量化，找出更高質(zhì)量的圖片，并且上線得到了正向的實驗結(jié)果。

今年在這個基礎(chǔ)上，結(jié)合正好在做的主題內(nèi)容推薦，又提升了一個技術(shù)——「內(nèi)容關(guān)」1.5階段。

這個項目中主要做的是對酒店內(nèi)容的挖掘，通過細(xì)顆粒度的規(guī)則制定，找出符合主題且含質(zhì)量過關(guān)的圖片，與酒店信息的匹配度更加緊密，后續(xù)能更精準(zhǔn)的指導(dǎo)商戶拍出更好的酒店圖片，也為圖片特效、圖像標(biāo)簽、以及以圖找酒店的能力建設(shè)做好了鋪墊。

圖示可以看到，Before我們推薦滑雪酒店的圖不夠美觀，并且看不出酒店相關(guān)度，技術(shù)提升至1.5之后，可以做到自動化提升圖片質(zhì)量的同時，識別出雪場這種關(guān)鍵主題元素。

02 布局「呼吸感」

02-1 呼吸感不止有「留白」

既然內(nèi)容呈現(xiàn)有技巧，那么設(shè)計手法上也要有變化。

界面中適當(dāng)?shù)牧舭?，?yīng)該要服務(wù)于設(shè)計目標(biāo)的基礎(chǔ)上，制造點睛之筆。

常規(guī)的酒店列表頁，注重篩選效率，是嚴(yán)謹(jǐn)理性的形象。

當(dāng)需要主題內(nèi)容感知的時候，我們曾經(jīng)做過很多嘗試，現(xiàn)在選擇右邊這種更加有呼吸感，在氛圍和效率之間找到一個平衡的包裝方式。

02-2?圖文率的變化

「圖」與「文」的空間關(guān)系，體現(xiàn)在列表頁卡片上圖文率的變化。

圖片占比變大很多之后，首先，酒店的特色玩法和相關(guān)美景以圖/視頻的方式來表達(dá)，更加容易吸引用戶的注意力；其次，講呼吸感的同時，并沒有放棄效率，其實在重新平衡，調(diào)整空間的比例關(guān)系，兼顧效率和美感。

再者，1.5階段「內(nèi)容關(guān)」的技術(shù)應(yīng)用在這里，使得我們選擇圖，和選擇視頻的方法，有了更好的算法支撐，有側(cè)重的主題內(nèi)容篩選，不僅僅是過質(zhì)量關(guān)而已。很大程度地避免了圖片占比變大之后，酒店圖的質(zhì)量不能夠滿足美觀度需求的問題。

02-3?創(chuàng)新布局，亮點前置

酒店詳情頁，從數(shù)據(jù)上看，用戶在這個位置會閱覽5張以上的圖片，原來的設(shè)計只能在局限空間的左右看圖，有很多酒店想要展示的東西，沒有強調(diào)出來，閱覽體驗也需要提升。

所以，今年我們從橫向和縱向拓展出更大空間，增加獲取信息的效率，同時也提高了信息有效性。

這里同時也應(yīng)用了拾色技術(shù)，識別和酒店環(huán)境相同的顏色，讓輔助文案和優(yōu)雅的環(huán)境圖片相得益彰。

現(xiàn)在可以把詳情頁原本深藏的內(nèi)容：特色玩樂設(shè)施，主題房，地理位置幀，點評等內(nèi)容前置包裝，用更短的時間抓住用戶的視線；這個布局既可以更好地展現(xiàn)酒店的特色，又能服務(wù)于增量信息，一舉兩得。

未來的計劃中，這里還可以增加各種營銷的玩法，比如酒店音樂節(jié)，圣誕特色等等。

03 元素「有質(zhì)感」

前面提到松弛感設(shè)計，主打的是以圖為主，文為輔，接下來用酒店新的種草頻道主題集合頁來舉例，元素的質(zhì)感，從哪幾個方面有所提升。

03-1?“浪起來”的品牌元素

主題入口卡片，我們想要讓Poi和玩法看起來井然有序，同時有視覺張力，所以，做了很多嘗試之后，選擇用不同場景主題顏色的「海浪線條元素」，讓文字和圖自然過渡，大圖和小圖的合適比例，引導(dǎo)視線區(qū)分出信息層級；「海浪線條」的視覺符號，也寓意隨著不同的主題玩法浪起來。

03-2?運用合理的構(gòu)圖，為場景敘事服務(wù)

從種草入口點進(jìn)來之后的落地頁，根據(jù)時令季節(jié)的變化，做了符合相應(yīng)主題的5秒微視頻。

為什么是微視頻？因為在這個使用場景之下，主要設(shè)計目的是賣酒店，而不是給用戶展現(xiàn)一組敘事大片宣兵奪主。

景色相關(guān)的主題構(gòu)圖方式是，中景和全景為主，人物含量較少，由此來聚焦主題，把不同的攝影構(gòu)圖帶來的不同視覺語言合理運用在頁面當(dāng)中。

03-3?用人物制造和旅行場景的關(guān)聯(lián)性

親子和滑雪這類需要突出人與人之間的連接，和人物關(guān)鍵動作的主題設(shè)計，除了選擇合適的景別，也要恰到好處地突出人物肢體語言，在用戶進(jìn)到這個頁面的前五秒鐘，就傳達(dá)出合適的情緒，具像化腦海中的畫面，把自己代入其中。

比如滑雪挑選的是人物直接沖刺，加速的關(guān)鍵動作，而親子挑選的是夕陽下家庭成員之間的溫馨瞬間。

03-4?顏色搭配

質(zhì)感的另一個元素：顏色的使用。

提取畫面中和這個主題強關(guān)聯(lián)的核心顏色，引導(dǎo)用戶產(chǎn)生和主題一致的情緒。

在視覺舒適度的范圍內(nèi)，增加顏色梯度，考慮到亮度、對比度的變化，和運用在同一主題界面中實用性。

結(jié)語

有了新的內(nèi)容種草設(shè)計之后，對用戶來說，我們不僅僅是預(yù)訂工具，也是可以逛起來的地方，對酒店商家來說，酒店商戶有很多想要展示的特色內(nèi)容，以前只考慮往其他內(nèi)容平臺放，現(xiàn)在何嘗不是多了一個很好的選擇。

對平臺來說，我們不再是效率性工具的固有印象，而是可以滿足商品的個性，提供一些良好的，多元的展示舞臺。