MiYa · 品牌指南
MiYa 品牌指南
MiYa 健康报告的品牌指南:怎么说话、名字、色彩、字体、斐波那契间距、标志、凹版图标、动效与制作工具。
用大白话看懂你的健康数据。
MiYa
一份只在你自己的 iPhone 上生成的 Apple 健康报告。视觉是一张钞票凹版:米纸、排线、双线框、扭索纹,中间一颗品牌红的心。
一句大白话,讲完就停。
每个数字下面最多一句解读,先说结论,再给一个日常比方。术语只留一句解释,放进「?」气泡里。
指标解释:写「静坐时每分钟心跳,越低越省力。」,不写「静息心率(RHR)是衡量心血管健康的重要指标……」
变化:写「心脏比之前每分钟少跳 6 下,干活更省力了。」,不写「您的静息心率呈显著下降趋势。」
分数:写「0–100,和你的平时比。」,不写「基于先进算法的综合健康评分」
页标题:写「健康 / 心率 / 恢复 / 活动 / 运动 / 数据」,不写「我的健康数据总览中心」
进度:写「还差 12 公里」,不写「距离下一站尚有 12 公里路程!」
称呼用「你」:不用「您」。英文用 you,句子短,不用感叹号。
不用 emoji:原本放 emoji 的地方,一律换成凹版图标。
数字与单位空一格:62 次/分、48 ms、近 90 天。
中英两套同步:中英两套文案同步改;英文版里不出现中文。
健康边界是硬规矩:分数一律说成「和你的平时比」的相对估算,不说正常或异常。没有睡眠数据时直说无法判断。绝不写诊断,不出现「心脏不好」「可能患有」。需要提醒时,给出能做的事:
如有胸痛、明显气短、头晕或心悸,请停止运动并及时就医。
隐私要说得具体:用能核对的事实,不用形容词。不写「军工级加密」「绝对安全」。
所有计算都在你的 iPhone 上完成。不注册账号,没有服务器,没有统计分析,没有广告。只读取「健康」里的数据,从不写入。
MiYa,只有一种写法。
M 和 Y 大写,中间没有空格。中文和 MiYa 之间留一个空格。App 内页头只写一个词:「健康」。
中性色为主,一颗红心。
品牌红一屏只出现在一两处。凹版件(图标、横幅、纹章、App 图标)有自己的一套墨色:浅色是墨绿配米纸,深色是古铜金配近黑。
底色与文字:page #f5f6f8/#0b0d11,surface #ffffff/#15181e,surface-2 #f0f2f5/#20242c,ink #16171a/#f7f8fa,ink-2 #5b5e66/#bdc0c8,ink-muted #8d919a/#7f848f,grid #e8e9ed/#292d35,axis #d1d3d9/#373c46。
品牌红:accent #f2385a/#ff4768,accent-soft #fff0f3/#321822。
凹版:engrave-line #2f6b55/#d9b56f,engrave-paper #f3e6c4/#080b0a,engrave-gold #c9a44c/#f2cf7a,map-paper #efe2bf/#16130e,map-ink #5b4526/#d9b56f,map-red #b3352b/#e2574c。
图表系列:series-1 #2a78d6/#3987e5,series-2 #eb6834/#d95926,series-3 #1baf7a/#199e70,series-4 #eda100/#c98500,series-5 #e87ba4/#d55181,series-6 #008300/#008300,series-7 #4a3aa7/#9085e9,series-8 #e34948/#e66767。
状态:good #0ca30c/#0ca30c,good-text #006300/#0ca30c,warn #fab219/#fab219,serious #ec835a/#ec835a,critical #d03b3b/#d03b3b。
卡片不画边框:页面用 page 打底,卡片用 surface,靠 shadow 和页面分开。
品牌红只有四个用处:主按钮、选中态、焦点圈和首页那颗心。选中项的底用 accent-soft。
不能只靠红绿区分:状态色只画图形(点、条、圆环),每个状态都配一个词或箭头。
金箔只点一处:指针、落脚点、高亮日、心上的那粒圆点。
两处已知低对比:浅色下 ink-muted 在白底上只有 3.2:1,只给可有可无的注脚;白字放在 accent 上是 3.8:1,所以主按钮文字用 13px 粗体以上。
系统字体,按 φ 递进。
中文苹方,西文 San Francisco。App 不连外网,所以不加载任何网络字体。字号按 φ 递进:11 → 13 → 16 → 21 → 34 → 55。
数字等宽:数字成列对齐的地方一律加 tabular-nums。
三档字重:标题字重 600,数值 680,眉标 700 加 0.08em 字距。
斐波那契间距,黄金点构图。
间距只取斐波那契数列,相邻两级之比趋近 φ = 1.618。主体落在 38.2% / 61.8% 的黄金点上。
1.618fr : 1fr:卡片分栏用黄金比例切。
焦点放在黄金点:焦点、指针、高亮日放在黄金点;表盘开口 ±38.2°;宽高比取 1 : φ。
一屏一件主角:总览第一屏是能量纹章,其余每页的页头是一条封面横幅。插图里不写数值。
一条心形线,三枚标志。
三枚标志都来自同一条心形线。用原件,不要重画;心形不用通用的 ♥ 字符或第三方图标代替。
App 图标:深色底,φ 刻度环、扭索纹、排线填面的品牌红心,一粒金箔。圆角由系统裁切,不要自己加框或阴影。
手表图标:同一颗心的手表版,系统裁成圆形。改任何一处图标,iPhone、手表、小组件三个 target 的版本号一起改。
心形标:米纸底、双线框、品牌红心形。浏览器标签和 32px 以下的场景用它。深浅主题都用同一份。
每个图标都有一个数学母题。
图标是纯 CSS 画的凹版小件,1:1 圆角框:米纸版面、双线框、慢转的扭索纹环、主体(排线填面、双线描边、一点金箔、一种色洗),再加一个小动效。
心:心形线 x = 16 sin³t
脚印:鞋底 1 : φ 的黄金椭圆,两脚落在 38.2% / 61.8%
勋章:φ 五芒星,对角线 : 边 = φ
罗盘:φ 刻度环,半径 23.6 → 38.2
旅程:黄金螺旋,光点从极点向外走
血氧:正方形转 45°,高 : 宽 = √2 : 1
呼吸:同一个圆切两段弧,按 38.2% / 61.8% 开合
表盘:开口 ±38.2° 的 φ 刻度弧
阶梯:三级踏步按 φ 递进
先找母题:新图标先找母题,再画。焦点放在黄金点,颜色只取凹版三色和一种系列色作色洗。
尺寸只改一个变量:尺寸只改 --gi-size;小于 48px 时去掉刻度环与构造线,线条加粗。
默认安静。
一次只有一个主动作,其余是很慢的呼吸或旋转。
统一缓动:cubic-bezier(.23,1,.32,1):先快后稳。
主动作跟数据走:纹章指针扫到电量的位置、地图航迹进场。只动 transform 和 opacity。
扭索纹慢转:转一圈 60–240 秒。
减少动态效果时一切静止:系统打开「减少动态效果」时,一切静止。
先用技能,不从零画。
做 MiYa 的界面与插画,先用这些 agent 技能,不要每次从零画。
golden-engraving:凹版图标、App 图标的那颗心、说明书式插画。现有 17 个图标都出自它。
engraved-ui:封面横幅、能量纹章、图表卡的印版外壳、寻宝地图、手机上的高密度表。
ui-review:改完界面后截图,按尼尔森十原则出问题清单。截图里有健康数据,只交给本机模型看。
ui-ux-pro-max:查对比度、触控尺寸、图表类型这些硬规则。只查规则,不换风格。
emilkowalski-skill:审查动效:缓动方向、能否中断、减少动效。
mandala-emblem:长页面两节之间的分隔小章、成就徽章。不能和首页纹章抢第一眼。
particle-emblem:粒子聚成纹章的开场横幅。只适合网站或商店宣传页。
math-explainer:讲清一个反直觉结论,比如「HRV 为什么越高越好」。
apple-brand-design:只借原则和标志保护规则。它要加载 MiSans 网络字体,MiYa 不连外网,这部分不用。
anatomy:等轴测机械风格和凹版冲突。