赞助商
立即赞助

斑点元素有机感气泡元素用户体验经验分享网页设计

专题页设计3年前 (2021)发布 流光
3.3K 0 0

斑元素有感泡元素用户体验

得益于游戏产蓬勃发展,社会对游戏的接受断,中国电竞同样来井喷。据统计,中国有领跑全球的6亿玩规模,中超过4.3亿手游玩都在同程上参与或注电竞赛事。但像王者KPL 这样极强调竞技水平的精英赛事,只有极数顶玩参与中,就算是王者耀的联赛,仅仅是覆盖了群体。普通玩在整个电竞链条中,多数条件只观看赛事,无法参与到实际的竞技当中。到有没有更社交的赛事,更多的户亲身参与中,从竞技层面上享受游戏,而仅仅只当吃瓜群众呢?

斑点元素有机感气泡元素用户体验经验分享网页设计

我们从社交的角发,由 QQ空间联合腾讯微视策划了一项旨在真正做到全民参与的亲民版电竞赛事——腾讯微视星联赛。联赛希望在以下三打造「最社交」电竞赛事:

覆盖广:与星联赛联的《王者耀》、《绝地求生·刺激战场》、《绝地求生·全军击》及《QQ飞车》款移端游戏,作为腾讯注极的手游,自身已具备非好的玩覆盖面和游戏黏性,配合QQ空间的社交属性,两者强强联合,起到1+1>2的效果,带来更多跃和容。

响大:每个用户可以拉个好友一起组队,通过以一带多这种方式,发挥社交的优势,力求转化更多的潜在用户。同,星赛在每款游戏中进行推广,加上作队虎牙主播资源的助力,扩大赛事的辐射范围。

门槛低:组队几乎无任何门槛,只需通过 QQ 拉够好友加入队伍就可以。赛制规则相对宽松,如2队友以行的匹配、排模式即可算积分,并不求必须太强的实力,也能享受游戏乐。同时,因考虑到这四款游戏的用户画一差异,我们提供每款游戏可以不同好友参赛的能力。

斑点元素有机感气泡元素用户体验经验分享网页设计

斑点元素有机感气泡元素用户体验经验分享网页设计

一、Logo设计

在设计赛事 logo 时,既要融入牌元素,又要反映游戏赛事的竞技性、娱乐性。从牌特性与游戏特性中炼共通的视觉符号,再将视觉符号融合到整个 VI、UI系统之中,通过多种渠道的实际应,断强受众对此符号的感受与印象,从而进一步扩展赛事的知名及影响,有效升牌曝光及美誉。

斑点元素有机感气泡元素用户体验经验分享网页设计

一个成功的 logo 需要有独特的牌个性与视觉特征,在此我们采图形、字体、色彩位一体的设计方法,取最有代表性的视觉符号作为图形与字体的通元素,通过统一的色彩搭配与材质渲染,保证整体视觉的一致性。

斑点元素有机感气泡元素用户体验经验分享网页设计

项目初期我们代表空间牌的核心图形——星星作为发点开始构思,从星星形状中逐步炼等边角形、V形等基础元素,这些简洁的元素可适配多样的组合方式,形成可联的视觉符号贯穿到整体的设计之中。

V 可视作 Victory 的缩写,象征竞玩家角逐胜利的雄心壮志。运用5个 v 互相穿插,组成空间 logo 外轮廓相仿的星形图案作为整个 logo 的 C位图形。

斑点元素有机感气泡元素用户体验经验分享网页设计

字体计中,选用矩形造字法,厚重的笔画使字形上去更加沉稳有力。最下方用一个波状线条「星赛」三个汉字下三宫的笔画,这个笔画上去像是心图的波纹,正好契竞赛事紧张刺激的活动性。

斑点元素有机感气泡元素用户体验经验分享网页设计

logo 整体以正边形作为稳定的外围框架,由一正一倒个三角域叠加构成。其中星形图案、赛事名称贴正三角域上而下依次排开,而背景的「V」状图形赞助商标签则顺着倒三角域的势布局,图形和字体上檐侧均有一截45°尖角飞出,保持图文风格一致的同让 logo 显得更尖锐挺拔。

斑点元素有机感气泡元素用户体验经验分享网页设计

最终应用于 UI界面的是3D化的 logo,考虑比赛的四款游戏调性相配,选用了百搭的玫瑰金作为 logo 主体材质,因为四款游戏UI 中均有融入多金属素;这种材质也方便适配不同赞助商的品牌色。

斑点元素有机感气泡元素用户体验经验分享网页设计

1. 主KV设计

KV 设计最大的挑战是如何将款游戏的元素融合到同一氛围里,KV 的格需要与 logo 有呼应,同时它将奠定 UI界面的视觉基调。尽管KV 呈现的是一个固定的空间,我们依然希望户看到时瞬间联想到丰富的故事性场景,为此我们设计了个方向的概念稿:一是插满各种游戏道具的器星球;二是结合「铁王座」的梗,设计一个游戏道具打的至尊王座;是由游戏中的元素共同组成的利之门。最终择了和 logo 外形更适配的倒角形「利之门」这一方案作进一步细。

斑点元素有机感气泡元素用户体验经验分享网页设计

白模阶,同样了打散重组的方式,将项游戏的元素自然地集结到体模中;王者耀标志性水晶塔之一的立方体组成整个倒角头,「两肩」的剑与翅膀是游戏角色器及件;倒角两侧上半分为 QQ飞车中热门的赛车模,半分则是自绝地求生与刺激战场的各种枪械。在利之门的左右两侧,设计了两个充满未来感的「焊枪」,「焊枪」体由 QQ飞车的赛车零件改而来。

斑点元素有机感气泡元素用户体验经验分享网页设计

最终渲染营一种未来魔幻感的赛博克格,茫茫宇宙中,若然浮现一扇巨大吱嘎作响的金属门,门中心熠熠发光的 V 字引领着竞技者们走向利之路。我们希望通过这种维虚拟的表现形式第一时间抓住户眼球,增强画面对户的感染。

斑点元素有机感气泡元素用户体验经验分享网页设计

二、界面设计

1. 组件

组件以说是界面的点睛之处,也是品牌 DNA 比直观的现,有助品牌的识别和认。届星联赛参赛游戏有四款,所拉取的数据各不相同,逻辑复,导致页面、展示内容、结构复,在设计程中遇到不少的问题,我们对其反复打磨,不断优化。

斑点元素有机感气泡元素用户体验经验分享网页设计

页面部

首页对四款游戏相关数据的集合展示,同时激发用户报,所以首页的部对所传达的内精准、吸引力、记忆点。这里我们直接将主KV 稍加调整用于部主视觉,强调品牌的同时,又精准的表达活动内。

游戏详情页是对具一款游戏相关数据的展示,头部运用等边三角形元素对 logo 加以修饰,结合款游戏的 CG原画,增强页面的游戏感和竞技感。

战队详情页主要展示本战队排名、战绩、参赛场等数据,主要以内容展示为主,头部与游戏详情页保持致,增大战队名称和战队数据展示积,增强用户参与感,烘托战队竞赛氛围。

斑点元素有机感气泡元素用户体验经验分享网页设计

图标

届星联赛包含的四款游戏:《王者荣耀》、《绝地求生-刺激战场》、《绝地求生-军出击》以及《QQ飞车》,总分为三种类型,在icon的设计中现出每款游戏特点的同时还要与星联赛整的视持一致,首先提取四款游戏具有代表的元素,分别来代表:报名玩家、参赛战、对战场次。

王者荣耀提取元素:战盔、盾、剑。

斑点元素有机感气泡元素用户体验经验分享网页设计

两款吃鸡游戏提取元素:三级头盔、徽章、平底锅。

斑点元素有机感气泡元素用户体验经验分享网页设计

QQ飞提取元素:赛头盔、盘、旗子。

斑点元素有机感气泡元素用户体验经验分享网页设计

图形以三形为基础,添加质感,折由45°相切而成,三边框协调图标平衡感,确保图标体量感统。

斑点元素有机感气泡元素用户体验经验分享网页设计

联赛分为两大赛区,东部赛区、西部赛区,设计元素选取东、西英文首母「E」「W」加入45°,结合东部赛区、西部赛区样,东西部为抗关系,颜色选用主流电竞赛事采用红蓝色,图标主要用于战队分区展示。

斑点元素有机感气泡元素用户体验经验分享网页设计

边框

星联赛活动中有大量的图展示,比每款游戏的轮播图、赛和战精彩视频、积分奖品展示、浮等等。是很现品牌感的位置,也是界面细节的现。拿首页游戏轮播图为例,我们以 logo设计中所提取图形元素为基础,运用2D模拟3D效果的手段,搭玫瑰金,雕琢细节,强化质感,并贯穿到部的边框设计中。

斑点元素有机感气泡元素用户体验经验分享网页设计

斑点元素有机感气泡元素用户体验经验分享网页设计

按钮

星赛活动逻辑相对复杂,所用按钮之比较多,在所有页面中报名页面流程最多,所需按钮状多,计过程中将不同状按钮创建成独立组件,可以快速调用所需的页面中,便于调整。

斑点元素有机感气泡元素用户体验经验分享网页设计

2. 活动页面

星联赛界面的整体视觉设计紧跟 logo 和KV 的设计格,保持一致的设计调性,升质感,打星联赛牌识别性,深牌印象。

在界面计中,利用星赛logo 和 KV计中所提炼的图形素、色彩搭配,对风格、类型完全不同的《者荣耀》、《绝地求生-刺激战》、《绝地求生-全军出击》、《QQ飞车》四款游戏进行统一,保留游戏各色的同,在整体界面符星赛视觉调性,以达求同存异的效果。

斑点元素有机感气泡元素用户体验经验分享网页设计

星赛整体界面,以2D的表现方式为主,在一些控件、边框以及烘托页面氛围修饰图形等,运用2D的计段模拟3D效果,在提高计速度和降低计的成本的同,达致细腻的视觉效果, logo 和主KV 的造型、色彩、质、细节保持一致,字体 logo 都有尖角飞出,整体调性契,再稍加质,增加界面细节。

斑点元素有机感气泡元素用户体验经验分享网页设计

三、活动延展

目前腾讯微视星联赛已于7月30日开启,除了线上营分,线亦举办了贴受众的嘉年华。

斑点元素有机感气泡元素用户体验经验分享网页设计

腾讯微视星联赛项目通过在设计中自然的牌植入与线上线双渠道的曝光,在赛事、手和玩之间形成了良性发展的生态圈,进一步增强了户黏性,有效升了商伙伴及目标户群体心中的牌。在后续或许会继续举办星联赛的第二届、第届赛事,如何在延续牌视觉的基础上进一步优视觉表现、推进创意革?在未来的设计中,我们会带着这些疑问进行持续性的探索。线我们亦将举办更多,大敬请期待。

斑点元素有机感气泡元素用户体验经验分享网页设计

经验分享页设计

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

进入2018年之后,再来审视今年的整个 LOGO 设计趋势,会比之前的预测要清晰了不少。通过对过去几个月的新 LOGO 设计的观察,...
ogo设计
在下面这幅图中,哪一个盘子会让你吃得更少?是用20cm的小盘子,还是直径30cm的大盘子?凭直觉,我们会觉得较小的盘子会让人...
用户体验
本文所讲的方法基本上在所有创作中都会用到。 记得之前说过: 创意这个东西,让人捉摸不透。 它既科学,又很玄妙。 它既理...
创意灵感
留白对于设计的价值,已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显,有了留白才有强调,它们从来都是一...
留白
一、功能逻辑梳理 在做框架设计与加减乘除合并同类项之前,梳理业务与产品逻辑对于复杂的流程界面来说是至关重要的。 我们举...
App设计
如果你想要转化更多的潜在客户或是增加销售额,那么你需要的是一个高转化率的落地页 (Landing Page)。根据 Hubspot 的数据[1]...
用户体验
网易UEDC – 吴挺聪 :很多设计师做品牌设计,会把较多精力放在LOGO设计上,却很少有人去认真设计一款辅助图形。其实一个好的...
logo设计
设计师对于世界的影响是否是巨大的?这一点是毋庸置疑的。但是即便是优秀的设计,也通过大量的日常积累,一个又一个小步骤上...
Eugen Eşanu