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

2020-12-06 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)分別設置好延遲時間。

操作教程如下:

小結

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

相關焦點

  • 90後設計天才龔華超獲得了「設計中國」特展的全場大獎
    而這場特展就是最近備受全球設計和藝術家關注的「2018 丹麥創意商業杯·設計中國」。丹王子約阿希姆殿下親自為中國設計師龔華超頒獎90 後設計師亮相「設計中國」大展,代表中國得到丹麥王子青睞特展組委會認為,90 後設計師龔華超的作品「Nums
  • 「太空時代」的設計
    例如:基於對美國大眾文化產品的研究,而在英國興起的「波普運動」;試圖顛覆資本社會傳統利益語境的義大利「激進運動」;隨著加加林登月悄然而至的「太空時代美學」;以原始自然為靈感的「嬉皮士風」。筆者在今天主要為大家分享的是「space age」的優秀設計,波普、反設計、嬉皮士、迷幻風格也都會在之後的篇幅中講到,大家可以持續關注。
  • 這雙FILA,是三原康裕最「粗心」的設計?
    作為繼 FM1 之後,FILA 與三原康裕聯手帶來的又一雙話題鞋款, FILA ADE MIHARA 格子鞋的誕生故事便一直與 「錯誤」相伴。縱觀鞋身,除了致敬 FILA 網球歷史及表白東京街頭的格紋設計外,鞋身側面扎眼的 FILA x Maison MIHARA YASUHIRO 標籤無疑是鞋款最突出的視覺焦點。
  • 《寶可夢劍盾》精靈設計原型考察:第一期
    這組寶可夢的原型都來源於梭魚,具體則指向大鱗魣(オニカマス/barracuda)。大鱗魣是一種非常兇猛的魚類,它們會尋找小魚群,以猛烈的速度衝向它們,速度可達150km/h,別名「活魚雷」。  這兩隻寶可夢延續了GameFreak從第五世代開始的「雖然是海洋生物但並不賦予水屬性」的一貫設計。它們的原型來自章魚,具體則指向藍環章魚(豹紋蛸/Blue-ringed octopus)。
  • 如何進行產品設計調研分析
    設計調研的目的是為了能有效的指導設計活動開展和產生積極的結果。通俗點說,就是要弄清楚人們想要什麼,然後通過設計來給予他們。調研形式針對產品所處的階段,設計調研通常可以分為兩種形式「已有產品」和「全新產品」。針對「已有產品」,通過調研找出產品存在的問題並進行改進,提升產品體驗。
  • De Castelli攜18件經典設計作品精彩首秀「設計上海2020」
    被譽為義大利金屬藝術大師的De Castelli品牌攜18件經典設計作品首度精彩亮相「設計上海2020」。作品分別來自於Collection家居系列,Surface飾面系列和Architectural構建系列。
  • 設計說明|2020「展陳創意大賽」「銀展獎」作品——<統戰>光影藝術...
    為了精準把控1400顆子彈的空間位置,布景師與設計師運用三維軟體,逐條分析模擬陣列組合分級,創建結構矩陣,將這1400顆子彈逐級放樣,360度全方位觀測,逐顆調整,確保每顆子彈的空間位置及視覺效果;同時,為了保證光影效果,軟體工程師不斷在數媒空間中模擬不同點位燈光投射,尋找光線來源的最佳角度,確保光影成形的最佳瞬間,並嘗試多層燈光遮罩,提升光影的運用。
  • 藝趣分享 | 2020臺北設計獎:視覺傳達設計類作品來啦!
    就以本屆「臺北設計獎J徵件為例,共有來自72個國家及地區,高達5,508件作品參賽,徵件數為歷史新高,其中國際設計師作品比例近7成,業界人士參賽比例亦超過5成,表示市府在塑造「設計臺北、夢想臺北」的城市品牌意象的裡程碑,未來也持續推動將臺北市作為設計產業的匯流平臺。
  • 2019 Archiproducts設計獎出爐!家具類獲獎作品來了
    2019Achriproducts Design Awards精選產品 F君特意挑選了22件獲得最佳家具設計大獎的作品分享給大家,希望你能從這些獲獎作品中獲取啟發喲~ 01.
  • hfss腔體濾波器設計實例
    打開APP hfss腔體濾波器設計實例 黎濤 趙霞 發表於 2017-10-25 19:55:14   在微波帶通濾波器的設計中
  • 《寶可夢劍盾》精靈設計原型考察 蟲子還能變成龍?
    火神蛾家族的設計主題是基於「太陽」,而這組寶可夢(主要是最終進化型)的設計可能是基於「月亮」,其月亮元素體現在原型和進化方式(夜晚親密度)上。  初始階段尚且沒有月亮元素,從外觀上看,它的原型可能是參考了寶石毛蟲(ジュエル・キャタピラー/Jewell Caterpillar)。
  • 後臺產品經理的原型設計規範
    要想落地產品上線,原型的設計必不可少。 後臺產品是對前端信息架構的映射,前端要展示什麼後臺就要有什麼,比如PMTalk提供的體驗報告。 針對C端、B端原型設計,兩者聚焦的點一個是核心功能,一個是每個業務的主要功能。
  • 原研哉也要叫前輩,日本國寶級設計大師|日本設計|平面設計|龜倉雄...
    若論當代日本最受景仰也最具代表性的設計巨匠,當柳宗理莫屬。柳宗理個人極堅持以「手」進行設計。特別是家用器皿器具的部分,不畫設計圖,直接手工開始製作。真正做到了從「用」出發。日本工業設計第一人柳宗理雖受到包浩斯和勒·柯布西耶的影響,但他在主持日本民藝館時他的主要興趣仍在日本鄉土文化上。
  • EMC設計之工程實例——開關電源設計
    通常,仿真軟體對於EMC/EMI類問題工程問題的處理過程為「建模-》復現問題-》改進設計」。然而,EMC/EMI問題具有隨機性和多變性的特點,因此,完整的「復現」一個實際工程中的EMC/EMI問題是很難做到。Ansoft提供的「自頂向下」的EMC解決方案可以輕鬆解決這個問題。
  • 海流設計:主張任何的設計都應從解決需求開始
    先看一組品牌設計作品。客戶是森一設計,其專注於室內設計,服務從商業空間、新居到老屋改建,旨在創造人與空間舒適和諧的緊密關係。 介紹一下海流設計團隊。崇尚「形隨機能」的概念,認為設計的每個元素皆是隨著機能需要而設計或改變的,並非意義的裝飾活動。
  • 「光盒物倉」上海西岸首展 光合機構&泛域設計
    本次西岸藝術與設計博覽會陣容強大,光合機構作為全球9家機構之一,參加了「設計單元」。「光盒物倉」是光合機構最新推出的業務板塊。它聚焦於物,基於設計美學和生活智慧,為各類商業與生活空間提供物的設計、選配與陳設方案,以「原創設計、甄選好物、創意陳設」為特色。
  • 社企民間高峰會2019主題「設計快樂」
    逾20項活動 60位社創界領軍人物雲集香港由香港社會創業論壇主辦、20間機構合辦的第十二屆社企民間高峰會 (「SES 2019」) 將於11月21至25日舉行,今年的主題是:「設計快樂」,並設有「快樂周六」的全新「圓桌」環節及互動工作坊,凝聚香港民、商、學、官以及其他來自不同地區的人士
  • 「手辦」Myethos《白色相簿2》小木曾雪菜 花嫁 婚紗手辦
    出自受到眾多粉絲喜愛的著名戀愛遊戲《白色相簿2》,女主角「小木曾雪菜」登場!將負責遊戲角色設計及插圖的なかむらたけし所繪製的婚紗造型雪菜首次製成模型!雪菜身上的婚紗與周圍的花瓣,點綴她的妖豔魅力。純白色彩與玫瑰的豔紅,襯託雪菜的風韻與美貌。快把她帶回家吧。
  • 看看老外的腦洞:災害充電寶+千年計時器
    災害充電寶日本是一個自然災害頻發的國家,為了對抗這些災害,一些腦洞人士推出了不少好東西,比如這個災害充電寶「Atease」,作為一款多功能可攜式移動電源,其特別之處主要在於三點:無線輸電(符合QI無線充電標準的設備)
  • 「七邊形」設計機型海外眾籌,驍龍 865 加持
    近年來手機造型「千篇一律」成了不少網友所吐槽的地方,但隨著「摺疊屏」等設計方案實現量產,消費者們有了更為豐富的選擇。近日一款名為 Brandeis Prometheus 的機型在海外發起眾籌,而整機的造型設計無疑是最大亮點。