官网再设计


如何改版一个既存4年,堆叠了无数内容的网站?

金斧子官网在4年的成长期间,历经问答社区、理财超市、私募基金三次战略定位及业务大调整,内容积累、功能叠加已经庞大到一定量级,体态略显臃肿。每次点开浏览官网页面,特别是网站首页,由于承载过不同发展阶段的重要使命,原有框架模式按照业务之需被不断地小范围增、补、删、改,甚至推翻重排过,历史痕迹和新风格尝试夹杂并存。然而,仔细分析发现两者并没能很好融合,反而形成了一个矛盾体,使得运维成本和重复且不必要的设计磨耗不断上升,严重阻碍品牌战略升级和产品业务转型聚焦。显然,面对这个棘手又麻烦的问题,单纯的产品纬度快速敏捷迭代已然无法凑效,因此,大改版势在必行。

第一部分:前期设计思考

金斧子官网是推广运营导流的主要目标站点,同时也是大部分用户线上了解百万理财产品的第一扇窗,集合众多功能与服务,众多工具、控件及内容看似分散实则联系紧密,往往牵一发而动全身。因此,官网改版的设计流程从了解运维出发,这个过程主要涉及重点业务流程梳理、设计问题剖析定位、内容整合排列和样式布局设计。

-设计总流程
  • 哪些问题需要改变?

金斧子官网经过长时期运营推广,围绕不同类型理财产品,例如私募基金、私募股权、信托资管、公募基金、海外资产等,积累了大量与大额理财相关的专题、视频、研究报告和资讯文章内容。

运营工作非常繁琐,上架/下架/配置活动专题甚是辛苦,高频更新内容源分别由不同部门安排专门人员定期维护更新,容易造成每个负责人只盯着自个儿门前的一亩三分地,忽视整体统一性,较散乱无序:

  1. 图片来源良莠不齐,有些是专业设计的bannar,有些是网络搜索下载的素材图;
  2. 图片风格暂无统一标准,按照运营需求匹配,图片风格自成一体难以协调统一;
  3. 图片源在PC和APP移动端,不同端的设计师根据自己的设计标准设计UI界面,不同端的图片大小尺寸不一致,极其容易导致图片被严重拉伸或截断。

因此,改版过程中页面布局的需要注重配合运营节奏,协调不同模块之间的关系,统一规划不同端产品页面的排列设计。

为进步梳理网站内容和查找问题,针对金斧子官网目前大量一级、二级或三级的内容模块,抽取了48张卡片,进行卡片测试。测试时把所有内容卡片打散,让测试用户根据自己的理解分类整合,过程中有任何问题可随时提问,并鼓励测试过程中发生思考。

-卡片测试

测试结果发现问题有:

  1. 内容太多且重复度很高,相似的内容看起来无法判别差异点,例如更多精选、精选专题、热门专题属重复内容;还有产品讲解、私募讲坛、视频解说、路演直播、金斧子视频解说也属重复内容。
  2. 功能、内容命名不清晰,容易引起混淆,理解起来比较费力,例如立即咨询、在线咨询、立即提问,概念混淆,用户非常疑惑不知是什么时候才会出现;还有投研中心、独家研报也分不清到底有啥区别。
  3. 内容过于多和杂,排布缺乏规律,浏览过程中缺乏主线。

改版的方向其实需要对现有内容的重新编排和整理,重点思考哪些内容在哪里展示,怎么展示,同时进一步规范运营流程,使得产出内容更加专业和具有统一感。

  • 设计定位

简单地说,金斧子官网的定位重内容,积累了众多设计专题、路演视频、投研报告的产品推介平台,内容主要围绕高净值客户理财消费、理财资讯、理财研究、理财学堂等方面,从而吸引并引导高净值用户预约百万理财产品。

我们需要在金斧子网站展示如何展示这些内容?带着这个问题,结合金斧子官网既有的内容库和重点运营方向,逆向思考用户希望看到的内容有哪些,从而明确我们需要呈现的内容方向。金斧子官网主要为高净值用户提供理财服务,主打内容应锁定在每周自产和精编的独家专题和视频内容,尤其是私募爆款和最新视频,这一部分内容更新频率较高,图文并茂、视听效果双重结合,能够让用户快速了解理财精品特点、聆听大佬观点和投资动态,有助于后续预约理财服务。因此,在设计过程中,应着重突出这两个栏目特色,无论是不同内容的排布方式,还是单个专题、视频的bannar的细节设计,都需要做到抢眼并专业,传达给用户有价值、值得花时间阅读观看的信号。

-设计定位

更新频率快的内容为了配合运营效率,必须做到高产又高质,因此设计想到了制作不同的成套图片模版供运营人员随时套用标题文字即可上传使用,这样每次有路演视频更新时,直接替换演讲嘉宾和演讲内容信息即可上线,无需排期设计。百万理财产品的说明文案较多且较专业性生涩不易懂,设计时着重突出关键性信息,收益走势、专业阐述说明尽量可视化,使直观易懂。另外,对不同类别内容应该做到尽量统一但区别明显。视听内容对设计要求比平面更高,从空间布置到音效配置、后期制作都要考虑。

当我们对网站内容有了清晰的认知并形成了一致的设计目标和方向之后,如何把这些内容有序组织排列起来是下一步重要需要解决的问题。

页面布局时需考虑内容种类、需求优先级,金斧子官网首页以展示全品类产品、内容为主,营造多而全的平台氛围,因此按照信息种类权重不同,分为推荐banner、专题精选、阳光私募、私募股权、信托资管、视频精选、投研中心、媒体动态八大模块,便于用户快速寻找到自己感兴趣的内容。

-网页布局结构

当页面布局大体框架确定后,用户如何更高频地阅读核心推荐内容,以及如何促进用户在浏览完内容进一步发生预约行为才是页面信息排布设计的关键性问题。因此,让用户尽快到达专题或产品详情页是设计方案的重中之重:

  1. 内容信息足够精炼,剔除无效冗余信息,注重信息归类和页面布局的紧凑性。
  2. 缩短到达路径,专题或详情页的入口尽量铺设得多一些,在首页保证两步之内到达。
  3. 优化内容呈现方式,尽量提高浏览体验。因此在首页模块排列时,对图片、产品、文章、视频单独归类并统一展示形式,使得浏览时不同的内容模块清晰易懂且好找。

第二部分:设计实践过程

内容页面布局样式涉及整体视觉设计过程。

 

-页面样式布局设计流程
  • 品牌定调

升级之后的品牌定位是以数据科技驱动的第三方财富管理机构,主打高端理财,旨在打造互联网最大的私募销售平台。关键词提炼有:引领、科技、高端

  • 布局、版式

官网首页需要排布丰富的内容,设计时根据不同的内容选择合适的展示样式,最终形成一个完整的信息展示流。特别针对专题、产品、视频、文章类型的设计不同的展示样式,但由于首页需要展示多种不同的内容,因此无论从运维还是设计角度,都需要做一些统一性处理:

         1. 图片比例尺寸统一

专题、视频展示以图片为主,推荐报告文章出于运营考虑也会配图,此类图片不仅更新频率高,且重复入口多,因此大中小不同尺寸类型的图片比例需要保持一致,这样页面整体看起来才协调统一。

         2. 基本元素统一

不同类型的内容基本元素保持统一,同时需要在细节上突出强调对专有元素进行区分,例如视频栏目名称、专题分类标签

  • 设计规范

网站只是金斧子产品线的一个分支,改版之后,有必要对新设计的网页进行拆解、提炼,并对拆分的组件交互规则和视觉设计进行归纳总结,尝试同步更新可用的交互视觉设计规范,为后续版本迭代和其它设计师协同工作提供设计规则,同时简化使用、开发流程,保持产品体验一致性。

         1. 颜色板

品牌主色、辅助色

         2. 公共控件

按钮、列表、输入框

 

         3. 图片模版

专题、视频模版

结语

金斧子官网改版其实是内容优化展示设计项目,在整个改版过程不断尝试寻找合适的方案,非常考验设计师如何理解业务运维、梳理繁多信息、排列内容优先级、视觉呈现表达信息。随着改版深入,思考越来越活跃和交流越来越多,后续有些问题还有优化空间,可以在充分结合产品、运营,让设计配合做得更好,比如:

  1. 强化私募特色,打造特色栏目。如果用户即使近期无购买理财产品计划,但在碎片化的时间仍然有兴趣打开官网,能够来看看我们的专题、视频栏目,那就十分成功了。
  2. 强化品牌征信,营造无处不在的专业性、安全感,赢得用户的认同感和信任感,提高品牌认知度。
  3. 强化相关推荐,尽量让用户逛起来并把内容分享出去同时不断把流量引进来,形成闭环。

目前金斧子官网首页改版即将上线,后续仍需继续跟踪线上数据和接收用户反馈,不断优化和完善。借此机会记录首页改版思考和实践过程,经验仅供参考。