专注营销型网站建设外贸网站建设!自适应IPAD+手机微信+电脑

专属定制:138 2557 5516 关于智唯 | 联系智唯
网站设计News
公司网站建设

记一次官网改版的梳理与思考【精武门】

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
20Mar
2018
A5创业网是国内领先的创业资讯和服务平台,提供权威的创业资讯和精准的品牌营销服务。以创业融资动态、创业学院、产品经理、人物访谈为内容驱动,与互联网创业者共同进步。

  一、项目背景

  精武门,是广州大象健康科技有限公司和阿里体育联合主办,致力于打造国际综合格斗职业联赛顶尖平台。

  二、设计方向

  (1)旧版问题梳理

  此次官网改版主要针对旧版官网的以下三点问题进行优化设计: a、页面整体风格过于单调沉闷

  b、格斗赛事所蕴含的热血、激情的设计元素不够突出

  c、信息架构、界面布局不够合理;同时现有的页面框架不能满足公司业务的调 整发展,需要重新优化页面整体的组织架构和信息展示

  (2)设计目标

  a、搭配色彩,渲染出页面的氛围

  b、强调突出页面的品质感,增强品牌效应;同时在设计元素运用上,整体的页 面要保持统一性

  c、调整页面布局;信息展示更合理,主次分明;重点模块能够抓住用户的眼球

  三、设计输出阶段

  (1)前期

  目标用户会导致设计风格有偏向性,对于精武门这种格斗平台来说,设计风 格基调前期需要有个方向性的研究分析,比如根据赛事性质,决定了整个页面需 要热血激情、火爆、紧张效果,有这几个关键词后,可以按照既定的目标去寻找 设计方向。 而在整体的设计目标上,官网的设计不仅需要增强品质和品牌感而后授予用 户去感知,同时需要更多的展示和传递资讯类的信息,所以既要保证信息清晰合 理准确地传达,又要让用户进入页面后,自然而然地感受到格斗这种热血激情、 火爆、紧张氛围。

  

Image title

 

  (2)设计过程

  完成前期的方向性准备后,接下来就是根据信息架构完成元素的基础布局。以下以官网的引导页和首页为例:

  1、引导页(目的:在用户进入到官网首页之前,通过这个引导页快速吸引用户的注 意力,并将精武门的品牌形象以及赛事内容展示给用户,同时提供快捷的入口和导 航指向到目标内容模块。)

  

Image title

 

  在出整体效果之前,主要是模块布局。不涉及细节,只将信息区块按匹配好的色彩填充并按一定的样式摆放在相应的展示区域。 页面按照最高1920px的宽度设计,考虑到不同设备的适配,平衡之后,水平区域展示内容都放置在1440px的宽度去布局。同时,用户在垂直方向上看到的首屏内容的也会因设备分辨率不同而不同,最终首屏的设计尺寸采用1440px*900px。在背景大图的展示形式上,采用自动播放的短视频,通过“静”来渲染页面氛围和展示内容的同时,用“动”来抓住用户的眼球,动静结合来共同传递品牌的感染力。

  根据区域补充内容和细节后的最终效果:

  

Image title

 

  2、首页

  【旧的首页】在信息架构层面存在以下几点不合理之处:

  a、顶部栏(1)占据过高的空间,相对重要的导航栏(2)反而占据着小块空间,显得不够 突出。

  b、导航栏(2)在整个深色灰暗的页面中过于弱化,不仅区块小,导致层级不够突出; 同时字体不够大,当前页在选中状态下效果相对于未选中的对比性也不强。

  c、新闻动态(3)、赛事咨询(4)、精彩回顾(5)、图集(6)这几个模块在内容的布局上缺 少亲密性、对比性,内容整合也相对混乱,像(4)(6)都缺少统一样式的标题,导致 在内容层级的归属上有理解的偏差;而且从阅读习惯(从上到下,从左到右)、图 文对于阅读焦点触发的先后顺序、内容展示区块的大小这几个角度来考虑,这四块 内容也存在信息架构布局不合理的问题。

  d、以精武门格斗比赛性质的内容运营需求出发,首页的信息架构需要从主次优先 级、商业性质、产品交互逻辑这几个方面进行重新梳理。

  

Image title

 

  【新的首页】对比旧版首页存在的问题,进行了以下几点优化:

  a、调高导航栏的高度,同时将精武门logo整合到导航栏最左边,既突出导航栏的信 息结构,又能起传递品牌的作用。

  b、将导航内部的字体字号增大加粗,,同时用块状的主色调火红色作为当前页面的选 中状态。

  c、从观众和商业运营的角度出发,观众更希望快速获取到比赛本身相关的信息,包 括最新赛事、购票、可以看到比赛的途径、最新资讯以及关注的俱乐部和选手,而 官方可以通过这个平台将最新的推送内容快速及时传递给观众,同时获取相应的平 台资源版权收入。d、将每个模块以卡片形式归类整合,这样信息布局更清晰,内容分部更有条理和亲 密性。比如每个最新的赛事单独以卡片集合的形式整合到顶部,方便用户及时快捷 的获取最新赛事动态。