WWDC22｜从苹果大奖中发掘小而美的设计奥秘

事先声明 /attention ：

1. 强烈建议使用电脑查看，用户体验更佳。
2. Gif 体积较大，请耐心查看。
3.为了让设计细节更容易被看到，用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 原创发布。未经许可，禁止转载。