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

2013-5-5    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   sillybuy.com  )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源:http://ecd.tencent.com/qq-hotel.html

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點(diǎn)這里

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

項(xiàng)目背景

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

前期準(zhǔn)備
分析

2011年開始,“開房 App”就如雨后春筍,爭著冒尖了,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)子?

提煉

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

情感化設(shè)計(jì)

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

視覺推導(dǎo)

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

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

視覺輸出

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

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

其它細(xì)節(jié)
Icon設(shè)計(jì)

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

一些飛機(jī)稿:

這里要回顧下QQ酒店返現(xiàn)的幾個(gè)特點(diǎn):1.酒店資源豐富,全國超過30000家酒店,覆蓋700多個(gè)城市;2.返現(xiàn)高達(dá)房費(fèi)的50%,可以直接支付、提現(xiàn)、充話費(fèi);3.無房、差價(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è)舒適可靠的寓意,不多說,看圖:

結(jié)語

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔