Bedtime Games · App Icon + Opening + Settings · Draft 4

晚安游戏机 · 图标与开场

第三版。图标和开场已定:E「卡带里的小孩」+ ④「收好最后一个玩具」,上面三节留作记录。最后一节是设置页:背景加些小元素,分组旁白都已删掉,只在页尾留一句晚安。

主角:戴睡帽的小孩。App 里本来就有他:推箱子里他在收玩具,迷宫里是他提着灯走夜路。淡紫睡帽顶着一颗金色绒球,穿蓝色睡衣,脸上有两团红晕。他身上的颜色刚好取自六款游戏的卡带色,所以不用另外设计角色,拿他当吉祥物也不会和游戏里的形象对不上。
01 · 图标方向

选一个图标

点选一个,下面的主屏预览和「月亮升起」会换成它。大图是 1024 原图按 iOS 圆角遮罩缩小后的样子;下排按 60pt、29pt、20pt 的实际像素显示。

02 · 放在主屏上

和别的 App 摆在一起

深色壁纸、浅色壁纸,还有 iOS 18 起的「染色」模式(系统把图标转成单色再上色)。

03 · 开场动画

小孩当主角的开场

每部手机都从静态启动屏开始(系统显示,App 还没跑起来),第一帧就是启动屏那张图,所以接上时没有跳变。页面会自动循环,点手机或按钮可以重播。

04 · 已定

E + ④,一条故事线

  1. 图标:E「卡带里的小孩」。
  2. 开场:④「收好最后一个玩具」。他把最后一个箱子推上星星,星光升空变成月亮,然后进首页。每晚第一次打开播完整版(约 2.4 秒),同一晚再打开只播 0.6 秒短版;点一下屏幕就跳过;开启「减弱动态效果」时直接进首页。
  3. 启动屏:底色改成月光深蓝,画面就是开场的第一帧(地板、小孩、箱子、星星),系统启动屏和 App 之间没有跳变。
  4. 设置页接着讲这个故事:开场里他刚把玩具收好;到了设置页最底下,他已经靠着收好的箱子睡着了,旁边一句晚安。
05 · 设置页

设置页:夜空和页尾的一句晚安

分组旁白已经删掉,文字只保留页尾这一句。左边的设置页已经滚到了最底下,可以往上滚看全页;右边选文案和字体,左边会跟着变,三种语言都能看。

‹

背景里多了什么

  • 星星:十几颗像素星固定在背景上,列表滚动时不跟着动,像隔着窗看夜空。每颗按自己的节奏慢慢闪,最快一次约 3 秒,不会抢注意力。
  • 月亮:右上角露出半个像素月牙,就在标题栏后面,带一圈很淡的光晕。和首页、开场是同一个月亮。
  • 分组小图标:每个分组标题前加一个 9×9 的像素小图标:闹钟、星星、卡带、铃铛、信封。
  • 页尾小场景:滚到最底下,推箱子的地板上,小孩靠着一个已经收好的薄荷色箱子睡着了,头顶慢慢飘出 z,下面是一句晚安。
  • 跟着主题走:这些元素都用场景配色画。切到琥珀、豆绿、墨水屏这些单色主题时,会自动换成对应的单色,不用单独适配。开启「减弱动态效果」时,星星不闪,z 也不飘。

页尾文案

页尾字体

三款都是 SIL 开源字体,可以免费打包进 App。只打包这一句用到的字(三种语言加起来几十个字),体积只有几十 KB。中文和拉丁字母各配一款气质相近的字体:中文字体里的西文字母不全,西班牙语的重音字母可能缺字。

回复一个组合就行,比如「文案 1 + 小薇」。也可以说想怎么改。选定后我把图标、开场、设置页三件事写进同一份规格,然后开工。