如何搭建模版化游戏运营活动UI？

原创阿光 ASAK

01 前言
02 设计前
03 设计中
04 设计后
05 总结

前言

在游戏社区中，无论是活动或者游戏相关的工具都需要有较为浓厚的游戏特色，才能较好的让用户能沉浸其中。因此要求设计师在设计时对游戏有一定的了解，根据游戏的特色去设计定制化的UI。

但有一些如以赛季为周期迭代的活动，因为每个赛季的风格不尽相同，因此UI的风格也需要随之变化。此时如果每个赛季都重新设计开发的话，需要投入较多的人力物力，可能会对活动收益造成一定的影响，所以我们需要在定制化的基础上将UI进行模板化设计。

这个时候可能会有读者好奇，定制化？模板化？这好像是两个截然不同的概念。

确实表面看来，又要定制又要模板，好像有点不太合理。但转换个思路，如果把定制化中可复用的部分提取出来，根据每赛季不同的风格对其重设计，遵循一定的规范原则，以某种方式替换，就能减少大量的开发成本，又可以在设计上做出满足不同风格的变化。

设计前

下面我们以永劫无间赛季战报为例子，简单说明一下设计模板化定制UI的设计思路。

永劫无间赛季战报是永劫无间游戏玩家的赛季总结，针对每一个玩家的赛季表现，进行一个较为全面的复盘，并以可视化界面的方式告知玩家总结的内容。该战报以一个赛季为一次报道周期，因此UI也需要根据每个赛季不同的主题风格进行变换。

当进行该项目时，正好处于永劫无间奇巧赛季的收官阶段，在赛季结束时会对玩家的赛季表现进行总结输出，并设计成可持续化的模板内容，以便在下赛季亦可以重复利用，减少开发成本。

如上所述，我们可以从设计前，设计中，设计后三方面来回顾该项目。

在设计前，我们充分了解需求背景，熟悉赛季风格，提取可重定制化风格设计的模块；设计中根据游戏风格与赛季风格进行定制化设计，并时刻注意可重定制模块的内容规范；设计后将可重定制模块进行规范化输出，让变换主题设计时有规范可依。

这就要求设计师在设计前需要对永劫无间的游戏风格有一定的了解，尤其是本赛季的主题。但由于每个设计师对设计的理解以及元素的运用各不相同，这里不多赘述。大致可以从以下几方面分别对游戏元素及赛季元素进行提取。

设计中

提取完元素之后，我们可以从原型图上规划出大致可重定制的内容模块，以便在之后的设计中注意内容的把控。

以首页内容为例，可预知页面是：背景图+logo+赛季选择按钮+赛季标题+玩家信息+按钮+协议的组成方式。因此针对上述模块，可以得到符合重定制条件的模块为：背景、按钮、赛季标题、头像装饰（若有）以及重要的文本内容颜色。

同时，为了减低开发与配置成本，需要从设计侧控制logo与文本内容的可视性，这个我们在第三阶段的模板规范建立上再进行详细说明。

在完成以上的前期准备之后，才开始正式进入设计中的阶段。此处我们选取了几个较为典型的界面作为案例，简扼说明一下设计中时如何注意对可重定制模块的把控以及如何配合研发做可持续替换的思路。

正如我们在上面对首页交互内容中的可重定制化模块进行划分之后，在UI设计中，我们需要遵循划分好的内容，思考定制主题风格的同时，要注意重定制模块的尺寸大小，色彩搭配，元素可视性等要素。

在首页的设计中我们不难发现，最终的UI定稿与交互稿基本一致，只是在某些地方有细微的差别。例如：赛季时间 “xx年xx月-xx年xx月” 处，这是一个可变化的文本的内容，如果做成切图那灵活性会大大降低，因此为了减少开发成本，也为了使标题内容模块形成整体，方便后续的替换，所以将“赛季时间”与“赛季风云”位置进行调换，以适应模板的要求。

一些复杂的艺术字（如首页的“辉光赛季”标题）我们可以将其整体看作是图片，同样也可以用后台配置的方式替换。而如果页面中涵盖大量文本内容的话，则更多的要在页面背景，模块背景等方面下文章，尽量不去变动大文本内容，降低开发和配置成本。

以英雄数据页内容为例，可以看到页面内的文本模块是比较多的，如果每一个文本内容都要做单独配置的话，那无疑是加大了开发成本。因此我们在设计时，需要考虑是否有必要将所有文本内容都做成可配置项，如果不做，又需要在那些地方做变化。

两全其美的方案不难得出，由于背景等模块本就是需要替换的可重定制模块，所以只要控制好背景的输出效果，确保文本的可视性，就不用为过多的文本内容做配置，只需要在一些关键数据上给色彩上的配置选项，以适应不同的主题即可。

我们沿用上方所述的思路将所有页面设计好了之后，就需要给所有界面做规范化输出，建立规范内容，让以后的赛季重设计时能够按照规范的内容进行设计输出，借由后台进行配置，无需每个赛季都进入开发。