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