關(guān)于番茄鐘的概念，是指在25分鐘內(nèi)專心地完成一件事件，不要受其它事件的干擾。

現(xiàn)在各大應(yīng)用市場(chǎng)上番茄鐘種類繁多，但功能基本大同小異，多半在界面上有所差異，但是這些番茄鐘設(shè)置太麻煩，不符合懶人使用，既要輸入文字，又要選擇時(shí)間，設(shè)置顏色，設(shè)置時(shí)間等等，太繁瑣太繁瑣，所以這里想設(shè)計(jì)一款只需要簡(jiǎn)單操作后就可以開始的番茄鐘，不需要進(jìn)行太多的輸入。

要輸入什么的最煩人了，我只希望選擇一下就能開始。

下面主是針對(duì)這種情況設(shè)計(jì)的一款簡(jiǎn)潔的番茄鐘——Focus15，先看一下效果圖：

單擊這里查看在線演示

源文件在這里下載（人人官方下載地址：http://pan.baidu.com/s/1sjZAl5N 密碼：szpx）

說說它的主要功能，也是原型的主要功能：

1. 左右拖動(dòng)大按鈕，啟動(dòng)/停止任務(wù)，開始計(jì)時(shí)
2. 在任務(wù)未啟動(dòng)時(shí)，可以選擇時(shí)長(zhǎng)，單擊文字15：00彈出時(shí)長(zhǎng)對(duì)話框選擇，可選擇四種時(shí)長(zhǎng)
3. 單擊下方的任務(wù)類型切換任務(wù)，重新計(jì)時(shí)
4. 單擊提醒方式，在響鈴、振動(dòng)、響鈴且振動(dòng)三種方式之間切換，如果你不想打擾別人，設(shè)置為振動(dòng)吧
5. 單擊右上角的時(shí)間總計(jì)，彈出任務(wù)統(tǒng)計(jì)，一段時(shí)間之后可以看出你在各類事情上花的時(shí)間
6. 在任務(wù)統(tǒng)計(jì)對(duì)話框中，可以切換背景
7. 倒計(jì)時(shí)結(jié)束后彈出對(duì)話框提示任務(wù)完成

下面說一下原型的關(guān)鍵代碼

1、關(guān)于開關(guān)拖動(dòng)按鈕

1）按鈕拖動(dòng)一定距離后，自動(dòng)設(shè)置為開啟或停止?fàn)顟B(tài)，移動(dòng)按鈕到指定左邊和右邊

2）我們知道axure里一直不能設(shè)置蒙板效果，你知道這里帶有圖形和文字的的半圓形拖動(dòng)按鈕是如何實(shí)現(xiàn)的嗎？

2、關(guān)于倒計(jì)時(shí)

1）倒計(jì)時(shí)是將分鐘數(shù)轉(zhuǎn)換成秒數(shù)，每隔一秒減一，實(shí)現(xiàn)倒計(jì)時(shí)效果

2）倒計(jì)時(shí)使用組件的show和hide事件來控制，這時(shí)常見的計(jì)數(shù)的方法

3）注意如果計(jì)算出的分鐘數(shù)或者秒數(shù)小于0時(shí)，前面要補(bǔ)0哦，例如8秒，要顯示成08秒

3、關(guān)于提醒方式的設(shè)置

只需要在動(dòng)態(tài)面板的三個(gè)狀態(tài)間切換即可，每個(gè)狀態(tài)是一張圖標(biāo)，分別代表響鈴、振動(dòng)、振動(dòng)并響鈴三種

4、關(guān)于任務(wù)類型的選擇

1）圓形按鈕通過設(shè)置組件的交互樣式，設(shè)置選中狀態(tài)的樣式為背景填充顏色

2）如何體現(xiàn)單選效果？先將幾個(gè)圓形按鈕設(shè)置為非選中狀態(tài)，再設(shè)置當(dāng)前單擊的按鈕為選中狀態(tài)

5、幾個(gè)全局變量的說明

1. running：表示當(dāng)前任務(wù)開始執(zhí)行
2. total_seconds：分鐘數(shù)轉(zhuǎn)換成的總秒數(shù)
3. time_type：時(shí)間類型，值為15、25、45、60，單位為分鐘，通過它乘以60轉(zhuǎn)成秒數(shù)total_seconds
4. mins、secs：tocal_seconds轉(zhuǎn)換成的分鐘數(shù)，秒數(shù)
5. sMins、sSecs：實(shí)際用來顯示分鐘數(shù)和秒數(shù)的變量，因?yàn)橐幚硇∮?0的數(shù)字，前面要補(bǔ)0的

實(shí)際的APP里，還有如下功能，只為了使用更帖心，但是這種不好在原型里體現(xiàn)。

1、要能在后臺(tái)運(yùn)行

按返回鍵，或者HOME鍵，應(yīng)用在后臺(tái)運(yùn)行，并在狀態(tài)欄顯示，否則你可能以為它停止了

2、鎖屏或待機(jī)狀態(tài)的解鎖

當(dāng)任務(wù)完成后，需要點(diǎn)亮屏幕，并在鎖屏界面顯示

原型后期可進(jìn)一步完善的功能

1、數(shù)據(jù)統(tǒng)計(jì)：以圖表的方式展示你這一年的任務(wù)完成情況

2、任務(wù)勛章：當(dāng)你的任務(wù)完成時(shí)間達(dá)到一定分鐘數(shù)后，就能獲得對(duì)應(yīng)的勛章哦！

本文由 @Axure原型設(shè)計(jì)工場(chǎng)?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。