QQ酒店返現(xiàn)V2設(shè)計(jì)回顧


當(dāng)你使用彈性社交網(wǎng)絡(luò)認(rèn)識(shí)了怦然心動(dòng)的某人,立即需要一個(gè)“做案現(xiàn)場(chǎng)”的時(shí)候 ;當(dāng)你臨時(shí)出差到一座陌生的城市,一下飛機(jī)就為訂酒店而煩惱的時(shí)候,你可能就要感謝那些“開房 App”了,它們可以根據(jù)地理位置顯示出離你最近的酒店的實(shí)時(shí)房源,然后輕松點(diǎn)幾下手機(jī)屏幕,問題就得到了解決—–這是《創(chuàng)業(yè)家》雜志給酒店預(yù)定應(yīng)用描繪的使用場(chǎng)景。我們的“開房 App”已經(jīng)在Android平臺(tái)跑了一段時(shí)間,相信已經(jīng)是不少用戶的“做案幫兇”了,產(chǎn)品經(jīng)理又找上我們,謀劃著怎么讓這個(gè)做案工具幫到更多的人這次,我們從ios開始……


2011年開始,“開房 App”就如雨后春筍,爭(zhēng)著冒尖了,OTA、酒店集團(tuán)、單體酒店、一些專注APP的創(chuàng)業(yè)型公司都有這類應(yīng)用產(chǎn)出,我們想要做個(gè)好幫兇,面臨的挑戰(zhàn)還是很大,如何讓我們的產(chǎn)品在眾多同類應(yīng)用中脫穎而出?如何讓我們的應(yīng)用更具粘性?在做足功能的同時(shí),還有哪些創(chuàng)新的點(diǎn)子?

通過(guò)對(duì)V1.x系列版本的總結(jié)及對(duì)競(jìng)品、用戶使用場(chǎng)景的分析,我們提煉出本次改版的幾個(gè)關(guān)鍵點(diǎn):


記得有人用“被喚醒的記憶”來(lái)概括擬物的設(shè)計(jì)理念,這個(gè)概括用在對(duì)真實(shí)事物的外觀和特性模仿都很強(qiáng)的APP上很貼切,比如便應(yīng)用,外觀的操作都可以做的很逼真,酒店預(yù)定不像這類應(yīng)用有那么直觀的特性可以模仿,也許做不到“喚醒的記憶”,至少可以用一些擬物的設(shè)計(jì)拉近和用戶的距離吧,也可讓APP更有特色。

色彩搭配,直奔主題,尋找與酒店相關(guān)的配色:

確定配色之后,繼續(xù)尋找一些酒店的元素,看怎么讓我們的app有更強(qiáng)的酒店屬性


經(jīng)過(guò)一段痛苦的設(shè)計(jì)稿pk過(guò)程(此處略去xx字),我們確定了改版的風(fēng)格,打開APP,跳過(guò)啟動(dòng)畫面后就是查找酒店的表單,表單的邊框模擬了酒店房?jī)r(jià)牌子的樣式,默認(rèn)定位了當(dāng)前位置,可以不用其它操作直接按搜索查找附近的酒店,返現(xiàn)賬戶、個(gè)人中心、設(shè)置這些不是預(yù)定流程上主要的操作,被隱藏在頁(yè)面下方,需要時(shí)再向上拉起。

進(jìn)入搜索后,如果沒有聯(lián)網(wǎng),自動(dòng)啟用離線模式,為了讓搜索結(jié)果首屏就有更大的展示空間,篩選及模式切換類操作都被收納在頁(yè)面上方,結(jié)果列表有無(wú)圖模式可選,戶外使用時(shí)更快更省流量;為了方便定位酒店位置,地圖模式也是不可少的。





ICON設(shè)計(jì)開始,找元素啊找元素,找了一些酒店相關(guān)的素材:

一些飛機(jī)稿:

這里要回顧下QQ酒店返現(xiàn)的幾個(gè)特點(diǎn):1.酒店資源豐富,全國(guó)超過(guò)30000家酒店,覆蓋700多個(gè)城市;2.返現(xiàn)高達(dá)房費(fèi)的50%,可以直接支付、提現(xiàn)、充話費(fèi);3.無(wú)房、差價(jià)賠付,7×24小時(shí)客服;4.離線模式、便捷的當(dāng)前位置查找。 icon擺上app store后,就是一個(gè)大招牌,最好的設(shè)計(jì)方式是從特點(diǎn)里面去提煉,做到icon能體現(xiàn)出app的主要特色。幾番周折,還是擬物,最后定稿的icon是一個(gè)大枕頭,上面放一個(gè)返現(xiàn)的標(biāo)簽,很直白的表達(dá)方式,酒店、返現(xiàn)都體現(xiàn)了,枕頭還有個(gè)舒適可靠的寓意,不多說(shuō),看圖:


關(guān)于簡(jiǎn)潔的metro風(fēng)格和擬物化風(fēng)格孰優(yōu)孰劣討論不少,酒店返現(xiàn)的前一版本是簡(jiǎn)潔風(fēng)格的,我們的改版初期也在這個(gè)問題上糾結(jié)了一下,回頭想想,兩個(gè)風(fēng)格并沒有絕對(duì)的好與壞,從產(chǎn)品本身出發(fā)做夠了分析推導(dǎo)后,適用什么風(fēng)格自然就清晰了,合適的才是最好的。對(duì)設(shè)計(jì)師來(lái)說(shuō),多償試不同風(fēng)格更不是什么壞事。
來(lái)源:http://ecd.tencent.com/qq-hotel.html
- 目前還沒評(píng)論,等你發(fā)揮!