#本文為人人都是産品經理《原創激勵計劃》出品。

當我們探讨産品設計的時候，總是習慣将幾個知名大産品作為案例。但一些獨立開發者設計的産品，雖然小衆，卻有獨特的設計風格，同時兼顧完善的産品功能。本文作者列舉了幾個小而美的優秀産品，對他們的設計進行了分析，一起來看看吧。

事先聲明 /attention ：

• 強烈建議使用電腦查看，用戶體驗更佳。
• Gif 體積較大，請耐心查看。
• 為了讓設計細節更容易被看到，用GIf來展示。

WWDC22 全球開發者大會結束，有太多小衆産品脫穎而出。無形中有一股巨大的力量，在慢慢崛起，那便是來自世界各地的小型開發團隊和獨立開發者。他們的産品小而美，小到僅靠一個功能撐起産品，美到完全忘記這是工具産品。那麼具體都有哪些産品細節，不妨聽我細細道來～

其中，我精挑細選出一個海外和三個國區優秀産品進行産品設計細節分析，一探小衆産品究竟好在哪裡！

• （專注面條– 輕松重獲專注力）2022年Apple設計大獎入圍名單之一
• （謎底時鐘– 讓時間看得見）2022年Apple設計大獎入圍名單之一
• （Waterllama– 開啟喝水時間）2022年Apple設計大獎入圍名單之一
• （OffScreen– 自律番茄鐘，不做手機控）Apple Store精品推薦64次

排名不分先後，從以上幾款産品logo中可以看出産品之間設計風格基本不一樣，不存在借鑒抄襲，各自都在細分領域深耕播種。也正是因為開發者的敬業、精益、專注、創新的“工匠精神”，才能讓産品突出重圍，優秀的呈現在用戶面前使用。

一、專注面條

Slogan：專注，可以做出一碗好面條。

你以為這隻是讓人做泡面的App！那就錯了。這是用“煮一碗好面條是需要時間的”為理念，讓用戶專注工作，類似番茄工作法。有趣的是，這款效率工具被插畫元素完美包裹起來，一點感受不到工具給人帶來的疏遠感。相反，極具趣味性的畫面讓工具使用起來也充滿樂趣充滿愛。

正因這上乘的設計質感，《專注面條》曾數次登上 App Store 推薦頁，至今收獲 7000 個評價、4.9 的評分。

1. 核心理念

想象一下你正在烹饪一碗面條。

在烹饪時間結束前．不要試圖拿起你的手機，這樣會讓水蒸汽流失，面條就不好吃了。日後，你可以使用專注面條完成你希望專注的任何事情。

它把工作比喻成煮面，煮面要專心，把控火候，合适時間放入主料和調料；工作同樣要專心，遵循自己的方法論，把每個步驟和流程都執行到位。工作完成了，一碗面也就煮好了。

專注力在哪裡，效率就在哪裡。 「專注面條」希望輔助你以一種诙諧有趣的方式，重獲這個時代最稀缺的專注力。放下你的手機，煮一碗面，我們一起對抗手機成瘾！

時間一到，你的面條就做好了，你也完成了一次有意義的專注。

2. 品牌元素

打破常規，不用系統默認蘋方字體，而是選擇手寫體風格的「素材集市康康體」字體（文末領取可商用字體包）作為通篇文字載體。這也是為統一界面風格做的一個優化嘗試，不得不說，這個選擇是非常适合的。（體量較小的産品可以适當選用設計字體，一旦産品功能做多做大還是乖乖用默認字體規範靠譜些）。

打開App，你能明顯看到簡潔的手繪風格元素，使整個産品透傳出清新可愛的一面。這也是Alex作者受到女兒啟發，畢竟小孩子總有天馬行空的想象，但大人們卻很難跳脫現實産生有趣想法。

App界面極其簡潔，隻有黑白灰三種顔色，搭配手繪風格的設計元素，使産品整體清新脫俗，與衆不同。圖标設計脫離設計規範，采用更加符合産品氣質的手繪風格，這樣使得界面統一性極高，氛圍感十足。這也間接告訴設計師們圖标設計上一定要跟着産品形态去做設計，而不要一味以第三方規範為唯一衡量标準來設計，結果就是同質化泛濫。

3. 專注時長-插圖設計

計時是産品核心功能，點擊首頁左上角專注時長，會出現不同的煮面方案。可設置5分鐘-180分鐘之内任意時長的專注時間，同時為5、10、15、20、25、30、35、40、45、50、55、60、180分鐘，這13個時間段繪制了專屬面條配方。你不用手機的時間越長，你煮的泡面配料就越豪華越高級。設計元素也越豐富。當你碰到手機，就會震動十閃光。面條設計方案與功能的完美呈現是産品最吸引人的地方。

4. 設計細節

根據累積的專注時長還可以獲得相應的稱号，配合幸苦工作後汗水落下動畫，很是生動有趣。不僅如此，專注面條還特意為女性男性做了兩套插圖設計方案，充分考慮不同群體的使用體驗，僅僅是效率型産品就做到如此細節，不好才怪。這也是除了故事卡片第二種用總時長配圖來增加産品使用黏性産生記憶點的設計之處。

5. 商業模式-永久買斷與付費項目

5.1 永久買斷制

【專注面條】一次買斷制，面條價格¥18。購買後産品内的功能都可使用。但“故事卡片”需要鑰匙來解鎖，¥6.00=鑰匙*6，不想付費那就乖乖完成計時任務來随機獲得故事卡片。

作為一個功能單一的産品，賣點在哪裡？核心競争力在哪裡？依碳水Sir來看付費用戶大多在為品牌理念買單。就是産品自身的品牌調性，區别于市面上任何一款産品，不随波逐流，用全新的面條理念代替時間，并且有其鮮明的手繪風格和插圖元素，即使被抄襲也隻能抄到“外殼”，内在的東西是偷不走的。

5.2 購買鑰匙

專注完成後，靠概率獲得鑰匙，用來解鎖故事卡片以及 “腦洞大開” 的結局作為獎勵。緩解你專注後的緊張感，增加趣味互動性，同時為下一次專注做好準備。故事中皮諾曹、烏鴉喝水、長發公主等雖然都是我們耳熟能詳的童話，但作者（ Alex ）給他們加上了一些彩蛋。譬如在《猴子撈月》的卡片裡，解謎前三個猴子看到河流中有一個圓圈，當我們找到面條的位置時，會發現猴子們看到的不過是一個香菇都大為震驚，畫面裡充滿奇妙的想象力。當用戶看到未解鎖的故事會出于好奇點進去，這時就需要鑰匙來解鎖，畢竟不是靠專注獲得的卡片就要用别的辦法（購買鑰匙）打開，這就是第二個商業轉化點。

目前已有的27張故事卡片，每一個都與面條結合進行故事綁定，讓用戶在效率軟件中也能感受到遊戲的樂趣，把故事卡片當成解鎖過關元素，引發用戶對故事卡片更多的渴望。這也是通過獎勵機制提高用戶參與感進而提高使用黏性以及提升付費轉化的一種方式。

一個動作，一堆腦洞，組成了一個能量滿滿的 app。6 月 1 日，蘋果發布了 2022 年度設計大獎入圍名單，在「創新思維」類别中出現了中國區《專注面條》的身影，雖然止步于決賽圈，但我覺得這并不是結束，而是全新的開始。

優秀的産品總有其相似之處，也有其不同。要想做一款好的小衆産品，除了把産品本身所解決的用戶痛點做好做精外，植入産品理念，與用戶産品某種關聯。就如它把專注計時比作烹饪時間，當完成專注，你将獲得一碗香噴噴的泡面一樣，給用戶感受并不是冷冰冰的機器“叮”的告訴用戶專注結束，而是通過巧妙的設計與用戶之間産生真實聯系，這或許就是成功的秘密。借用「專注面條」Slogan說的：專注，可以做出一碗好面條。各位設計師們不妨學習一下背後的思考。

二、謎底時鐘 – 讓時間看得見

謎底時鐘是一款設計精美的時鐘應用。Slogan：陪伴你學習、工作與生活。你沒看錯！它僅有時間和計時功能。作為一款時鐘App，UI設計有什麼不同，才被入選2022 蘋果設計大獎！成為中國開發者之光！我們一起來看看。

1. 首次引導

第一次下載，就會啟動引導流程，切換頁面時配合錯幀動畫，使設計細節更加突出明顯，強化品牌調性。産品中的引導頁都可以嘗試這種表現形式。進入首頁，展示文字 動效的引導流程，統一的表現形式，讓使用者更容易理解。首頁交互引導，讓用戶對産品隐藏的交互功能得到二次記憶，具有增強産品記憶的作用。

2. 品牌元素

2-1 設計元素

品牌風格設計很前沿，采用2020年大火的新拟态設計風格，也能看出設計表現緊跟市場潮流走，是一款個性且年輕的App。整體使用下來，印象最深的就是模塊列表、圖标的微質感設計，以及彈窗布局的規範化設計，還有部分組件采用毛玻璃設計手法等。值得注意的是，産品對iOS原生組件進行大量重新設計，結合新拟态風格繪制了一套更符合産品調性的組件出來。讓人使用一次就記憶猶新。

2-2 核心力-交互感知

我分别羅列出計時切換器、計時完成動效、時間選擇器、鬧鐘動效、删除交互、浮窗切換交互這六個來簡單談談看法。以下幾個動效交互基本涵蓋市面上的多半産品的基礎功能，之所以展示出來，是因為「謎底時鐘」在原有的基礎組件上大膽創新，摒棄原生組件。這樣做對于功能簡單的産品來說絕對是錦上添花有助于産品形成記憶點的設計細節。這也從側面反映出市面上的部分産品，隻注重功能堆疊而完全忽視原生組件還可以二次設計的方向。

什麼是好的交互，操作時無感知是一種，操作時有記憶點也是一種。顯然「謎底時鐘」是後者。要知道優秀的交互自成一派，把單一的功能做到極緻，你的産品就不會差到哪裡。

3. 彩蛋-圖标變化與提醒

時鐘就是要長時間靜默展示，除了極簡、拟物、科技、馬賽克、霓光、積木、微質感、電子屏、睡眠屏、卡通風、各類鐘表材質等等19種風格高顔值時鐘外，霓光時鐘具有不一樣的功能。當你早晨使用它文案“早安晨之美”中午“午安好心情”下午“飲啖茶食個包”，除了文案變化，圖标也跟随名稱而變，又一個用美食來拉近與用戶距離的設計細節。

不僅如此，在低電量情況下，霓光效果不顯示，底部會持續閃爍電量不足的指示燈，告訴用戶手機沒電信号，請及時充電。當用戶插上電源，霓光時鐘會重新啟動亮光模式，給予用戶通電感知。雖然很小的設計點，但誰又能想到時鐘與電量不足産生聯系。看來開發者對時鐘的創意聯想是豐富多彩的。

4. 彩蛋-積木時鐘墜落

無意間觸碰手機時發現積木零星掉落下幾個，在好奇的驅使下又晃動了一下手機，所有積木都掉落下來了。具有數字屬性的積木依然不斷變換數字，并且配合手機陀螺儀可以模拟現實空間進行移動，交互玩法趣味十足，讓我忍不住多玩了幾次。這種用到iOS系統功能做的大膽嘗試，有時會給産品帶來意想不到的好處，各位總監們不妨試試。

5. 商業模式-細節之處

采用終身會員與月會員模式，月會員很好理解，為了産品能持續做下去，而推出的付費模式，目的是能持續有營收。終身會員是一個很有意思的模式。據了解，産品前期功能相對單一時，推出的一種買斷制，但随着新功能不斷增加，原有¥25定價相比較低，早期買斷的用戶獲利更大，為了商業與産品平衡，使其具備良性發展空間，于是又推出月會員模式。

這也牽扯到另一點，凡是未上線新功能都可以輕松決定是否開發上線，一但功能上線，想要取消或抹掉功能，就沒那麼輕松簡單了。這也是早期App都一次買斷，後期改為訂閱模式也必須有終身買斷的内購入口。

如果我們是“匠人”就會把 App 當藝術品，雖然隻有也僅有一種功能，但隻要花費了大量的時間去想創意，去做到設計、交互的完美融合，甚至一遍一遍地優化各種細節部分，埋設彩蛋，最後的最後呈現出來讓自己滿意。那麼它就很可能成為一款小而美的産品。

三、Waterllama

烏克蘭開發團隊出品。讓喝水變成一件快樂輕松的活動。僅有的喝水記錄功能，卻用大量動物角色來獎勵喝水後的你，讓你欲罷不能。保持水分保持快樂！從截圖中不難看出，該App内置大量動物插圖，通過喝水來解鎖小動物，解鎖前僅展示動物輪廓，讓用戶産生好奇從而保持喝水好習慣，這個概念很好，産品很棒，那我們一起來看看吧。

1. 品牌元素

産品中icon展示較少，更多是用小插畫來代替，頁面中大量的banner以及動物卡片，豐富産品的同時營造一種輕松的感覺。并沒有很多圖标幹擾用戶操作。與水相關的插圖用動效來承載，讓簡單的元素變得趣味橫生，很是新穎。除了普通的水以為，Waterllama還為各種飲料酒水做了全套icon，共計48 之多，可見産品對于水的核心功能做足了努力，才有如此多的類型與選擇供用戶記錄。

2. 核心功能

無論您是想休息一下咖啡因，還是想通過果汁和冰沙來增強免疫系統 – 選擇任何挑戰，盡情享受吧！

遠離含糖飲料和酒精，或者在 10 天内隻喝水補充水分。看看你的進展如何，别忘了與朋友分享你的結果。

Waterllama 應用程序中已有超過 45 個可愛的動物角色，我把解鎖與隐藏的都羅列到上放品牌元素中，可以看下總有一款是你的菜。你也可以使用随機模式，讓每一天都變得不同。當天喝水目标達成就會解鎖一個動物，精美的插圖讓人賞心悅目，期待第二天繼續喝水打卡挑戰。

3. 交互手法

首頁下方的動物挑戰卡片，交互形式采用App Store卡片點擊交互，無論是轉場過度，還是下拉放大主體都給畫面賦予趣味性操作體驗。一邊體驗交互細節，一邊了解喝水的各種好處，娛樂加學習兩不誤，很是輕松。

4. 商業模式-細節之處

内購頁面采用icon輪播的動效展示，優點是在一小塊區域通過消失漸現可以展示所有内容，使内購頁面幹淨清爽能更好的閱讀頁面信息。按鈕通過循環放大，引導用戶進行付費操作，雖然很刻意，但絲毫沒有感受到強制性選擇。

當産品想要在内購頁強化品牌背書，給到用戶可靠穩定感，可以選出具有代表性的優質評價，展示在内購頁下方，通過左右切換查看更多評價。

每年¥28，終身買斷制¥48.00。兩個價格是利用價格差來制造價格錨點，引導用戶購買終身會員，這對用戶來說最實惠劃算的方案，同時也是産品所希望的。大量的終身用戶長時間使用産品，成為核心用戶群體，助力産品越做越好。

現在不難看出，優秀的産品往往更關注細節表現，用動态展示内容，讓玩法更具趣味性，頁面簡約而不簡單。并不是頁面元素越多越好，相反把簡單的功能做到極緻就會帶來正向有價值的反饋。

四、OffScreen – 自律番茄鐘，不做手機控

這款産品雖然沒出現在WWDC22上，但與「謎底時鐘」是同一家公司。無論設計或功能使用都相媲美。

手機已成為人人必備的物品，内置的各種App占有着人們的生活，手機依賴已成為這個時代普遍的一種現象。雖然人們都知道長時間看手機不好，下意識的克制看手機行為，以為這樣脫離手機依賴患者這個稱号。往往碎片化看手機，一天下來使用手機的時長不降反增。「OffScreen」通過細分時間屬性為用戶直觀呈現各種場景下使用手機的詳細數據，通過數據展示以及專注時間，防止用戶沉迷手機無法自拔。

1. 品牌元素

「OffScreen」背景色使用極其大膽，淺色模式下采用暖橘色作為品牌主色調，暗色模式下采用海藍色作為主色調，相比Apple設計規範中的顔色，這種帶有傾向性的色彩更容易營造一種産品氛圍，強化産品感知度。圖标方面，具有操作屬性的圖标采用線性（相對好理解），具有展示屬性的圖标采用面性風格（設計表現更強且有文字描述相對好理解）。

2. 動效表達1

引導流程專場用了大量位移、漸變效果，使原本單調的靜态頁賦予生動表現力。吸引用戶眼球，達到品牌傳播效果。

3. 動效表達2

動效貼合操作效果，用戶還沒使用就能一眼明白産品如何使用，這就是引導動效的好處。當你專注番茄鐘時，隻需在番茄上滑動标尺選擇準确時間，就能開始專注。當完成專注會提供統計數據，并且有彩帶飄落效果，營造打卡勝利的儀式感，強化産品感知，為用戶下一次專注做準備。

4. 商業模式-細節之處

内購頁采用依次呈現的交互方式，頭圖是一個人在看手機，采用線性風格手法，這種形式區别于其他産品，會給人以眼前一亮的感覺，加深用戶對産品的記憶。付費按鈕吸附與頁面底部，根據菲茨定律，起始于目标位置越近，到達目位置的時間就會越短，從而用戶更容易點擊。

一次買斷制，¥30.00解鎖終身會員。作為一款時間統計、番茄鐘、專注時間與一身的産品，對于時間管理有強需求的用戶來說價格還算不錯。流暢的交互呈現以及有趣的配圖描述，間接感受到Off Screen産品的細膩之處，用戶為此買單也不是說。

OffScreen的成功在于能把單一的屏幕使用時間進行多維度分析呈現，就說“呆呆的看”與“邊走邊看”這兩項數據，就是調用系統運動數據來判斷使用屏幕的場景。況且每項數據都支持時間軸可視化圖表的方式呈現，細節之處方見專業，這也是好産品所要具有的垂直領域專業度。

五、産品總結

想要産品脫穎而出，一定要嘗試将軟件與硬件結合，可以是陀螺儀、眼動追蹤、閃光燈等等，總之系統推出新的功能，就盡量把它用到産品裡去。不僅如此，看以上幾個産品，截圖模塊内容都頂滿了，說明App想要展示的細節還有很多，從側面也能看到開發者們不留一塊“空白”的用心。

大廠産品固然很好，做法更符合大衆市場符合消費者需求，随着不斷新增功能，産品變得越來越普适大衆，無産品獨特風格可言。因為背後有龐大的員工要養活。相反小團隊獨立開發者們沒有太多顧慮，一心想把一個點做好做緊緻，哪怕隻是計時，也要做的自己滿意為止，才會交卷，時代在變，匠人之心從未改變。值得緻敬這些開發者們。

跳脫大廠的産品，來看看獨立開發者和小型開發團隊，一人即團隊，遇到各類問題都要獨自進行解決，可想而知工作量會有多大。他們的産品或許沒有龐大的生态體系來滿足大衆用戶使用需求，但App Store十餘年的發展，建立起細顆粒的開發環境，正是這種良性生态，讓那些有光的開發者，随心所欲讓心中的想法變成現實，讓夜裡的小路燈照亮了整片街道。

就連開發者們都這麼拼搏，作為設計師的我們哪還有抱怨之說，這麼多好的産品擺在眼前，真是難得的學習機會，習他人之處，補自我之短。一起加油一起進步。

六、結語

設計師要有發現美的眼睛。美不僅是視覺，還有好的體驗流程。不要讓用戶思考，這是每個設計師所追求的。認真記錄産品細節，了解背後的思考，也是不斷提升自己邏輯思維和表達能力的一種方式。

#專欄作家#

碳水Sir；草蓉三石，人人都是産品經理專欄作家。One More産品設計負責人，擅長設計細節洞察分析。

本文原創發布于人人都是産品經理。未經許可，禁止轉載。

本文為人人都是産品經理《原創激勵計劃》出品。

題圖來自Unsplash，基于 CC0 協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部