明日方舟官方网站优化设计

01. 改版背景

《明日方舟》的官方网站已经沿用了两年。这两年中游戏的整体设定变得更加完善,角色更加丰富,与此同时网站难以容纳越来越多的游戏相关内容。

基于游戏的整体风格,我对网站进行重新设计,为优化视觉和内容展现方面提供自己的一套方案。

02. 元素提取

为保证网站与游戏风格的统一,必须先从游戏UI中提取关键元素。

色彩方面,《明日方舟》的界面以黑白灰为主。凸显现代工业质感的同时,也使用蓝色和橙色进行辅助,显得不会单调。

图形方面,界面以矩形为主,辅以少量的圆形元素。部分区域配有规则几何形状的渐变底纹。

字体方面,游戏内标题文字以具有质感的思源宋体为主,其他文字则选用更具易辨识度的思源黑体。

根据以上几点,拟制作一款以矩形元素为主的深色网站。英文衬线体Garamond premier pro作为网站的主字体。

03. 设计展示

04. 改版思路

旧首页问题:

  1. 为了给画面中间的视频提供更大的空间的同时适应手机屏幕,导航被设计成收缩于左上角,点击展开,不够直观。
  2. 右上角聚集了登录、客服、视频切换和其他链接,功能区划过于杂乱。
  3. 底部下载区过多占用空间,且罗德岛标识作为视觉平衡元素,没有其他实际用处。

改版思路:

  1. 导航悬浮于顶部,层级清晰。
  2. 画面中心用