Selected Works  /  Portfolio 2026
Loading
Assets
0%
Web Design Mobile Apps Enterprise Design Systems Ready
Drag
UI Design
Selected Works 2007 — 2026

Designing Interfaces That Think.

19 years shaping digital products across web, mobile, enterprise & design systems. I turn complexity into clarity — and clarity into business results. Tele: 13520216428 Email: Malet10@126.com

0
Years
Experience
0
Projects
Shipped
0
Brands
Served
0
Design
Systems
Scroll to explore↓
Web DesignMobile AppsEnterprise Design SystemsInteractionCraft Web DesignMobile AppsEnterprise Design SystemsInteractionCraft
01 About / 关于我

Nineteen years, one mission: make complexity understandable.

十九年，我只做一件事：让复杂变得可被理解。

From skeuomorphism to flat, responsive to multi-device, design systems to AI-native interfaces — I have lived through every paradigm shift in China's internet product design, and turned each one into methodology, not just memory.

My work is not about making screens pretty. It is about finding the one right answer between business goals, technical constraints and human cognition. After 19 years, the real asset is judgment.

0
Years / 年经验
0
Projects / 项目
0
Brands / 品牌
0
Awards / 奖项
02 Capability / 能力矩阵
Product Thinking
需求拆解 · 商业目标对齐 · 数据驱动迭代 · 方案取舍
Interface Design
视觉语言 · 栅格系统 · 动效节奏 · 多端适配
System Building
组件库 · Design Token · 规范文档 · 产研协同
Complex Data
B 端中后台 · 数据看板 · 流程重构 · 效率度量
Toolchain
Figma · Sketch · Principle · AI 辅助设计工作流
Team Impact
设计评审 · 方法论沉淀 · 设计师培养 · 跨部门推动
Download CV Let's Talk
UI DesignUX StrategyDesign Ops MotionAccessibilityTokens UI DesignUX StrategyDesign Ops MotionAccessibilityTokens
03 Web Design / 网页与品牌站

Web
Design

07 / 37 Works
品牌官网、营销落地页与内容型站点。以视觉叙事建立第一印象，用信息节奏引导转化路径。
ZERO005
01
ZERO005 — Tech Website
品牌站重构 · 深色视觉体系 · 响应式
→
The Office
02
The Office — Minimal
留白叙事 · 大字号排版 · 微动效
→
P53
03
P53 — Editorial Web
版式系统 · 视觉层级
→
Wildlife
04
Wildlife Gallery
瀑布流 · 沉浸浏览 · 焦点引导
→
Colony
05
Colony — Sign In
图片叙事 · 情感化设计
→
Home Website
06
Home Website
首屏策略 · 转化路径
→
Branding
07
Brand Design
视觉锤 · 品牌一致性
→
04 Mobile Apps / 移动应用

Mobile
Apps

18 Works — Scroll to move →
金融、健康、电商、内容娱乐四大赛道。在拇指热区与信息密度之间，找到最省力的那一版交互。
Online Banking
08
Online Banking
Bank
Awe Finance
09
Awe Finance
Bank
Account
10
Account Overview
Wallet
Pacent
11
Pacent
Wallet
School UI
12
School UI
Learn
Redesign
13
MaleiDesign Redesign
Redesign
Watch Health
14
Watch & Health
Health
Health Tracker
15
Health Tracker
Health
AI Fitness
16
AI Fitness
AI · Health
Minimal Fitness
17
Minimal Fitness
Fitness
ShopPay
18
ShopPay
E-Commerce
Shoes Shop
19
Shoes Shop
Fashion
05 Enterprise / B 端与数据看板

Dash
boards

07 / 37 Works
中后台、SaaS 与数据密集型界面。把 200 个字段压缩成一眼能懂的结构，是资深设计师真正的手艺活。
Base SaaS
26
Base — SaaS Dashboard
信息架构 · 组件复用 · 多角色视图
→
Finovate
27
Finovate Finance
财报可视化 · 密度控制
→
CoreQ
28
CoreQ Healthcare
合规提示 · 流程引导
→
FlowState
29
FlowState Projects
协作视图 · 状态语义
→
Data Board
30
Data Insights Board
图表选型 · 洞察优先
→
Finance Admin
31
Finance Admin Console
权限分层 · 批量操作 · 效率度量
→
B-end System
32
Enterprise Interaction System
框架层 · 导航模型 · 一致性
→
06 Design Systems / 设计系统

Systems
& Tokens

05 / 37 Works
从色彩、字阶到组件与图标规范，让一个团队产出一百个界面仍像出自一人之手。
EOS
33
EOS Design System
组件体系 · Token 架构 · 文档站
→
Color Spec
34
Color & Type Scale
语义化色板 · 对比度校验
→
Components
35
Component Library
状态全覆盖 · 交互说明
→
DS Overview
36
System Overview
规范文档 · 检索体验
→
Icon Spec
37
Icon & Size Specs
栅格 · 视觉重量统一
→
07 Method / 工作方法

How
I Work

04 Steps
十九年沉淀下来的不是软件操作，而是一套可复用的判断框架。
01
Define the Real Problem
先把需求翻译成问题。区分「用户说的」和「用户要的」，用业务指标锚定设计目标，避免在无意义的界面上做精致的浪费。
02
Structure Before Surface
信息架构先行，再谈视觉。用任务流、状态矩阵和异常清单把复杂度摊开，确认没有遗漏的边界场景。
03
Design the System, Not the Page
不做单页，做体系。建立栅格、色板、字阶与组件规则，让方案具备可扩展性，交付后能持续生长。
04
Ship, Measure, Iterate
设计到上线才是终点。走查还原度、跟踪核心指标、复盘真实反馈，把结果反哺回设计系统。
↑