官网改版,从做好一份竞品分析开始

这段时间一直在做公司官网的改版,感慨太多,一是公司官网的风格属于2015年流行的设计风格,如下图,二是领导追求外国网站简约大气的风格,类似airbnb官网。

现在的官网首屏

然鹅,公司做的是云计算产品,跟airbnb这样亲民友好的网站八竿子打不着一块,所以,做好一份竞品分析,既能体现自己的专业度,又能让不懂云计算产品的设计师找着门路,还能让领导信服,多么一箭三雕的事啊。

当然,其他公司其他产品也同样适用。下面进入正题。

一、选择准备分析的竞品

怎么选?跟公司产品相仿的,行业类认可的,用户量大的,中国的,外国的,国际的,统统需要有,当然也得挑几个小公司的。

不查不知道,一查吓一跳。光是云计算领域,大大小小的产品竟然有近30个,最后筛选至10个。因为国内的云产品(阿里、腾讯、百度、美团、乐视...)从视觉上看都是大同小异的,设计小组一致认为还是阿里爸爸最牛B,所以只保留了阿里云。(对比一下下面的四个网站,是不是把色调统一一下,就分不清谁是谁了呢~)

依次是阿里云,百度云,腾讯云,乐视云

二、确定需要分析的方向

从视觉角度做竞品分析,大方向有两个,一个是视觉,一个是交互。视觉细分为色彩、排版和页面布局、图标和插图;交互主要指动效和信息架构。

重点需要归纳出一个网站是否做到了统一视觉语言,设计亮点在哪,以及是否为响应式网站。

竞品和方向确定好之后,就可以开始做ppt啦。

三、视觉——色彩

色彩的分析需要从:主色、辅助色、调和色(黑百灰)、整体色调(暗或明)、色彩一致性,这几个方面去考虑。当然别忘了把自己的网站也放进分析里。

微软云产品

最后,总结一下同类产品官网的常用配色和色彩范围,用数据告诉领导,你为什么要用蓝色。

四、视觉——页面布局

一个官网的页面至少20页,全部分析的工作量太大,且没有必要。所以挑重要的:首页、导航、产品介绍页.....即可。记得归纳总结设计要点。

五、视觉——图形

图形分析,包括:icon、插画、架构图...可以给每个竞品的风格下定义:扁平、渐变、线形、立体、2.5D...

最后提炼一下关键词,总结流行趋势。

六、交互——动效

一个网站设计的细节是否成功,就看动效。传统的交互反馈主要体现在button的hover状态等等上面。然鹅,很多网站在追求更多的趣味性,这一点阿里云真的很棒。icon、banner等等也能在鼠标hover时产生交互动效。

另外一种动效,则是gif动画的应用,真的是很流行啊~

七、交互——信息架构

这个其实已经超过了视觉设计范畴,留到以后再说吧~

最后就是综合上面的分析,归纳总结自家官网的优缺点,甚至做一个SWOT分析~

OK,分享到这~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,860评论 25 709
  • 本文将整个竞品分析分为前期准备、构造框架、反复推敲三个环节,进行讲解。 本文系作者运营小咖秀对i黑马投稿。 做竞品...
    老夫的天阅读 10,550评论 9 217
  • 你的叫声 呱呱 其实我不懂 老人们说你这老娃子一叫定有灾祸生 得小心 你居然能预示 肯定还很灵验 不然 也不会让你...
    微风LG阅读 361评论 2 2
  • 作为普通观众,觉得整个活动的流程还是有些单薄。先是摄影作品展示,每个创作者对自己的作品进行解读;然后是微电影展示和...
    青稚F阅读 197评论 0 0
  • 睡前看了一下雪小禅的文,连着看了几篇眼皮渐渐低垂,在半睡半醒间,眼前突然出现一条宽广的河,那河的河水清浅,两...
    西城西月阅读 195评论 0 0