Vigilo.
为令人不安的数据， 打造平静的界面： 把 239 个国家的新闻，变成一个清晰的数字。
产品、文案与系统——3 周完成。
新闻标签页
- 做了什么
- 一款旅行安全应用，把 239 个国家的新闻转化为一个 1–5 级的风险数字。
- 为什么
- 关于危险的信息很多，却没人真正看懂：18 位受访者中有 14 位说不清到底有多危险。
- 我的角色
- 面向 iOS、Android 和 Web 的产品设计、UX 文案与设计系统。
- 成果
- 239 个国家 · 35 个界面 × 2 套主题 · 3 周
一款移动应用：把 239 个国家的新闻变成一个数字，并 解释它对 你的行程意味着什么。
一套量表。 每个界面。
首页、国家、助手、报告、行程与 SOS——两套主题。
关于危险的信息很多。 真正的理解为零。
18 场访谈：游客、外派人员、商务旅客。
说不清到底有多“危险”
“局势不稳”——这是说别去吗？
家人群聊引发恐慌
转发来的视频其实是 2019 年的。
不知道紧急电话号码
“格鲁吉亚是 112 吗？泰国呢？”
阅读完整故事
出行前，人们会打开五个标签页：新闻、Telegram 频道、论坛、外交部网站，还有家人群聊里转发的一句“那边太可怕了”。每条信息都和其他的矛盾，要么写得惊慌失措，要么满是官话套话。于是决定只能凭情绪下，或者干脆无法下。
我们访谈了 18 个人——游客、外派人员和因工作需要飞行的人。每个人都提到了三件事。
- 14/18 说不清到底有多“危险”。 “他们写‘局势不稳’。那又怎样——别去？还是只要避开抗议活动？”——带孩子的家庭度假者。
- 11/18：家人群聊引发恐慌。 “妈妈转发了一段视频。我花了半小时上网查，结果是 2019 年的。”——一位设计师。
- 16/18 不知道紧急电话号码。 “格鲁吉亚是 112 吗？泰国呢？说实话，我不知道。希望永远用不上。”——一位摄影师。
颜色只是信号。 其余一切保持安静。
中性的界面底色、五种风险颜色，以及唯一一个用于操作的青绿色强调色。
一张卡片，一个想法
红色只留给 SOS
来源紧贴事实
平静的语气
阅读完整故事
做一款讲威胁的应用，很容易做得让人惊慌：红色横幅、感叹号、警报声。我们反其道而行。界面底色中性，没有装饰性图标，也没有渐变。唯一承载含义的，是五色风险量表和一个用于操作的青绿色强调色。当屏幕变成橙色时，你立刻就能察觉——因为其他东西都没有在大喊大叫。
- 一张卡片，一个想法。 不做复合区块。如果需要两个结论，就给你两张卡片。
- 红色只留给 SOS。 紧急红特意与 4 级保持一致：它的意思是“立即行动”。
- 来源紧贴事实。 没有来源的指数只是一个数字。我们始终标明它从哪来、什么时候的。
- 平静的语气。 即使在 5 级也没有感叹号。只有事实、区域、时间、行动。
先看——你在哪里。 再看——你要去哪里。
“这里平静吗？”和“我要飞去的地方呢？”。唯一会跳动的，是“你在这里”的那个圆点。
阅读完整故事
首页围绕人们真正会问自己的两个问题而建：“这里平静吗？”以及“我要飞去的地方呢？”。第一张卡片是你当前所在位置及其指数、24 小时趋势，以及你此刻身处国家的紧急电话。第二张是你的下一次行程及其预测。
下方依次是已关注的国家、“今日世界”信息流和助手。没有任何东西在闪烁：唯一鲜活的，是“你在这里”的圆点。
“去还是不去”—— 十秒内给出答案。
先免费让你看懂——直到最后，才提供购买报告的选项。
国家 · 8 类威胁
我的国家
深色主题
用环形，不用吉祥物
角色只能娱乐；环形才能传达信息。
地图展示的是事件
只展示过去一周内得到证实的事件。
访客视图
一个链接即可打开所有免费内容。
阅读完整故事
一个页面，十秒内回答“去还是不去”。带风险等级的照片头图、网格排列的八类威胁、区域地图、今日新闻、12 个月的存档，直到最后才是购买报告的选项。顺序是刻意安排的：先让你免费看懂，再提出付费方案。度假区平静而首都不平静，第一屏你就能看出来。
- 用环形，不用吉祥物。 我们试过一个表情随风险等级变化的角色。最后放弃了：它只是在娱乐，而不是传达信息。带数字的环形，一秒就能读懂。
- 地图展示事件，而不是风景。 真实地图的细节会分散注意力。示意图只显示这一周内发生过已证实事件的地方。
- 访客视图。 指向某个国家的链接无需注册即可打开全部免费内容。存档和报告则隔着一层玻璃，只需再多一步操作。
不是聊天机器人—— 而是谣言核查器。
粘贴一条转发来的消息，即可得到附来源的结论卡片。
阅读完整故事
最常见的恐慌来源，是家人群聊里转发的一条消息。所以助手的主要场景不是“随便问”，而是粘贴一条传言，拿到结论：属实、部分属实、谣言。附带等级颜色和来源列表。答案是一张卡片，而不是一大段文字。
第二个场景是“这片区域晚上安全吗”。答案会给出具体的时间段和街道，而不是一句“请小心”。
一份你 真心愿意读的文档。
一款付费产品，拥有杂志般的呼吸感——并沿用同一套设计语言。
- 01编号章节以及大号引语式结论
- 0230 天预测附置信区间
- 03离线可用并附上你所在国家的紧急电话
阅读完整故事
报告是一款付费产品，必须看起来物有所值。编辑式排版：编号章节、大号引语式结论、区域地图、带置信区间的 30 天预测、联系方式。与应用同一套设计语言，但拥有杂志般的呼吸感。
它会保存下来供离线使用。结尾的紧急电话不是通用号码——而是此刻这个人所在国家的号码。
一份逐日显示 风险的日历。
每个日期下方都有一个预测颜色的圆点。只有在 SOS 里，红色才占主导。
阅读完整故事
创建行程时，每个日期下方都有一个预测颜色的圆点。选日期不再靠碰运气。行程界面汇集了路线、清单和可信联系人。
SOS 是唯一以红色为主的界面：超大号码、一键拨打、附位置的“我没事”、当地语言常用语。无需网络也能使用。
出错时也绝不 关掉 SOS。
安全类应用必须在其他一切都失灵时还能工作。
阅读完整故事
空状态用一句话说明价值，并提供一个操作。错误提示会说明我们在用什么替代数据展示，以及何时刷新。服务完全中断时，会引导到紧急求助。骨架屏、离线横幅、通过链接进入的访客视图——全都是一开始就设计好的，而不是“以后再说”。
同一种含义， 两种原生语言。
量表、结构和文案是共用的。
阅读完整故事
iOS：Onest 字体、细描边、悬浮在内容之上的液态玻璃菜单。Android：Material 3 Expressive——Manrope 字体、无描边的色调表面、胶囊按钮、带指示器的导航栏。风险量表、界面结构和文案是共用的。换手机的人无需重新学习任何东西。
规则不多， 但很严格。
每套主题 7 个 token，4 种圆角，5 个组件。
Onest 400–800，支持拉丁与西里尔字母。4px 网格，18px 边距。
“不要规划行程。如果你已身处该国，请确认最近的避难所在哪里。”
完整的 token 与语气规范
两套主题，每套七个 token。四种圆角。七种字体样式。构成一切的五个组件。语气归结为三条规则。包含 token 与示例的完整系统另有单独文档。
- 浅色主题背景 #F4F3EF——偏暖，而不是纯白。
- 深色主题背景 #0B0E13——近黑，带一丝蓝调。
- 强调色 #0E9C90 / #3ED3C3——用于操作与购买。
- 字体 Onest——拉丁与西里尔字母，400–800。
- 圆角 18 · 24 · 28 · 999——按钮 · 卡片 · 底部面板 · 胶囊。
- 4px 网格，18px 边距，12–14px 间距，16–18px 内边距。
语气：平静，不用感叹号。 即使是危急等级，也用事实来描述：“不要规划行程。如果你已身处该国，请确认最近的避难所在哪里。”
这对你意味着什么。 每个事件都附带一个结论：区域、时间、行动。“避开人群聚集的地方，不要在警察附近拍摄。”
来源紧贴事实。 数据从哪来、何时更新，始终清晰可见：每一行下方都有“JAMnews · 2 个来源 · 9 月 13 日”。
交付了什么， 学到了什么。
个界面 × 2 套主题 × 2 个平台
种状态
个 token（每套主题）
个装饰性图标
“当只有风险等级在大声示警时，人们才会相信。”
我们学到了什么
- 做减法比做加法更难。 吉祥物、真实地图、AI“闪光”图标——每一样单独看都很好看，放在一起却碍事。每删掉一样，产品就更诚实一分。
- 状态就是产品。 安全类应用的信任，有一半诞生于没有网络的那一刻。把它放在最前面设计，而不是最后。
- 平静是一项设计决策。 不是单独的语气或配色，而是一套系统：什么大声说话，什么保持安静，以及为什么。当只有风险等级在示警时，人们才会相信。
已交付：35 个界面，每个都有两套主题、覆盖两个平台；12 种状态——空状态、错误、离线、访客、加载；每套主题 7 个 token——整个配色；0 个装饰性图标和渐变。
