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

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

編者按：不滿意？自己來！騰訊的yixin同學(xué)對(duì)市面上的記賬軟件都不太滿意，干脆自己設(shè)計(jì)了一款。這篇分享了他全部的設(shè)計(jì)探索過程，想知道專業(yè)設(shè)計(jì)師如何從零開始一款A(yù)PP的設(shè)計(jì)，在細(xì)節(jié)上如何考量周旋，看這個(gè)就對(duì)了！

現(xiàn)代智能手機(jī)給我們提供了非常多豐富實(shí)用的功能，比如平時(shí)頗為在意金錢去向的我，就是一個(gè) 手機(jī)記賬 App 的使用者，曾經(jīng)嘗試過各種記賬 App，但好像都有那么一點(diǎn)不滿意，于是我就想如果是我來設(shè)計(jì)這么一款 App 的話，我會(huì)怎么去設(shè)計(jì)呢？本文記錄的就是一次移動(dòng)記賬 App 的設(shè)計(jì)探索過程。

一、設(shè)計(jì)前的思考

簡單、和安全是設(shè)計(jì)之初就想到的三個(gè)關(guān)鍵詞。

在一天的使用過程中，我很可能存在多次記賬的需求，這也意味著我會(huì)頻繁打開這個(gè)產(chǎn)品，簡單和可以讓我更快的完成任務(wù)。記賬因?yàn)樯婕暗劫Y金這個(gè)問題，所以它同樣需要一定的安全性。如果要給這個(gè) App 一個(gè)定位的話，我認(rèn)為它是一款 “能滿足大眾基本記賬需求的輕便的移動(dòng)記賬 App ” 。

基于以上的思考，很快就產(chǎn)出了以下稿子：

視覺呈現(xiàn)上，我把它做的非常簡潔干凈，在進(jìn)入密碼解鎖以后直接呈現(xiàn)一個(gè)列表，左下角則是有一個(gè)常駐的懸浮著的綠色添加按鈕，用來添加一筆支出或者收入。

當(dāng)然也有比按鈕更優(yōu)雅一點(diǎn)的方案：

通過手勢(shì)下拉的操作展開一筆新的支出或收入，因?yàn)槭謩?shì)的優(yōu)勢(shì)在于沒有固定的需要點(diǎn)按的操作位置，能有更高的效率。

盡管看似合理的初步方案就這么出現(xiàn)了，但是如果仔細(xì)深入思考的話，會(huì)發(fā)現(xiàn)它并沒有實(shí)際解決你希望能夠更記賬這個(gè)行為。出于安全的考慮，你始終在打開記賬 App 后需要輸入四位的密碼，然后才能進(jìn)入記賬的行為，這個(gè)過程會(huì)讓你在每次記賬的時(shí)候都需要多按幾次手機(jī)。

為了解決這個(gè)痛點(diǎn)，我從最基本的使用場(chǎng)景出發(fā)，思考了以下幾個(gè)問題：

1. 我打開記賬 App 的目的是干什么？
2. 為什么記賬？
3. 什么時(shí)候記賬？

針對(duì)第一個(gè)問題，答案很顯然：目的就是記賬或者查看收入和支出的報(bào)表。 第二個(gè)問題，記賬的目的則是因?yàn)橄肓私庾约旱呢?cái)務(wù)狀況 / 收支分布。 而針對(duì)第三個(gè)問題：一般情況下則是在完成一筆消費(fèi)后，或者可能是晚上回憶一下整天的消費(fèi)統(tǒng)一記錄。

在重新整理完這些思考以后，我最終決定重新擬一套設(shè)計(jì)方案。

二、思考后的重設(shè)計(jì)

非首要功能，不應(yīng)成為主路徑上的障礙。

在我常試過的很多記賬 App 中，它們都提供了密碼保護(hù)的功能，但也卻因?yàn)檫@個(gè)密碼保護(hù)功能使得記賬的操作多了很多的步驟。在這一點(diǎn)上，金蝶的 “隨手記” 做的不錯(cuò)，在密碼保護(hù)界面提供了快捷入口。然而從我個(gè)人的角度來看，我并不是非常喜歡在密碼保護(hù)界面多那么幾個(gè)快捷入口的方式，至少我希望在不影響實(shí)際體驗(yàn)的情況下，能使界面顯得更簡潔一點(diǎn)。我反復(fù)思考后得出的結(jié)論是：密碼保護(hù)需要保護(hù)的是賬單隱私，而不是 “記賬” 這個(gè)行為。

可以做一個(gè)大膽的設(shè)定，打開 App 后，如果直接進(jìn)入記賬界面，可以為我節(jié)省很多操作的步驟，甚至減去了密碼保護(hù)界面點(diǎn)擊一次快捷入口的行為。

于是重新設(shè)計(jì)的界面出爐了。

當(dāng)我打開 App，呈現(xiàn)在我眼前的就是記賬界面，我可以直接輸入數(shù)字以后點(diǎn)擊對(duì)勾就完成一筆記賬操作。右上角有個(gè)查看報(bào)表的功能入口，當(dāng)我點(diǎn)擊這個(gè)圖標(biāo)的時(shí)候，會(huì)彈出密碼框，輸入密碼就可以進(jìn)入報(bào)表界面。

智能一點(diǎn)點(diǎn)，就能提升用戶體驗(yàn)

回到此前思考的第二個(gè)問題，我記賬的目的是為了 “了解我的財(cái)務(wù)狀況” 。 所以預(yù)算功能及與其相關(guān)聯(lián)的提醒功能就變得尤為必要。我設(shè)想了一個(gè)叫做 “預(yù)算” 的功能，當(dāng)我設(shè)置了我每月的預(yù)算，并且每月的支出超出我設(shè)定的預(yù)算以后，那么在首頁的記賬界面，Titlebar 會(huì)變成紅色以警示你應(yīng)該省著點(diǎn)花錢。

至于我何時(shí)會(huì)記賬這個(gè)問題，因?yàn)樵诤芏鄷r(shí)候可能會(huì)存在我完成一筆消費(fèi)的時(shí)候記賬，因此我的想法是根據(jù)打開的時(shí)間來預(yù)判，比如午餐時(shí)間打開的話，分類圖標(biāo)則默認(rèn)選中 Food 選項(xiàng)。周末下午茶時(shí)間打開的話，分類圖標(biāo)則默認(rèn)自動(dòng)選中休閑類的選項(xiàng)，如果在程序開發(fā)上合入了智能學(xué)習(xí)的模塊，它甚至可以根據(jù)用戶的個(gè)人習(xí)慣，為每個(gè)記賬的時(shí)間作分類的選擇。通過使用預(yù)判的情況來減少我可能會(huì)去點(diǎn)擊的操作，從而減少不必要的步驟。

為效率服務(wù)，在交互細(xì)節(jié)上的優(yōu)化

在查看報(bào)表界面的時(shí)候，會(huì)遇到一些需要切換年份，月份或者周為單位的時(shí)候，因?yàn)槭謾C(jī)屏幕在不斷變大的情況下，如果將 Tab 放置在頂部，單手操作的時(shí)候切換會(huì)變得不太容易。因此對(duì)于切換時(shí)間這個(gè)維度的操作，我也重新思考了一下，利用下拉手勢(shì)來解決。

三、視覺設(shè)計(jì)

我給這款產(chǎn)品起名叫 Save+，也就是給予更節(jié)省的寓意，產(chǎn)品雖然是一個(gè)以記賬為目的的 App，但是我希望傳達(dá)給用戶的并不是我每個(gè)月花掉了多少錢，而是省下多少錢的感覺。因此在 icon 的設(shè)計(jì)上使用了儲(chǔ)蓄罐作為隱喻。

輕快、親和

簡單，是設(shè)計(jì)這個(gè) App 的初衷，視覺呈現(xiàn)上需要傳遞給用戶 “輕” 的感覺，簡明清晰的圖標(biāo)和鍵盤作為主界面的元素符合直觀的感受，讓人在打開后就能直接進(jìn)行操作。對(duì)每一枚分類圖標(biāo)都做了一個(gè)彩色選中態(tài)的處理，溫和的顏色使界面顯得不單調(diào)的同時(shí)更具親和力。

  

圖標(biāo)中的圖形奧義

分類 icon 眾多，視覺設(shè)計(jì)上保持統(tǒng)一的語言可以使整體感更強(qiáng)。對(duì)分類圖標(biāo)類型進(jìn)行視覺上的歸納后主要分為三種類型：圓形、方形和斜形，以此為依據(jù)保持圖標(biāo)的整體統(tǒng)一性和飽滿度。

結(jié)語

當(dāng)設(shè)計(jì)給定一個(gè)命題后，我相信從不同的使用場(chǎng)景和需求角度來解讀往往會(huì)給出不同的設(shè)計(jì)解，從實(shí)際的使用場(chǎng)景中出發(fā)，瞄準(zhǔn)一個(gè)哪怕很細(xì)微的痛點(diǎn)進(jìn)行思考，往往也能發(fā)現(xiàn)一個(gè)新的突破點(diǎn)，而這個(gè)突破點(diǎn)則更可能是直接起到?jīng)Q定產(chǎn)品差異化走向的關(guān)鍵因素。當(dāng)思路不夠開闊的時(shí)候，不妨?xí)簳r(shí)先放下手中的設(shè)計(jì)任務(wù)，先找出這個(gè)突破點(diǎn)，以此為設(shè)計(jì)的依據(jù)和導(dǎo)向來設(shè)計(jì)產(chǎn)品。