「游戏交互」手游适配设计的细节拆解

发布时间:2024-05-16 09:49:55 浏览量:231次

“手游在设计的过程中,由于屏幕比例与尺寸的差异,再加上游戏需要一屏显示的整体性与艺术性,因此和普通APP相比,有着更为复杂的规则。”

本篇文章只针对横屏游戏,将从以下几个模块讲解:

  • 设计比例与尺寸
  • UI适配
  • 背景图片适配
  • 刘海与圆角适配
  • Home Indicator适配

以上模块在本质上是互相关联的,但为了方便说明,因此拆分开说明。

设计比例与尺寸

1. 设计方案常规尺寸 16:9

一般来说,设计时需要采用16:9的尺寸,也就是iPhone 8的尺寸,常用的:【1280*720】【1334*750】【1920*1080】等。(下文所有UI按照1334*750 为基础设计尺寸,按照不同项目,等比缩放即可)

常规手游且画质要求不高的游戏使用720P完全足够,例如复古风、像素风;750-850P则更为常见,基本可以适配各种场景,不管是iPad还是模拟器均可以一个不错的质量展示,包体大小也合适;1080p适合画质要求较高的游戏,或者需要PC端的游戏。

在游戏立项时,以上内容都需要美术与开发进行商量,并定下设计分辨率,以后的设计过程将一直沿用此规则。

2. 现在都是全面屏19.5:9了,为啥还要按照老款的手机设计呢?

我总结了以下几个原因:

1、设备比例,虽然全面屏的手机比较多,但是仍有不少的16:9的手机,模拟器一般也采用了16:9的尺寸;

2、正逆适配问题,从16:9调整至19.5:9的视觉体验要比19.5:9调整至16:9的好很多,例如在19.5:9的情况,横向铺满时,缩至16:9会导致UI重叠,具体原因下文会详细说明。

UI适配

1. UI在引擎中的原理

简单讲一下,所有ui都会有一个【锚点】,即图中的【*】,类别PS中ctrl+t时的中心点,控件的坐标位置即为【锚点】的位置。

文本框坐标为(0,0),但UI的位置并不在原点

热门课程推荐

热门资讯

请绑定手机号

x

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定