Listify

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

軟件介紹：

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

但是，為什么沒有右滑完成？雖然屏幕右側(cè)的原點代表了是否完成，但是滑動表示完成不也是順理成章么？右滑手勢居然不存在…

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

軟件開發(fā)歷程：

原型設(shè)計

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

那么接下來，為這個App取一個名字吧，取名字的過程我們想了很久，因為很多GTD應(yīng)用的名字都大同小異，xxlist，xxtodo，xxdo。想了一些時間最后將這款A(yù)pp命名為Listify，是List + ify 英文后綴，意思是將一切待辦列表化。

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

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

交互設(shè)計

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

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

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

開發(fā)

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

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

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

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

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

不斷增加的功能

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

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

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

后來覺得要是在主界面不想看的卡片可以折疊就再好不過了：

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

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

圖標(biāo)

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

用戶引導(dǎo)

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

漢化 & 測試

為了防止有的用戶因為沒有中文給差評，所以多語言也是必要的。

在最終發(fā)布之前還需要在不同的機器上去測試確保界面適配沒有問題。