Visual Mockups

这是一套可以直接感受气质、层级和状态表达的 UI 视觉稿

我把当前 PRD 和 UI 交付稿里的关键界面，做成了高保真 HTML mockup。你现在看到的是方向稿，但已经足够用来判断视觉语言、信息密度、地图状态和告警风格是否符合预期。

查看 UI 交付稿原文回到体验说明页

视觉方向

这套视觉稿刻意避开了“科技后台感”和“萌宠社区感”，走的是更克制、更可靠、更适合安全产品的路径。

Calm Reliable Outdoor-aware Action-first Forest green Warm sand Amber / clay alerts

9:41

Home

All pets

3 pets · 2 safe · 1 needs attention

Luna American Shorthair

online

Safe at home

Backyard fence · just updated

Battery 78%

1 min ago

Mochi Mini Poodle

alert

Outside safe zone

Elm Street · view live location

Battery 42%

30 sec ago

Coco Golden Retriever

delayed

No new update yet

Last seen near Pine Ridge

Battery 61%

18 min ago

Home Map Alerts Profile

9:41

Map

Luna focus

All Luna Mochi Coco

Live

Luna · Safe at home

Start finding Track replay

Home Map Alerts Profile

9:41

Alerts

3 active

All Critical Device Health

Mochi left safe zone

30 sec ago · Elm Street

Open live map and start finding if needed.

Battery getting low

1 h ago · Luna device

Battery may not last through tonight. Charge soon.

No fresh update yet

18 min ago · Coco

We are still showing the latest known location.

Home Map Alerts Profile

9:41

Pair device

Step 2 of 3

Get Luna online in about 2 minutes

Pet Collar S FW 1.0.9 · Ready to pair

nearby

Keep the collar close

We are connecting now. If it takes too long, you can retry without starting over.

Connect device

Need help

Pairing Map Alerts Profile

Widget 视觉稿

Widget 不是迷你 App，而是一块“值不值得点开”的桌面摘要。这里给出 Small 和 Medium 两种表达。

这套视觉稿目前表达的判断

如果你只是快速过一遍，我建议先看这 4 件事是否符合你想要的方向。

视觉气质

偏温暖、安静、可靠，不走冰冷科技风，也不走过度可爱路线。

信息层级

Home 先给判断，Map 先给动作，Alerts 先给问题结论，Widget 先给快速摘要。

状态表达

安全、关注、紧急、延迟都通过颜色、文案和布局同时传达，不只靠一个红点。

工程落地性

这些页面已经和你现有的 UI 交付稿 token、页面结构、主导航保持一致。