新宝娱乐城评级: 士郎 Unity+iPhoneX适配方案

27
回复
3976
查看
打印 上一主题 下一主题
[ 复制链接 ]
排名
1
昨日变化

新宝娱乐城博彩打不开 www.sl6cl.com.cn 7746

主题

8302

帖子

3万

积分

Rank: 16

UID
1231
好友
186
蛮牛币
10571
威望
30
注册时间
2013-7-29
在线时间
3980 小时
最后登录
2019-5-22

活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
17年下半年,苹果传出新一代iPhone的消息——iPhoneX。随之而来的还有他不同于以往任意一代iPhone的刘海设计。
一时间,iPhoneX的适配问题迅速在产品圈流传开。


而作为一个线上手游的客户端工程师,我在和团队共同历经了为iPhoneX适配的艰难岁月后,终于在产品上市之日,获得了商店首批适配推荐。
那么iPhoneX适配到底有什么需要注意的点,又应该采取什么方案呢?



>>iPhoneX的界面设计变化
1.状态栏高度的变化
iOS11之前状态栏默认高度为64pt,iOS11之后iPhoneX上由于刘海的出现statusBar由以前的20pt变成了44pt,所以iPhoneX上高度变为88pt


2.圆角和刘海
iPhoneX使用了之前从来没有使用过的圆角屏幕和存放各种传感器的刘海。
这表示放在角落的内容极有可能被裁剪而造成显示不全,从而影响查看和体验。


3.Home键变为Home指示条


物理Home键消失,而用一个屏幕底部的“Home指示条”代替,通过从底端上划手势实现返回桌面和切换程序功能。
需要注意的是,除了特定条件下,“Home指示条”将永远在屏幕底部(无论竖屏横屏旋转)

Home指示条会随背景自动改变成明暗状态,提供黑白两种颜色。



>>苹果给出的适配建议
1.安全区
苹果官方引入了安全区的概念,建议所有的可交互UI都放在安全区内,防止出现UI不可交互的境况。
但是,安全区只是一个参考,具体的情况还要看app的自身需求,综合考虑这些限制因素。得出自己想要的适配方案。

2.以用户体验为核心
在横屏状态下,不能因为刘海的原因将内容向左或者向右偏移,要保证内容的中心对称。这意味着,要进行如下图所示的适配方案设计:

因为,用户在横屏旋转手机的时候,app的内容如果也设置了相应的旋转,会造成同一个UI用户进行交互的位置会不一样,这有悖于人体肌肉的位置记忆功能。
总而言之,就是一切都要以用户的体验为核心。


>>iPhoneX相关尺寸说明
网上流传的尺寸说明由于单位和放大比不同,都不能很直观地适用于游戏UI。
这里整理了一下网上的几种说法,最终得出了我们实际需要的尺寸图。

首先,iPhoneX的分辨率是1125X2436,注意这是@3x下的像素分享率。

然后,我们来明确一下安全区的尺寸,刘海区的非安全区域高度占88 px,@2x(即132 px,@3x)。
由于横版游戏左右对称,可得出左右两侧的非安全区均为132px,@3x。


最终,我们可以得出横版游戏的安全区宽度为2172 px,@3x。
同时,下图还标注了Home指示区相关的一些尺寸提供给美术做设计参考。



>>横版游戏适配的注意事项
1.交互控件需要防止在安全区内。
2.Home指示条区域避免放置按钮、文字等UI元素,避免有从底部向上滑动的手势设计。


>>适配方案一:利用object-c对屏幕的显示范围进行限制
在进行极无双的iPhone X适配时,我首先想到的方案是,在xcode上,利用object-c对屏幕的显示范围进行限制,让游戏内容适配到官方的安全区范围内,四周加上背景。


很明显,这样的效果不尽如人意,最终被放弃了。
示意图如下所示:


>>适配方案二:修改Camera的size
1.判断设备是否是iPhoneX
根据Unity提供的SystemInfo.deviceModel得到的设备名称来判断
设备名称包含了iPhone10,3或者iPhone10,6时,为iPhoneX。
为了在编辑器下能模拟iPhone X设备环境,简单的用了屏幕分辨率来判断





2.修改UICamera的size
2436/2172≈1.121,因此修改UICamera的size为1.121,使摄像机可以拍全整个宽度范围内的UI。
需要注意的是,对于有左右锚点的UI元素,此时也会适配到屏幕边缘(刘海区),对此有两个解决方案:
(1)去掉左右锚点的设置,UI整体等宽适配;
(2)对这些控件判断,如果是iPhoneX特殊处理;





3.补全非安全区的背景填充
在正常的UI之外,补充一些UI元素,使摄像机放大后,左右两侧有正常的背景填充。
注意,这些内容是只有在iPhoneX上才能被看到。
示意图如下所示:




Via:范世青 王天宇


3偶尔光临
193/300
排名
10112
昨日变化

0

主题

18

帖子

193

积分

Rank: 3Rank: 3Rank: 3

UID
232458
好友
0
蛮牛币
399
威望
0
注册时间
2017-7-16
在线时间
67 小时
最后登录
2019-4-28
沙发
2018-12-19 14:00:29 只看该作者
本帖最后由 西木叔叔 于 2018-12-19 14:22 编辑

留名学习。图片是挂掉了么,一直在转圈

7日久生情
2515/5000
排名
781
昨日变化

1

主题

710

帖子

2515

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
56496
好友
0
蛮牛币
7778
威望
0
注册时间
2014-11-19
在线时间
586 小时
最后登录
2019-5-22
板凳
2018-12-20 09:03:45 只看该作者
图片去哪里了??
6蛮牛粉丝
1184/1500
排名
2332
昨日变化

1

主题

164

帖子

1184

积分

Rank: 6Rank: 6Rank: 6

UID
236305
好友
1
蛮牛币
1681
威望
0
注册时间
2017-8-7
在线时间
412 小时
最后登录
2019-5-22
地板
2018-12-20 14:28:27 只看该作者
我以后一定换个可以看图的电脑
3偶尔光临
231/300
排名
10342
昨日变化

2

主题

20

帖子

231

积分

Rank: 3Rank: 3Rank: 3

UID
230755
好友
0
蛮牛币
223
威望
0
注册时间
2017-7-7
在线时间
105 小时
最后登录
2019-4-18
5#
2018-12-27 20:33:01 只看该作者
西木叔叔 发表于 2018-12-19 14:00
留名学习。图片是挂掉了么,一直在转圈

我一直以为是我卡了
7日久生情
3741/5000
排名
489
昨日变化

10

主题

337

帖子

3741

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
22945
好友
1
蛮牛币
4202
威望
0
注册时间
2014-4-26
在线时间
1936 小时
最后登录
2019-5-22
6#
2019-1-2 16:27:31 只看该作者
转圈就是图片~
5熟悉之中
695/1000
排名
10816
昨日变化

3

主题

480

帖子

695

积分

Rank: 5Rank: 5

UID
310426
好友
0
蛮牛币
675
威望
0
注册时间
2019-1-2
在线时间
116 小时
最后登录
2019-5-22
7#
2019-1-4 08:49:48 只看该作者
图片打不开,好可惜。。。
7日久生情
2099/5000
排名
2252
昨日变化

0

主题

818

帖子

2099

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
163777
好友
2
蛮牛币
619
威望
0
注册时间
2017-2-27
在线时间
657 小时
最后登录
2019-5-22
8#
2019-1-4 09:17:23 只看该作者
原来看不到图的不止我一个

0

主题

29

帖子

70

积分

Rank: 2Rank: 2

UID
275434
好友
0
蛮牛币
4
威望
0
注册时间
2018-4-3
在线时间
41 小时
最后登录
2019-4-15
9#
2019-1-6 04:11:50 只看该作者
4四处流浪
459/500
排名
6887
昨日变化

0

主题

137

帖子

459

积分

Rank: 4

UID
220420
好友
0
蛮牛币
518
威望
0
注册时间
2017-5-3
在线时间
130 小时
最后登录
2019-5-20
10#
2019-1-7 15:44:22 只看该作者
原来看不到图的不止我一个

原来看不到图的不止我一个
排名
31429
昨日变化

0

主题

11

帖子

27

积分

Rank: 1

UID
310801
好友
0
蛮牛币
14
威望
0
注册时间
2019-1-5
在线时间
6 小时
最后登录
2019-1-16
11#
2019-1-8 18:48:52 只看该作者
非常好 666666666666
5熟悉之中
695/1000
排名
10816
昨日变化

3

主题

480

帖子

695

积分

Rank: 5Rank: 5

UID
310426
好友
0
蛮牛币
675
威望
0
注册时间
2019-1-2
在线时间
116 小时
最后登录
2019-5-22
12#
2019-1-10 08:42:17 只看该作者
7日久生情
1514/5000
排名
1620
昨日变化

3

主题

115

帖子

1514

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
233810
好友
1
蛮牛币
5362
威望
0
注册时间
2017-7-24
在线时间
596 小时
最后登录
2019-5-22

活力之星

13#
2019-1-10 11:56:09 只看该作者
https原://zh文uan地lan.z址hihu.可com以/p/3看283图0片918
5熟悉之中
524/1000
排名
4937
昨日变化

0

主题

73

帖子

524

积分

Rank: 5Rank: 5

UID
118728
好友
0
蛮牛币
2016
威望
0
注册时间
2015-8-18
在线时间
157 小时
最后登录
2019-5-15
14#
2019-1-11 09:43:39 只看该作者
没图看着真费劲啊,脑补
3偶尔光临
167/300
排名
11085
昨日变化

0

主题

7

帖子

167

积分

Rank: 3Rank: 3Rank: 3

UID
235442
好友
0
蛮牛币
207
威望
0
注册时间
2017-8-2
在线时间
68 小时
最后登录
2019-4-30
15#
2019-1-12 16:17:47 只看该作者
我一直以为是我卡了
您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

  • 中国智能手机在东南亚受追捧 2019-05-22
  • 一语惊坛(5月10日):半岛和平,是中朝两国的共同愿望。 2019-05-22
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-05-21
  • 邓超陈冠希焦恩俊,刷新娱乐圈女儿奴新高度 2019-05-21
  • 紫光阁中共中央国家机关工作委员会 2019-05-20
  • 四个跌停后 金洲慈航不惜食言也要选择如此停牌自救 2019-05-19
  • 无论是否想怀孕 这串数字女性要知道 2019-05-18
  • 机遇与挑战并存 中国企业“走出去”行稳致远 2019-05-17
  • 中国算是世界杯中最能长期保持着稳定成绩的一个了。 2019-05-17
  • 回复@笑傲江湖V:中国人啥不炒?君子兰、普洱茶、大蒜……凡事保存周期比较长的都有人炒,跟市场经济充不充分有啥关系? 2019-05-16
  • 特朗普威胁中国,如果中国报复性征收美国高关税,美国将征收中国额外关税,特朗普真流氓。难道中国是吓大的? 2019-05-15
  • 那请你具体的指出,中国现在哪一个人不是中国人? 2019-05-15
  • 劳动不是人的本质,对劳动成果即社会财富的占有才是人的本质。在私有制阶级社会中,劳动成果即社会财富被剥削阶级无偿占有,所以人的本质便表现为阶级本质,“每... 2019-05-14
  • 丰富产品序列 曝力帆轩朗纯电动申报图 2019-05-14
  • 把党的领导贯穿军事科研工作各方面和全过程 2019-05-13
  • 259| 779| 337| 443| 888| 120| 707| 686| 647| 27|