产品官网设计方法总结

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
4724 9 205 2022-09-21

来网易有道做了几个官网设计项目,来一个阶段性总结,复盘沉淀一下提升自己,也供大家一同参考和学习,有不足之处也可提出建议~


前言:

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

那么,我们该如何把网站设计的更好呢?本文将以「有道智慧教育」「有道词典桌面端」「有道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 中英文排版差异 - 针对不同文字调整版式

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


结语:

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

Powered by Froala Editor

全部评论:9

  • 竹月_

    9-26 18:43

    写的真好,干货满满

  • 疯火戏猪猴

    9-23 17:22

    有道的设计真的是不错!

  • 李添吉Design

    9-23 11:07

    @大肉包小肉馅: 哈哈哈哈,感谢垂青。慢慢来 急不得

  • 大肉包小肉馅

    9-23 09:49

    谢谢,最近正好在改版公司官网,给我了很多思路,准备准备下一篇吧,我们等着看呢(催更)

  • 悟喜_WOOSEA

    9-22 14:29

    @李添吉Design: 那你肯定没毛病的啊

  • 李添吉Design

    9-22 10:24

    有道ADS官网设计师:赵利娟、李添吉。有道智慧教育官网设计师:李添吉、杨学薇、赵东阳。有道词典桌面端官网设计师:李添吉、尹海施。设计指导:韩笑。这些作品都是团队共同的成果~感谢同事们的帮助

  • 李添吉Design

    9-22 10:06

    @悟喜_WOOSEA: 希望以后勤奋点

  • 悟喜_WOOSEA

    9-21 14:38

    老兄 你的产出依然很强啊 学习了 这种干活以后多多来点

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票