QQ酒店返現(xiàn)V2設計回顧

2013-5-5    藍藍設計的小編

轉載藍藍設計(   yvirxh.cn  )是一家專注而深入的設計機構 ,為期望卓越的國內外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網站建設 、平面設計服務

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

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

QQ酒店返現(xiàn)2.0設計回顧

項目背景

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

前期準備
分析

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

提煉

通過對V1.x系列版本的總結及對競品、用戶使用場景的分析,我們提煉出本次改版的幾個關鍵點:

情感化設計

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

視覺推導

色彩搭配,直奔主題,尋找與酒店相關的配色:

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

視覺輸出

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

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

其它細節(jié)
Icon設計

ICON設計開始,找元素啊找元素,找了一些酒店相關的素材:

一些飛機稿:

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

結語

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

日歷

鏈接

個人資料

藍藍設計的小編 http://yvirxh.cn

存檔