前言

《阴阳师：百闻牌》是网易《阴阳师》IP的又一新作，很荣幸能够参与并见证她的成长。站在《阴阳师》IP的肩膀上，同时又是相对小众的CCG游戏品类，我们UX设计团队在研发过程中遇到了各种各样的挑战。例如，珠玉在前怎么做出自己的特色？在功能与表现之间如何平衡？在一路的摸爬打滚中，我们交出了自己的答卷，也形成了一些心得体会，希望对新同学带来启发。

在妖怪世界打牌是什么体验

《百闻牌》界面怎么做出自己的特色，是我们一直在纠结的问题。《阴阳师》是一个有鲜明世界观的IP，玩家化身阴阳师来到人妖共生的平安京时代，体会其中的悲欢离合。那么《百闻牌》又有什么可以挖掘的特色呢？

在开发前期，我们进行过大量的预研。有围绕妖怪的，有围绕楼船的，甚至有围绕海元素的。过程中确实产生了一些有趣的点子，但是到正式开发具体功能时又卡住了。用什么包装功能、为什么要这样设计，每每都要纠结很久。究其原因，这些小点子都是零散的想法，还没有聚集成能贯穿其中的灵魂，当遇到模棱两可的问题时，提供不了决断的依据。

我们尝试找更多的参考。提到卡牌游戏，可能第一个会想起《炉石传说》。《炉石传说》UI设计师Derek Sakamoto在GDC上分享过他们通过“盒子”这个seed进行设计延展的故事。在魔兽的世界里有一个“暴雪”小酒馆，英雄们围着桌面上的神奇盒子在打牌，一切界面的交互都从这个盒子展开。让玩家感觉自己是在魔兽世界里玩着卡牌，十分带感。

那么《百闻牌》又是在什么地方打牌呢？回归到世界观设定，《百闻牌》故事发生在一个叫“蜃气楼”的地方。这是一个只允许妖怪进入的特殊空间，一个穿梭于三界之间的神秘船团。这里的所有争端都要通过百闻牌解决，妖怪云集于此，享受另一种日常。这个叫“蜃气楼”的地方，主角是妖怪，主题是日常。于是我们希望从“蜃气楼”入手，让它作为贯穿其中的灵魂。

妖怪日常

“通过交互界面传达妖怪世界的氛围“成为了我们的设计目标。

首先，蜃气楼作为整个故事发生的地方，也是一个整体的包装。于是我们在大厅界面中展现了一个完整的楼船内部结构，来承载玩家的情绪和系统功能。在包装上，我们希望以楼船为载体，让交互故事化，增强代入感。在功能上，相对于传统导航式布局，通过结合楼船进行功能区域划分，能够帮助用户快速建立操作行为模型，降低使用及理解门槛。

其次，作为《阴阳师》IP的系列作品，最能让玩家产生共鸣和亲切感的元素，莫过于里面的妖怪。想象一下，如果你机缘巧合之下混入了蜃气楼，会不会很好奇你熟悉的妖怪会在这个妖怪乐土上过着什么样的生活呢？如果一个妖怪聚集的地方连一个熟悉的面孔也找不到，怎么想都有点不合情理。于是我们尝试让某些妖怪和功能结合，妖怪们在蜃气楼里做起里自己的小生意，在界面中出场。

我们希望这些妖怪能够和功能有呼应，和玩家有交互，而不仅仅是站着一个好看的“看板娘”。

原本冗长的选牌流程，在青蛙瓷器的地下牌局乱入后，仿佛变得有趣起来了，充满了诙谐的喜感和烟火气息。通过分段情景式设计，强调代入感氛围的同时，将复杂且枯燥的交互流程变得有趣生动。最重要的是，这些和功能的融合，是符合这个式神人设的，我们希望能给玩家带来“哈，不愧是你“的熟悉感。

有源设计

设计的过程中我们遇到了一个问题，就是界面元素的选取缺少依据。我们不可能将每个界面都做成一个大场景，这样无论从开发成本还是信息展示效率来说都不现实，总要面对一些较常规的界面。而这些常规界面的制作往往是看到什么好看就用什么的，缺少依据和一致性。

回顾现实生活中，每个地方几乎都会留下当地文化的印记。例如在日本的寺庙、神社、铁道站等各种各样的地方，常常会有一个富有当地特色的印章供游客收集。再例如当你进入一个主题公园时，你会收到的门票、导览地图、纪念品等等东西，这些东西都会带有这个主题公园特有的印记，成为你游玩体验的一部分。

蜃气楼作为妖怪世界的网红打卡点，是不是也会有自己的风物呢？不只是一个场景一个妖怪，还可以是一个物件、一个行为或者一个仪式。从这个设想出发，我们尝试将部分常规界面的设计和蜃气楼这个地方的风物串联起来。希望能将这些人文印记融入到界面设计中，让这个世界更加真实立体。

例如，进入主题公园需要门票，那么进入蜃气楼是不是也同样需要门票呢？于是我们将新手取名界面设计和门票结合了起来。当新手初入蜃气楼时，会有一段验票的引入小剧情，其实也就是游戏中的取名环节。当向三目报上自己的大名后，三目会在你的门票上盖上后夜祭的印章，表示已经验过票了。门票的外形设计和CG里出现过的门票呼应，并带有蜃气楼随处可见的楼船徽章，营造出登船的仪式感。

再例如当你在主题公园游玩时，常常会收到一份景点导览地图，那么当妖怪进入蜃气楼后会不会也能收到这么一份导览卡呢？从“引导“的功能定位来看，导览卡和新手引导存在着共通点。于是我们尝试将导览卡的元素加入到新手教学知识点界面的设计中，将常规的tab设计成楼船平面图，让新手知识点教学这个常规界面也带有楼船的地理设定特色。

交互效率

在采用了大量场景化和拟物化的设计后，如何平衡功能和表现的交互效率是我们面对的另一个问题。场景界面的打开需要适配各种设备的性能，在现有的技术条件下，部分设备无可避免地需要等待一段加载时间。我们希望让打开场景界面的整个过程自然顺滑，减少玩家“等待“的感觉。结合楼船的结构，我们为进入场景界面设计了一段简短的进门仪式。点选建筑后，会打下一束光照亮这个建筑，作为选定反馈，告诉玩家“你即将要进入到这里“。其后通过一个开关门的过程，自然进入到场景，加载在开关门的过程中完成。通过动效表现的配合，让这个突兀的等待时间，变成一个合理的进门仪式，同时和《阴阳师》本作的经典元素呼应。

其次，在大场景中如何快捷地找到目标信息，也是场景化界面交互中常碰到的问题。例如，商店街界面是一个很长的横向场景，在街上的每个地方都可能有事件发生，需要玩家及时处理。于是我们结合楼船的概念，以船体剖面图的形式，在界面的底部设计了一个快速的导航，让玩家可以点哪里到哪里，甚至直接定位到事件的位置。

复杂的操作和精致的界面表现是另一对矛盾。例如战斗界面希望通过“满屏皆画卷”的手法强化美术表现效果，但战斗中复杂的信息和操作是不能回避的问题。如果让这些信息和操作全部外显，必然会对画面效果带来破坏，而且会增加每回合的操作压力。我们尝试采用触发式的设计，结合流程的梳理，让这些信息在适当的时候再冒出来。

例如升级操作一开始是额外路径，需要点击战斗界面上的一个按钮才能进入升级状态，容易被遗忘而且占据界面空间。与策划讨论并确认升级并无负面作用后，我们尝试将升级变成一个必经过程，减少玩家记忆负担，同时简化操作和减轻界面密度。

心得总结

加入一点灵魂

日本工业设计师喜多俊之曾提出“给设计以灵魂“的理念，他认为设计不仅要关注造型和功能，还需要思考设计的灵魂。这种理念在UI设计中同样也有参考价值，除了考虑功能合理和表现好看，我们还可以结合整体流程和包装设定去思考，为设计加入一点灵魂。

在开发的过程中，我们遇到一些界面，功能完整，也加入了很多精致的装饰，但总感觉什么地方还不够。例如在设计阵容系统的过程中，一开始只考虑了功能化的交互原型，效果图出来后纵使加入了精致的装饰，但总感觉缺少了点什么。究其原因，阵容系统是通过点击一栋主建筑进入的，其他从主建筑进入的界面都能感受到这个建筑独有的特色，唯独阵容比较割裂。于是我们尝试结合狸猫酒馆的地理设定，将狸猫和酒馆吧台的元素融入到过场衔接动效中，让它更像一个建筑里的空间。

进入建筑后，狸猫店主挥一挥手，往玩家桌上扔来了寄存在此的牌组。玩家选择牌组后，可以在酒馆吧台的下层整理阵容。整个流程更有趣了。

游戏UI设计区别于其他app设计的一个重要方面，是它会更有故事性和代入感，给玩家更强烈的反馈。这不是毫无章法地堆砌无意义的装饰元素，而是让这些界面元素在世界观设定下逻辑自洽。如果设计师也不相信游戏虚拟世界的存在并有意识地加以呈现，玩家又怎么感受得到呢？

平衡落地

UI设计的过程中经常会产生很多有趣的想法，但并不是所有的想法都能顺利落地。问题总是层出不穷的，有时是功能变动，有时是美术效果呈现不佳，有时是程序实现存在问题，有时是时间不允许……开发的过程不是确定一个包装或者扔下一个方案就完事了，有时甚至落地比设计需要付出更多的时间和心血。在这个过程中，需要和策划讨论设定和功能展开的合理性，需要和美术讨论表现力最优的呈现方式，更需要和程序沟通落地可能存在的问题。充分沟通，适当平衡，才能保证设计最后能够有效落地。