2023-3-1 濤濤
WWDC22 全球開發(fā)者大會結(jié)束，有太多小眾產(chǎn)品脫穎而出。無形中有一股巨大的力量，在慢慢崛起，那便是來自世界各地的小型開發(fā)團(tuán)隊和獨立開發(fā)者。他們的產(chǎn)品小而美，小到僅靠一個功能撐起產(chǎn)品，美到完全忘記這是工具產(chǎn)品。那么具體都有哪些產(chǎn)品細(xì)節(jié)，不妨聽我細(xì)細(xì)道來～
其中，我精挑細(xì)選出一個海外和三個國區(qū)優(yōu)秀產(chǎn)品進(jìn)行產(chǎn)品設(shè)計細(xì)節(jié)分析，一探小眾產(chǎn)品究竟好在哪里！
（專注面條 - 輕松重獲專注力）2022年Apple設(shè)計大獎入圍名單之一
（謎底時鐘 - 讓時間看得見）2022年Apple設(shè)計大獎入圍名單之一
（Waterllama - 開啟喝水時間）2022年Apple設(shè)計大獎入圍名單之一
（OffScreen - 自律番茄鐘，不做手機控）Apple Store精品推薦64次
排名不分先后，從以上幾款產(chǎn)品logo中可以看出產(chǎn)品之間設(shè)計風(fēng)格基本不一樣，不存在借鑒抄襲，各自都在細(xì)分領(lǐng)域深耕播種。
也正是因為開發(fā)者的敬業(yè)、精益、專注、創(chuàng)新的“工匠精神”，才能讓產(chǎn)品突出重圍，優(yōu)秀的呈現(xiàn)在用戶面前使用。
Slogan：專注，可以做出一碗好面條。
你以為這只是讓人做泡面的App！那就錯了。這是用“煮一碗好面條是需要時間的”為理念，讓用戶專注工作，類似番茄工作法。
有趣的是，這款效率工具被插畫元素完美包裹起來，一點感受不到工具給人帶來的疏遠(yuǎn)感。相反，極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。
正因這上乘的設(shè)計質(zhì)感，《專注面條》曾數(shù)次登上 App Store 推薦頁，至今收獲 7000+ 個評價、4.9 的評分。
想象一下你正在烹飪一碗面條。
在烹飪時間結(jié)束前．不要試圖拿起你的手機，這樣會讓水蒸汽流失，面條就不好吃了。日后，你可以使用專注面條完成你希望專注的任何事情。
它把工作比喻成煮面，煮面要專心，把控火候，合適時間放入主料和調(diào)料；工作同樣要專心，遵循自己的方法論，把每個步驟和流程都執(zhí)行到位。工作完成了，一碗面也就煮好了。
專注力在哪里，效率就在哪里。
「專注面條」希望輔助你以一種詼諧有趣的方式，重獲這個時代最稀缺的專注力。放下你的手機，煮一碗面，我們一起對抗手機成癮！
時間一到，你的面條就做好了，你也完成了一次有意義的專注。
打破常規(guī)，不用系統(tǒng)默認(rèn)蘋方字體，而是選擇手寫體風(fēng)格的「素材集市康康體」字體（文末領(lǐng)取可商用字體包）作為通篇文字載體。
這也是為統(tǒng)一界面風(fēng)格做的一個優(yōu)化嘗試。
不得不說，這個選擇是非常適合的。（體量較小的產(chǎn)品可以適當(dāng)選用設(shè)計字體，一旦產(chǎn)品功能做多做大還是乖乖用默認(rèn)字體規(guī)范靠譜些）。
打開App，你能明顯看到簡潔的手繪風(fēng)格元素，使整個產(chǎn)品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發(fā)，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現(xiàn)實產(chǎn)生有趣想法。
App界面極其簡潔，只有黑白灰三種顏色，搭配手繪風(fēng)格的設(shè)計元素，使產(chǎn)品整體清新脫俗，與眾不同。
圖標(biāo)設(shè)計脫離設(shè)計規(guī)范，采用更加符合產(chǎn)品氣質(zhì)的手繪風(fēng)格，這樣使得界面統(tǒng)一性極高，氛圍感十足。
這也間接告訴設(shè)計師們圖標(biāo)設(shè)計上一定要跟著產(chǎn)品形態(tài)去做設(shè)計，而不要一味以第三方規(guī)范為唯一衡量標(biāo)準(zhǔn)來設(shè)計，結(jié)果就是同質(zhì)化泛濫。
計時是產(chǎn)品核心功能，點擊首頁左上角專注時長，會出現(xiàn)不同的煮面方案。
可設(shè)置5分鐘-180分鐘之內(nèi)任意時長的專注時間，同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個時間段繪制了專屬面條配方。你不用手機的時間越長，你煮的泡面配料就越豪華越高級。設(shè)計元素也越豐富。當(dāng)你碰到手機，就會震動十閃光。
面條設(shè)計方案與功能的完美呈現(xiàn)是產(chǎn)品最吸引人的地方。
根據(jù)累積的專注時長還可以獲得相應(yīng)的稱號，配合幸苦工作后汗水落下動畫，很是生動有趣。
不僅如此，專注面條還特意為女性男性做了兩套插圖設(shè)計方案，充分考慮不同群體的使用體驗，僅僅是效率型產(chǎn)品就做到如此細(xì)節(jié)，不好才怪。
這也是除了故事卡片第二種用總時長配圖來增加產(chǎn)品使用黏性產(chǎn)生記憶點的設(shè)計之處。
1.永久買斷制
【專注面條】一次買斷制，面條價格￥18。購買后產(chǎn)品內(nèi)的功能都可使用。但“故事卡片”需要鑰匙來解鎖，￥6.00=鑰匙*6，不想付費那就乖乖完成計時任務(wù)來隨機獲得故事卡片。
作為一個功能單一的產(chǎn)品，賣點在哪里？核心競爭力在哪里？依碳水Sir來看付費用戶大多在為品牌理念買單。
就是產(chǎn)品自身的品牌調(diào)性，區(qū)別于市面上任何一款產(chǎn)品，不隨波逐流，用全新的面條理念代替時間，并且有其鮮明的手繪風(fēng)格和插圖元素，即使被抄襲也只能抄到“外殼”，內(nèi)在的東西是偷不走的。
2.購買鑰匙
專注完成后，靠概率獲得鑰匙，用來解鎖故事卡片以及 “腦洞大開” 的結(jié)局作為獎勵。緩解你專注后的緊張感，增加趣味互動性，同時為下一次專注做好準(zhǔn)備。
故事中皮諾曹、烏鴉喝水、長發(fā)公主等雖然都是我們耳熟能詳?shù)耐挘髡撸?Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片里，解謎前三個猴子看到河流中有一個圓圈，當(dāng)我們找到面條的位置時，會發(fā)現(xiàn)猴子們看到的不過是一個香菇都大為震驚，畫面里充滿奇妙的想象力。
當(dāng)用戶看到未解鎖的故事會出于好奇點進(jìn)去，這時就需要鑰匙來解鎖，畢竟不是靠專注獲得的卡片就要用別的辦法（購買鑰匙）打開，這就是第二個商業(yè)轉(zhuǎn)化點。
目前已有的27張故事卡片，每一個都與面條結(jié)合進(jìn)行故事綁定，讓用戶在效率軟件中也能感受到游戲的樂趣，把故事卡片當(dāng)成解鎖過關(guān)元素，引發(fā)用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進(jìn)而提高使用黏性以及提升付費轉(zhuǎn)化的一種方式。
一個動作，一堆腦洞，組成了一個能量滿滿的 app。
6 月 1 日，蘋果發(fā)布了 2022 年度設(shè)計大獎入圍名單，在「創(chuàng)新思維」類別中出現(xiàn)了中國區(qū)《專注面條》的身影，雖然止步于決賽圈，但我覺得這并不是結(jié)束，而是全新的開始。
優(yōu)秀的產(chǎn)品總有其相似之處，也有其不同。要想做一款好的小眾產(chǎn)品，除了把產(chǎn)品本身所解決的用戶痛點做好做精外，植入產(chǎn)品理念，與用戶產(chǎn)品某種關(guān)聯(lián)。
就如它把專注計時比作烹飪時間，當(dāng)完成專注，你將獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機器“叮”的告訴用戶專注結(jié)束，而是通過巧妙的設(shè)計與用戶之間產(chǎn)生真實聯(lián)系，這或許就是成功的秘密。
借用「專注面條」Slogan說的：專注，可以做出一碗好面條。
各位設(shè)計師們不妨學(xué)習(xí)一下背后的思考。
謎底時鐘是一款設(shè)計精美的時鐘應(yīng)用。
Slogan：陪伴你學(xué)習(xí)、工作與生活。
你沒看錯！它僅有時間和計時功能。
作為一款時鐘App，UI設(shè)計有什么不同，才被入選2022 蘋果設(shè)計大獎！成為中國開發(fā)者之光！我們一起來看看。
第一次下載，就會啟動引導(dǎo)流程，切換頁面時配合錯幀動畫，使設(shè)計細(xì)節(jié)更加突出明顯，強化品牌調(diào)性。產(chǎn)品中的引導(dǎo)頁都可以嘗試這種表現(xiàn)形式。
進(jìn)入首頁，展示文字+動效的引導(dǎo)流程，統(tǒng)一的表現(xiàn)形式，讓使用者更容易理解。首頁交互引導(dǎo)，讓用戶對產(chǎn)品隱藏的交互功能得到二次記憶，具有增強產(chǎn)品記憶的作用。
2-1.設(shè)計元素
品牌風(fēng)格設(shè)計很前沿，采用2020年大火的新擬態(tài)設(shè)計風(fēng)格，也能看出設(shè)計表現(xiàn)緊跟市場潮流走，是一款個性且年輕的App。
整體使用下來，印象最深的就是模塊列表、圖標(biāo)的微質(zhì)感設(shè)計，以及彈窗布局的規(guī)范化設(shè)計，還有部分組件采用毛玻璃設(shè)計手法等。
值得注意的是，產(chǎn)品對iOS原生組件進(jìn)行大量重新設(shè)計，結(jié)合新擬態(tài)風(fēng)格繪制了一套更符合產(chǎn)品調(diào)性的組件出來。讓人使用一次就記憶猶新。
2-2.核心力-交互感知
我分別羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、刪除交互、浮窗切換交互這六個來簡單談?wù)効捶āＲ韵聨讉€動效交互基本涵蓋市面上的多半產(chǎn)品的基礎(chǔ)功能，之所以展示出來，是因為「謎底時鐘」在原有的基礎(chǔ)組件上大膽創(chuàng)新，摒棄原生組件。
這樣做對于功能簡單的產(chǎn)品來說絕對是錦上添花有助于產(chǎn)品形成記憶點的設(shè)計細(xì)節(jié)。這也從側(cè)面反映出市面上的部分產(chǎn)品，只注重功能堆疊而完全忽視原生組件還可以二次設(shè)計的方向。
什么是好的交互，操作時無感知是一種，操作時有記憶點也是一種。顯然「謎底時鐘」是后者。要知道優(yōu)秀的交互自成一派，把單一的功能做到極致，你的產(chǎn)品就不會差到哪里。
時鐘就是要長時間靜默展示，除了極簡、擬物、科技、馬賽克、霓光、積木、微質(zhì)感、電子屏、睡眠屏、卡通風(fēng)、各類鐘表材質(zhì)等等19種風(fēng)格高顏值時鐘外，霓光時鐘具有不一樣的功能。
當(dāng)你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”，除了文案變化，圖標(biāo)也跟隨名稱而變，又一個用美食來拉近與用戶距離的設(shè)計細(xì)節(jié)。
不僅如此，在低電量情況下，霓光效果不顯示，底部會持續(xù)閃爍電量不足的指示燈，告訴用戶手機沒電信號，請及時充電。當(dāng)用戶插上電源，霓光時鐘會重新啟動亮光模式，給予用戶通電感知。
雖然很小的設(shè)計點，但誰又能想到時鐘與電量不足產(chǎn)生聯(lián)系。看來開發(fā)者對時鐘的創(chuàng)意聯(lián)想是豐富多彩的。
無意間觸碰手機時發(fā)現(xiàn)積木零星掉落下幾個，在好奇的驅(qū)使下又晃動了一下手機，所有積木都掉落下來了。
具有數(shù)字屬性的積木依然不斷變換數(shù)字，并且配合手機陀螺儀可以模擬現(xiàn)實空間進(jìn)行移動，交互玩法趣味十足，讓我忍不住多玩了幾次。
這種用到iOS系統(tǒng)功能做的大膽嘗試，有時會給產(chǎn)品帶來意想不到的好處，各位總監(jiān)們不妨試試。
采用終身會員與月會員模式，月會員很好理解，為了產(chǎn)品能持續(xù)做下去，而推出的付費模式，目的是能持續(xù)有營收。終身會員是一個很有意思的模式。
據(jù)了解，產(chǎn)品前期功能相對單一時，推出的一種買斷制，但隨著新功能不斷增加，原有￥25定價相比較低，早期買斷的用戶獲利更大，為了商業(yè)與產(chǎn)品平衡，使其具備良性發(fā)展空間，于是又推出月會員模式。
這也牽扯到另一點，凡是未上線新功能都可以輕松決定是否開發(fā)上線，一但功能上線，想要取消或抹掉功能，就沒那么輕松簡單了。這也是早期App都一次買斷，后期改為訂閱模式也必須有終身買斷的內(nèi)購入口。
如果我們是“匠人”就會把 App 當(dāng)藝術(shù)品，雖然只有也僅有一種功能，但只要花費了大量的時間去想創(chuàng)意，去做到設(shè)計、交互的完美融合，甚至一遍一遍地優(yōu)化各種細(xì)節(jié)部分，埋設(shè)彩蛋，最后的最后呈現(xiàn)出來讓自己滿意。那么它就很可能成為一款小而美的產(chǎn)品。
烏克蘭開發(fā)團(tuán)隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能，卻用大量動物角色來獎勵喝水后的你，讓你欲罷不能。保持水分保持快樂！從截圖中不難看出，該App內(nèi)置大量動物插圖，通過喝水來解鎖小動物，解鎖前僅展示動物輪廓，讓用戶產(chǎn)生好奇從而保持喝水好習(xí)慣，這個概念很好，產(chǎn)品很棒，那我們一起來看看吧。
產(chǎn)品中icon展示較少，更多是用小插畫來代替，頁面中大量的banner以及動物卡片，豐富產(chǎn)品的同時營造一種輕松的感覺。并沒有很多圖標(biāo)干擾用戶操作。與水相關(guān)的插圖用動效來承載，讓簡單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計48+之多，可見產(chǎn)品對于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。
無論您是想休息一下咖啡因，還是想通過果汁和冰沙來增強免疫系統(tǒng) - 選擇任何挑戰(zhàn)，盡情享受吧！
遠(yuǎn)離含糖飲料和酒精，或者在 10 天內(nèi)只喝水補充水分。看看你的進(jìn)展如何，別忘了與朋友分享你的結(jié)果。
Waterllama 應(yīng)用程序中已有超過 45 個可愛的動物角色，我把解鎖與隱藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用隨機模式，讓每一天都變得不同。當(dāng)天喝水目標(biāo)達(dá)成就會解鎖一個動物，精美的插圖讓人賞心悅目，期待第二天繼續(xù)喝水打卡挑戰(zhàn)。
首頁下方的動物挑戰(zhàn)卡片，交互形式采用App Store卡片點擊交互，無論是轉(zhuǎn)場過度，還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細(xì)節(jié)，一邊了解喝水的各種好處，娛樂加學(xué)習(xí)兩不誤，很是輕松。
內(nèi)購頁面采用icon輪播的動效展示，優(yōu)點是在一小塊區(qū)域通過消失漸現(xiàn)可以展示所有內(nèi)容，使內(nèi)購頁面干凈清爽能更好的閱讀頁面信息。按鈕通過循環(huán)放大，引導(dǎo)用戶進(jìn)行付費操作，雖然很刻意，但絲毫沒有感受到強制性選擇。
當(dāng)產(chǎn)品想要在內(nèi)購頁強化品牌背書，給到用戶可靠穩(wěn)定感，可以選出具有代表性的優(yōu)質(zhì)評價，展示在內(nèi)購頁下方，通過左右切換查看更多評價。
每年￥28，終身買斷制￥48.00。兩個價格是利用價格差來制造價格錨點，引導(dǎo)用戶購買終身會員，這對用戶來說最實惠劃算的方案，同時也是產(chǎn)品所希望的。大量的終身用戶長時間使用產(chǎn)品，成為核心用戶群體，助力產(chǎn)品越做越好。
現(xiàn)在不難看出，優(yōu)秀的產(chǎn)品往往更關(guān)注細(xì)節(jié)表現(xiàn)，用動態(tài)展示內(nèi)容，讓玩法更具趣味性，頁面簡約而不簡單。并不是頁面元素越多越好，相反把簡單的功能做到極致就會帶來正向有價值的反饋。
這款產(chǎn)品雖然沒出現(xiàn)在WWDC22上，但與「謎底時鐘」是同一家公司。無論設(shè)計或功能使用都相媲美。
手機已成為人人必備的物品，內(nèi)置的各種App占有著人們的生活，手機依賴已成為這個時代普遍的一種現(xiàn)象。雖然人們都知道長時間看手機不好，下意識的克制看手機行為，以為這樣脫離手機依賴患者這個稱號。往往碎片化看手機，一天下來使用手機的時長不降反增。「OffScreen」通過細(xì)分時間屬性為用戶直觀呈現(xiàn)各種場景下使用手機的詳細(xì)數(shù)據(jù)，通過數(shù)據(jù)展示以及專注時間，防止用戶沉迷手機無法自拔。
「OffScreen」背景色使用極其大膽。
淺色模式下采用暖橘色作為品牌主色調(diào)，暗色模式下采用海藍(lán)色作為主色調(diào)，相比Apple設(shè)計規(guī)范中的顏色，這種帶有傾向性的色彩更容易營造一種產(chǎn)品氛圍，強化產(chǎn)品感知度。
圖標(biāo)方面，具有操作屬性的圖標(biāo)采用線性（相對好理解），具有展示屬性的圖標(biāo)采用面性風(fēng)格（設(shè)計表現(xiàn)更強且有文字描述相對好理解）。
引導(dǎo)流程專場用了大量位移、漸變效果，使原本單調(diào)的靜態(tài)頁賦予生動表現(xiàn)力。吸引用戶眼球，達(dá)到品牌傳播效果。
動效貼合操作效果，用戶還沒使用就能一眼明白產(chǎn)品如何使用，這就是引導(dǎo)動效的好處。
當(dāng)你專注番茄鐘時，只需在番茄上滑動標(biāo)尺選擇準(zhǔn)確時間，就能開始專注。
當(dāng)完成專注會提供統(tǒng)計數(shù)據(jù)，并且有彩帶飄落效果，營造打卡勝利的儀式感，強化產(chǎn)品感知，為用戶下一次專注做準(zhǔn)備。
內(nèi)購頁采用依次呈現(xiàn)的交互方式，頭圖是一個人在看手機，采用線性風(fēng)格手法，這種形式區(qū)別于其他產(chǎn)品，會給人以眼前一亮的感覺，加深用戶對產(chǎn)品的記憶。
付費按鈕吸附與頁面底部，根據(jù)菲茨定律，起始于目標(biāo)位置越近，到達(dá)目位置的時間就會越短，從而用戶更容易點擊。
一次買斷制，￥30.00解鎖終身會員。
作為一款時間統(tǒng)計、番茄鐘、專注時間與一身的產(chǎn)品，對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現(xiàn)以及有趣的配圖描述，間接感受到Off Screen產(chǎn)品的細(xì)膩之處，用戶為此買單也不是說。
OffScreen的成功在于能把單一的屏幕使用時間進(jìn)行多維度分析呈現(xiàn)，就說“呆呆的看”與“邊走邊看”這兩項數(shù)據(jù)，就是調(diào)用系統(tǒng)運動數(shù)據(jù)來判斷使用屏幕的場景。
況且每項數(shù)據(jù)都支持時間軸可視化圖表的方式呈現(xiàn)，細(xì)節(jié)之處方見專業(yè)，這也是好產(chǎn)品所要具有的垂直領(lǐng)域?qū)I(yè)度。
想要產(chǎn)品脫穎而出，一定要嘗試將軟件與硬件結(jié)合，可以是陀螺儀、眼動追蹤、閃光燈等等，總之系統(tǒng)推出新的功能，就盡量把它用到產(chǎn)品里去。
不僅如此，看以上幾個產(chǎn)品，截圖模塊內(nèi)容都頂滿了，說明App想要展示的細(xì)節(jié)還有很多，從側(cè)面也能看到開發(fā)者們不留一塊“空白”的用心。
大廠產(chǎn)品固然很好，做法更符合大眾市場符合消費者需求，隨著不斷新增功能，產(chǎn)品變得越來越普適大眾，無產(chǎn)品獨特風(fēng)格可言。因為背后有龐大的員工要養(yǎng)活。
相反小團(tuán)隊獨立開發(fā)者們沒有太多顧慮，一心想把一個點做好做緊致，哪怕只是計時，也要做的自己滿意為止，才會交卷，時代在變，匠人之心從未改變。值得致敬這些開發(fā)者們。
跳脫大廠的產(chǎn)品，來看看獨立開發(fā)者和小型開發(fā)團(tuán)隊，一人即團(tuán)隊，遇到各類問題都要獨自進(jìn)行解決，可想而知工作量會有多大。
他們的產(chǎn)品或許沒有龐大的生態(tài)體系來滿足大眾用戶使用需求，但App Store十余年的發(fā)展，建立起細(xì)顆粒的開發(fā)環(huán)境，正是這種良性生態(tài)，讓那些有光的開發(fā)者，隨心所欲讓心中的想法變成現(xiàn)實，讓夜里的小路燈照亮了整片街道。
就連開發(fā)者們都這么拼搏，作為設(shè)計師的我們哪還有抱怨之說，這么多好的產(chǎn)品擺在眼前，真是難得的學(xué)習(xí)機會，習(xí)他人之處，補自我之短。一起加油一起進(jìn)步。
設(shè)計師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設(shè)計師所追求的。 認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
本期產(chǎn)品細(xì)節(jié)分析結(jié)束，點擊原文鏈接查看更多，我們下期再見！
作者：碳水Sir；公眾號：草蓉三石
本文由 @碳水Sir 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
藍(lán)藍(lán)設(shè)計( m.73404.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍(lán)藍(lán)設(shè)計的小編 http://m.73404.com.cn