迅达云首页改版思考

分析问题：

根据沟通，发现甲方需求是：迅达云业务发展很快，然而品牌升级却未上升一个层次，服务做得很好，但是官网用户体验较差。所以针对性进行改版，在不改变内容的情况下，将页面重新塑造。

总结问题：

1.品牌所传递的价值观不够。

2.用户体验较差，页面视觉美观度不够。

改版目标：

1. 从品牌的角度重新布局页面，从而在原有用户的体感上新增品牌增益的内容。
   

2. 改善用户体验，增强交互逻辑及页面精致度，增强易用性。

   
   

自我感受：

品牌升级并不仅仅简单换一个LOGO、美化页面就叫升级。而是品牌所赋予的意义，需要传递的价值观。一般了解一个公司从官网基本就能看出来，一个做事严谨产品优质、服务好的公司，官网都比较规范，品牌体感比较好。就好比一个里子，一个面子。产品及服务就是里子，而官网的呈现就是面子。

产品背景：

简介：迅达云是业界领先的云计算综合服务商，专注为用户提供自下而上的云计算全方位解决方案，产品覆盖计算、网络、存储三大IT基础设施领域，包括：云主机、云存储、云桌面、云分发、SDN、负载均衡、数据库、云视频、数据中心等等，并为政企客户提供一站式私有云自动化部署软件和全业务的托管。

机会一：产品服务升级伴随品牌形象急需优化。

机会二：用户人群为B端用户，增强产品用户体验迫在眉睫。

机会三：通过一些数据显示，首页的跳失率超过50%，也说明首页的吸引度存在一定的问题。

前期准备：

首先看看首页在整个产品流程的作用及用户购买服务的路径，分为六步：

1.触达、2.了解、3.激活、4.转化、5.复购、6.推荐。

也就是用户完成整个目标服务的体验过程。所以官网所提供的内容及服务是否符合用户的预期至关重要。预期及产品服务匹配度越高用户体验也就越好。

从整个用户购买服务的路径来看，首页对用户来说比较重要，是传递的产品属性及了解产品服务的第一要素，所以首页的设计是决定了用户的品牌体感是否良好的关键。

其次推导首页的设计目标及策略。将用户价值具象化，推导出实现用户价值的设计目标和策略。

目标价值：

首页的目标价值是用户明白如何选择服务，知道什么服务能够更有效的解决问题，更高效的触达他所需的的内容，以达成他所期待完成的目的。

设计策略：

产品页面视觉的优化、交互层面的设计、服务导购的显性化。

前期准备好后开始从问题分析入手。

自身产品分析：

1、从首页来看，页面整体不够清爽。

迅达云产品属性应该是科技感、而首页并没有体现出来。BANNER切换交互体验不友好，按钮缺少点击效果，整体来看缺乏细节！

2、顶部导航栏ICON使用过多，导致层级比较混乱。

最直接导致的问题就是视觉占比过重，并且ICON绘制的不精致，粗细也不统一，用色也比较随意。容易使用户迷茫。

产品功能列表未能一次性展示全部产品，需要用户不断寻找想要的功能，无法快速锁定目标。

3、顶部导航栏不够人性化，缺少搜索按钮，导致新用户上来不知所措。

在服务型官网当中，搜索按钮至关重要，用户看到有搜索按钮，心里就会有一种安全感，不会迷茫。这也是产品体验方面的一种。

4、功能展示不美观，缺乏科技感，卡片投影较脏。

功能展示区域处理的较随意，缺乏整体设计感，产品价值未能形象的传递出去。

5、面性ICON不够精致美观，信息层级较混乱，ICON重复使用。

一个严谨的公司，它的所有产品传递给人的品牌体感就是用户对他的认知。云计算产品的属性必须是严谨的、智能的、科技的。信息层级混乱，缺乏一定的变化，比较呆板。

6、业务拓展区域展示区域表现形式较生硬，缺乏与用户的互动性。

展示内容表现的较生硬，两边的数据描述太随意，卡片投影太脏，缺乏灵动感。

7、信息层级较混乱，不符合产品调性，缺乏科技感！

8、板式可以更完善，表现形式更丰富一些。

接下来看一下改版前的页面

解决问题

从问题的角度对首页重新设计

改版细节1

1、拉大标题与内容的对比，增加画面层次感！

2、按钮统一使用矩形框，不带圆角。鼠标滑过会出现反白效果，增加画面趣味性。

3、轮播条可点击区域做成横条状，更容易点击。

4、插图绘制成科技感型，使整体更严谨、更具专业性。

改版细节2

1、顶部导航栏做成通栏的样式，背景颜色随着BANNER图的背景色而变换。

2、LOGO做成反白，与整体相契合。

改版细节3

1、改版前标题对比不明显，层级比较弱，标题使用粗体显得整体不精致。

2、改版后拉大字体大小对比，颜色对比，使信息呈现更直观。

改版细节4

1、ICON精细化设计，增加更多细节，增强页面趣味性，整体统一。

改版细节5

1、从之前的卡片样式大段文字改版到现在的简短主标题+次要信息介绍，信息层级更明确、视觉传达更清晰。

改版细节6

1、改版前页面ICON使用过多，整体显得拥挤不够大气，第一眼望过去就是一大片图标。

2、改版后将ICON去除，主要突出标题，去除多余干扰，更快让用户达成目标。

改版细节7

1、改版前表现形式较生硬，与用户缺乏互动性。

2、改版后简化页面多余信息，使用扁平化方式呈现。

改版细节8

1、改版前信息层级较混乱，不符合产品调性，缺乏科技感！

2、改版后强化信息层级顺序，鼠标滑过信息卡片，出现主色蓝色背景及详细信息，如感兴趣可查看详情，符合用户预期。两边做成轮播滑块，可以自主点击切换。增强交互性，使用户体验更好。

改版细节9

1、改版前信息展现方式较生硬，主体物（电脑）没有存在的意义。

2、改版后页面传递的信息层级更清晰、简洁。

改版细节10

1、改版前ICON不精致不美观，卡片样式较平常。

2、与页面第二板块ICON相统一，精细化设计图标，与整体相融合。去除卡片样式，让信息更直观呈现。

改版细节11

1、改版前信息呈现方式较生硬，可以适当性隐藏一些次要信息，突出主要信息。

2、改版后兼顾到整体效果，将LOGO做去色处理，使页面更统一。信息布局上将次要信息给隐藏，鼠标滑到该公司LOGO上，出现卡片式详细信息。

改版细节12

1、改版前文案文字层级未拉开，右边电脑存在无意义。

2、改版后遵循简约化设计，突出主要信息，背景色使用LOGO里的蓝色，底部按钮与

首位BANNER图相呼应，使页面更整体。

改版细节13

改版前

1、主目录未与下方文字区分。

2、文字不美观、太突兀，容易引起用户反感。

3、底部未左对齐，不美观。

改版后

1、放大主目录文字，将文字颜色提亮，拉开信息层级。

2、将主要文字突出，次要文字弱化，显得画面更整体、美观。

3、底部左对齐，整体性更强。

说明：本次改版借鉴参考了阿里云及腾讯云等一些云计算平台。本人认为设计不应该闭门造车，而应该站在巨人的肩膀思考，进行微创新，应该找到属于自己产品属性的设计风格，不断完善用户体验，使产品更具有品质感，增强易用性，让客户更信赖我们的产品，突出我们的专业性、严谨性。更贴近我们的企业文化。

由于时间有限，还有很多细节未处理到位

谢谢观赏，喜欢就点个赞吧