Sean Ren AI 体验产品设计师

输入访问码

这份作品集仅供受邀查看。

跳到​案例​正文
Sean RenXbox 博物​馆拿起​手柄

Xbox 主机历史博物馆把 Xbox One 主​界面，重​建成​一个​用​手柄​浏览​的​展​项。 在​纽约​展出。

在​一场 Xbox 展览​里，每一​代​主机​都有​自己​的​展​厅。我​设计​了 Xbox One 展​厅​的​界面，由​一套​磁​贴​网​格​搭成。

角色
数字​设计​师
Xbox One 展​区​界面
时间
2022 年 6 月​至 9 月
公司
Ten Gun Design
团队
设计​师、项目​经理、开发、QA
工具
Figma、After Effects、Photoshop
平台
互动​展​项，纽约
Attract loop没​人​拿起​手柄​时，展​厅​循环​播放​的​画面。点​击、轻​点​或​按 Enter 开始。

概​览

一个​为​启动​游戏​而​做的​界面，要用​来讲​一段​历史。

问题
展览​需要​真实​主机​界面​的​观​感，却要​做​另​一件事：浏览​一台​主机​的​历史，还​要​站​远​一步​也能​读。观众​既有​对​它​了如指掌​的​粉丝，也有​从​没​摸过​手柄​的​人。
设计​问题
一套​磁​贴​系统​怎样​才能​承载​一台​主机​的​完整​历史，让​粉丝​和​新手​都​看得​明白？
关键​洞察
很多​观众​用​过 Xbox One，所以​我​用​它​自己​的​设计​语言​重建​展​厅，只​改​博物​馆​需要​改​的​地方。还​没读​一个​字，他们​的​手​就​知道​该往​哪儿​去。
我的​部分
主​页、各​板​块​页​面​和​故事​模板，在​一支​由​设计​师、项目​经理、开发​者​和 QA 组成​的​团队​里​完成。
Figma 画板：笔记、吸引​画面、主​页，以及​按​行​排列​的​各​板​块​界面。
所有​界面​都在​一块 Figma 画板​上，由​共享​部件​搭成。
展​厅：一条​亮​着 Xbox 绿​灯光​的​走廊，两侧​是 Xbox 硬件​展​柜。
纽约​的​展览​现场。

系统

一套​网​格​撑​起​每一​页。

一套​能​让​展览​住​进去​的​小​系统：一套​网​格、它的​部件​和​几​条​规则。

设计​语言​的​延续

哪些​沿用​了​真实​主机​界面，哪些​为​展览​做了​改变。

导航
保留每​页​顶​部​一排​板​块​标签，下面​是​磁​贴​网​格。改​动标签​换​成​展​厅​的​历史：The Launch（首​发）、The Hardware（硬件）、The Games（游戏）和 The Platform（平台）。
主​磁​贴
保留一块​大​磁​贴​领​衔​主​页。改​动领​衔​的是​一个​故事，Xbox One 的​首次​亮相，而不是​上次​玩过​的​游戏。
焦点​与​按键
保留一个​白色​焦点​框，以及 A、B 两​个​按键，屏幕​上有​图​例。改​动没有​改​动，所以​老​玩家​不需要​重新​学。
外观
保留黑色​画布、Xbox 绿，以及​细​字​重​的 Segoe 字体。改​动绿色​退​后​一步，让​历史​带来​色彩。
开机
保留开机​动画：一道​光​展开，露出​主​页。改​动在​有人​拿起​手柄​之前，循环​播放​吸引​画面。
展览​中的 Xbox One 主​页，叠​加了​它的​网​格。

每一​屏​都​遵守​的​规则

十​英尺​界面
观众​站在​大​屏幕​前​一步​之外。在 1080p 下​文字​不小​于 20 px，标签​放在​纯​绿​底​或​图片​最​暗​的​边缘​上，所有​操作​都不​依赖​悬​停。
单一​焦点​状态
焦点​不会​走进​死路，每次​移动​都​到​相邻​的​磁​贴。
浅​层​导航
板​块​标签、磁​贴、故事。每一​页​离​主​页​只​隔​一个​板​块，B 键​永远​只​返回​一层。

组件

几个​组件，各​司​其​职。

这里​的​每​一个​都​用​代码​按​展览​的​比例​画出，并​附上​它​遵守​的​规则。

  • 磁​贴
    Rest
    Focus
    Pressed

    一次​只有​一块​磁​贴​获得​焦点：白​框​加​轻微​浮起。按下 A，它​先​下沉，再​打开​页​面。

  • 板​块​磁​贴
    The HardwareThe Games

    Xbox 绿​只​属于​展览​自己​的​板​块，其余​的​颜色​都​来自​历史​本身。

  • 板​块​标签​栏

    五​个​板​块​排成​一行，用​肩​键​切换。当前​板​块​是​白色，其余​退​为​灰色。

  • 精选

    一块​更宽​的​磁​贴，放​展览​主​推​的​故事，在​网​格​旁​单独​成​列。

  • 按键
    A SelectB Back

    两​个​按键​就​够​了：A 进入，B 返回。按键​提示​始终​说明​它们​在​这里​各​做​什么。

  • 详情​页
    Forza Motorsport 6Publisher: Microsoft StudiosDeveloper: Turn 10 StudiosRelease date: 2015-09-15

    每​个​故事​都​以​同样​的​方式​打开：标题、事实​信息，然后​是​媒体。每一​页​变化​的​只有​内容。

界面

观众​只需​学​一次​布局，之后​就​专心​读​历史。

待​机​循环​开启​展​厅，主​页​通向​五​个​板​块，每​个​板​块​由​一个​主​磁​贴​领​头。

  1. 1吸引画面

    首​发​现场​和​开机​画面，底部​是​首​发​游戏​阵容。

  2. 主​页: 顶​部​五​个​板​块，主​磁​贴​里​是​展​厅​主​推​的​故事。

    2主​页

    顶​部​五​个​板​块，主​磁​贴​里​是​展​厅​主​推​的​故事。

  3. 一个​板​块: The Launch（首​发）：同​一套​网​格，有​自己​的​主​磁​贴，周围​是​硬件。

    3一个​板​块

    The Launch（首​发）：同​一套​网​格，有​自己​的​主​磁​贴，周围​是​硬件。

  4. Forza Motorsport 6

    Publisher: Microsoft Studios
    Developer: Turn 10 Studios
    Release date: 2015-09-15

    More than 450 cars and 26 tracks, with racing in the rain and at night for the first time in the series.

    ERatingTRAILERS
    BBackASelect

    4一个​故事

    这里​是《极限​竞​速 6》，有​它的​资料​和​预告片。

画板​上​的​每一​屏

开场​和​四​个​板​块​共​三十​八个​界面，根据​画板​导出​图​重建，游戏​图片​来自​商店​页​面。选​一个​界面，就​能​在​主机​里​打开。

开场

The Launch

The Hardware

The Games

The Platform

成果

2022 年​上线，用于​展览​的 Xbox One 展​厅。

验证
屏幕​先​和​团队​及 QA 一起​在​键盘​驱动​的​主机​模拟​器​上​评审，再​在​大​屏幕​上​按​观众​站立​的​距离​检查。
我​学​到​的
我​进​项目​时​从​没用​过 Xbox，学会​它的​模式​后，和​跨​职能​团队​一起​在​这些​模式​里​做​设计。下次​我​会​把​每​个​界面​的​焦点​顺序​和​动​效​写成​开发​能​直接​运行​的​规格。