核心入口
让连接按钮成为首页清晰的主入口。
APP 项目
移动端应用
Mobile Applications
FISH / UI · UX
SELECTED WORKS
四款产品，四段设计实践。
从需求梳理、交互设计到视觉规范与研发落地。
Metro
Line
LiveWalls
PixetaMetro
THE CONNECTION EXPRESS
列车灵感 · iPhone / Mac
产品介绍
一键连接，操作更直观
Metro 是一款面向全球用户的网络连接应用，为跨境工作、海外出行与日常娱乐提供便捷的连接方式。
围绕快速接入、稳定连接与减少加载等待的体验目标，提供快捷连接、场景化线路选择和实时状态展示，让网络连接更容易使用和管理。
- 主要场景
- 出国办公 · 海外差旅游戏 · 影音娱乐
PROJECT OVERVIEW
项目概览
- 项目类型
- 网络连接工具
- 目标市场
- 北美、东南亚等海外市场
- 设计范围
- iPhone / Mac · UI/UX · Brand Visual
- 我的职责
- 负责 iPhone 与 Mac 端核心 UI/UX 设计，覆盖连接流程、线路选择、订阅服务、品牌视觉及商店素材。
设计课题
围绕连接、状态、品牌与跨端信息组织，明确本项目的四项设计任务。
状态反馈
区分连接前、中、后的界面与反馈。
品牌表达
把列车与隧道意象融入连接过程，而非只用于视觉包装。
跨端组织
iPhone 与 Mac 保持品牌一致，信息结构各有侧重。
核心连接体验
从连接入口到状态反馈，让核心操作与 Metro 的品牌语言保持一致。
设计概念
从名称走向交互
从 Metro 的名称与品牌概念出发，将列车、轨道与隧道意象延伸到核心连接过程。
核心操作
首页以连接按钮作为主要操作入口，当前线路与连接动作相邻呈现。
状态变化
- 01
连接前
隧道画面与主按钮标示连接入口，并显示当前线路。
- 02
连接中
列车出发动效承接等待过程，持续呈现进行中的状态。
- 03
连接后
界面呈现线路、速率、时长与延迟，说明当前连接状态。
线路与使用场景
围绕办公、差旅与影音等使用情境，通过快捷连接、线路分类与收藏，组织不同场景下的线路选择。
出国办公
面向在线沟通、文件传输等工作场景，连接状态需要清晰可确认。
海外差旅
在移动与临时网络环境中，提供快捷的线路选择与切换入口。
影音娱乐
针对影音等内容场景，通过线路分类帮助用户快速找到对应选择。
ROUTE SELECTION
从场景进入线路选择
线路页将快捷连接、场景分类与收藏入口放在同一浏览路径中，并分别呈现空收藏与已有收藏状态。
- 01快捷连接 Fastest Connect 作为快速入口。
- 02线路分类 通过 Streaming、Gaming 等类别组织线路。
- 03收藏线路 收藏常用线路，便于再次查找。
- 04状态反馈 清楚区分空收藏与已有收藏。
账户与服务
从会员权益到使用支持，完善连接之外的服务体验。
设计思路
以连接为核心任务，将账户、订阅与支持功能分层组织，减少首页的信息干扰。
侧边导航
让首页保持聚焦
将账户与辅助功能收纳到侧边导航，首页优先呈现连接操作与当前状态。
套餐订阅 · 会员中心
区分购买前后的信息需求
订阅页突出优惠、价格与行动按钮；会员中心集中展示会员状态、专属权益与使用数据。
帮助与反馈 · 关于产品
区分问题解决与信息查询
帮助页提供常见问题与在线支持；关于页集中版本、订阅和条款信息，明确两类页面的职责。
iOS 商店视觉
通过品牌识别、核心价值与使用场景的连续表达，帮助用户快速理解产品并建立下载预期。
APP STORE / VISUAL STRATEGY
先建立认知，再说明价值
用户浏览商店页面的时间有限，因此前三张封面优先回答产品是什么、如何使用、能提供哪些选择，再逐步补充更多使用场景。
- 01识别产品
用 Metro 蓝与隧道意象建立统一的第一印象。
- 02传达价值
用简短标题突出快速连接、稳定体验与线路选择。
- 03引导下载
从核心能力过渡到真实场景，降低理解和选择成本。
EXTENDED STORY
以场景补充购买理由
游戏、隐私、会员与多端使用继续展开产品价值，让不同需求的用户找到与自己相关的信息。
Mac 端体验
利用 Mac 端横向空间组织操作、过程与结果，支持连接状态与任务信息的查看。
DESKTOP TASK FLOW
围绕桌面端使用方式组织信息
不同于移动端强调品牌动效，Mac 端侧重并列呈现操作入口、处理步骤与连接结果，支持用户查看当前任务状态。
集中操作将线路与连接按钮放在同一视觉层级。并行反馈同时展示处理步骤与当前任务。核验结果通过速率、延迟与防护数据呈现当前连接状态。
MAC APP STORE
提炼可传播的产品卖点
产品界面解决“如何使用”，商店视觉回答“为什么下载”。从完整流程中提炼服务器覆盖、高速连接与隐私保护三项价值，让用户在快速浏览中建立明确认知。
DESIGN DECISION MAP
从设计课题到界面表达
围绕连接状态、线路选择与服务信息，梳理对应的设计判断与界面呈现。
设计关注
让连接过程中的状态持续可见
设计判断
连接前、中、后需要呈现不同的状态信息。
设计落地
设计目标 · 明确连接状态建立连接前、中、后三段状态；用步骤进度、列车动效和结果数据连续反馈。
设计关注
清晰组织地区与线路选择
设计判断
将地区、场景分类与常用线路放在清楚的浏览层级中。
设计落地
设计目标 · 支持线路选择呈现地区与线路层级、常用线路和实时状态，支持线路查看与切换。
设计关注
区分订阅前后的服务信息
设计判断
购买前呈现方案与权益，购买后呈现会员状态与管理信息。
设计落地
设计目标 · 明确服务信息订阅页聚焦方案与行动，会员中心承接有效期、权益和管理入口，支持页呈现帮助信息。
价值指向
把复杂的连接能力转化为清晰的操作、可理解的状态与可传播的产品价值。
Line
LIGHTWEIGHT CONNECTION
体验体系延展 · iPhone / iPad
产品介绍用线路表达
用线路表达
轻量连接
延续 Metro 的连接能力，以点到点的路线交互，呈现更轻量的产品体验。
欢迎页 · 建立产品初印象
以全球线路、内容访问与隐私保护三个主题，帮助首次进入的用户了解 Line 的主要用途。
三大核心功能，建立第一印象
围绕全球线路、内容访问和隐私保护，将三项主打功能转化为直观的场景插图。统一的构图、标题与操作位置，让首次浏览更容易理解和继续。
画面拆解03 个主题 · 同一阅读节奏
国旗与人物场景，让全球连接更直观。
影音与应用元素，说明具体使用场景。
盾牌与锁的意象，传达隐私保护主题。
设计取舍
欢迎页集中说明产品用途，线路选择与连接操作留在首页，控制首次进入时的信息量。
核心连接体验
围绕连接前、连接中与连接后的连续反馈，让用户始终知道当前状态以及下一步动作。
CORE TASK
两种入口，同一连接结果
用户可以从首页直接连接，也可以先选择服务器；服务器选择不是必经步骤，两条路径最终都进入连接结果。
- 选择服务器
- 快速连接
- 连接结果
选择线路后连接 / 首页直接连接 → 结果确认
场景化订阅设计
针对不同使用需求调整订阅页内容，并在连接受阻时提供清楚的体验与升级选择。
SUBSCRIPTION SCENARIOS
四种场景，对应不同需求
根据用户进入订阅页时的使用场景，分别突出日常使用、海外差旅、游戏连接和高速连接。
连接失败引导弹窗
先体验，再升级
首次连接失败时提供一次 VIP 体验；再次失败时，再提示用户升级。
好友邀请与奖励
用户分享邀请码后，双方分别获得会员时间；页面同时承接规则说明、验证和奖励记录。
INVITE & REWARD
分享邀请，双方获得会员时间
邀请人获得一个月会员，被邀请人获得一周体验。
分享邀请码→好友完成验证→奖励到账
商店展示与 iPad 适配
通过 App Store 连续截图介绍主要功能，并在 iPad 上延续连接、线路与会员页面。
APP STORE SHOWCASE
在商店浏览中快速了解产品
从核心连接开始，依次补充全球线路、影音访问、隐私保护与免费体验。
LineVPNLightweight ConnectionProductivity · iPhone / iPad
IPAD EXPERIENCE
为大屏重新安排内容空间
保留相同的操作位置，同时扩大地图、列表和服务信息的浏览区域。
LiveWalls
DYNAMIC WALLPAPER EXPERIENCE
Android · Google Play
PROJECT OVERVIEW从内容吸引、壁纸应用，
从内容吸引、壁纸应用，
到商业转化的完整体验。
LiveWalls 是一款面向 Android 用户的动态壁纸产品。设计围绕首次吸引、内容发现、效果确认与会员转化，串联从进入产品到完成设置的核心路径。
- 产品平台
- Android
- 体验范围
- 欢迎·浏览·预览·应用
- 商业模式
- 会员订阅 + 激励广告
- 交付触点
- 产品界面 + Google Play 素材
PRODUCT FILM / LIVE WALLPAPER
LiveWalls产品动态总览 · 默认静音播放，建议点击开启声音，观看效果体验更佳。
用动态视觉，抓住第一眼
以全屏动态壁纸建立视觉吸引，适时露出进入按钮，并用风格选择承接用户继续探索。
从动态内容出现，到行动入口进入。
适时出现进入按钮。
快速表达内容偏好。
为后续推荐提供依据。
从内容浏览，到个性化设置
围绕壁纸发现、自动切换、会员入口与语言选择，并通过模拟预览帮助用户确认桌面与锁屏效果。
DESIGN THESIS让选择壁纸，
从浏览变成一次确认。
从浏览变成一次确认。
壁纸不是看完即走的内容。用户真正需要的是发现喜欢的风格、判断实际效果，再放心应用。
快速发现
用分类和双列内容流降低寻找成本。
提前确认
通过桌面与锁屏模拟减少应用顾虑。
持续使用
用自动切换与偏好设置延长内容价值。
按风格浏览动态壁纸。
设置壁纸来源与更换频率。
在设置页清晰呈现升级入口。
支持多语言使用场景。
SIMULATOR
应用前，先看见真实效果
从首页快捷入口进入壁纸预览，在桌面与锁屏之间切换模拟，降低应用前的不确定感。
从右上角进入壁纸模拟。
确认动态壁纸主体与操作入口。
预览图标、天气与壁纸的组合效果。
预览时间与系统控件的可读性。
订阅与激励广告，构成双路径变现
部分 VIP 壁纸与高级功能提供两种解锁方式：用户可订阅会员直接获得完整权益，也可观看激励视频广告单次继续体验。
VIP CONTENT精选会员壁纸，
匹配两种解锁偏好。
匹配两种解锁偏好。
BUSINESS VALUE
兼顾订阅收入与广告收入，同时避免单一付费墙中断体验。
一次决策，持续解锁全部 VIP 内容、免广告与自动切换。
完整权益暂不付费的用户可观看视频，单次解锁壁纸或继续高级功能。
单次体验
通过周期订阅获得全部 VIP 壁纸、免广告与无限自动切换。
启用高级功能时，可升级会员或观看一次激励广告。
预览付费壁纸后，可立即订阅，也可看广告单次解锁。
完成付费后，在设置页持续展示会员方案与有效期。
用商店素材建立下载预期
通过置顶图、预览视频与连续宣传图，在下载前说明产品风格和主要功能。
STORE STORY先吸引，
再证明，
最后促成下载。
再证明，
最后促成下载。
- 01
建立识别用置顶图快速传递 LiveWalls 的内容气质。
- 02
证明动态价值以预览视频呈现静态商店图无法表达的动效。
- 03
降低下载疑虑连续宣传图拆解分类、画质和使用效果。
LiveWalls: 4K Live WallpapersSafer Network Studio · Google Play
4.8 ★ 100K+ Downloads
让“好看”能被发现、被确认，
也能持续产生价值。
体验闭环
从动态欢迎、内容浏览到桌面与锁屏模拟，帮助用户在应用前完成判断。
商业平衡
用订阅承接高意愿用户，用激励广告保留低门槛体验，避免单一付费墙阻断路径。
渠道一致
将产品内的内容气质、动态价值与核心功能延伸到 Google Play 展示。
NEXT VALIDATION上线后，用真实行为验证设计判断
- 01 · 应用转化
- 观察壁纸预览到成功应用的完成率
- 02 · 解锁偏好
- 比较会员订阅与激励广告的选择分布
- 03 · 持续使用
- 验证自动切换功能的留存与使用频率
Pixeta
AI PHOTO CREATION
AI 影像创作 · iPhone / iPad
PROJECT OVERVIEW让每张照片，
让每张照片，
一键释放更多可能
Pixeta 是一款面向 iPhone 与 iPad 用户的 AI 影像创作应用。产品通过模板化创意效果与一键式操作，将照片增强、风格转换、人物造型和场景编辑整合为轻量的移动创作体验。
CORE EXPERIENCE
- 01发现灵感
- 02选择模板
- 03生成作品
PRODUCT FILM / AI CREATION
从内容发现、照片上传到 AI 生成与结果查看，呈现完整产品体验。
- 项目职责
- 产品交互 · UI 设计
- 动态表达
- 动效设计 · 产品视频
- 增长触点
- App Store 商店素材
- 产品阶段
- 上线交付 · 持续迭代
先看到可能，再开始创作
首页用双列内容流展示可直接理解的生成结果，让用户先从效果出发选择模板，降低面对空白输入时的创作压力。
以热门效果和真实结果建立创作预期。
DESIGN THESIS用结果吸引选择，
用模板降低门槛。
用模板降低门槛。
- 01
视觉结果优先，快速判断是否感兴趣
- 02
模板承接意图，减少复杂参数理解
- 03
Pro 标识前置，提前说明内容权限
先分类，再浏览
用内容频道和搜索入口帮助用户快速缩小选择范围。
用效果代替功能说明
直接展示生成结果，让模板价值在点击前就能被理解。
把 AI 生成拆成可理解的连续步骤
围绕选择模板、上传素材、确认输入、等待生成和查看结果组织核心路径，让每一步都有明确状态与下一步行动。
明确当前效果与所需照片数量。
调用系统相册完成素材选择。
上传完成后开放生成操作。
用进度与状态文案管理等待预期。
聚焦单张结果与后续操作。
支持回看、保存和继续使用作品。
从创作价值，自然承接会员转化
订阅页集中说明权益与价格，个人中心持续反馈会员状态；About 页面承接版本、协议与服务信息，形成完整的购买前后体验。
用权益、周期与主按钮集中支持购买决策。
订阅后明确展示身份、权益和管理入口。
集中承接版本、协议、隐私与服务入口。
用商店视觉，呈现创意可能
通过 10 张 App Store 素材展示不同的 AI 风格与应用场景，帮助用户在下载前直观理解 Pixeta 的创作能力。
Pixeta: AI Photo GeneratorSAILFISH PTE. LTD. · App Store
DESIGN DECISION MAP让设计决定，
让设计决定，
回应真实问题。
从创作入口、生成过程到价值转化，将体验问题转化为可落地、可验证的设计策略。
01创作入口
用户面对空白输入时，不清楚从哪里开始
以生成结果和模板作为首页入口，让用户先看到可能，再选择创作方向。
验证重点模板点击至开始生成的完成率
02生成过程
AI 处理需要等待，过程容易缺少确定感
拆分上传、确认、生成和完成状态，使进度与下一步操作始终可见。
验证重点生成完成率与等待阶段退出位置
03价值转化
产品价值需要在应用内与商店中被清楚理解
统一会员权益、结果展示与商店素材的视觉语言，形成从体验到下载的完整表达。
验证重点会员页访问、方案选择与购买转化
把复杂的 AI 能力，
转化为轻松可见的创作结果。
降低创作门槛
以结果和模板代替空白输入，帮助用户快速开始。
管理生成预期
让上传、处理和完成状态连续可见，降低等待焦虑。
贯通产品与增长
将会员体验、商店传播与上线迭代纳入同一产品语言。
设计沉淀
结构一致
从导航、页面层级到反馈状态建立统一规则，减少用户学习成本。
组件复用
沉淀按钮、卡片、弹窗、状态与内容组件，提高多版本协作效率。
视觉有别
在同一体验基础上，根据产品定位建立差异化色彩与内容氛围。
持续验证
结合上线反馈、数据观察与运营目标，持续优化核心路径和转化触点。