視覺效果和動畫效果已經成為產品設計中不可或缺的一部分,開發人員使用動畫效果可以創建引人入勝的內容,營銷人員可以使用這些效果來獲得更好的產品覆蓋率和良好的轉化率。倒數計時器就是這樣一種元素,當用戶登陸頁面時,它會給用戶產生一種緊迫感。
在我們的日常生活中,會看到各種各樣的倒計時設計效果,比如:視頻的開頭;APP啟動頁面的右上角;某些電子商務和活動網站的價格區域,等等。
毫無疑問,倒計時是非常有用的。在電子商務網站中,倒數計時器廣泛使用在特惠價附近,以使用戶感到機不可失。大多情況下,無論用戶是否有購買產品的意願,這種營銷技巧對用戶都是非常有效的。富有創造力的倒數計時器頁面設計可以獲得很多潛在客戶並提高產品的轉化率。那麼,如何用簡單的方法做出酷炫的倒計時效果呢?在下面列表中,小編給大家收集了十款最佳免費倒數計時器動效,我們一起來學習一下。
1.Watch Timer
智能穿戴設備在當今的受眾中正在迅猛增長, 進行健身運動時,智能手錶上最常用的功能之一就是計時器。 在這個倒數計時器設計中,設計師使用了不同的顏色。我們只需拖動頂部的時間滑塊即可設置「倒計時」時間。點擊「開始」圖標後,倒計時開始,環形進度條的進度也隨之減小,整體效果非常炫酷。
2.Daily UI
Daily UI倒數計時器設計非常富有創意,該計時器可以很好的用在產品發布會等大屏場合。 視覺效果非常流暢,即使在小型屏幕設備上也不會出現滯後現象。 使用白色的數字字體,和背景很好地融合在一起。
3.Storm
這個倒數計時器效果非常適合於電子商務網站和時尚網站。設計師使用了乾淨的圖像背景,整體文本在背景上看起來也非常簡潔、清晰。倒數計時器使用白色框突出顯示,與黑色的計時器刻度盤對比明顯,很容易引起用戶的注意。
4.Pomodoro Clock
整體設計看起來很時髦、現代且誘人。 這個倒數計時器不僅可以設置時間,還可以播放一些音樂。 默認情況下,此時鐘支持五種音軌,用戶可以根據自己的喜好更改音軌。背景使用了流行的漸變色,非常具有視覺衝擊力。
5.數字倒數計時器
這是一個非常常規的數字倒數計時器設計。整體設計非常簡潔,大方。使用的字體很大,富有現代感,可以讓用戶清楚地看到時間。另外,旋轉動畫是非常平滑乾淨的。尤其是在分鐘部分,過渡很順利。
6.倒數計時器
在這個倒數計時器中使用了卡片翻轉風格的效果,模擬日曆卡片的翻頁效果,趣味性很強。整體效果看起來非常平滑,整潔,尤其是分鐘和秒鐘內所有卡片同時翻轉時,你都可以體驗到效果的平滑度。此外,字體還精心的選擇了以配合復古的外觀和現代設計。
7.倒數計時器設計
這個倒數計時器中的圖像背景上的白色圓形刻度盤提供了非常清晰的視圖。頁面使用了分屏設計的布局形式,將頁面的內容保留在另側,而計時器保留在左側。 使用這種設計方式可以很好的向用戶告知某些信息。例如:如果網站因這種設計而需要維護,則可以清楚地指出需要花費多長時間。 此外,用於文本和計時器的字體非常乾淨且易於閱讀。
8.Online store
隨著假期的臨近,很多在線商店都在做產品促銷活動。上面的倒數計時器效果非常適用於商城網站。 此設計中的計時器具有天、小時、分鐘和秒的格式,可以幫助站主提醒用戶,給用戶心理帶來緊迫感。當然,也可以在電子郵件中使用此計時器,向客戶發送交互式電子郵件。
9.倒數計時器設計
倒數計時器使用斜體字體,背景使用輪播圖片的形式進行切換,看起來很吸引人。文本和倒數計時器雖使用了不同的字體,但它們彼此之間達到了完美的平衡,並為整體設計帶來優雅的外觀。
10.頂部倒數計時器設計效果
將倒數計時器置於頁面的頂部位置,而頂部一般都是顯示重要通知的最佳位置。 用戶進入頁面後,計時器非常顯眼,不會分心,同時,確保用戶至少會看到一次。 時鐘的每個部分都由細線隔開,動畫效果簡潔明了。
倒數計時器原型設計
在進行精美的UI界面設計之前,對界面進行原型設計是必不可缺的一步。還是老規矩,今天小編帶著大家使用原型工具Mockplus對倒數計時器效果進行簡單的原型設計。
首先,我們一起來看看效果:
設計步驟解析
1)拖出圓形組件,對其設置文本、背景色及去掉邊框。
2)複製4個同樣的組件,並輸入對應數字(最後一個設為空白)。
3)5個組件分別對自己設置交互,選擇觸發方式為「載入時」,效果為顯示/隱藏。
4)分別設置好延遲時間。
操作教程如下:
小結
倒數計時器的使用場景非常多,如果我們使用得當,會給我們帶來非常有效的效果。當然,這些前提是我們有一個優秀的倒數計時器設計,對倒數計時器感興趣的設計師,可以結合上面的實例和想法去設計一個屬於自己的倒數計時器。