Payment Ticker Improvements
为 Riot Games 全球支付系统设计更及时、更明确的异常提示体验，降低玩家支付失败与困惑
提示不明显，玩家可能错过首页的支付异常提示
当前场景下支付异常提示不被重视，信息被略过
前面的支付操作白费了，引发烦躁
1
提示出现得太早
首页并不是支付相关场景，提醒放在那里不合理
2
用户容易忽视悬浮内容
提示看完以后不需要用户操作或点击，容易略过内容
3
用户需要记住提示内容
在支付前看到信息很容易忘，等于白看
4
支付界面缺少即时提醒
支付失败后才有提示，太晚，令人烦躁
探索方案
1
最严重的情况：所有支付方式均不可用
用户需要明确意识到当前无法完成任何支付行为，并不再继续尝试支付
方案1
插图式弹窗
最终方案
简洁确认弹窗
方案3
全款横幅提示
优点
可爱的配图可以减少用户烦躁情绪
窄窄的设计更容易吸引注意力
优点
更符合游戏现有的弹窗交互习惯
信息直接，认知负担低
适配不同长度的文本
弹窗简短，成为视觉焦点
优点
视觉冲击强，用户很难略过文字
更容易展示长文字
缺点
与当前价格选择页中的 ticker 体验一致性较弱
占用更多界面空间与操作步骤
需要额外视觉资源支持插画与情绪化设计元素
缺点
快速关闭时仍可能忽略
长文本时可读性会下降一些
缺点
可能占用过多界面空间，并带来一定打扰感
可能与现有设计元素缺乏一致性
弹窗内容过长时，用户注意力可能无法聚焦在核心信息上
2
更常见的情况：1+支付方式不可用
需要在不过度打扰用户的前提下，清晰展示异常状态
最终方案
灰置 + Tooltip
方案2
高亮 + Tooltip
方案3
订单汇总中展示
优点
灰置的设计体现支付方式无法使用
Tooltip 提供详细的支付异常原因
不占用原本支付页面的额外空间
可以单独展示不同支付方式的异常原因
优点
高亮的设计体现支付方式的异常状态
Tooltip 提供详细的支付异常原因
不占用原本支付页面的额外空间
可以单独展示不同支付方式的异常原因
优点
无需 hover 即可吸引用户注意
一个 hover 区域即可承载多个支付异常信息
更适合未来新版 LOL 界面中的使用场景
缺点
Hover 信息可能容易被忽略，进而造成用户困惑或挫败感
缺点
提示颜色可能过于抢眼，影响整体界面平衡
Hover 信息可能容易被忽略，进而造成用户困惑或挫败感
缺点
如果文案很多，用户仍可能快速略过信息
放置在右上角容易被忽略
占用页面空间较多
1
所有支付方式均不可用
Valorant 无畏契约
亮红的荧光色与硬朗线条强化现代科技感
简洁锋利的 UI 风格贴合 tactical shooter 氛围
高对比警示信息提升异常可见性
League of Legends 英雄联盟
黑金配色延续经典 fantasy 风格
大写字体与 Serif 字体强化庄重感
在保持沉浸感的同时提升信息触达
2XKO
黑色与荧光色碰撞强化现代感
粗体大写字体突出格斗游戏力量感
更极简的布局让异常信息更直接清晰
2
1+ 支付方式不可用
Valorant 无畏契约
将异常状态直接融入支付流程，保持信息层级清晰
将异常提示设计为更具警示感的系统反馈
保持紧凑界面节奏，减少对支付选择流程的干扰
League of Legends 英雄联盟
将异常提示自然融入整体 fantasy 氛围
利用边框与层次感保持商城风格统一
保持较高信息密度，延续 LOL 传统 UI 语言
2XKO
使用更直接的提示方式，贴合格斗游戏的快节奏体验
通过更强按钮对比与更少层级提升判断效率
保留视觉冲击力，同时避免过度装饰影响信息传达
在 Riot 的实习经历中，我逐渐学会了如何在协作环境中主动分享未完成的设计，并通过持续反馈不断迭代自己的方案。我也意识到，优秀的设计不仅在于界面本身，更在于如何清晰、有逻辑地讲述设计背后的思考与用户价值。整个过程中，我始终围绕 Riot “Player First” 的理念进行设计，从用户痛点出发，通过调研、设计讨论与反复优化，最终完成了真正能够影响玩家体验的解决方案。这段经历不仅让我在 UX 能力与沟通表达上成长许多，也更加坚定了我对 UX Design 的热爱。
邮箱
sh835@cornell.edu
电话号码
189-0189-9696
linkedin.com/in/lilyshiyihuang/