来网易有道做了几个官网设计项目，来一个阶段性总结，复盘沉淀一下提升自己，也供大家一同参考和学习，有不足之处也可提出建议～
前言：
一个产品的官网可以说是一个产品的门面，在用户对产品没有任何了解时，官网是向用户传达信息的重要途径。它承载了品牌宣传、信息展示、功能输出等属性，在某种程度上来说，官网影响着用户对这家公司及其产品的认知和信任。
那么，我们该如何把网站设计的更好呢？本文将以「有道智慧教育」「有道词典桌面端」「有道ADS」三个产品的官网设计为例，总结官网设计方法，供大家一同参考和学习。
1.动手前要怎么做-通过优化设计流程提升设计效率
1.1首先找对人-找对需求方，是产品经理？业务运营？产品销售？
1.2解决排期紧张问题-快速搭建页面框架与产品确定内容，与前端沟通快速开发方法
确定原型（框架与内容）:由于会碰到业务方没有出原型图，只把文字信息和图片用word或ppt大致排好发给设计师，所以我们需要快速把图文信息排好，再与业务方确定框架和内容是否正确，避免后期因为内容改动而出现返工的情况。
沟通快速开发方法:然后跟前端沟通好开发方式，比如某个模块直接全部切成图，不需要用代码写，或者页面是怎么样的适配方式。
1.3竞品分析-研究竞品的形色字构质以及它为什么这样设计
根据业务方提供的竞品和确定产品想表达的设计关键词，分析哪些竞品风格上与我们类似，进而拆解竞品的形色字质构，然后挖掘竞品优秀的设计点，再思考怎么结合自己的产品，学会站在巨人肩膀上成长。
1.4快速确定设计方向-拼贴不同风格的素材图与产品确定方向
业务方确定不了风格，或者知道想要哪种风格但是描述不出来。我们可以将竞品的图片裁剪下来贴到自己的页面上，分出几种不同类型的方案，比如方案1-真实场景，方案2-卡通场景等。然后让业务方选择，确定了方向之后再动手做设计，避免后期不必要的沟通麻烦。
2.更直观的设计-体现使用场景与抽象的概念具像化
2.1产品设备和所处环境
多种设备与环境结合，帮助用户识比例、知场景：由于智慧教育业务涉及到电脑、手机、平板、大屏、学习一体机等多端设备联动，加上使用场景在教室、操场、办公室等多个地方，所以需要体现设备与场景的结合，让用户一看就知道是用什么设备在什么地方使用的，以及设备大小有差异（特别是有道自研的学习一体机），有了场景后就知道设备的体积。
首屏体现产品使用的设备：有道词典有移动端、网页版、桌面端各个端，此次需求需要推广有道词典桌面端，需要强调桌面端的概念，所以在首屏需要清晰的体现电脑设备。让用户也好更快的认识到这是在电脑上使用的应用。
3.界限分明，不要暧昧-建立清楚的视觉层次
3.1区分主体与背景层-突出强调设备，背景场景作为陪衬
虽然我们定义的有道智慧教育官网需要有校园场景，但是它的核心仍然是设备，为了不抢主体物的注意力，将背景弱化，烘托主体设备。
3.2区分模块之间的关系-卡片式布局帮助区分复杂的不同模块
有道词典的官网需要展示的模块比较多，单个模块里嵌套的内容层级多，很容易设计的很散。所以我们用卡片式布局进行信息分层和整合，在卡片式设计中,一张卡片就是一个信息模块,用户即使快速浏览,也不会产生混乱。同时块状的卡片使得页面更加整齐美观。
3.2区分首页与二级页的关系-首页的张扬与二级页的内敛
在开始设计二级页的时候，我们就一股脑的延续首页的设计风格，没有考虑二级页的内容较多的情况，所以设计出来很乱。首页与二级页应当区分前后层次，首页的“首”自然要比二级页的“二”要突出。
4.我们不是阅读，而是扫描-降低视觉噪声与提升屏效
4.1简化展示信息，突出核心内容-强调每个模块所表达的核心内容，避免不重要的信息干扰
有道词典官网有很多模块是功能的展示，涉及到具体界面，但界面的信息非常多，直接放上去显得很杂乱，所以我们与业务方沟通确定必须要展示的功能，然后将其突出强调，其他的内容用灰色块或降低透明度等方式弱化。
4.2合并同类信息，提升屏效-如无必要，勿增实体
有道词典官网的翻译对比展示模块，会出现同样的信息，全部展示出来会增加页面的高度。所以需要合并同类信息，减少页面高度，同时需要设计出内容想要表达的递进关系（准>更准>太准了）。
5.融入品牌-塑造品牌认知
5.1重复法-重复使用同一个图形，加深记忆
有ADS官网:图形用蒙板的形式嵌套图片或重复形式作为氛围点缀。
5.2品牌色的克制运用-当品牌色与业务方要求不一致的情况
有道词典的品牌色是红色，非常的鲜艳，大面积使用会非常刺眼，颜色变淡的话略显女性化，所以对于品牌色我们只在重要的地方加一点就行，其他的用灰色来衬托品牌红色。
6.情感化设计-满足功能的前提下融入情感，触及用户内心
6.1温度的表达-教育行业所需要的温度
每一个孩子都是一棵新栽的小苗，只有和煦的阳光才能让其健康成长，而这缕阳光的温度就是我们想要在设计上表现的。我们在教室场景中融入了阳光、绿植等元素，使冰冷的教室焕发生机。
6.1效率感的表达-工具类产品的效率感
由于工具类产品较为注重效率和体验，业务方也强调需要专业权威感，所以在设计上我们用动感的几何图形表现速度感、效率感。
前期与业务方沟通，他们强调KOL营销是一个内容的生意，具有创造性、时尚性，因此不能太死板沉闷。所以我们在设计上排版比较大胆，突破中规中矩沉闷的排版模式，比如图片的破形，大色块与背景纹理、文字与图片的叠压关系、错位。
7.润物细无声-打磨细节，提升设计品质
7.1图片处理-处理图片融合画面
由于通常业务方提供的图片质量参差不齐，到不到预期的效果，所以为了使图片能更好的融入到画面当中，需要对图片的颜色、亮度等进行调节，必要时还需要用画笔修补。
7.2克制的微创意-拟物化标题文字
工具类产品在视觉创意上面需要尽量克制，所以我只在细节处做一些不影响识别的小创意。基于文字意思，融合图形于字体，使页面增加趣味性。
7.3中英文排版差异-针对不同文字调整版式
汉字和拉丁字母的间距、行距等有很大差别，会出现用相同排版方式出来的不一致，所以对于中英两版官网，在排版上做了细节调整。