SnowTech Ecosystem

SnowTech Ecosystem

Enterprise Zero-Trust Security Workspace

Role
Lead Product Designer
Timeline
2024 - 2026
Platform
Web / Desktop Chrome
Output
UX / UI / Strategy

“B 端设计的最高境界，是让复杂的业务逻辑在极简的界面中隐形。”

User Personas

IT 管理员

部署 VPN 极其繁琐，员工经常报障，排错成本极高。

普通员工

每天需要输入十几次密码，远程办公时访问内网奇慢无比。

Core Workflow
01

Discovery

管理员在控制台一键创建企业应用策略。

02

Distribution

策略通过云端毫秒级下发至全员浏览器。

03

Access

员工免密单点登录，直接安全访问内网 SaaS。

01 // Context

雪诺科技的零信任生态是替代传统 VDI 的新一代架构。作为唯一体验负责人，我主导了从底层逻辑重构到高保真界面落地的全过程。

02 // The Challenge
B端安全后台通常伴随着反人类的长表单和复杂的层级嵌套。PM 提供的初始原型试图将所有配置项平铺，这会导致新手管理员极高的认知负荷和出错率。
03 // Logic Refactoring
01

分步渐进式架构

将原本包含上百个字段的长表单，拆解为基础配置、策略绑定、发布上线三个逻辑闭环，极大降低填写阻力。

02

Draft vs Publish 机制

引入发布状态机，解耦前端表单状态与后端真实数据，管理员可中途保存草稿，消除了表单丢失的焦虑。

03

实时脱敏预览

不再让用户盲猜脱敏规则，右侧提供所见即所得的正则匹配高亮预览区域。

Interface Anatomy
Anatomy
全局工作台
将最高频的数据看板前置
状态发布开关
解决前后端草稿逻辑冲突的核心机制
Design Trade-offs
Plan A: 弹窗流

通过无限弹窗配置规则。缺点：遮挡底层视野，极易迷失层级。

Plan B: 抽屉与分步表单

右侧抽屉滑出，保留父级上下文，空间利用率提升 40%。

Edge Cases & Empty States

空状态 (Empty)

新注册企业无应用时，提供清晰的 Onboarding 引导动画。

极限值 (Limits)

当应用名称超过 50 字符，自动折叠并提供 Tooltip。

04 // Visual Execution
After
Before
Wireframe (Before)
High Fidelity (After)
Pixel Perfection

Micro-Interactions

复杂的权限穿梭框 Hover 态与拖拽阴影的像素级打磨。

Zoom
Design Engineering
UI Component
Design Tokens & JSON Payload
{
  "component": "SnowButton",
  "variant": "primary",
  "state": "disabled",
  "tokens": {
    "bg": "var(--snow-blue-500)",
    "opacity": 0.4
  }
}

The Graveyard (Rejected Concept)

Rejected

Reasoning: 早期试图模仿传统的防火墙配置界面，被业务线否决，因为我们的受众是普通 IT 而非顶级极客。

"“这套全新的后台让我们的客户交付时间从 2 周缩短到了 3 天。”"

— VP of Product

"“非常严谨的组件规范，前端研发成本肉眼可见地降低了。”"

— Frontend Lead
Deliverables Project
Deliverable
Deliverable
Deliverable
Deliverable
snowtech.app/workspace
Interaction
AI 侧边栏上下文感知交互，支持拖拽网页内容直接生成摘要。
05 // Foundation

Color Tokens

Typography

Inter / JetBrains Mono
14px Regular / 1.5 Leading
06 // The Impact
90%
部署成本降低
40%
配置效率提升
0 to 1
设计规范基建
Full View
The Pivot (转折点)

在深入调研后我发现，管理员根本不关心‘策略怎么配’，他们只关心‘员工能不能连上’。我们将配置逻辑从‘基于规则’彻底转向了‘基于意图’。

Atomic Design

Component Anatomy

精确到像素的间距与圆角定义，极大地控制了开发侧的还原偏差。

px: 16px
radius:
12px
Information Architecture
SnowSpaces Admin
Global Dashboard
Access Policies
User Identity
Audit Logs

Global Scalability (I18n)

Deploy Secure Gateway
نشر البوابة الآمنة
Accessibility (WCAG)

Design for Everyone

满足企业级软件的无障碍合规要求，确保色弱与纯键盘用户的操作体验。

Keyboard Focus Ring2px Solid Blue
Contrast Ratio7.1:1 (AAA)

Perceived Performance (感知性能)

针对百万级日志拉取，设计了带微光扫视的 Skeleton Loading，降低了用户 40% 的等待焦虑感。

AI Copilot State Machine
Idle
Analyzing DOM...
Streaming Payload...
Action Suggestions

The Evolution

v1.0

基础可用，但表单过长。

v2.0

引入抽屉组件，但上下文易丢失。

v3.0

最终采用分步式弹层，完美闭环。

Motion Choreography

拒绝原生生硬的线性动画。精心调优的贝塞尔曲线，赋予 UI 真实的物理重量感与数字呼吸感。

cubic-bezier(0.22, 1, 0.36, 1)
UX Microcopy
BEFORE (Machine Tone)
"Error 404: Gateway not found"
AFTER (Human Tone)
"网关未响应，请检查连接器状态或重试"

Power User Shortcuts

Cmd + K (Global Search)
Cmd + / (Shortcuts Help)

Design vs Engineering Constraints

由于后端 WebSocket 连接建立需要 800ms，我在按钮上增加了‘连接中’的过渡态，避免了用户的重复点击引发的数据脏写。

What's Next
Q3: AI Copilot Integration
Q4: Automated Threat Response
Interactive Anatomy (X-Ray)
Dark UI[ Hover to inspect underlying DOM architecture ]
Clear UI
<SidebarNavigation />
state: collapsed
<DataGrid virtualized={true} />
render time: 1.2ms
Dimensional Deconstruction
BASE_LAYER / Canvas
Glassmorphism UI
ACTION_BUTTON
Event Stream Topology
PostgreSQL
LLM Engine
Client UI
Magnetic Physics Engine

✔ Compiled successfully in 1432ms

Wait until bundle finished...

Injecting Magnetic Physics...

[framer-motion] useSpring initialized

~
Up Next

AllinOne Figma Plugin