- 01 前言
- 02 设计前
- 03 设计中
- 04 设计后
- 05 总结
前言
在游戏社区中，无论是活动或者游戏相关的工具都需要有较为浓厚的游戏特色，才能较好的让用户能沉浸其中。因此要求设计师在设计时对游戏有一定的了解，根据游戏的特色去设计定制化的UI。
但有一些如以赛季为周期迭代的活动，因为每个赛季的风格不尽相同，因此UI的风格也需要随之变化。此时如果每个赛季都重新设计开发的话，需要投入较多的人力物力，可能会对活动收益造成一定的影响，所以我们需要在定制化的基础上将UI进行模板化设计。
这个时候可能会有读者好奇，定制化？模板化？这好像是两个截然不同的概念。
确实表面看来，又要定制又要模板，好像有点不太合理。但转换个思路，如果把定制化中可复用的部分提取出来，根据每赛季不同的风格对其重设计，遵循一定的规范原则，以某种方式替换，就能减少大量的开发成本，又可以在设计上做出满足不同风格的变化。
永劫无间赛季战报是永劫无间游戏玩家的赛季总结，针对每一个玩家的赛季表现，进行一个较为全面的复盘，并以可视化界面的方式告知玩家总结的内容。该战报以一个赛季为一次报道周期，因此UI也需要根据每个赛季不同的主题风格进行变换。
当进行该项目时，正好处于永劫无间奇巧赛季的收官阶段，在赛季结束时会对玩家的赛季表现进行总结输出，并设计成可持续化的模板内容，以便在下赛季亦可以重复利用，减少开发成本。
如上所述，我们可以从设计前，设计中，设计后三方面来回顾该项目。
设计中
提取完元素之后，我们可以从原型图上规划出大致可重定制的内容模块，以便在之后的设计中注意内容的把控。
以首页内容为例，可预知页面是：背景图+logo+赛季选择按钮+赛季标题+玩家信息+按钮+协议的组成方式。因此针对上述模块，可以得到符合重定制条件的模块为：背景、按钮、赛季标题、头像装饰（若有）以及重要的文本内容颜色。
同时，为了减低开发与配置成本，需要从设计侧控制logo与文本内容的可视性，这个我们在第三阶段的模板规范建立上再进行详细说明。
在完成以上的前期准备之后，才开始正式进入设计中的阶段。此处我们选取了几个较为典型的界面作为案例，简扼说明一下设计中时如何注意对可重定制模块的把控以及如何配合研发做可持续替换的思路。
正如我们在上面对首页交互内容中的可重定制化模块进行划分之后，在UI设计中，我们需要遵循划分好的内容，思考定制主题风格的同时，要注意重定制模块的尺寸大小，色彩搭配，元素可视性等要素。
一些复杂的艺术字（如首页的“辉光赛季”标题）我们可以将其整体看作是图片，同样也可以用后台配置的方式替换。而如果页面中涵盖大量文本内容的话，则更多的要在页面背景，模块背景等方面下文章，尽量不去变动大文本内容，降低开发和配置成本。
两全其美的方案不难得出，由于背景等模块本就是需要替换的可重定制模块，所以只要控制好背景的输出效果，确保文本的可视性，就不用为过多的文本内容做配置，只需要在一些关键数据上给色彩上的配置选项，以适应不同的主题即可。
我们沿用上方所述的思路将所有页面设计好了之后，就需要给所有界面做规范化输出，建立规范内容，让以后的赛季重设计时能够按照规范的内容进行设计输出，借由后台进行配置，无需每个赛季都进入开发。
有了模板规范，在下一次做该项目的定制化设计时，我们只要充分了解赛季主题风格，重复上述的思路，做好模块的风格迭代即可。
设计后
总结
模版化可定制UI的思路已分享完毕，看起来UI设计并不复杂，但落实到实际工作中要比上述复杂一些。
工作中的活动需要提供很多配置项（下图），并且需要和开发紧密沟通保证最终上线效果，这对于设计师的综合能力是一大考验。
想要体验该项目更多的页面内容，了解不同赛季中具体哪些模块发生了变化，哪些模块又保持不变的话，可上大神APP搜索「赛季风云」，感谢您的阅读。
AstroxAkira
定期分享优质设计内容和团队最新资讯
如有帮助别忘了"分享、点赞、在看"呀
