《大话西游2》是一款有着16年历史的国风游戏，相信大部分人都或多或少听过。虽然现在看来，游戏无论是画面还是玩法都相对老套，但经过多年的沉淀，游戏不仅有一批忠实的玩家，其经典的IP还衍生出大话西游手游、大话西游热血版等游戏。在2017年大话2推出了口袋版的重大更新，将端游的玩法完整地移植到了手机上，这也是顺应游戏移动化的趋势。我在大话西游2项目组担任交互设计，从16年中开始新口袋版的交互设计（口袋版原本是竖屏的，并且玩法和端游不相通）。

随着手游的普及，端游玩家时间逐渐减少，将老游戏移植到手机上也是经典游戏存续的重要方式。当时市面上已经移植的游戏还很少，但不可否认会有更多的游戏进行尝试。与开发一款IP新游戏不同的是，端游游戏移动化需要考虑端游玩家在两个平台使用的顺畅性，目标用户主要是游戏的老玩家。越是经典的游戏，移植起来就越困难：工作量庞大，界面功能繁多，原有设定找不全，这些是移植过程中碰到的主要难题。新口袋版现在已上线两年，在此我分享下PC游戏移植到手机过程中交互设计应当注意的问题和解决方法。

设计原则

任何设计开始的时候，都必须搞清楚受众的偏好，弄清楚目标用户需要什么。假如做一款新手游，我们一般在游戏题材的上找切入点，以增强游戏代入感为目标。而在做游戏移植的时候，如果设计是以“做出一款新颖的游戏”为目的，那做出来的东西肯定是难以被老玩家接受的。口袋版的目标场景是老玩家在不方便使用电脑，或者是在闲暇时可以快速开始游戏，实现平滑迁移才是口袋版的设计原则。因此我们的设计原则应当是“符合玩家使用习惯”，在此基础上进而推导出设计的若干相关准则。例如口袋版在设计初期，就确定界面美术风格用兼顾双版本（大话西游2端游分为经典版和免费版）的丹心墨意主题，以黑色为背景色、红色为主色的风格。再比如好友界面的靠右出现方式，也是和端游一致的。大话2玩家的年龄普遍较大，在交互设计上尽可能和端游相似，可以大大减少老玩家的学习成本。

而在设计框架上，我们使用了大话西游手游版的框架。一是因为手游版的交互已经过了层层打磨，在易用性上完全没有问题，现在的很多回合制手游也是类似框架。二是大话的玩家很多都接触过手游版，已经熟悉了其交互方式。而且基于品牌的整体度，采用手游版的框架也是合理的。现在很多重度游戏的设计模式都比较成熟了，没必要自己再花心思去琢磨做出颠覆的框架。回合制这种强社交的游戏，采用现有的窗口界面，在任何时候都能够看到聊天信息是很有必要的。而像动作、竞技游戏，更多地需要突出个人成就，要将美术更完整地展现，使用全屏界面就很适合。

计划与规范

早在程序开始开发的前三个月，交互设计就开工了。因为服务端即后台是共用的，美术资源也是现成的，大部分的工作都在于前端和视觉部分，设计提前介入很有必要。倘若等到项目正式启动了才开始设计，那么等待你的就是无休止的加班。交互设计刚开始的时候不能就埋头开始做设计了，闲时无计划，忙时多费力。有些设计师想到一点做一点，缺少计划指导。口袋版这样大的工程，其设计量是普通手游的几倍，应优先确定主次。虽然提前了三个月开始，但这中间会有各种调整，比如界面素材迭代了，就需要更新效果图；老大们要审核设计，进而会有许多修改意见，做计划的时候应该把这些变数考虑进去。确定好游戏各系统的优先级，预估系统设计完成时间、起止时刻，约定好输出产物样式。在口袋版计划制作上，我们将要移植的系统按主次分为三个阶段，第一阶段为期三个月，主要有主界面、战斗系统、物品栏等最常用系统的设计；第二阶段为期三个月，为次要系统的设计；第三阶段一个月，用来做策划尚不确定做不做的系统。

 

设计计划主要是用来约束设计师的，但做计划的时候切忌闭门造车，计划做好后和产品策划商量是否可行，并且要按照计划时间给予产出与反馈。计划也要给自己留有充足的修改时间，特别是主要系统要留足时间，实践证明光战斗就做了几个月才最终确定。实践同时证明π定律是很有效的：实际所耗费的时间是预计时间的3.14倍，嗯嗯。

 

UI设计中与计划相辅相成的设计规范，在进行铺量之前制定好设计规范，对于后期问题排查和工作交接也很有帮助。由于交互和视觉是分开的，口袋版设计规范的完成也是经过了两步，第一步交互确定游戏的设计框架，拟定初步的交互设计规范，包括界面尺寸、层级关系、各种控件的大致尺寸与交互方式、文字以及常用组合控件。这个阶段交互规范的作用是和开发确定出游戏的基础交互方式。而在视觉介入并确定样式后，视觉会出一份视觉的规范文档，交互需要将视觉规定的相应内容添加到规范来。当交互规范完全确定的时候，基本上主要界面也已经确定，接下来就是进行延展设计。口袋版的规范确立还是算快的，因为美术风格肯定要和端游接近，设计框架也有参考。顺便一提，当交互规范完成后，敦促开发将规范了的设计控件进行模块化，有助于后期快速开发。

设计问题与解决

1、原界面功能太多，怎么设计布局

大话西游2的每一个主要系统都有茫茫多的功能点。比如召唤兽系统，单是召唤兽主界面，就有召唤兽列表、召唤兽属性123456…、召唤兽形象、内丹等，而主界面上又有比斗、物品、炼妖、抗性等入口。若只是把端游的界面原封不动的放在手机上，肯定是有易用性问题，比如纯文字列表难以点击，各种入口样式单一。类似的界面是在移植时是最大的难点。解决之道在于梳理功能的优先级，突出主要功能，弱化次要功能，并运用视觉表达技巧提高界面的可读性。

 

首先我们将召唤兽的功能分为四个大块：属性、抗性、技能、物品，这是玩家实际中关注和操作最多的，而类似比斗、炼妖等玩法，使用频率要固定的多，因此只在主界面放了入口。在主界面将召唤兽的数值信息统一放到了一边，并且将不常用的加点条目进行隐藏，同时将召唤兽的其他操作放到了中间，在界面布局上划分清晰。文字上通过去掉端游的文字框、使用不同的字色来达到减少界面元素的效果。信息并没有删减，但界面比端游看起来更加合理舒适，更加方便手机端操作。

在移植过程中除了功能的组织外，我们也通过增加功能，使界面更符合手机上的使用习惯，以提高可用性。比如端游上召唤兽列表仅仅只有文字，而在手游上，不仅增加了召唤兽头像、召唤兽等级，还将原有的颜色表意变成了更加直观的图标形式（如参战）。再比如增加了经验物品直接吃的入口，这是因为在端游上可以同时打开多个界面，玩家可以很方便地进行喂养，而如果按照端游的这个逻辑，手机上玩家需要先选择特定的召唤兽，关掉召唤兽界面，再打开物品界面，选择要喂养的物品进行喂养，操作复杂多了。增加的这些功能并不是想要改变玩家的游戏习惯，而是让玩家在进行同等量级的操作时，得到同样的结果。

 

对原有系统进行梳理时，一定确保每个功能点都了解到位，游戏中往往有很多隐藏的设定必须达到特定的条件才会解锁，在梳理的时候容易遗漏，否则后期就得给界面各种打补丁。梳理之后对各个功能主次进行排序归纳，定出界面呈现层级。在进行交互设计的同时，借助视觉技巧也有利于达成设计目标。

2、如何快速铺量

端游界面量很多，如果每一个都重新移植的话，不仅设计工作量大而重复，程序的开发量也会倍增。纵观所有界面，可以分为三类：第一类是需要仔细设计的，大部分的系统主界面、战斗界面都是如此，需要作出很多方案，得到最佳的设计方式；第二类是次要界面，设计以完成功能为主，不需要过多地进行优化，但它们都是独特的，也需要单独设计；第三类则是功能结构相似性大，彼此间的差异可能就是一两个选项的区别。针对第三类设计，我们把它们全部统计出来，做成模板化的界面。比如购买界面，都会有物品列表、单价、数量等操作，但是呢有的购买除了金钱还要花费点别的数值，或者又可以买多个。我们将相同的部分做成一个文件，不同的地方做成多个模板，根据实际情况进行调用。这样做，设计只需要为每一个界面出一个大致的效果图就可以了，不需要每个都解释说明。

在进行其他两类的界面设计时，遵循统一的设计规范能保证各个系统的统一性，也是提高铺量效率。除了交互规范中明文规定的样式，在设计时也有很多默会知识，比如操作按钮在界面要下沉，方便玩家点击，弹出界面尽量比父界面小等。这些知识在设计过程中会总结出来。铺量的时候时间很少，遵守早期制定的规范不要随意更改很有必要，以后交接给其他人的时候也有理可依。

3、符合玩家习惯，也要适度改变

口袋版是原有游戏在新平台上的延伸，因此在大多数操作上应该贴近原有的使用习惯。一个游戏换了一个平台，它是否还是同样的游戏，除了美术一样外，交互体验所占的比重也相当大。简而言之，就是操作的感觉符合玩家预期。无论是主界面各个入口的摆放位置，各个界面打开时是否能够快速找到目的功能，玩家在使用该系统前都会设下心理预期，一旦不符合玩家的心理预期，他就需要建立一套新的习惯模式。这就是为什么即便坐骑的四个功能模块：坐骑、飞行器、座驾、时间宠，第四个和前三个完全不是同样类型的，在口袋版也放在了一起。

 

但如果把端游的交互习惯完全照搬到手机上，也是不行的（不然要设计师做什么）。要是主屏幕下方塞上十多个入口，那主界面会十分臃肿，想必每个系统按钮也会小到用放大镜。手机在携带方便的同时，也牺牲了大屏的便捷性。在移植过程中很多交互都要进行优化。举个任务系统的例子。端游上任务系统是和物品等一起放在右下角的，在口袋版因为加强了任务追踪功能，便将任务入口和手游版一样放在了任务追踪的正上方。但是，由于大话西游2并没有“每日任务”这样的系统，玩家在口袋版上根本找不到任务入口。他们在主界面右下方没有发现入口，狂点任务追踪也不会打开界面。后来我们做了优化，将任务入口按钮紧贴任务追踪做了个很突出的按钮，并且在没有任务的时候提示玩家点击该入口，玩家就没有出现过问题了，而从效果上看，口袋版的任务设计是更加符合手机使用习惯。

4、解决鼠标与快捷键缺失

手游与PC电脑游戏差别很大的一点，也是移植中很头疼的问题，就是手机上没有鼠标、没有键盘，因此就没有右键和快捷键功能。在端游中，物品栏的一个物品左键可以选中它，拖拽可以进行顺序调换，右键可以直接使用，鼠标悬停可以查看物品信息。怎么解决输入变少的问题？有三个方法。

 

第一，将所有可执行功能显像化。口袋版物品栏的单个物品点击后，除了预期会出现的物品信息，其他所有可能发生的操作都直接增加了功能按钮。为了保证能够涵盖完全，首先要弄清楚该对象可能会有的功能。一个物品除了上面所说的鼠标能够直接进行的操作外，还可能会有关联操作，比如添加物品锁，这个功能并不直接由物品产生，它最终作用于物品。而如果忽略了这个功能，使用增加模态等方式来为物品上锁，便不及直接放按钮好用。

第二，手势代替。在移动设备上除了点击之外，还会用到长按、滑动、双指放大等手势操作，这些手势的操作频率不高，适合不常用的操作。比如手指向上滑动人物飞起来，手势与功能定位是符合的；双指放大进入简易模式，出现其他快捷操作；更为高级的，向上滑动输入框，调出历史输入消息。手势操作一般需要有比较明显的说明，或者在首次触发的时候提供新手操作指引以告知玩家。

 

第三，提供功能集合入口。对于实在难以解决的操作，或者已有方式并不明显的操作，我们可以在适当位置增加功能入口，例如口袋版在聊天窗口的右侧增加了更多按钮，点击后展开的面板含有飞行、攻击、给予等操作按钮，虽然这些功能在游戏里面已有，但是还是会有玩家反馈找不到，即便提供了说明玩家也不一定会看，这样的功能集合面板能够帮助这样的玩家完成操作。