作为一只LOL的老鸟,虽然游戏已经很少玩了,但是比赛一直都有关注,毕竟每个男人对竞技的热爱仿佛是流淌在血液中。所以第一时间手游「英雄联盟电竞经理」公测也和小伙伴一起玩了下,顺便学习赏析下「英雄联盟电竞经理」手游APP的UI设计如何提升用户体验。


🤔「英雄联盟电竞经理」游戏UI设计赏析

手游「英雄联盟电竞经理」ui设计

小波大概的理解:主体正常图层,背景采用了1:1的比例对比色,倾斜设计构图,外加操作UI的四边形按钮营造倾斜的一致性,游戏中用户体验还能感受到背景的类似光柱的线条,光粒子,形状从人物主体下以45°向上漂浮。

手游「英雄联盟电竞经理」ui设计

设计构图:上图层类似星斗的布局,而下图层背景是俯瞰城市

手游「英雄联盟电竞经理」ui设计

主体和背景都是倾斜设计构图,完美传达出动感,刺激的视觉效果,左边叠加了点阵图层,右边则叠加了斜线图层,外加背景的粒子前端动效,雷霆之怒似要越出屏幕,从天而降。

手游「英雄联盟电竞经理」ui设计

道具的背景叠加层和道具都有倾斜构图的图层叠加

手游「英雄联盟电竞经理」ui设计

选择升级等tab选项卡时,倾斜背景构图则把原来1:1:1的布局改成了1:1,黑色背景图层则按视觉传达的一致性作为数据的背景区域

手游「英雄联盟电竞经理」ui设计

概况选项卡时背景构图是1:1:1布局,数据显示居中,人物和英雄各居左右

手游「英雄联盟电竞经理」ui设计

背景发亮的渐变字体,与背景一致设计配色的按钮

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

人物卡牌背景倾斜构图

手游「英雄联盟电竞经理」ui设计

深红和青蓝的强烈对比带来的视觉冲突提升用户体验

手游「英雄联盟电竞经理」ui设计

深色背景,倾斜的紫色渐变线条(矩形)

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计

手游「英雄联盟电竞经理」ui设计


🧐游戏UI涉及的设计知识点:倾斜构图和科技、酷炫配色

手游「英雄联盟电竞经理」ui设计

小波这里使用了adobe color[1]去获取色彩来佐证

为什么采用倾斜设计构图和科技、酷炫设计配色?

当想要设计更灵动活泼的版面,营造轻松、动感、刺激、充满活力等氛围,同时想要科技感,想要那种视觉传达特别张扬、甚至是极具个性的色彩搭配,所以作为电竞集卡游戏,没有moba或者mmorpg那样动态人物交互,即采用倾斜设计构图和科技、酷炫设计配色。

一、倾斜设计构图的作用

  1. 动感、冲击力(具有对抗性、速度感、力量感和冲击力的设计版面里)
  2. 活泼、欢快(电商网站各种banner图或者宣传图)
  3. 紧张、刺激(影视剧海报,例如《速度与激情》)

二、倾斜设计构图的角度

  1. 最常用的方式是将设计元素倾斜15°至45°(电竞经理即是选择这角度)
  2. 倾斜旋转90°
  3. 旋转180°(《盗梦空间》)

三、倾斜设计构图的形式

  1. 整体或者局部元素倾斜(电竞经理采用主体后的辅助元素和ui部分操作按钮同一方向倾斜)
  2. 主体倾斜
  3. 文字倾斜

四、科技和酷炫设计配色

  1. 科技:色彩的整体调性通常会偏冷色系,明暗对比要强,且通常会使用渐变色(例如深蓝色到蓝色的渐变作为背景色,然后用高饱和度、高亮度的青色和紫色作为辅助色,这时这些辅助色就会非常的跳跃,具有一种发光的效果)
  2. 酷炫:以深色作为背景,图片元素会使用高饱和度且对比很强的渐变色,色彩相对较多(例如蒸汽波风格、酸性风格、赛博朋克风格、故障风格)

😚素材


微信

微信

支付宝

支付宝

手游「英雄联盟电竞经理」UI设计赏析(倾斜构图和科技、酷炫配色)
https://blog.ganxb2.com/56080.html
作者
chopin gump
许可协议
小尾巴
Stay Hungry, Stay Foolish「求知若饥, 虚心若愚」 — 廿壴(ganxb2)
好好说话,咱们还能做盆友!(填写QQ邮箱即可快速收到回复通知~)🦐_(≧∇≦」∠)_