GAME INTERFACE DESIGN / 2026
街区突袭，
一触即发。
城市街道 × 漫画战斗 × 竖屏闯关
01—06 / UI COLLECTION僵尸别挡道 · 竖屏游戏视觉设计
01
PROJECT OVERVIEW
街头世界，漫画表达
把战斗的紧张感，
放进每一次点击里。
以城市道路为舞台，金发主角穿行于僵尸街区。UI 延续角色的粗描边和夸张比例，通过倾斜标题、撞色按钮与高对比数值，建立清晰的战斗信息层级。
06核心界面
720 × 1280竖屏界面尺寸
COMIC漫画视觉语言
VISUAL DNA
硬轮廓 / 强色彩 / 快反馈
沥青灰构建街区基调，橙黄强调动作，青蓝与紫色承载能量、商品和奖励。
ASPHALTACTIONENERGYCRYSTALGROWTH
02
ART & ASSET LIBRARY
美术图鉴
从角色到图标，让每个细节都属于同一条街区。
CHARACTERS · ITEMS · COMPONENTSCHARACTER DESIGN金发主角
金发主角
与街区异变者
背向视角的持枪角色，配合辨识度鲜明的僵尸与 BOSS，建立竖屏道路战斗的视觉重心。
元素与战斗道具
四种元素用色彩、形状与材质共同区分；同类图标保持轮廓一致。
资源 / RESOURCE
属性 / ATTRIBUTE
BUTTON LANGUAGE
按下去，就有行动感。
粗黑边框与亮色填充，区分强化、购买、继续和奖励。
强化
继续游戏
获得新枪
无限回复03
INTERFACE DESIGN
六大界面，一套视觉语言
战斗、成长与奖励，围绕玩家的行动节奏展开。
点击界面可放大查看04
INTERACTION SHOWCASE
看见界面，也体验路径
PLAYER JOURNEY战斗之外，
战斗之外，
成长始终可见。
主界面承载入口，强化面板集中展示成长，商店提供四种元素选择；暂停页汇总属性，复活与结算完成一轮战斗闭环。
主界面→强化 / 商店→暂停 / 复活→结算
点击切换界面；在手机预览中点击对应按钮，也可进入强化、商店或返回主页。
05
DETAILS & VISUAL HIERARCHY
信息有层次，反馈有分量
HUD / COMBAT
生命与经验，一眼分明
角色头像靠近生命与经验，资源计数保持紧凑，让道路中央留给战斗。
REWARD / MOTIVATION
突袭
结束!
奖励出现，就该被看见
突袭结束!
结算采用橙黄爆发形与大面积钻石视觉，将奖励与行动按钮放在同一焦点。
ILLUSTRATION / REVIVE再来一次，
再来一次，
把故事接下去。
围绕倒下的主角展开插画，延续漫画叙事，让复活提示成为战斗情绪的一部分。
06
FULL COLLECTION
街区档案 · 全界面展示
GAME UI DESIGN COLLECTION