DESIGN FEEDBACK 03.21

导航结构

英雄联盟的顶部导航是很棒的设计,但我们没办法直接照搬这个形式,因为我们暂时还没有设计一个简化版的 logo,就是这个东西:

我们的 logo 相当复杂,在小尺寸下表现不佳,而且在原本就很复杂的图形下面,最近又增加了 “5V5 MOBA” 的文字,所以 logo 也需要更正一下:

但如果要把这么复杂一个 logo 放在导航栏里面,势必就会带来两个问题:

  • Logo 被强行压缩到很小的尺寸,细节难以辨认,很糟糕;
  • 导航栏的高度被撑到很高,顶在头部很笨重,而且空间利用率很低,还产生了很丑陋的空白,就和我们现在的情况差不多。

所以我们需要换个思路,好在游戏 logo 一般都很复杂,可以参照的范例非常多,比如这两个:

Diablo 3 的论坛头部处理,logo 直接放在头图上面。

Cyberpunk 2077 也是同样处理导航栏与 logo 的。

导航栏的具体内容规划还需要和接口的各位负责人确认一下,还有一些常见的模块,比如社交平台入口,语言的选择等。

根据导航栏的规划,我们也可以参照上面两个论坛的导航栏设计。当然,暴雪的两层导航栏更适合游戏平台,而不是单个的游戏网站。

设计语言

现在的设计语言有点杂乱,逻辑不够清晰,主要要注意这几个方面:

  • 颜色的搭配,保持简洁的配色,各个区块按照功能的不同来选用色彩。
  • 装饰元素的统一,比如最基本的装饰元素,边框,现在就有个问题,边框的表现形式太多了,有的是纯色块,没边框,有的有边框,但有的是纯色边框,有的是渐变边框,这样就有点乱,最好边框的形式是统一的,但按照模块的层级和功能用不同的色彩。另外背景是透明还是半透明,纯色还是渐变色,也要保持一个完整的设计逻辑。
  • 字体,字体的选用和搭配最好按照规范来搭配,请看后面的详细说明。
  • 按钮,主按钮与小按钮最好保持设计上的一致性,小按钮是主按钮的简化版。

字体的规范

我们的标准字体是 Copperplate Gothic,已经付费购买了版权,一定要用,不用就浪费了。但这个字体的个性很强,而且只有大写格式,用作正文并不合适,所以只是用作为标题、板块名或者按钮。

我们现在的正文字体是Open Sans,选择它的一个重要原因是 Open Sans 免费,并且支持土耳其这样的小语种,而其他备选字体都不不支持。Open Sans 的个性很平庸,而且作为一款无衬线字体,格调相对现代,本身不太契合魔幻背景的角色扮演游戏,未来我们会推动另外一款衬线字体来替代它。

Copperplate Gothic 的标题样式,以及搭配 Open Sans 作为正文字体。

Copperplate Gothic 家族的全部9个字体样式。
标注红色下划线的我们推荐用作大标题,没有标注的适合用作板块小标题或者按钮文字。

按钮的标准化

论坛以浏览信息、沟通交流为主,所以更强调内容,视觉上要多做减法,所以没有必要添加太重的质感和太多的修饰。但在简洁的基础上,也要保持一定的品牌辨识度。

按钮样式的标准化,仅供参考。

列表方式

英雄联盟的论坛设计很棒,但他们在设计和开发论坛时,很大程度上参考借鉴了 Reddit 的交互模式。Reddit 是欧美最火爆的社区 ,地位相当于国内的贴吧,对于用户来说,可能操作习惯上更容易接受。我们先来对比一下两者的默认列表页:

Reddit 英雄联盟专区的默认列表。

英雄联盟社区的默认列表页。

但在论坛功能的契合度上,有很多东西可能不是那么适合。比如英雄联盟论坛上,除了会置顶、官方发布以外,帖子类型是单一的。而我们的 Discuz!论坛,帖子至少还有加精、投票、锁定等状况。而顶和踩(upvote & downvote)这种交互行为,据我的初步体验 Discuz!主贴是没有的,只有回帖才能顶和踩,能否开发出来,需要和开发同学沟通之后才能确定。

所以整体布局,我们仍然可以参考英雄联盟,把帖子列表作为主题,而板块列表放在侧边栏,但帖子列表的排版形式,我们也可以参考一下 Cyberpuck 2077,他们的论坛程序和 Discuz!比较接近:

Cyberpunk 2077 的默认列表页。