可愛炸!人家的鬧鐘APP為何設計得如此有意思

分類:實用技巧 時間:2017-09-15

在設計哪些服務於日常生活的產品之時,市場調研是繞不過去的,設計師需要仔細思考目標受眾,並且仔細推敲產品應該以什麽樣的形態呈現。回過頭來看看日常的工具類應用,無論是筆記類工具、鬧鐘、待辦事項、計算器還是日歷,它們都是圍繞著用戶、應用場景來進行設計,偶有產品會在這基礎上增加一些獨特的設計。 Tubik Studio 也設計並最終開發完成了一款鬧鐘應用,名為 Toonie Alarm,產品上線後,發布在 Product Hunt 上,在短短4個小時內,上升來產品類列表前五。今天的文章,我們來分享一下這款產品的設計過程。

任務

為 iPhone 設計一款引人入勝的鬧鐘應用,進行完整的UI 和UX設計。

設計思路

Toonie Alarm 的設計過程和 Tubik Studio 其他的設計項目有著天然的不同,之前許多項目大多是由甲方提出需求甚至最初的概念設計,我們再根據需求來提出設計方案。Toonie Alarm 則是走的完全不同的道路,它是完完全全由我們自己提出需求、完成設計和開發的產品,我們的想法貫穿始終,沒有受到第三方的影響和幹擾。所以,以往甲方負責的事情,這次我們需要完全自己來做了。我們構思了它的整個功能和產品策略,思考賣點和營銷計劃,構建品牌,等等等等。

最初,我們的想法是創建一個簡單的鬧鐘,加入有吸引力的設計和一致的元素,並且我們希望它能和其他鬧鐘一樣,做到一些讓人不那麽愉快的事情:比如提醒人起床。在品牌氣質上,我們定位為有趣、可愛、積極和明朗,在營銷策劃的時候,我們會有意識地將這些特點和概念融入進去。

通過用戶研究和分析之後,我們的設計團隊確定了整個產品設計和功能上具備下面的特征,或者說賣點:

  • APP中所有的功能都應該對於所有用戶免費
  • 使用簡單、清晰、直觀的導航
  • 明亮而漂亮的界面
  • 大氣漂亮的貼紙元素
  • 將鬧鐘喚醒功能和成就系統結合起來
  • 令人愉悅的交互動畫
  • 動畫化的時間選擇器
  • 能和朋友即時分享成就

接下來,我們來看看 Tubik Studio 的設計師怎麽實現這些功能的。

可愛的吉祥物

在之前的文章當中,我們探討過吉祥物在品牌設計和UI設計中的重要作用,對於 Toonie Alarm 這款應用而言,吉祥物同樣重要。在我們看來,吉祥物是用戶和界面進行情感溝通的渠道,也是品牌形象的代表,可以強化產品的識別性。除此之外,它還能讓設計師更好地營造氛圍,打造個性,是讓用戶和產品之間建立自然交流的橋梁所在。

所以,我們為Toonie 創造了一只可愛而又快樂的小鳥作為吉祥物,它的使命是讓用戶的生活更加透亮,幫助用戶管理時間和生活。它會為用戶推送信息,提供獎勵,提醒錯誤,為生活增加樂趣,給生活添彩。

APP 使用教程

教程是界面的重要組成部分,它可以幫助用戶了解基本的交互和特色的功能。在 Toonie Alarm 當中,教程包含三屏內容,用來承載功能和交互的介紹。簡短明了的介紹文案,加上平滑自然的過渡動畫,結合吉祥物,營造出快樂的氛圍。

主界面

作為一款鬧鐘應用,主屏幕自然是用來承載各色鬧鐘、設置鬧鐘時間的界面。當你被鬧鐘喚醒之後,就可以在主屏幕上收集各種各樣有趣的貼紙。為何貼合起床這一特定的場景,鬧鐘的開關按鈕被設計成為小太陽的樣子。向左滑動,用戶可以打開針對特定鬧鐘的更多功能。

貼紙界面

貼紙作為這款應用的獎勵機制而存在,如果用戶在特定的時候起床成功,它們會作為獎勵,豐富你的收藏,而用戶也能在收集過程中,獲得成就感,逐步養成好習慣。這些貼紙都可以通過社交網絡來分享,標記成就。

時間選擇器

這款應用的另外一個突出的特色是帶有動效的時間選擇器。Toonie Alarm 的整個導航設計保持著簡約直觀地特點,當用戶開始設置時間的時候,動效能夠讓這個過程足夠愉悅。

動態貼紙

貼紙本身是用來強化APP本身的愉悅度的,而動畫能讓本身已經很可愛的形象更加生動活潑,對於用戶體驗的提升是明顯的。

Logo樣式

Toonie Alarm 在娛樂性上很強,從 LOGO設計上也應該凸顯這一特質,可愛的漫畫風字體讓產品可愛的氣息滿溢出來。

產品視頻

從下面的視頻當中,你可以對 Toonie Alarm 有更多的了解。

【這些 設計實戰 同樣來自Tubik Studio】

  1. 《富有未來感的柏林之夜APP,是這樣設計出來的》
  2. 《設計實戰!城市指南網站著陸頁是這樣設計出來的》
  3. 《這款給醫生的專業APP,設計上有著怎樣不同的要求?》
  4. 《幫你策劃盛大婚禮的APP,設計思路是這樣的》
  5. 《這款面向大眾的理財APP,設計過程是這樣的》
  6. 《一款真正讓人專註的效率應用,應該這麽設計》

原文地址: uxplanet

原文作者:Tubik Studio

優設譯文:@陳子木

本文由優設網原創翻譯,請尊重版權和譯者成果,轉摘請附上優設鏈接,違者必究。謝謝各位編輯同仁配合。

【優設網 原創文章 投稿郵箱:[email protected]

================ 明星欄目推薦 ================

優優教程網: UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的 知識樹專欄 。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手並制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com


Tags: 設計 我們 鬧鐘 產品 應用 甲方

文章來源:


ads
ads

相關文章
ads

相關文章

ad