横版手游UI交互结构浅析-新闻详情

横版手游UI交互结构浅析


发布时间:2017-12-26责任编辑:朱明 浏览:1631


UI结构就是UI以什么形式显示,下面是我的一些想法,请多多指教。

大致分了3类。

1.弹框式

横版手游UI交互结构浅析1.png

顾名思义,界面会在当前画面上以弹框来展示,和传统的端游一样。面向pad的游戏,大都使用这种形式,可以直接把端游/页游的UI结构搬上去。这里要说一下,有些游戏是针对平板用户的,但因为在手机上也可以运行,所以会觉得文字、按钮都很小,体验不好(比如天下HD),这是误会人家了。

手机游戏不建议用弹框式,不能很好的利用屏幕,自适应不灵活,还有右上角的关闭按钮,每个界面位置不一。

横版手游UI交互结构浅析2.png

上图是2个游戏1:1对比,左图文字按钮要小一圈,对空间利用率也不高,因为这是面向pad用户的,在pad上玩效果是很好的。

2.  半开放式

横版手游UI交互结构浅析3.png

这种形式更适合手机,也是目前最流行的。和弹框型的区别,界面不是在当前画面弹出来,会切换到另外画面上去。这种布局把title、常用信息放在了顶部,更有整体感(因为各个界面有相同的头部)。把关闭/返回放在了统一的位置,方便操作。对屏幕利用率更高。

横版手游UI交互结构浅析4.png

半开放式,如果遇到信息不够多,可以考虑用插图来填补。

 

横版手游UI交互结构浅析5.png

弹框式VS半开放式,它们之间的演变,注意元素的位置,一切都为了更好的利用空间。

横版手游UI交互结构浅析6.png

关于利用空间,右图这种也不错哦。

3.   开放式

横版手游UI交互结构浅析7.png

开放式相比之半开放式,部分或全部内容直接显示在背景上。这种结构给人一种有开阔、舒畅的感觉,类似印刷中的出血版。另外能更好的紫适应屏幕。

横版手游UI交互结构浅析8.png

半开放式VS开放式的区别

横版手游UI交互结构浅析9.png

以上讨论的是1级菜单,2级菜单因为内容少和不确定,大都是用弹框的。相比关闭在右上角的弹框,笔者更喜欢上面这种,按钮统一放下方居中,比关闭在右上角的好处是,不管弹框如何大小,关闭按钮位置基本是在同一位置,方便操作。

 

结束:以上是总结的一些常用的形式,UI并没有一定的规则,比如刀塔传奇没有title,有的顶部还有除了返回还有主页按钮,有的把返回放在屏幕下方,如何取舍自己判断了,但都是为了1.更好的利用屏幕2.更好的操作。说不定你能设计出比市面上更好的交互方案呢。

 


游戏设计组   供稿