行业资讯
《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网

来源:beat·365(中国)-官方网站 发布时间:2026-04-25 05:09:02 点击量:

本文摘要:

IP的延续


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图1)

主界面设计很是简练、克制突出 “ PLAY ” 按钮。

IP的延续


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图2)

主界面设计很是简练、克制突出 “ PLAY ” 按钮。

人类的短时影象的容量为7±2 即一般为7 并在5-9之间颠簸。

beat365亚洲体育官方网站

这就是神奇的7±2效应。

陈心添游族网络UI设计总监专注游戏UI体验设计。

设计并没有一味追新炫技甚至有些“复古”而是把重点放在了做减法上。

1.如何做图形化

整体UI画面乍一看会有:就这?不外如此嘛我上我也行...等等错觉但真正用起来后才发现是—真香!


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图4)

最后放送一波游戏截图。

设计师用了4种方法让图形化具有了可执行性:

1.极致简练

做图形化的时候我们往往会担忧明白误差LOL-M的设计师给出的解决方案是在图标入口点击进二级界面时在标题处告诉你进入的是什么系统这就有效解决了明白的偏差问题是对信息折叠处置惩罚的第1个妙用。


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图5)

2.使用信息折叠来消除明白误差

本文首发于民众号老司机UI CLUB作者游族网络UI设计总监陈心添游戏葡萄已获转载授权。

beat365亚洲体育官方网站


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图7)


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图8)

备战画面通过动效可以看到队友选角色和就位情况

游戏中界面做了大量的简练轻量化的设计界面边框和控件基本没有做任何的装饰。


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图9)


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图10)

合理的动效设计除了能够让体验越发顺畅还可以资助玩家明白交互意图。这方面LOL-M可谓做得很到位了。

锁定角色后切换到备战画面让玩家感知角色已锁定

以上为用文字案例


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图11)

3.在一些需要使用文字表达的地方图标和文字互斥的方式来举行设计。

准确表达交互意图的动效


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图12)


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图13)


《英雄同盟手游》UI设计分析:4种方法让图形化具有了可执行性|beat365官网(图14)