跳到项目介绍
SHUHUIDU / 杜舒惠聊聊设计
返回精选作品SELECTED WORK / 03

MULTI-DEVICE / EXPERIENCE

Pad 端体验升级

让大屏的每一块空间,都服务于学习。

Read the story
希望学 / EDUCATION
Pad 适配信息架构AI 扩图
11 DESIGN BOARDS
背景与目标

面向 Pad 横屏学习场景,本项目围绕首页、个人中心、成长中心与登录等核心页面展开适配,重点处理大屏下的信息组织、任务衔接与跨端一致性,让课程、工具和成长反馈形成清晰的使用路径。

设计与方法

设计通过分区与卡片布局重组内容,对个人中心和成长中心进行多方案比较,协调等级场景、权益展示与任务区域。登录页集中呈现扫码、手机验证码和账号密码三种入口,减少方式切换与查找。

实践与沉淀

视觉生产采用 AI 辅助扩图与细节修整,将既有竖版场景延展为横屏素材,在延续角色与画面风格的同时支持大屏适配。

01 / 04
CHAPTER / 0103

为横屏重新组织内容

围绕课程、工具与成长信息,建立适合 Pad 的页面分区与卡片布局。

01 Pad 端体验升级
DESIGN BOARD / 01Pad 端体验升级
02 Pad 端体验升级
DESIGN BOARD / 02Pad 端体验升级
03 Pad 端体验升级
DESIGN BOARD / 03Pad 端体验升级
02 / 04
CHAPTER / 0406

比较个人中心的三种布局

在成长入口、画面简洁度与跨页面一致性之间取舍,明确设计方向。

04 Pad 端体验升级
DESIGN BOARD / 04Pad 端体验升级
05 Pad 端体验升级
DESIGN BOARD / 05Pad 端体验升级
06 Pad 端体验升级
DESIGN BOARD / 06Pad 端体验升级
03 / 04
CHAPTER / 0709

理顺登录与成长任务

集中呈现三种登录方式,协调成长中心的等级场景、权益与任务区域。

07 Pad 端体验升级
DESIGN BOARD / 07Pad 端体验升级
08 Pad 端体验升级
DESIGN BOARD / 08Pad 端体验升级
09 Pad 端体验升级
DESIGN BOARD / 09Pad 端体验升级
04 / 04
CHAPTER / 1011

完成横屏素材与页面延展

结合 AI 扩图与人工修整延展既有场景,将统一风格应用到更多学习页面。

10 Pad 端体验升级
DESIGN BOARD / 10Pad 端体验升级
11 Pad 端体验升级
DESIGN BOARD / 11Pad 端体验升级