在設(shè)計(jì)哪些服務(wù)于日常生活的產(chǎn)品之時(shí)，市場(chǎng)調(diào)研是繞不過(guò)去的，設(shè)計(jì)師需要仔細(xì)思考目標(biāo)受眾，并且仔細(xì)推敲產(chǎn)品應(yīng)該以什么樣的形態(tài)呈現(xiàn)?；剡^(guò)頭來(lái)看看日常的工具類應(yīng)用，無(wú)論是筆記類工具、鬧鐘、待辦事項(xiàng)、計(jì)算器還是日歷，它們都是圍繞著用戶、應(yīng)用場(chǎng)景來(lái)進(jìn)行設(shè)計(jì)，偶有產(chǎn)品會(huì)在這基礎(chǔ)上增加一些獨(dú)特的設(shè)計(jì)。Tubik Studio 也設(shè)計(jì)并最終開(kāi)發(fā)完成了一款鬧鐘應(yīng)用，名為 Toonie Alarm，產(chǎn)品上線后，發(fā)布在 Product Hunt 上，在短短4個(gè)小時(shí)內(nèi)，上升來(lái)產(chǎn)品類列表前五。今天的文章，我們來(lái)分享一下這款產(chǎn)品的設(shè)計(jì)過(guò)程。

任務(wù)

為 iPhone 設(shè)計(jì)一款引人入勝的鬧鐘應(yīng)用，進(jìn)行完整的UI 和UX設(shè)計(jì)。

設(shè)計(jì)思路

Toonie Alarm 的設(shè)計(jì)過(guò)程和 Tubik Studio 其他的設(shè)計(jì)項(xiàng)目有著天然的不同，之前許多項(xiàng)目大多是由甲方提出需求甚至最初的概念設(shè)計(jì)，我們?cè)俑鶕?jù)需求來(lái)提出設(shè)計(jì)方案。Toonie Alarm 則是走的完全不同的道路，它是完完全全由我們自己提出需求、完成設(shè)計(jì)和開(kāi)發(fā)的產(chǎn)品，我們的想法貫穿始終，沒(méi)有受到第三方的影響和干擾。所以，以往甲方負(fù)責(zé)的事情，這次我們需要完全自己來(lái)做了。我們構(gòu)思了它的整個(gè)功能和產(chǎn)品策略，思考賣(mài)點(diǎn)和營(yíng)銷計(jì)劃，構(gòu)建品牌，等等等等。

最初，我們的想法是創(chuàng)建一個(gè)簡(jiǎn)單的鬧鐘，加入有吸引力的設(shè)計(jì)和一致的元素，并且我們希望它能和其他鬧鐘一樣，做到一些讓人不那么愉快的事情：比如提醒人起床。在品牌氣質(zhì)上，我們定位為有趣、可愛(ài)、積極和明朗，在營(yíng)銷策劃的時(shí)候，我們會(huì)有意識(shí)地將這些特點(diǎn)和概念融入進(jìn)去。

通過(guò)用戶研究和分析之后，我們的設(shè)計(jì)團(tuán)隊(duì)確定了整個(gè)產(chǎn)品設(shè)計(jì)和功能上具備下面的特征，或者說(shuō)賣(mài)點(diǎn)：

• APP中所有的功能都應(yīng)該對(duì)于所有用戶免費(fèi)
• 使用簡(jiǎn)單、清晰、直觀的導(dǎo)航
• 明亮而漂亮的界面
• 大氣漂亮的貼紙?jiān)?/li>
• 將鬧鐘喚醒功能和成就系統(tǒng)結(jié)合起來(lái)
• 令人愉悅的交互動(dòng)畫(huà)
• 動(dòng)畫(huà)化的時(shí)間選擇器
• 能和朋友即時(shí)分享成就

接下來(lái)，我們來(lái)看看 Tubik Studio 的設(shè)計(jì)師怎么實(shí)現(xiàn)這些功能的。

可愛(ài)的吉祥物

在之前的文章當(dāng)中，我們探討過(guò)吉祥物在品牌設(shè)計(jì)和UI設(shè)計(jì)中的重要作用，對(duì)于 Toonie Alarm 這款應(yīng)用而言，吉祥物同樣重要。在我們看來(lái)，吉祥物是用戶和界面進(jìn)行情感溝通的渠道，也是品牌形象的代表，可以強(qiáng)化產(chǎn)品的識(shí)別性。除此之外，它還能讓設(shè)計(jì)師更好地營(yíng)造氛圍，打造個(gè)性，是讓用戶和產(chǎn)品之間建立自然交流的橋梁所在。

所以，我們?yōu)門(mén)oonie 創(chuàng)造了一只可愛(ài)而又快樂(lè)的小鳥(niǎo)作為吉祥物，它的使命是讓用戶的生活更加透亮，幫助用戶管理時(shí)間和生活。它會(huì)為用戶推送信息，提供獎(jiǎng)勵(lì)，提醒錯(cuò)誤，為生活增加樂(lè)趣，給生活添彩。

APP 使用教程

教程是界面的重要組成部分，它可以幫助用戶了解基本的交互和特色的功能。在 Toonie Alarm 當(dāng)中，教程包含三屏內(nèi)容，用來(lái)承載功能和交互的介紹。簡(jiǎn)短明了的介紹文案，加上平滑自然的過(guò)渡動(dòng)畫(huà)，結(jié)合吉祥物，營(yíng)造出快樂(lè)的氛圍。

主界面

作為一款鬧鐘應(yīng)用，主屏幕自然是用來(lái)承載各色鬧鐘、設(shè)置鬧鐘時(shí)間的界面。當(dāng)你被鬧鐘喚醒之后，就可以在主屏幕上收集各種各樣有趣的貼紙。為何貼合起床這一特定的場(chǎng)景，鬧鐘的開(kāi)關(guān)按鈕被設(shè)計(jì)成為小太陽(yáng)的樣子。向左滑動(dòng)，用戶可以打開(kāi)針對(duì)特定鬧鐘的更多功能。

貼紙界面

貼紙作為這款應(yīng)用的獎(jiǎng)勵(lì)機(jī)制而存在，如果用戶在特定的時(shí)候起床成功，它們會(huì)作為獎(jiǎng)勵(lì)，豐富你的收藏，而用戶也能在收集過(guò)程中，獲得成就感，逐步養(yǎng)成好習(xí)慣。這些貼紙都可以通過(guò)社交網(wǎng)絡(luò)來(lái)分享，標(biāo)記成就。

時(shí)間選擇器

這款應(yīng)用的另外一個(gè)突出的特色是帶有動(dòng)效的時(shí)間選擇器。Toonie Alarm 的整個(gè)導(dǎo)航設(shè)計(jì)保持著簡(jiǎn)約直觀地特點(diǎn)，當(dāng)用戶開(kāi)始設(shè)置時(shí)間的時(shí)候，動(dòng)效能夠讓這個(gè)過(guò)程足夠愉悅。

動(dòng)態(tài)貼紙

貼紙本身是用來(lái)強(qiáng)化APP本身的愉悅度的，而動(dòng)畫(huà)能讓本身已經(jīng)很可愛(ài)的形象更加生動(dòng)活潑，對(duì)于用戶體驗(yàn)的提升是明顯的。

Logo樣式

Toonie Alarm 在娛樂(lè)性上很強(qiáng)，從 LOGO設(shè)計(jì)上也應(yīng)該凸顯這一特質(zhì)，可愛(ài)的漫畫(huà)風(fēng)字體讓產(chǎn)品可愛(ài)的氣息滿溢出來(lái)。

產(chǎn)品視頻

從下面的視頻當(dāng)中，你可以對(duì) Toonie Alarm 有更多的了解。

【這些設(shè)計(jì)實(shí)戰(zhàn)同樣來(lái)自Tubik Studio】

1. 《富有未來(lái)感的柏林之夜APP，是這樣設(shè)計(jì)出來(lái)的》
2. 《設(shè)計(jì)實(shí)戰(zhàn)！城市指南網(wǎng)站著陸頁(yè)是這樣設(shè)計(jì)出來(lái)的》
3. 《這款給醫(yī)生的專業(yè)APP，設(shè)計(jì)上有著怎樣不同的要求？》
4. 《幫你策劃盛大婚禮的APP，設(shè)計(jì)思路是這樣的》
5. 《這款面向大眾的理財(cái)APP，設(shè)計(jì)過(guò)程是這樣的》
6. 《一款真正讓人專注的效率應(yīng)用，應(yīng)該這么設(shè)計(jì)》

原文地址：uxplanet
原文作者：Tubik Studio
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

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

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com