提交需求
賽事與廣告咨詢合作,請(qǐng)?zhí)顚懶枨蟊韱?,我們?huì)在第一時(shí)間與您聯(lián)系!
GrabOne 重設(shè)計(jì)
GrabOne是打折信息展示和訂購平臺(tái),你可以在上面買打折的水果,也可以預(yù)定一次便宜的南島游,而這一切活動(dòng)、體驗(yàn)亦或是服務(wù)(在這里我會(huì)統(tǒng)稱為“產(chǎn)品”)等都被劃分隸屬于幾個(gè)不同的幾個(gè)分類:餐飲、活動(dòng)、保健美容、住宿、汽修。
性能問題:很明顯jQuery Mobile封裝的web app。每次進(jìn)入或返回一個(gè)頁面都要Loading一陣,不知道是不是每次請(qǐng)求數(shù)據(jù)是必須的行為,不然界面會(huì)白屏還是咋地?不過這比westpac one直接無腦封裝要高大上了太多。
這次的重設(shè)依然分為導(dǎo)航系統(tǒng)和部分主要界面。
我沒有嘗試著去設(shè)計(jì)看似發(fā)揮空間很大的啟動(dòng)頁(Splash Screen),因?yàn)槔碇歉嬖V我這是個(gè)再也不能更加愚蠢的玩意。我為什么要知道你正在加載數(shù)據(jù)?這樣能顯得你很仁慈嗎?我只想看到內(nèi)容,哪怕是緩存的過時(shí)內(nèi)容或者永恒不變的UI框架,而不是占據(jù)了一整個(gè)5英寸屏幕的丑陋Logo。不過我知道這些也只能是氣話,因?yàn)槲业睦蠋煻荚?jīng)告訴過我:“啟動(dòng)頁是必要的,原因嘛,是因?yàn)榻^大多數(shù)應(yīng)用都有!”
左:原app啟動(dòng)頁 右:原app首屏
頁面頂部一共有六個(gè)icon對(duì)應(yīng)六個(gè)不同的類別,與桌面網(wǎng)站呼應(yīng)。此處的滑動(dòng)設(shè)計(jì)可以很好地利用屏幕的物理特性,避免了空間的浪費(fèi)。我采用了圖片的設(shè)計(jì),意圖顯示每個(gè)分類下最新的產(chǎn)品圖片,由此我擴(kuò)增了每個(gè)塊的面積。請(qǐng)?jiān)徫沂褂昧藷o關(guān)的圖片,因?yàn)樗鸭嚓P(guān)素材占據(jù)了我重設(shè)的大部分時(shí)間,這和我的初衷大相徑庭。另外我也頗想試試Sketch的自動(dòng)圖片采集插件。
左:原app首屏 中:重設(shè)app首屏 右:重設(shè)app編輯精選(our picks)界面
與其用極不形象的icon,不如直接用文字更直觀些。在導(dǎo)航欄中我使用文字替代純粹的icon。同時(shí)我取消了編輯精選的banner設(shè)計(jì),直截了當(dāng)?shù)仫@示兩個(gè)產(chǎn)品合集,這也保持了和桌面網(wǎng)站的布局&內(nèi)容的一致性。精選內(nèi)往往有不定數(shù)目、且往往大于十五個(gè)的內(nèi)容,由此我沒有選擇使用slider,而是打開新的頁面。同時(shí)有別于一般i的卡片形式,精選產(chǎn)品擁有更大的圖片顯示面積。
左:重設(shè)app下拉刷新 右:重設(shè)app首屏下滑
符合潮流的下拉刷新,以及更改了當(dāng)前app的best of the week的ribbon設(shè)計(jì),以避免整行裝飾性元素帶來的視覺阻隔。可以看到我取消了當(dāng)前應(yīng)用中的每個(gè)產(chǎn)品項(xiàng)右側(cè)的箭頭,這是在安卓設(shè)計(jì)大綱中被明確禁止的設(shè)計(jì)。在下滑過程中,導(dǎo)航欄會(huì)自動(dòng)收起,以提供更充裕的顯示空間。
左:原app城市選擇頁 中:原app served site選擇頁 右:原app 國(guó)家選擇頁
當(dāng)我第一次看到首屏導(dǎo)航欄的返回圖標(biāo)的時(shí)候,其實(shí)我是,是拒絕的,我跟自己講,我拒絕,因?yàn)?,其?shí)我,根本沒見過這樣的app。帶著好奇我點(diǎn)了點(diǎn)了一下,瞬時(shí)三觀顛倒了。當(dāng)然,沒那么夸張。從上邊的三張圖可以看到,這個(gè)返回的過程是很漫長(zhǎng)的,一共可以退三步,城市選擇 > 大類選擇 > 國(guó)家選擇。這個(gè)邏輯是看似合理,實(shí)則詭異的。為什么這么說呢?首先我們必須認(rèn)清楚這樣設(shè)計(jì)的好處:避免了每次進(jìn)入應(yīng)用后愚蠢的重復(fù)設(shè)置、篩選信息,其次,這也說明了在不同的國(guó)家提供的大類是不同的(事實(shí)如此)。
左:重設(shè)app導(dǎo)航抽屜 右:重設(shè)app菜單
回過頭來看GrabOne,時(shí)效性和產(chǎn)品差異性決定了用戶不可能產(chǎn)生高頻的過濾地點(diǎn)和產(chǎn)品的行為,因此我擯棄了trade me中的置底filter menu或類似的設(shè)計(jì)。在我的重設(shè)中,我選擇了整合大類到navigation drawer中,而保留了原app的排版。同時(shí)可以看到未登錄狀態(tài)下沒有意義的my coupons等都被收納于其中,而導(dǎo)航欄內(nèi)的菜單可以提供設(shè)置、關(guān)于和登陸的入口。
對(duì)比原app和重設(shè)app的操作邏輯
而之所以說它奇怪,是因?yàn)閷?shí)在太過繁瑣,雙向的選擇也注定了在執(zhí)行某項(xiàng)操作時(shí)會(huì)有額外的中間步驟,比如若要另選一個(gè)served site,就必須要先前往城市選擇界面。而重設(shè)可以幫助把served site和country的邏輯關(guān)系理清,把城市和國(guó)家都?xì)w結(jié)于location中,而served site安置于drawer中,當(dāng)在change location中更改國(guó)家時(shí)原本就展開的drawer內(nèi)容進(jìn)行刷新,并可以讓用戶看到這個(gè)刷新的過程,從而實(shí)現(xiàn)任務(wù)的并行分離。
密碼登錄
大牛,別默默的看了,快登錄幫我點(diǎn)評(píng)一下吧!:)
登錄 立即注冊(cè)