Listify

Listify是一款界面非常簡(jiǎn)潔的todo類應(yīng)用，你可以將日常要做的事情通過(guò)軟件記錄下來(lái)，然后根據(jù)時(shí)間段安排你的工作內(nèi)容。這款軟件可以通過(guò)手勢(shì)操作，并且還附帶一個(gè) 3 天開發(fā) Listify 的故事。

軟件介紹：

Listify 通過(guò)卡片顯示不同的任務(wù)分類，點(diǎn)擊卡片名稱可以收縮、擴(kuò)展，添加時(shí)選擇不同的分類就用不同的顏色，左滑編輯、存檔，下滑新建，這些都是非常常見與傳統(tǒng)的手勢(shì)。

但是，為什么沒(méi)有右滑完成？雖然屏幕右側(cè)的原點(diǎn)代表了是否完成，但是滑動(dòng)表示完成不也是順理成章么？右滑手勢(shì)居然不存在…

開發(fā)者在為不同設(shè)備適配界面

軟件開發(fā)歷程：

原型設(shè)計(jì)

想要設(shè)計(jì)一款A(yù)pp那么肯定不能直接打開開發(fā)環(huán)境動(dòng)手寫，至少需要知道這個(gè)App有什么功能，最終我決定實(shí)現(xiàn)一個(gè)可以創(chuàng)建多個(gè)分類列表的todo list，然后標(biāo)記完成了哪個(gè)任務(wù)就把那個(gè)事項(xiàng)清除掉，就這么簡(jiǎn)單，兩句話就把功能需求講完了。

那么接下來(lái)，為這個(gè)App取一個(gè)名字吧，取名字的過(guò)程我們想了很久，因?yàn)楹芏郍TD應(yīng)用的名字都大同小異，xxlist，xxtodo，xxdo。想了一些時(shí)間最后將這款A(yù)pp命名為L(zhǎng)istify，是List + ify 英文后綴，意思是將一切待辦列表化。

有了名字，那么在開發(fā)環(huán)境上就可以建立項(xiàng)目了，不過(guò)在此之前，得先有一個(gè)大概的設(shè)計(jì)吧，于是我打開Sketch，畫出了App的第一張?jiān)�型設(shè)計(jì)：

整個(gè)界面背景為淡灰色，每一個(gè)List用一個(gè)卡片實(shí)現(xiàn)，不同的卡片擁有一個(gè)不同的主題顏色加以區(qū)分，底部打上了很寬但是很淺的陰影來(lái)和背景區(qū)分并且產(chǎn)生立體的效果�？ㄆ�里就是待辦事項(xiàng)，完成的事情會(huì)變成淡灰色并且劃掉，右邊的CheckBox會(huì)被選中。很簡(jiǎn)潔的設(shè)計(jì)。

交互設(shè)計(jì)

這樣的界面是很簡(jiǎn)潔，也很好看，不過(guò)交互就成了問(wèn)題，我以前開發(fā)的App都會(huì)給用戶明確的交互，按鈕是我常用的控件，但是設(shè)計(jì)成這樣很難再去添加一個(gè)按鈕了，在Android的設(shè)計(jì)規(guī)范中中是有右下角的一套 Floating Action Button （FAB）可以用，但是加上去又會(huì)破壞整體性

那么只好用手勢(shì)了，在移動(dòng)應(yīng)用中上拉一個(gè)列表執(zhí)行添加或者刷新操作是很常見的，所以上來(lái)添加新的todo的交互就定下來(lái)了，剛好iOS自帶組件有一個(gè)UIRefreshControl組件可以輕松實(shí)現(xiàn) （是的，懂開發(fā)的設(shè)計(jì)師就是不一樣，從來(lái)不在設(shè)計(jì)上給自己挖坑）。

那么既然交互和原型設(shè)計(jì)都做好了，直接打開開發(fā)環(huán)境來(lái)實(shí)現(xiàn)這個(gè)App吧！

開發(fā)

“定實(shí)現(xiàn)一個(gè)可以創(chuàng)建多個(gè)分類列表的todo list，然后標(biāo)記完成了哪個(gè)任務(wù)就把那個(gè)事項(xiàng)清除掉”，這是我在原型設(shè)計(jì)上寫到的，當(dāng)時(shí)給我的感覺(jué)是，好簡(jiǎn)單啊，我只需要實(shí)現(xiàn)一個(gè)兩張數(shù)據(jù)表的數(shù)據(jù)庫(kù)然后去讀數(shù)據(jù)然后就能把那個(gè)主界面繪制出來(lái)啦，估計(jì)從9點(diǎn)寫到晚上一兩點(diǎn)就能實(shí)現(xiàn)一個(gè)能用的東西了，畢竟我也獨(dú)立開發(fā)過(guò)比較大型的應(yīng)用，寫個(gè)這個(gè)對(duì)我來(lái)說(shuō)不是很困難，明天就能交差了。

于是我花了2個(gè)小時(shí)才實(shí)現(xiàn)了主界面的大概樣子。。從空的卡片，到加入主題標(biāo)簽，到加入待辦任務(wù)，并且，這樣實(shí)現(xiàn)的界面還不是動(dòng)態(tài)的。

并且，我遠(yuǎn)遠(yuǎn)低估了這個(gè)項(xiàng)目的規(guī)模，這個(gè)App聽起來(lái)很簡(jiǎn)單，列表，待辦，就這兩個(gè)東西。

學(xué)過(guò)數(shù)據(jù)庫(kù)的同學(xué)都知道，一條數(shù)據(jù)，擁有增刪改查（CRUD）四個(gè)操作。

想要有一個(gè)新的todo列表，就得去創(chuàng)建他，想要?jiǎng)?chuàng)建，那就得再寫一個(gè)界面，還要搭配刪除和更改的操作，待辦事項(xiàng)也是一樣的，也得再去實(shí)現(xiàn)一個(gè)頁(yè)面。并且這些東西都有了，那總得有個(gè)設(shè)置界面吧，于是又多了一個(gè)界面吧。這么多待辦事項(xiàng)，刪掉了總得歸檔吧，那歸檔又得再多一個(gè)界面，就是這樣，需要實(shí)現(xiàn)的界面一個(gè)一個(gè)多了起來(lái)。這真的是跪著寫了。

不斷增加的功能

好的，既然要實(shí)現(xiàn)這么多界面，那我還是好好寫吧，寫一個(gè)可以上架的應(yīng)用好了，那么原本這么點(diǎn)功能就拿不出手了啊，別人家的App都有通知功能，我沒(méi)有那不是很不好意思。一個(gè)列表的任務(wù)總得可以排序吧，于是數(shù)據(jù)庫(kù)里又得多一個(gè)字段。

在添加功能的同時(shí)，設(shè)計(jì)也在不斷地變更，下圖左邊是一開始的添加Todo設(shè)計(jì)，主色為黑色，選擇不同列表的地方使用各自列表的主題顏色，但是后來(lái)發(fā)現(xiàn)，因?yàn)榱斜淼闹黝}色很多，所以很亂，就改成了右邊這個(gè)選中一個(gè)列表的時(shí)候整個(gè)界面跟著主題色變得方案。

在todo列表添加界面也做了相同的設(shè)計(jì)，并且為todo列表管理單獨(dú)做出了一個(gè)界面用來(lái)排序，編輯和刪除。

后來(lái)覺(jué)得要是在主界面不想看的卡片可以折疊就再好不過(guò)了：

就這樣，原本的界面功能在增多，又有更多的新界面需要設(shè)計(jì)出來(lái)。還有就是交互上的方案的增加，在主界面中根本沒(méi)有地方放下一個(gè)設(shè)置界面的入口，思來(lái)想去最后選擇了用兩個(gè)手指來(lái)捏合（Pinch）屏幕來(lái)進(jìn)入設(shè)置。并且，搖晃手機(jī)可以清除掉已經(jīng)完成的任務(wù)。不過(guò)這樣的交互必須有人提前告訴你才行啊，要不誰(shuí)會(huì)知道呢？

于是，在實(shí)現(xiàn)了這些功能之后，時(shí)間已經(jīng)過(guò)去了兩天半，遠(yuǎn)遠(yuǎn)超過(guò)了我五個(gè)小時(shí)拿出一個(gè)可以用的原型的預(yù)期。

圖標(biāo)

App快做完了，我也準(zhǔn)備把他拿來(lái)日常使用了，那么沒(méi)有一個(gè)圖標(biāo)可不行啊，于是又花了一點(diǎn)時(shí)間想圖標(biāo)，最后選擇了倒數(shù)第二個(gè)

用戶引導(dǎo)

前兩段段最后提到了一些很難想到的交互，于是第一次啟動(dòng)的用戶引導(dǎo)界面就成了重要的一環(huán)，雖然這個(gè)環(huán)節(jié)開發(fā)寫的代碼很少，但是要畫好多圖倒是真的。

漢化 & 測(cè)試

為了防止有的用戶因?yàn)闆](méi)有中文給差評(píng)，所以多語(yǔ)言也是必要的。

在最終發(fā)布之前還需要在不同的機(jī)器上去測(cè)試確保界面適配沒(méi)有問(wèn)題。