玩運彩練小喂

AHORRO-輕鬆記帳,簡單理財-ios APP介面分析

ahorro是由產品人因工程中心開發的APP,目前在APP store上獲得4分以上的評價。

介面採用扁平風格,捨棄仿真光影、材質與漸層的表現手法,簡化裝飾細節,設計者不需再費心雕琢擬真風格(skeuomorphism)的介面。但精簡同時衍生新的考驗,畫面上每個元素都會受到更嚴格檢視,處理得好是簡潔,處理不好就是陽春了。

以下從七個環節看ahorro的介面設計。

 

配色

要說這個APP介面的主要特色,就是配色。中彩度的色盤搭配出柔和的畫面風格,即便背景是大面積色塊,看久了也不會太刺眼。Navigation bar的底色很理想,低明度、低彩度的深藍色增加畫面的量感,避免整體過於柔弱,成了畫龍點睛的強調色。

color

【圖1】

倒是下方選單中的圖示與文字,可以沿用Navigation bar的底色。若怕視覺上太沈重,縮小圖示即可。其他細部問題,比如圖1最右側的預算編列畫面,右下方的ios原生switch button,底色略顯突兀。這項設定預設開啟,若不是很重要,使用者不會常變更,底色可以選用該畫面的主要背景色。

圖示

只用圖示,雖然簡潔漂亮,卻很難避免usability問題,可能與使用者認知有出入,也會加重記憶負擔。

Ahorro用了大量圖示,搭配文字說明,符合Icon usability這篇文章的觀點。但另一篇Mobile Menu AB Tested: Hamburger Not the Best Choice?的A/B testing結果指出,純文字“MENU”加按鈕邊框的版本轉換率最好,優於圖示加文字的方案,還比原本只有圖示的按鈕提升了12.9%。

按照測試結果,以後就用純文字當按鈕就好,是不是?
那不就變成BBS?

圖示可以增加介面的趣味與豐富性,這點光用文字很難辦到。真的去除ahorro的全部圖示,介面會變得很乏味,功能味過重,到時使用者的反應又會如何?

因為用了大量圖示,如【圖2】,數量一多,不難發現ahorro的圖示設計還有進步空間,不一致的線條粗細、量感、圖地關係、視角等表現手法,似乎混合了自製與免費資源的圖示。往後若有餘力優化,可以向Material Design的做法看齊。

IMG_5884【圖2】

字型

統計金額的白色大字是除了配色以外,第二個顯著的介面特色。這組字體適合展示,不適合用在需要閱讀的小字。無襯線、轉折銳利的粗體字,呈現明快、簡潔、十足的現代感,與柔和的配色形成反差,強化整體的視覺對比。

IMG_5878【圖3】

排版

我不明白主畫面最下方為何要排成矩陣選單?這很佔空間。不如改成單列的tab bar,騰出更多空間給重要內容,也符合ios的介面規範。

內容區因為下方選單吃掉太多空間,顯得很局促,如【圖4】。在iphone5輸入五筆資料出現捲軸,有點誇張。

thumb_IMG_5887_1024【圖4】

 

過場動畫

統計頁面的圖表有大量過場,目前也常見於網頁設計。先不談有沒有必要,至少看起來比較活潑,多一些趣味。

【圖5】

 

動線

主要問題是操作說明。頭一次開啟ahorro,三張操作說明,最大問題是強制使用者看完,不能中途關閉。無法中斷,我只能一直點”下一頁”,所以每張圖說了什麼,我並不清楚。

當使用者希望能立即使用APP,一連串強制收看的說明等同說教。

真要在APP中置入操作說明,不要一次說太多,不然使用者都還沒操作,就得記這麼多重點,等於負擔加重。比較理想的做法,是像電玩那樣,用簡單任務導引,或依據使用者當下的操作行為回饋相關的說明。不過這兩種方式,都比較耗工,因此能見度較低。

【圖6】

至於【圖6】中第一張說明圖有個多餘的”上一頁”按鈕,是怎麼回事?

 

手勢

ahorro主要的手勢是點擊(tap),滑移(slide)手勢僅用來切換同層級的畫面,例如明天的支出明細。對於大螢幕手機的使用者,點擊靠近螢幕上方的按鈕反而費力,可以多一些模糊操作的手勢,或把常用的按鈕下移,會比較方便。

主畫面隱含一個編輯功能,移除支出或收入項目可以用長按手勢叫出刪除按鈕,不過這方法從外觀根本看不出來,我是抱著試試看的心態才發現的,如【圖7】。介面的示能性(affordance)不足,不熟悉智慧型手機操作模式的使用者想必很難查覺。怕誤刪資料的話,不如改用選取框,可點選後批次刪除。

IMG_5868【圖7】


ahorro是輕量化的記帳軟體,產品特性和另一套知名的記帳工具CWMoney有明顯區隔。簡要的功能與設定,不用花時間研究即可上手,符合基本的記帳需求,外加免費又沒有廣告。再來是資料的轉移,ios版支援icloud備份,不用煩惱資料綁定在手機。

未來可以努力的方向,就是跨平台了,畢竟在手機上編輯,或檢視大量資料,電腦還是比手機好用。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *