03 GAN XINRAN / UI PRACTICE← 返回作品集
跳到案例内容
章节目录 概览

MENTOR ASSIGNMENT · INDEPENDENT PRACTICE

整合重复页面让判断更连贯

带教根据策划需求布置界面练习:原有两个神兽图鉴页面内容重复,需要重新整合为一个界面。我独立完成信息梳理、结构合并与视觉呈现,重点处理“查看神兽—理解成长—执行升星”之间的连续性。

任务来源带教布置 · 策划需求
我的职责独立分析与界面设计
核心任务合并两个重复图鉴页面
素材说明未使用公司素材
神兽图鉴整合练习界面合集
OVERVIEW · COLLECTION / DETAIL / GROWTH
职责与材料说明

带教依据策划需求布置任务,信息分析、页面整合与界面方案由我独立完成。未使用公司素材,未进行正式用户测试;下方演示使用示意数值说明状态逻辑,不是上线产品。

01 / PROBLEM

重复的不只是内容,
还有玩家的理解成本

两个页面分别承载神兽展示与成长信息,但核心对象、属性与操作高度重叠。玩家在“看当前状态”和“决定是否升星”之间需要重复识别同一只神兽。

01

对象重复

神兽形象、名称和基础属性在不同页面重复出现,占用主要展示空间。

02

信息断开

当前状态、目标状态与消耗材料分散,无法在一个视野内完成比较。

03

路径往返

查看技能与执行升星被拆开,玩家需要切换页面重新建立上下文。

设计命题

如何在保留神兽展示感的同时,让玩家不离开当前对象,就能理解成长收益并完成操作?

02 / MERGE STRATEGY

不是把两页压成一页,
而是重新定义一条任务主线

BEFORE / 分散
神兽展示形象 · 基础属性
切换页面
升星成长目标属性 · 材料 · 操作

相同对象重复呈现,决策信息分布在两个页面。

AFTER / 整合
同一对象,同一上下文展示层成长比较层材料与操作层

以神兽为持续上下文,信息随任务从上到下逐步展开。

01 · 先识别

保留大面积神兽形象与名称,确保进入页面后立即确认当前对象。

02 · 再比较

将当前值与升星后数值并排,直接展示投入会带来的变化。

03 · 后行动

材料数量与主按钮放在决策末端,形成“看懂后再操作”的顺序。

03 / KEY DECISIONS

两个界面判断,支撑一次完整操作。

DECISION 01

用大图保留“图鉴感”,用底部面板承载效率

神兽是页面的情绪中心,成长信息则是操作中心。我把角色展示留在上半区,将属性、技能与消耗收拢到底部,避免功能模块切碎主体。

  • 展示内容保持沉浸和识别度
  • 功能信息形成稳定的底部阅读区
  • 左右切换始终作用于同一个神兽对象
神兽展示与底部成长面板
DECISION 02

把“当前—目标”做成可扫读的变化

升星决策依赖收益判断,因此属性不是静态说明,而是比较工具。通过方向关系、数值对照和提升标识,让变化比装饰更先被读到。

  • 同一行比较同一属性
  • 目标值在视觉上获得更高权重
  • 没有变化的数值保持稳定,避免误导
神兽图鉴属性比较方案

TRY THE FLOW / 交互演示

从选中对象,
到完成升星

作品集示意原型 · 神兽名称与数值仅用于演示,非上线产品或真实效果数据。

当前对象

青麟

1 星 / 3 星

当前与升星后的属性比较
属性当前升星后
攻击
生命
升星材料

请选择神兽,比较收益后尝试升星。

INDEPENDENT PRACTICE / 卡牌界面练习

依据策划要求,尝试卡牌养成界面。

这是另一项独立练习,与神兽图鉴整合分开展示。我根据策划要求,尝试制作培养、装备、升星、潜能与锦囊界面。

卡牌游戏培养、装备、升星、潜能与锦囊界面练习及任务参考
独立界面练习 · 我的界面尝试与任务参考。

05 / REFLECTION

整合的价值,来自减少重复理解

这次练习让我意识到,合并页面并不等于压缩内容。真正的整合需要先确认持续对象,再按用户判断顺序重排信息。若继续验证,我会重点观察首屏信息密度、属性比较速度,以及玩家是否能区分“技能预览”和“立即升星”。

01先找持续对象

页面切换中始终不变的对象,应成为整合结构的中心。

02按判断顺序排版

识别、比较和操作的顺序,比模块原本属于哪个页面更重要。

03明确待验证项

没有真实测试时,区分设计判断与验证结论,保持案例表达可信。