只要我長大 記帳app— UI重新設計

陳昱安
陳昱安
Apr 23, 2017 · 3 min read

我的一些平常練習的作品(100 days UI),都以視覺畫面為主,比較沒有完整的使用者經驗設計,所以我要來分享這款app專案,這個app叫只要我長大,是一個記帳app結合養成遊戲,這本來是我在學校課堂的swift作品,但UI設計方面必須符合課程需要,而且有一些不實用的功能(例如小費計算功能台灣人比較沒有機會用到),所以我在課堂結束後自己重新設計app的UI,並調整整個app的結構所以有了這個作品集。

有興趣的話可以去看看舊的畫面與風格:

首先我把整體畫面、色調與風格改掉,原本的較為暗淡的顏色改成比較清新與明亮,使用工具也從illustrator改成慢慢熟練的sketch符合UI設計主流。

再來是功能的部分,我將計算小費的功能拿掉,當初只是要讓自己的作品有實作的程式,然而其實在台灣小費計算其實沒有很實用。拿掉小費功能後也將整個架構整理一下變得更簡潔明瞭。

除此之外我也將原本依照ios swift設計的tab bar 跟navigation改掉(畢竟如果是作UI的話就不用考慮自己會哪些程式語言,設計上就能比較多元)

首先這個是主畫面,可以在這個畫面看到養成的樹,樹會隨著紀錄金額增加而長大,我現在的想法是一個月會重新紀錄一次,將來希望能增加類似一個森林的概念將每個月的樹種在森林裡。其他功能則是這頁的分支:清單、統計等等。按下下方的加號能新增收支紀錄,左上角的能叫出用戶資訊。

收支的畫面設計是覆蓋在首頁上,讓用戶不會擔心說不知道自己在app架構上的哪個地方,兩者同樣都分成六類,方便之後系統的統計與呈現。

統計的畫面跟收支清單也正式做出來,配色上盡量選擇舒適低飽和度的顏色。

做好畫面以後我也用flinto讓畫面盡量依自己的意動起來,不過像是按加號出現的收、支本來想以順時針從中間冒出,但目前還不太熟悉flinto,之後的目標是將此軟體弄熟!

陳昱安

Written by

陳昱安

Web Developer @ Dcard

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade