构家官网设计记录(未完)

项目背景

构家网是一个为用户提供整体家装的互联网公司，换句话说就是在付完定金60~70天之后，用户可以直接拎包入住。由于许多来自公司内部的反馈：官网的视觉设计不符合公司走的中高端的品牌形象。基于这个需求，我们开启了新官网改版计划。
PS(在此之前我从未写过项目记录，由于苦于每次与他人聊起项目设计的过程，经常会忘记自己设计或者修改设计的初衷。于是决定开始记录自己参与项目设计的过程。【构家网】是我第一个网页设计的项目，在此之前一直都是负责移动端的设计。)

当前版本存在的问题

1. 现有的设计风格是否符合品牌定位；
2. 物料图片存在风格不统一、大小不一致、清晰度低等问题；
3. 设计栅格化，信息的层划分是否合理；
4. 动效设计的优化、内容丰富度、图标的形体设计是否规范、配图的质量、等都有优化的空间。

项目描述

构家官网 改版项目于 2016-11-07 日开始至 2016-12-24 日结束。项目历时44天。是一次大范围的改版，重新制定了新的设计规范，增加交互动画。项目的目的是为了提高品牌形象，为2017年产品包调高售价做准备。

而我在此次项目中负责全站的设计规范制定，交互动画设计，首页、整家方案、构家整家标准、服务与保障、等花开 等模块设计。

首页模块

banner切换效果

现官网上的轮播图切换效果与我设计不同，我参考了 apple官网 轮播切换效果设计了轮播切换，效果如下图所示。

首页_轮播_设计效果

这种轮播切换效果是在下一个banner进入时上一个banner变小向左位移，banner切换有Z轴移动有厚度，显得更有空间感，但不是那种很强调的效果，而是有种精致感。但是前端在实现上出现了问题，后来放弃了这种设计。而采用了下面这个切换效果。

首页_轮播_实际效果

构家标准动画

1. 设计标准
2. 施工标准
3. 采购标准
   这三块内容比较抽象，对于这类内容我一向的处理方式是把比较抽象化内容具象化。

设计标准动画

施工原型标准动画

施工动画是请教了公司的工程督导-俭戈 关于【墙体的施工工艺】之后设计的。将墙体的施工步骤剖析开来，体现构家的施工标准化。 此处的动画为原型动画

等花开模块

等花开页面结构调整

等花开页面结构调整_前后

navigation_top

精简了 navigation_top 使页面看起来更加一致协调，弱化顶部导航栏对页面内容元素的影响。

banner

增大了banner的展示区域。等花开是一个以展示内容为准，走文艺和中高端路线的模块。所以第一屏的banner需要完整的一屏来展示内容以及品牌定位。

banner变化

等花开_banner

after

等花开_banner

左侧导航栏→二级导航

之前设计的二级导航栏是为了将来可能出现很多的产品包做准备的，但实际上我们的产品包数量只有15个。所以将二级导航替代左侧的导航栏。

模块信息展示调整

1. 基于该模块的主要功能是以展示为主，所以放大了图片显示区域；

2. 出于产品包单价较高，希望用户在了解产品之后再得到价格的信息。而不是一开始就被价格影响。修改之后效果如下：