「設計作品」最佳倒數計時器設計分析(附原型實例)

2021-01-17 Mockplus摹客

視覺效果和動畫效果已經成為產品設計中不可或缺的一部分,開發人員使用動畫效果可以創建引人入勝的內容,營銷人員可以使用這些效果來獲得更好的產品覆蓋率和良好的轉化率。倒數計時器就是這樣一種元素,當用戶登陸頁面時,它會給用戶產生一種緊迫感。

在我們的日常生活中,會看到各種各樣的倒計時設計效果,比如:視頻的開頭;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)分別設置好延遲時間。

操作教程如下:

小結

倒數計時器的使用場景非常多,如果我們使用得當,會給我們帶來非常有效的效果。當然,這些前提是我們有一個優秀的倒數計時器設計,對倒數計時器感興趣的設計師,可以結合上面的實例和想法去設計一個屬於自己的倒數計時器。

相關焦點

  • 數字電路設計盲點實例與對策分析
    介紹有關數字電路設計盲點的內容,將分別針對Tinning、數據傳輸、消耗電流、HDL編寫等項目,輔以實例進行現象、原因分析以及對策探討。首先要介紹的是二進位計數器(Binary Counter)的設計。
  • 2020金點設計獎、金點概念設計獎「年度最佳設計獎」揭曉
    設計圈年度盛會「2020 金點設計獎頒獎典禮」,於 12/11 晚間在臺北壹電視攝影棚盛大舉行,並揭曉象徵最高榮譽的「年度最佳設計獎」得主!今年金點設計獎及金點概念設計獎共近8千多件作品參賽,經三階段評選,最後選出 24 件「金點設計獎年度最佳設計獎」、3 件「金點設計獎年度特別獎」、3 件「金點概念設計獎年度最佳設計獎」以及 1 件「年度特別獎── ConceptD 創能無限獎」得主。今揭曉兩獎項之得獎作品,臺灣一舉囊括 20 件為最大贏家,來自中國大陸、香港、泰國、波蘭等地作品亦表現亮眼。
  • 2019金點設計獎、金點概念設計獎「年度最佳設計獎」獲獎名單全覽!
    今年金點設計獎及金點概念設計獎參賽件數創下新高,共收到全球31地、高達7,937件作品,最後選出30件「金點設計獎年度最佳設計獎」、2件「金點設計獎年度特別獎」以及3件「金點概念設計獎年度最佳設計獎」,競爭激烈。在兩個獎項中,臺灣囊括19件,表現最為突出。
  • 2019金曲獎「最佳專輯裝幀設計獎」入圍作品出爐!
    然而吸引小編的卻是另一個入圍名單——「最佳專輯裝幀設計獎」。01.泥灘地浪人:《擒虎記》設計師:黃家賢、楊豐銘/Hold That Tiger / 《擒虎記》專輯裝幀設計取材東西方流傳於民間的古籍木刻版畫,鄉土、市井樸質而帶有粗糙感,將不相干的元件抽離自原有語境,解構拼貼並以繪畫與編排技巧縫合,先翻新而後又再復舊,設計在東西美學觀點象限中心交會,密密鋪陳了專輯中的每一篇幅,未存在一絲絲現代主義思維下的留白。
  • 設計賞析|2020金點設計獎「年度最佳設計獎」獲獎作品
    設計圈年度盛會「2020金點設計獎頒獎典禮」近日盛大舉行,並揭曉象徵最高榮譽的「年度最佳設計獎
  • 2014金點設計獎21件「年度最佳設計獎」
    2014年金點設計獎12月11日於臺北松煙誠品展演廳舉行盛大的頒獎典禮,備受各界矚目的「年度最佳設計獎」得獎名單揭曉,21件得獎作品中
  • 2014金點設計獎21件「年度最佳設計獎」名單揭曉 大陸獲得5件年度最佳設計獎 成績輝煌
    2014年金點設計獎昨晚(12月11日)於臺北松煙誠品展演廳舉行盛大的頒獎典禮,備受各界矚目的「年度最佳設計獎」得獎名單揭曉,21件得獎作品中,
  • 趙沅灃 * 應永會 「設計接力」第二期直播 開啟免費報名
    由Design360°主辦的「2019 Award360°100年度設計獎」(簡稱Award360°)在去年12月正式落下帷幕。由韓家英、色部義昭、Jaemin Lee、李永銓和劉治治五位專業設計師組成的評審團經過認真的討論與評判,評選出年度100件設計作品(其中共誕生1名全場大獎及11組年度最佳設計作品)、6名年度畢業設計獎,以及3位年度新人。
  • 揭曉 | 2020金點新秀設計獎 年度最佳設計獎、循環設計特別獎作品賞析
    今年共頒發8件「金點新秀年度最佳設計獎」、40件「金點新秀設計獎」、3件「金點新秀循環設計特別獎」及49件「金點新秀贊助特別獎」,肯定年輕學子的優秀創意。在各校得獎表現方面,國立臺灣科技大學榮獲9項拿下第一、嶺東科技大學得8項排名第二、國立臺灣藝術大學及輔仁大學獲5項分居第三;其中,嶺東科技大學更一舉囊括包裝、時尚、社會設計類的年度最佳設計獎,表現亮眼。
  • 「原型設計」如何利用Axure實現下拉子菜單?
    Axure RP是一款專業的快速原型設計工具,讓我們能夠快速設計並創建出應用軟體或Web頁面的具備高保真和交互能力的原型。通過原型設計,不但能更好地與客戶進行交流確認,也能明確地給開發人員以成品效果作為開發指導。本文介紹如何透過這款工具實現下拉子菜單功能的原型設計。
  • 賽事資訊 | 2020金點設計獎「年度最佳設計獎」出爐!
    金點設計獎目標針對上市量產的作品,歷經了三十多年的發展,已成為優質設計作品的代名詞,參賽廠商超過數千家,報名作品已累積了上萬件,領域涵蓋了產品設計、空間設計、傳達設計、整合設計。每年皆遴選出上百件作品,授與「金點設計標章」,代表對商品品質的肯定,並從中選出15-20件年度最佳設計大獎,授與象徵至高榮譽的獎盃一座。
  • 從0設計App(7):基於產品定位做 UI 設計
    至此,我們完成了app的定位、系統架構、產品結構、重要的2大流程圖(業務、頁面流程圖)以及所有頁面的原型稿和交互稿,接下來本文將圍繞UI的設計展開。本系列是筆者拆解從0到1設計「職得App」,這個作品幫助我拿了好幾個offer,因此特別展開分享給大家。
  • 2019 金點新秀最佳設計獎八大作品完整欣賞
    在新一代設計展會場世貿一館隆重舉辦頒獎典禮,今年共頒發40 件「金點新秀設計獎」、72 件「金點新秀設計獎贊助特別獎」、3 件「金點新秀創業潛力特別獎」,而備受矚目的「金點新秀年度最佳設計獎」8 件得獎名單壓軸揭曉,分別由8大類評審團代表易瑋勝、徐景亭、廖俊裕、盧淑芬
  • 前端設計-JavaScript簡單數字時鐘開發實例
    簡單數字時鐘開發實例藉助於JavaScript window對象所提供的計時觸發函數setInterval可以實現前端動畫效果的設計與製作。本例主要以setInterval方法為基礎介紹簡單數字時鐘的開發實例。
  • 逸硯空間設計陳佳儒「暮靄·晨光」榮獲德國柏林設計Shortlist
    起源於設計界重鎮之一的德國──Berlin Design Awards 柏林設計大獎,仿佛是一塊吸力強勁的磁鐵,每每吸引全球傑出設計作品競相報名參賽,無不渴望躋身大獎行列。逸硯空間設計作品「暮靄·晨光」以材質樸實而美麗的特質,將平靜和諧的氛圍與對母親的愛,刻畫出家人的共享空間,成功獲得Berlin Design Awards Shortlist。
  • 不亂設計,才是最好的設計 | 2020 Wallpaper 年度最佳設計
    「設計界的聖經」。此次最佳公共建築,並非城市地標,而是德克薩斯州南部的一座基金會的藝術中心,這座閃耀的建築名為「紅寶石城」。年度家居產品設計,頒發給了一對比利時夫妻,他們以材料為驅動,設計出「生活的景觀」——「Match」廚房,彩色面板搭配黃銅細節和柔滑臺面,與中性風的廚房相比,顯得俏皮而另類。
  • 零錢歸位、面紙「重生」——九磨設計
    轉轉零錢盒臺灣九磨設計有限公司,2015年創立於臺北,同年底 mordeco 註冊於美國,設計風格融合現代與古典,強調雕塑感設計,運用『材質』與『光影』形成獨樹一格的視覺享受。因此我們設計了"轉轉零錢盒"。好開,專利磁力旋轉機構,滑開取物一氣呵成。好放,漏鬥形結構,零錢輕鬆滑落。適用全世界通用硬幣大小。
  • 以Zara應用優化為例,談談「設計思維」該如何落地
    沒看錯,就是你們熟悉的那個服裝品牌Zara,這篇文章作者 William Ng 運用了「設計思維」的模式,分析了手機應用的可用性,並提出了改進建議。算是對的具體案例運用。Zara是我最愛的服裝品牌之一。但每次使用他們的軟體,我都感覺有各種問題。所以我做了一個 Zara 的可用性測試與分析,來看看是不是別的用戶也和我一樣有同樣的煩惱。
  • 第29屆金曲獎入圍名單揭曉,入圍「最佳專輯裝幀設計獎」的是......
    2018年金曲獎林俊傑以專輯「偉大的渺小」張惠妹以「偷故事的人
  • 第29屆金曲獎「最佳專輯裝幀設計獎」名單揭曉
    首先他花了超過一周時間「手工」畫了數張海浪原稿,最大超過A1尺寸,小的也有30公分見方,每張原稿也畫了數張草稿確認感覺,汗水隨著他肌肉線條拌著一筆一刻融入作品(認識他的人就知道為了北極熊他堅持不開冷氣),行書刻畫間充滿霸氣,筆鋒勾勒處又溢滿細膩,藝術家風骨在作品中顯露無遺,宛如一場修行。