首页头图 / HERO COVER

01 / 14 2026

Silver City

白银之城

主 UI / 界面视觉系统

A scalable interface system shaped around urban fantasy, industrial detail, and character-driven storytelling. Clear information hierarchy, a unified component language, and refined feedback rhythms keep exploration, combat, and progression coherent while preserving the distinctive elegance and mystery of its world.

以都市秩序、幻想工业与角色叙事为核心,建立兼具识别度与可扩展性的界面视觉系统。通过清晰的信息层级、统一的组件语言与细腻的反馈节奏,让探索、战斗和成长系统在不同场景中保持一致,同时保留世界观特有的精致感与神秘气质。

OPEN PROJECT 完整项目 · 10 件作品 ↗
首页头图 / HERO COVER
Silver City 白银之城01 / 10
1.png
Silver City 白银之城02 / 10
2.png
Silver City 白银之城03 / 10
3.png
Silver City 白银之城04 / 10
5.png
Silver City 白银之城05 / 10
6.png
Silver City 白银之城06 / 10
7.png
Silver City 白银之城07 / 10
8.png
Silver City 白银之城08 / 10
9.png
Silver City 白银之城09 / 10
10.png
Silver City 白银之城10 / 10
首页头图 / HERO COVER

02 / 14 2025

Arknights: Endfield

终末地

项目 UI / 界面视觉

A UI and information-design study shaped around the industrial science-fiction world of Talos-II. The work focuses on hierarchy, interaction feedback, and visual rhythm, keeping system-heavy screens clear and restrained while maintaining a consistent connection to the game world.

围绕塔卫二的工业科幻语境,建立兼具秩序感、技术感与探索氛围的界面表达。设计重点落在复杂系统的信息分层、操作反馈与视觉节奏,使功能密度较高的界面依然保持清晰、克制,并与世界观形成统一体验。

OPEN PROJECT 完整项目 · 10 件作品 ↗
首页头图 / HERO COVER
Arknights: Endfield 终末地01 / 10
0.png
Arknights: Endfield 终末地02 / 10
00.png
Arknights: Endfield 终末地03 / 10
1.png
Arknights: Endfield 终末地04 / 10
2.png
Arknights: Endfield 终末地05 / 10
2-2.png
Arknights: Endfield 终末地06 / 10
3.png
Arknights: Endfield 终末地07 / 10
4.png
Arknights: Endfield 终末地08 / 10
5.png
Arknights: Endfield 终末地09 / 10
6.png
Arknights: Endfield 终末地10 / 10
首页头图 / HERO COVER

03 / 14 2025

Type Studies 2025

字体设计 2025

字体 / 动态视觉

A new series of visual studies exploring letterform structure, graphic order, and motion rhythm. Scale, material, fragmentation, and recomposition allow typography to remain informative while becoming a central device for atmosphere and spatial expression.

从字形骨架、笔画关系与版面节奏出发,探索字体在游戏视觉、品牌表达和动态场景中的多重可能。通过尺度、材质、切分与重组,让文字既保留信息效率,也成为能够建立情绪和空间感的核心图形。

OPEN PROJECT 完整项目 · 7 件作品 ↗
首页头图 / HERO COVER
Type Studies 2025 字体设计 202501 / 07
项目画面 02
Type Studies 2025 字体设计 202502 / 07
项目画面 03
Type Studies 2025 字体设计 202503 / 07
项目画面 04
Type Studies 2025 字体设计 202504 / 07
项目画面 05
Type Studies 2025 字体设计 202505 / 07
项目画面 06
Type Studies 2025 字体设计 202506 / 07
项目画面 07
Type Studies 2025 字体设计 202507 / 07
deco.jpg

04 / 14 2025

Death Stranding Motion Study

死亡搁浅 · 动效落地

个人作品 / UI 动效

A motion study inspired by Death Stranding’s themes of connection, traversal, and functional visual language. Restrained timing, modular information, and directional transitions allow motion to support both narrative atmosphere and immediate operational feedback.

从《死亡搁浅》的连接概念与功能主义视觉出发,重新组织提示、状态与任务反馈的动态表达。通过克制的节奏、模块化信息和具有方向感的转场,让动效承担叙事与操作确认的双重作用。

OPEN PROJECT 完整项目 · 15 件作品 ↗
Death Stranding Motion Study 死亡搁浅 · 动效落地01 / 15
deco.jpg
Death Stranding Motion Study 死亡搁浅 · 动效落地02 / 15
deco.png
Death Stranding Motion Study 死亡搁浅 · 动效落地03 / 15
deco2.png
Death Stranding Motion Study 死亡搁浅 · 动效落地04 / 15
deco3.jpg
Death Stranding Motion Study 死亡搁浅 · 动效落地05 / 15
deco4.jpg
Death Stranding Motion Study 死亡搁浅 · 动效落地06 / 15
deco5.jpg
Death Stranding Motion Study 死亡搁浅 · 动效落地07 / 15
deco6.jpg
Death Stranding Motion Study 死亡搁浅 · 动效落地08 / 15
LINE_01.png
Death Stranding Motion Study 死亡搁浅 · 动效落地09 / 15
LINE_02.png
Death Stranding Motion Study 死亡搁浅 · 动效落地10 / 15
LINE_03.png
Death Stranding Motion Study 死亡搁浅 · 动效落地11 / 15
LINE_04.png
Death Stranding Motion Study 死亡搁浅 · 动效落地12 / 15
Snipaste_2025-07-25_16-05-53.png
Death Stranding Motion Study 死亡搁浅 · 动效落地13 / 15
Snipaste_2025-07-25_16-09-36.png
Death Stranding Motion Study 死亡搁浅 · 动效落地14 / 15
Snipaste_2025-07-25_16-25-03.png
Death Stranding Motion Study 死亡搁浅 · 动效落地15 / 15
首页头图 / HERO COVER

05 / 14 2025

Project Oxygen

代号【氧气】

主 UI / 视觉系统

A science-fiction survival interface built around pressure, limited resources, and an unknown environment. A unified grid, state-color system, and feedback logic bring exploration, resource management, and character information into one calm and coherent visual language.

以生存压力、有限资源和未知环境为核心体验,构建冷静而具有呼吸感的科幻界面系统。通过统一的栅格、状态色与反馈规则,将探索、资源管理和角色信息整合为清晰一致的视觉语言。

OPEN PROJECT 完整项目 · 16 件作品 ↗
首页头图 / HERO COVER
Project Oxygen 代号【氧气】01 / 16
1.png
Project Oxygen 代号【氧气】02 / 16
2.png
Project Oxygen 代号【氧气】03 / 16
3.png
Project Oxygen 代号【氧气】04 / 16
4.png
Project Oxygen 代号【氧气】05 / 16
5.png
Project Oxygen 代号【氧气】06 / 16
6.png
Project Oxygen 代号【氧气】07 / 16
7.png
Project Oxygen 代号【氧气】08 / 16
8.png
Project Oxygen 代号【氧气】09 / 16
9.png
Project Oxygen 代号【氧气】10 / 16
10.png
Project Oxygen 代号【氧气】11 / 16
11.png
Project Oxygen 代号【氧气】12 / 16
12.png
Project Oxygen 代号【氧气】13 / 16
13.png
Project Oxygen 代号【氧气】14 / 16
18.png
Project Oxygen 代号【氧气】15 / 16
19.png
Project Oxygen 代号【氧气】16 / 16
1.png

06 / 14 2024

Once Upon a Time in Dusk

暮星往事

主 UI / PV 剪辑

A narrative-driven science-fiction project centered on twin cities, memory, and returning home. The interface balances character storytelling, environmental atmosphere, and information clarity, while the PV editing extends the emotional rhythm of the world.

项目以双子城、记忆与归乡为叙事核心,在界面中建立带有时间痕迹的科幻质感。视觉系统兼顾角色叙事、场景氛围与信息可读性,并通过 PV 节奏进一步强化世界观的情绪表达。

OPEN PROJECT 完整项目 · 7 件作品 ↗
1.png
Once Upon a Time in Dusk 暮星往事01 / 07
Once Upon a Time in Dusk 暮星往事02 / 07
Once Upon a Time in Dusk 暮星往事03 / 07
Once Upon a Time in Dusk 暮星往事04 / 07
5.png
Once Upon a Time in Dusk 暮星往事05 / 07
6.png
Once Upon a Time in Dusk 暮星往事06 / 07
7.png
Once Upon a Time in Dusk 暮星往事07 / 07
首页头图 / HERO COVER

07 / 14 2024

Farlight 84

远光 84

游戏 UI / 界面视觉

A UI and information system designed for rapid decision-making in a fast tactical shooter. Clear state hierarchy, compact information structures, and energetic feedback make combat data immediately readable while preserving a distinctive science-fiction competitive identity.

围绕快节奏战术竞技中的高频决策,建立清晰、直接且具有能量感的界面表达。设计通过明确的状态层级、紧凑的信息组织和具有速度感的反馈,使战斗信息能够被快速识别,同时保持产品自身鲜明的科幻竞技气质。

OPEN PROJECT 完整项目 · 15 件作品 ↗
首页头图 / HERO COVER
Farlight 84 远光 8401 / 15
项目画面 02
Farlight 84 远光 8402 / 15
项目画面 03
Farlight 84 远光 8403 / 15
项目画面 04
Farlight 84 远光 8404 / 15
项目画面 05
Farlight 84 远光 8405 / 15
项目画面 06
Farlight 84 远光 8406 / 15
项目画面 07
Farlight 84 远光 8407 / 15
项目画面 08
Farlight 84 远光 8408 / 15
项目画面 09
Farlight 84 远光 8409 / 15
项目画面 10
Farlight 84 远光 8410 / 15
项目画面 11
Farlight 84 远光 8411 / 15
项目画面 12
Farlight 84 远光 8412 / 15
项目画面 13
Farlight 84 远光 8413 / 15
项目画面 14
Farlight 84 远光 8414 / 15
项目画面 15
Farlight 84 远光 8415 / 15
首页头图 / HERO COVER

08 / 14 2024

Lunar Walk

月面独行

个人作品 / 概念设计

A conceptual interface experiment based on solitary lunar traversal and deep-space exploration. Low gravity, communication delay, and environmental data are translated into spacious compositions, precise coordinates, and slow motion for an austere, immersive experience.

以孤独的月面行走和远距离探索为想象起点,研究低重力、通信延迟与环境数据在界面中的视觉化方式。画面以大尺度留白、精确坐标和缓慢动效营造冷峻而沉浸的深空体验。

OPEN PROJECT 完整项目 · 13 件作品 ↗
首页头图 / HERO COVER
Lunar Walk 月面独行01 / 13
1.jpg
Lunar Walk 月面独行02 / 13
Lunar Walk 月面独行03 / 13
Lunar Walk 月面独行04 / 13
Lunar Walk 月面独行05 / 13
5.png
Lunar Walk 月面独行06 / 13
6.png
Lunar Walk 月面独行07 / 13
7.png
Lunar Walk 月面独行08 / 13
8.png
Lunar Walk 月面独行09 / 13
9.png
Lunar Walk 月面独行10 / 13
10.png
Lunar Walk 月面独行11 / 13
11.png
Lunar Walk 月面独行12 / 13
12.jpg
Lunar Walk 月面独行13 / 13
首页头图 / HERO COVER

09 / 14 2024

Type in Motion

字体设计

字体 / 动态视觉

A series of experiments exploring the weight, speed, and emotion of letterforms over time. Through fragmentation, reconstruction, and rhythmic change, typography moves beyond information and becomes a spatial, performative visual element.

这组实验从字形结构出发,探索文字在时间维度中的重量、速度与情绪。通过切分、重组和节奏变化,让字体从信息载体转化为具有空间感和表演性的视觉元素。

OPEN PROJECT 完整项目 · 24 件作品 ↗
首页头图 / HERO COVER
Type in Motion 字体设计01 / 24
1.gif
Type in Motion 字体设计02 / 24
2.webp
Type in Motion 字体设计03 / 24
3.gif
Type in Motion 字体设计04 / 24
4.gif
Type in Motion 字体设计05 / 24
5.webp
Type in Motion 字体设计06 / 24
6.webp
Type in Motion 字体设计07 / 24
7.webp
Type in Motion 字体设计08 / 24
8.webp
Type in Motion 字体设计09 / 24
9.webp
Type in Motion 字体设计10 / 24
10.webp
Type in Motion 字体设计11 / 24
11.webp
Type in Motion 字体设计12 / 24
12.webp
Type in Motion 字体设计13 / 24
13.gif
Type in Motion 字体设计14 / 24
14.webp
Type in Motion 字体设计15 / 24
15.gif
Type in Motion 字体设计16 / 24
16.gif
Type in Motion 字体设计17 / 24
17.webp
Type in Motion 字体设计18 / 24
18.gif
Type in Motion 字体设计19 / 24
19.webp
Type in Motion 字体设计20 / 24
20.gif
Type in Motion 字体设计21 / 24
21.gif
Type in Motion 字体设计22 / 24
22.gif
Type in Motion 字体设计23 / 24
23.gif
Type in Motion 字体设计24 / 24
首页头图 / HERO COVER

10 / 14 2023

Convenience Store Fight

便利店激斗

个人作品 / 游戏 UI

Convenience-store shelves, price tags, and packaging graphics are transformed into the visual assets of a fast action game. High-contrast color, exaggerated feedback, and compact information structures create an immediate experience with a playful sense of humor.

将便利店的货架、价签与包装语言转化为动作游戏的界面资产,形成鲜明、快速且带有喜剧感的视觉体验。高对比色彩、夸张反馈与紧凑信息结构共同服务于即时战斗节奏。

OPEN PROJECT 完整项目 · 18 件作品 ↗
首页头图 / HERO COVER
Convenience Store Fight 便利店激斗01 / 18
13c5721c-d3ae-4e22-b3ff-bfa1839cf7cb_rw_1920 (1).png
Convenience Store Fight 便利店激斗02 / 18
66ad4202-2c4c-4b3a-8b24-571a89ce2f51_rw_1920 (1).png
Convenience Store Fight 便利店激斗03 / 18
339027b6-36f6-42fe-bead-7894060378a8_rw_1920.png
Convenience Store Fight 便利店激斗04 / 18
伊甸11.png
Convenience Store Fight 便利店激斗05 / 18
伊甸12.png
Convenience Store Fight 便利店激斗06 / 18
伊甸13.png
Convenience Store Fight 便利店激斗07 / 18
伊甸14.png
Convenience Store Fight 便利店激斗08 / 18
伊甸15.png
Convenience Store Fight 便利店激斗09 / 18
伊甸17.png
Convenience Store Fight 便利店激斗10 / 18
伊甸18.png
Convenience Store Fight 便利店激斗11 / 18
伊甸19.png
Convenience Store Fight 便利店激斗12 / 18
月面1.gif
Convenience Store Fight 便利店激斗13 / 18
kenshi.png
Convenience Store Fight 便利店激斗14 / 18
q1.gif
Convenience Store Fight 便利店激斗15 / 18
q2.gif
Convenience Store Fight 便利店激斗16 / 18
q3.gif
Convenience Store Fight 便利店激斗17 / 18
q4.gif
Convenience Store Fight 便利店激斗18 / 18
2.png

11 / 14 2022

Dislyte

神觉者

VI 设计

A visual identity system combining mythological archetypes with contemporary city life, electronic music, and youth culture. Logo, graphics, color, and campaign applications work together to maintain a distinctive and energetic brand across touchpoints.

项目将神话原型与当代都市、电子音乐和青年文化结合,建立具有辨识度的品牌视觉系统。设计涵盖标志、图形、色彩和传播应用,使产品在不同场景中保持统一而富有能量的表达。

OPEN PROJECT 完整项目 · 18 件作品 ↗
Dislyte 神觉者01 / 18
2.png
Dislyte 神觉者02 / 18
3.png
Dislyte 神觉者03 / 18
4.png
Dislyte 神觉者04 / 18
5.png
Dislyte 神觉者05 / 18
6.png
Dislyte 神觉者06 / 18
7.png
Dislyte 神觉者07 / 18
8.png
Dislyte 神觉者08 / 18
9.png
Dislyte 神觉者09 / 18
10.png
Dislyte 神觉者10 / 18
11.png
Dislyte 神觉者11 / 18
12.png
Dislyte 神觉者12 / 18
13.png
Dislyte 神觉者13 / 18
14.png
Dislyte 神觉者14 / 18
15.png
Dislyte 神觉者15 / 18
16.jpg
Dislyte 神觉者16 / 18
17.jpg
Dislyte 神觉者17 / 18
18.png
Dislyte 神觉者18 / 18
首页头图 / HERO COVER

12 / 14 2021

Eden Apocalypse

伊甸启示录

主 UI

A UI system designed around character progression and combat loops, balancing atmosphere with frequent interaction. Clear hierarchy, modular rules, and motion feedback reduce the cognitive load of complex systems while reinforcing the tension of a post-apocalyptic world.

围绕角色养成与战斗循环,建立兼顾沉浸氛围和高频操作的界面体系。通过明确的信息层级、模块规则和动效反馈,减少复杂系统的理解成本,并强化末世题材的情绪张力。

OPEN PROJECT 完整项目 · 26 件作品 ↗
首页头图 / HERO COVER
Eden Apocalypse 伊甸启示录01 / 26
1.jpg
Eden Apocalypse 伊甸启示录02 / 26
2.jpg
Eden Apocalypse 伊甸启示录03 / 26
3.jpg
Eden Apocalypse 伊甸启示录04 / 26
4.jpg
Eden Apocalypse 伊甸启示录05 / 26
5.jpg
Eden Apocalypse 伊甸启示录06 / 26
6.png
Eden Apocalypse 伊甸启示录07 / 26
7.jpg
Eden Apocalypse 伊甸启示录08 / 26
8.png
Eden Apocalypse 伊甸启示录09 / 26
9.png
Eden Apocalypse 伊甸启示录10 / 26
10.png
Eden Apocalypse 伊甸启示录11 / 26
11.jpg
Eden Apocalypse 伊甸启示录12 / 26
12.jpg
Eden Apocalypse 伊甸启示录13 / 26
13.png
Eden Apocalypse 伊甸启示录14 / 26
14.png
Eden Apocalypse 伊甸启示录15 / 26
15.png
Eden Apocalypse 伊甸启示录16 / 26
16.png
Eden Apocalypse 伊甸启示录17 / 26
17.jpg
Eden Apocalypse 伊甸启示录18 / 26
Eden Apocalypse 伊甸启示录19 / 26
Eden Apocalypse 伊甸启示录20 / 26
Eden Apocalypse 伊甸启示录21 / 26
21.png
Eden Apocalypse 伊甸启示录22 / 26
Eden Apocalypse 伊甸启示录23 / 26
Eden Apocalypse 伊甸启示录24 / 26
Eden Apocalypse 伊甸启示录25 / 26
Eden Apocalypse 伊甸启示录26 / 26
01.png

13 / 14 2020

All Star Fight

全明星激斗

主 UI

A high-impact interface for a character-rich fighting game with multiple systems. Strong hierarchy, rhythmic composition, and unified components keep dense content readable during frequent interaction while sustaining an energetic competitive tone.

面向多角色、多系统的格斗产品,设计高识别度且具竞技冲击力的主界面与战斗信息体系。通过清晰的优先级、强节奏构图和统一组件,保证复杂内容在高频操作中仍然易读。

OPEN PROJECT 完整项目 · 13 件作品 ↗
01.png
All Star Fight 全明星激斗01 / 13
02.png
All Star Fight 全明星激斗02 / 13
03.png
All Star Fight 全明星激斗03 / 13
04.png
All Star Fight 全明星激斗04 / 13
05.png
All Star Fight 全明星激斗05 / 13
06.png
All Star Fight 全明星激斗06 / 13
07.png
All Star Fight 全明星激斗07 / 13
08.png
All Star Fight 全明星激斗08 / 13
09.png
All Star Fight 全明星激斗09 / 13
11.png
All Star Fight 全明星激斗10 / 13
12.png
All Star Fight 全明星激斗11 / 13
13.png
All Star Fight 全明星激斗12 / 13
通用字色合集.jpg
All Star Fight 全明星激斗13 / 13
首页头图 / HERO COVER

14 / 14 2018

Heroes of Might & Magic

英雄无敌

主 UI / 本地化

A commercial UI and localization project developed within an established IP and a complex strategy system. Visual unification, information hierarchy, and multilingual adaptation improve readability and interaction consistency across the Mainland Chinese and Korean versions.

在成熟 IP 与复杂策略系统的约束下,完成界面视觉统一、信息层级优化及多语言版本适配。设计在延续系列辨识度的同时,提升大陆版与韩文版用户的阅读效率和操作一致性。

OPEN PROJECT 完整项目 · 9 件作品 ↗
首页头图 / HERO COVER
Heroes of Might & Magic 英雄无敌01 / 09
大陆版1.png
Heroes of Might & Magic 英雄无敌02 / 09
大陆版2.png
Heroes of Might & Magic 英雄无敌03 / 09
大陆版3.jpg
Heroes of Might & Magic 英雄无敌04 / 09
大陆版4.jpg
Heroes of Might & Magic 英雄无敌05 / 09
大陆版5.png
Heroes of Might & Magic 英雄无敌06 / 09
大陆版6.jpg
Heroes of Might & Magic 英雄无敌07 / 09
韩文版1.jpg
Heroes of Might & Magic 英雄无敌08 / 09
韩文版2.jpg
Heroes of Might & Magic 英雄无敌09 / 09

EXPERIENCE & CONTACT

YUAN
BO.

苑博

GAME UI / MOTION / VISUAL IDENTITY

专注游戏界面、动态视觉与品牌体验。擅长从世界观与交互目标出发,把复杂信息组织成简洁、准确且具有情绪的视觉系统。

+86 187 0130 1678 ↗PORTFOLIO PDF ↗

2013 — NOW / 工作经历

Happy Elements

乐元素科技有限公司 · 现任

Lead UI · OX / Silver City

Lilith Games

上海莉莉丝游戏有限公司 · 再次回归

UI Expert · IP Lead · Motion · VI

Hypergryph

上海鹰角网络科技有限公司 · 阶段性任职

Arknights: Endfield · UI

Lilith Games

上海莉莉丝游戏有限公司 · 离职后回归

UI Expert · IP Lead · Motion · VI

Perfect World

上海完美时空软件有限公司 · 阶段性任职

One Piece · UI Expert

IMG STUDIOS

品牌 IP 负责人 · 阶段性任职

Brand & IP Lead

Lilith Games

上海莉莉丝游戏有限公司 · 首次入职

UI Expert · Lead UI · Visual Design

ByteDance

北京字节跳动有限公司

All Star Fight · Lead UI

OurPalm

北京掌趣有限公司

Heroes of Might & Magic III · Lead UI

Aurora Interactive

北京极光互动有限公司

ZVLUTION · Lead UI
All Star Fight

2020 / 13 ITEMS

All Star Fight

全明星激斗

高密度信息下清晰、有冲击力的格斗游戏界面。

主 UI

Project Overview

A high-impact interface for a character-rich fighting game with multiple systems. Strong hierarchy, rhythmic composition, and unified components keep dense content readable during frequent interaction while sustaining an energetic competitive tone.

项目介绍

面向多角色、多系统的格斗产品,设计高识别度且具竞技冲击力的主界面与战斗信息体系。通过清晰的优先级、强节奏构图和统一组件,保证复杂内容在高频操作中仍然易读。