日常生活中，我們會(huì)看到各種各樣的倒計(jì)時(shí)設(shè)計(jì): 或是在一段視頻的開頭；或是隱蔽在屏幕右上角，用于顯示廣告的時(shí)長；或是在軟件啟動(dòng)頁面，用于增強(qiáng)用戶對后面出現(xiàn)內(nèi)容的期待。不可否認(rèn)，倒計(jì)時(shí)是非常有用的。那么，如何用簡單的方法做出酷炫的倒計(jì)時(shí)效果呢？我們一起來學(xué)習(xí)一下。

工具：Mockplus

所需時(shí)間：3分鐘

用Mockplus來做交互，最大的特點(diǎn)就是簡單快速。下圖中這個(gè)倒計(jì)時(shí)效果，只需三步就可以實(shí)現(xiàn)。

?步驟一：自定義倒計(jì)時(shí)樣式

啟動(dòng)Mockplus，從左邊的組件庫中拖出一個(gè)圓形組件，雙擊組件輸入數(shù)字。

在右側(cè)的屬性面板中，將圓形的邊框調(diào)整為不可見。此處我們將組件內(nèi)顏色設(shè)置為灰色，數(shù)字顏色設(shè)置為白色。

選中這個(gè)組件，同時(shí)按下Alt鍵，將組件復(fù)制4份，并輸入對應(yīng)的數(shù)字（最后一個(gè)設(shè)置為空白圓形）。

?

?步驟二：設(shè)置交互

想實(shí)現(xiàn)倒計(jì)時(shí)的效果，只需讓這幾個(gè)圓形陸續(xù)出現(xiàn)即可。在Mockplus中，我們很容易實(shí)現(xiàn)這一點(diǎn)。

將原型4的連接點(diǎn)拖到圓形內(nèi)部，選擇“載入時(shí)”，“顯示/隱藏”。

?在右側(cè)的屬性面板，將組件設(shè)置為不可見。

?在右側(cè)的交互面板，設(shè)置可見性為顯示，延遲為300ms, 執(zhí)行時(shí)長為200ms。

同理，為圓形2設(shè)置同樣的交互，延遲設(shè)置為800ms (300ms+300ms+200ms )。

?

?

步驟三：合并這5個(gè)圓形

將5個(gè)圓形按照出現(xiàn)的先后順序從下層到上層重疊起來。點(diǎn)擊預(yù)覽，即可看到文章開頭的倒計(jì)時(shí)效果。

?是不是很簡單呢？其實(shí)，不僅僅是倒計(jì)時(shí)，利用Mockplus還可以實(shí)現(xiàn)各種各樣的交互效果，比如常用的手風(fēng)琴菜單，鼠標(biāo)懸停菜單下拉等等。除此之外，Mockplus的官方教程中還提供了許多獨(dú)特的設(shè)計(jì)方法，并體現(xiàn)了令人驚嘆的設(shè)計(jì)思維。不信你可以去看看“利用滾動(dòng)區(qū)設(shè)置懸浮效果”這一章，看完一定很有收獲。????