产品官网设计方法总结-经验/观点-UICN用户体验设计平台

前言：

一个产品的官网可以说是一个产品的门面，在用户对产品没有任何了解时，官网是向用户传达信息的重要途径。它承载了品牌宣传、信息展示、功能输出等属性，在某种程度上来说，官网影响着用户对这家公司及其产品的认知和信任。

那么，我们该如何把网站设计的更好呢？本文将以「有道智慧教育」「有道词典桌面端」「有道ADS」三个产品的官网设计为例，总结官网设计方法，供大家一同参考和学习。

有道智慧教育：http://zhihui.youdao.com

有道词典桌面端：https://cidian.youdao.com/index-mac.html#/

有道海外广告平台：https://youdaoads.com

1. 动手前要怎么做? - 通过优化设计流程提升设计效率

1.1 首先找对人 - 找对需求方，是产品经理？业务运营？产品销售？

由于需求的来源途径很多，有时候是老板的一句话，有时候是业务人员提出的，加上业务庞大比较复杂，负责人较多，所以会出现一个需求好几个业务方参与。在开始设计有道ADS官网时由于没有找对需求方和业务负责人，不知道该听谁的，来来回回做了几个版本 一直确定不了方向，前期耽误了很久。

1.2 解决排期紧张问题 - 快速搭建页面框架与产品确定内容，与前端沟通快速开发方法

确定原型（框架与内容）: 由于会碰到业务方没有出原型图，只把文字信息和图片用word或ppt大致排好发给设计师，所以我们需要快速把图文信息排好，再与业务方确定框架和内容是否正确，避免后期因为内容改动而出现返工的情况。

前端提前介入: 原型出完后，就可以进行前期的前端开发，搭建大致的HTML结构，然后设计出完设计稿后再进行页面样式的完善，这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前端提前介入，减少整体消耗的时间。

沟通快速开发方法: 然后跟前端沟通好开发方式，比如某个模块直接全部切成图，不需要用代码写，或者页面是怎么样的适配方式。

1.3 竞品分析 - 研究竞品的形色字构质以及它为什么这样设计

根据业务方提供的竞品和确定产品想表达的设计关键词，分析哪些竞品风格上与我们类似，进而拆解竞品的形色字质构，然后挖掘竞品优秀的设计点，再思考怎么结合自己的产品，学会站在巨人肩膀上成长。

1.4 快速确定设计方向-  拼贴不同风格的素材图与产品确定方向

业务方确定不了风格，或者知道想要哪种风格但是描述不出来。我们可以将竞品的图片裁剪下来贴到自己的页面上，分出几种不同类型的方案，比如方案1-真实场景，方案2-卡通场景等。
然后让业务方选择，确定了方向之后再动手做设计，避免后期不必要的沟通麻烦。

2. 更直观的设计 - 体现使用场景与抽象的概念具像化

2.1 产品设备和所处环境 

多种设备与环境结合，帮助用户识比例、知场景：由于智慧教育业务涉及到电脑、手机、平板、大屏、学习一体机等多端设备联动，加上使用场景在教室、操场、办公室等多个地方，所以需要体现设备与场景的结合，让用户一看就知道是用什么设备在什么地方使用的，以及设备大小有差异（特别是有道自研的学习一体机），有了场景后就知道设备的体积。

首屏体现产品使用的设备：有道词典有移动端、网页版、桌面端各个端，此次需求需要推广有道词典桌面端，需要强调桌面端的概念，所以在首屏需要清晰的体现电脑设备。让用户也好更快的认识到这是在电脑上使用的应用。

2.2 抽象的概念具像化 - 利用搜索引擎搜索相关图片提取图中元素，帮助设计师可视化

有道ADS是国际广告投放平台，国际与广告是不存在实体物的抽象概念，将其可视化是设计师的重要工作。有一个方法，用搜索引擎搜索关键词，会出现相关图片，提取使用最多的元素。用结合数据的地图、地球，以及在人物图片选择上选取了不同人种，体现国际化与广告的概念。

3. 界限分明，不要暧昧 - 建立清楚的视觉层次

3.1 区分主体与背景层 - 突出强调设备，背景场景作为陪衬

虽然我们定义的有道智慧教育官网需要有校园场景，但是它的核心仍然是设备，为了不抢主体物的注意力，将背景弱化，烘托主体设备。

3.2 区分模块之间的关系 - 卡片式布局帮助区分复杂的不同模块

有道词典的官网需要展示的模块比较多，单个模块里嵌套的内容层级多，很容易设计的很散。所以我们用卡片式布局进行信息分层和整合，在卡片式设计中,一张卡片就是一个信息模块,用户即使快速浏览,也不会产生混乱。同时块状的卡片使得页面更加整齐美观。

3.2 区分首页与二级页的关系 - 首页的张扬与二级页的内敛

在开始设计二级页的时候，我们就一股脑的延续首页的设计风格，没有考虑二级页的内容较多的情况，所以设计出来很乱。首页与二级页应当区分前后层次，首页的“首”自然要比二级页的“二”要突出。

4. 我们不是阅读，而是扫描 - 降低视觉噪声与提升屏效

4.1 简化展示信息，突出核心内容 - 强调每个模块所表达的核心内容，避免不重要的信息干扰

有道词典官网有很多模块是功能的展示，涉及到具体界面，但界面的信息非常多，直接放上去显得很杂乱，所以我们与业务方沟通确定必须要展示的功能，然后将其突出强调，其他的内容用灰色块或降低透明度等方式弱化。

4.2 合并同类信息，提升屏效 - 如无必要，勿增实体

有道词典官网的翻译对比展示模块，会出现同样的信息，全部展示出来会增加页面的高度。所以需要合并同类信息，减少页面高度，同时需要设计出内容想要表达的递进关系（准>更准>太准了）。

5. 融入品牌 - 塑造品牌认知

5.1 重复法 - 重复使用同一个图形，加深记忆

有道智慧教育官网: 将品牌符号融入到场景、icon当中。品牌相关设计：https://www.zcool.com.cn/work/ZNTc2ODgyMjg=.html

有ADS官网: 图形用蒙板的形式嵌套图片或重复形式作为氛围点缀。

5.2 品牌色的克制运用 - 当品牌色与业务方要求不一致的情况

有道词典的品牌色是红色，非常的鲜艳，大面积使用会非常刺眼，颜色变淡的话略显女性化，所以对于品牌色我们只在重要的地方加一点就行，其他的用灰色来衬托品牌红色。

6. 情感化设计 - 满足功能的前提下融入情感，触及用户内心

6.1 温度的表达 - 教育行业所需要的温度

每一个孩子都是一棵新栽的小苗，只有和煦的阳光才能让其健康成长，而这缕阳光的温度就是我们想要在设计上表现的。我们在教室场景中融入了阳光、绿植等元素，使冰冷的教室焕发生机。

6.1 效率感的表达 - 工具类产品的效率感

由于工具类产品较为注重效率和体验，业务方也强调需要专业权威感，所以在设计上我们用动感的几何图形表现速度感、效率感。

6.3 创造性的表达 - KOL、广告营销平台的创造性

前期与业务方沟通，他们强调KOL营销是一个内容的生意，具有创造性、时尚性，因此不能太死板沉闷。所以我们在设计上排版比较大胆，突破中规中矩沉闷的排版模式，比如图片的破形，大色块与背景纹理、文字与图片的叠压关系、错位。

7. 润物细无声 - 打磨细节，提升设计品质

7.1 图片处理 - 处理图片融合画面

由于通常业务方提供的图片质量参差不齐，到不到预期的效果，所以为了使图片能更好的融入到画面当中，需要对图片的颜色、亮度等进行调节，必要时还需要用画笔修补。

7.2 克制的微创意 - 拟物化标题文字

工具类产品在视觉创意上面需要尽量克制，所以我只在细节处做一些不影响识别的小创意。基于文字意思，融合图形于字体，使页面增加趣味性。

7.3 中英文排版差异 - 针对不同文字调整版式

汉字和拉丁字母的间距、行距等有很大差别，会出现用相同排版方式出来的不一致，所以对于中英两版官网，在排版上做了细节调整。

结语：

感谢看到这里，以上是通过我自己的理解，在官网设计项目当中总结的一些共性的经验方法，可以指导下一个相同的项目。第一次写文章，有很多不足，希望以后能多提升在方法论建设上的能力。