/【半周谈】033 动效如何构成连接 篇伍

【半周谈】033 动效如何构成连接 篇伍




游戏界面之所以在操作逻辑上可以运行,所依赖正是动效的连接能力。可以说动效的连接能力是游戏界面的骨架。








不同的界面操作形式有不同的连接形式。本篇就来讨论一下不同操作平台上别具特色的连接设计。或许可以帮助你在跨平台游戏的设计上提供思路。








1.手机平台










手机与其他平台的最大差别就在于“省略了外设”。因为手指可以直接触控屏幕的缘故,手机游戏的大部分操控控件都被设计成有型的界面型体,以取代其他平台中对应的硬件外设。








当然,有些主机平台也支持触控,如Switch,但这并不是它的主流操作方式。








手游的这种特有的操控方式带来两个问题:界面无法被尽量省略手指遮挡画面








这两个问题都在实际上缩减了手机游戏的实际有效画面。你大可以尝试将自己游玩手游的过程录制下来,就可以明白那些摇杆和充斥在屏幕边角的界面控件有多干扰。只不过,这个感受在你游玩时一般没有明显的感知。因为你的手挡住了这些控件。







用手指直接控制屏幕中的虚拟物体,实际上非常受人欢迎。这也是智能触控手机风靡全球的最根本原因。某种程度上,人们终于与自己创造的虚拟世界有了有史以来最近距离的接触:只隔了一层玻璃。









手指的主要操作方式是点击、滑动以及诸多复杂手势。但主要的,我们通过点击滑动来操作手机游戏界面。









从手指点按这种操作手段上来说,手游中最主流和便捷的连接方式,应该设计成拖动→变形→终态的形式。但实际上这种情况仍属少见。




除了实现成本比较高以外,还因为点击要比拖动更舒适。手指和鼠标最大的不同在于,同样的拖动操作,手指更“费劲”一些。








不过在很多应用中,通过左右滑动在不同层级间跳转,属于比较便捷的手势操作。这种设计在游戏界面中则非常少见。基本上只会出现在拟物化的特别界面中。








如下图所示的youtube的iOS客户端里,可以通过滑动手势退出视频详情页,将其缩成屏幕底部的宽横条。视频播放的同时,还可预览其他内容。也可进一步点击宽横条右侧按钮将其彻底退出。这是一种非常典型的通过手指滑动来建立“直接联系”的动效和交互方案。



在同样的手势操作下,twitch的iOS客户端则更进一步与系统进行耦合。做同样的向下滑动操作时,正在播放的视频并不会像youtube客户端中那样变小,而是直接独立成视频窗口浮层。这一浮层甚至在twitch退出至桌面后依然存在并可支持拖动。





通常情况下,我们在应用里讲过的最常见连接操作,就是像下图网易云音乐这样的通过左右滑动来从各个层级之间进行跳转了:










滑动类的操作,在游戏界面里,则多用于像下图《WarfareZ》里这样,在拟物化的物件上,如书本上来回翻页:










所以基本上我们讨论一般的,常用的手机游戏操作动作,绝大部分指代的就是手指点击,外加一点点滑动。








从这个角度上来说,手游的操作实际上退回了桌面端的鼠标点击操作。但粗钝的手指却又不如鼠标灵活。于是手游界面的很多关键操作点位都会被设计得硕大无比(



相对桌面端软件来说



)。








这其中,《原神》将各个平台的界面控件尺寸控制得相对比较统一。如下图所示为iOS端《原神》,下下图为PC端版本。两者在操作控件上有所不同,其他控件在相对一致的屏宽下保持了高度一致。








但关键的操作点位上(大招、走、跑等基本操作按钮),两者还是有巨大的差异。手机端的按钮明显要比PC端大很多,甚至PC端界面并没有直接的可操作控件。



虽然设计尺寸这种外在的表现不太相同,但都通过“点击”来进行界面交互的本质并没有什么不同。即都通过点击关键的跳转点位来切换不同的框体,这些点位通常是按钮。








但手指比鼠标具备优势的是,在手机有限的空间内极其灵敏,尤其在点击空白处时。鼠标要做同样的操作,需要先找到鼠标所在,然后在众多细密的界面控件里找到空白处,才敢下定决心点击。








如下图所示的《机动都市阿尔法》中,就可以通过手指随意点击空白处来关闭任意横屏弹窗,使一些高频操作得以迅速无脑完成。








可以说手游端的“点击空白处关闭”是一个很伟大的交互发明。









总体上来说,手游端的连接关系与桌面端并没有本质的差别。它们都只是表象的差别:因为手指相对鼠标的粗大,手游界面尺寸会偏大;双手持握时,主要的操作外设--拇指因为有操作局限,主要的界面操作点位被设计在固定的区域内;手游有一些震动反馈,这一点主机手柄也拥有。









除了这些表象之外,可以认为手游界面中的连接关系与桌面端相同。









很多公司的多端发布,其实就直接照搬了手游到桌面端。操作起来除了鼠标移动距离过大之外,并没有明显的不适。根本原因也即在此。









在主机平台与桌面端平台,界面的连接关系也因特定的平台操作特点,有自己的特点。我们将在本系列的下一篇文章中继续讨论,敬请期待。









以上。



















 欢迎点击下方名片关注本号 



往期推荐:

本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。