所向无前 正当年!掌上英雄联盟S10换肤设计小结
掌盟作为官方APP,在重要节点配合产品和运营侧进行换肤设计,旨在渲染节点氛围,提升产品口碑,展现有温度的APP形象。在换肤工作中,掌盟总结了三种换肤类型,S系列赛事换肤即属于其中之一。
回顾以往的S系列赛事的KV设计,形式较为统一,主KV在表现形式上呈现出白金雕塑风,辅以大理石纹理、金色宝石点缀,设计延展也沿用这一风格。在掌盟S9换肤界面中,设计团队采用较为保守的方法,提取主KV素材用于侧边栏和界面头部背景,以适应不同机型,同时结合主KV主要特征应用到底栏图标。
然而,2020年全球总决赛(S10)的主KV设计在形式上更加多样化和丰富。主KV以手绘原画风宣传图、丰富的色彩应用、中国元素纹理图案、多样化的十字符号和组合形式展现。面对这种复杂形式的挑战,设计团队思考如何将主KV元素巧妙地应用到界面中,并提炼新的设计方式。基于此,设计团队制定了三步策略:
梳理分析换肤界面,明确适合换肤的界面和换肤形式,帮助团队更清晰地把握设计方向,同时为产品侧提供清晰的换肤思路,便于与开发沟通实现方式和换肤周期。
定义元素使用规则,针对不同范围和程度的换肤界面,确定各界面的素材和元素使用规则。大范围背景使用原画素材,中等范围体现中国风纹理元素,小范围作为装饰性元素,与丰富的色彩结合。
挖掘设计新点,通过场景分析,找到与主KV相契合的设计发力点。例如,从赛事氛围中提取元素,如灯光、应援海洋等,融入设计中,增强视觉效果。
设计团队将上述策略应用于S10换肤中,具体体现在:
侧边栏:背景融合主KV素材,叠加层次丰富的背景图,避免纯色背景突兀,同时增加流沙元素,结合赛事信息和奖杯、星星等辅助图形,体现赛事氛围。
赛事Tab:延续侧边栏设计风格,背景采用纯色,突出选中状态的特殊性,增强沉浸感。
盟友圈:在帖子右上角新增S10标识,调整点赞图标样式,与流沙元素联动,增加趣味性和整体性。
底栏图标:保留新版本图标,进行描边处理,融入主KV色彩和描边,突出选中态时的灯牌感和丰富色彩。
搜索彩蛋:增加一些设计彩蛋,围绕赛事节点出发,提升用户体验。
LOGO:在原有基础上,使用角标形式体现S10主题,优化设计。
市场图和其他:赛事日历卡、手机壁纸等设计元素也融入S10主题,丰富换肤内容。
通过这次S10换肤设计,掌盟团队从传统的换肤思路中跳出,探索并解锁了更多设计方法,不仅在视觉上提升了产品氛围,还为用户带来了全新的体验。从梳理换肤场景到定义规则,再到方案落地,整个过程展示了设计团队的创新思维和实践能力。
多重随机标签