产品官网易练不易精？看别人怎么打套路

去年某日一个做商用硬件产品和相关服务的朋友来找我咨询，说“为什么我们公司的网站已经是照着Evernote抄了，抄出来感觉还是差很远呢？”“是不是因为图片不够高大上，你能不能帮我找点高大上的图片呢？”“我们没有美工，工程师自己做的，你就随便给我点图好了。”听罢我震惊了。都2016年了，竟然还有这么不重视自己公司形象和官网的商用产品团队？因此列了一些坑，给朋友推荐了一些参考，也提了些建议。

至今有非常多的公司尤其是2B（哦是toB）的公司，觉得官网什么的纯粹是套路，我有一个就行了。确实，很多纯介绍类型的官网内容模式化、更新内容模块较少、设计风格单一，甚至套个模版就能解决。但套路要走好，也不是一件容易的事情。注意几个误区，你的套路才算像模像样。

信息架构：搞清楚产品卖点和客户买点

误区一：一般的产品官网内容上不外乎是“首页”“产品/服务/公司介绍”“功能详解”“用户/客户好评””下载/购买”“联系方式”几个部分。但很容易造成“你想告诉客户一大堆卖点但客户根本看不懂”的尴尬局面。

解决方案：最直白的要求是“说人话”。通过线下和客户的直接对话，去决定在官网上讲什么内容，怎么讲。不是所有特色都值得在官网上告诉客户。

误区二：有些决策者总觉得自己的官网层级越多越表现产品优秀，内容丰富。然而在内容枯草的时候，层级越多越显得单薄乏味，反而带给观者“这货不怎么行”的心理感受。

解决方案：尽量避免二级或者三级页面出现“头图很大，内容只有两行文字”的情况。不仅在视觉上效果不好，其实在信息上也并不能带给用户很强的印象。如果信息上是值得单开一页的话，尽量扩充你的有效内容，用更强烈和突出的方式去展现。如果信息上无法扩充，但又必不可少的话，也许整合到首页也是一种处理方式。

视觉设计：头部视觉定位产品品牌

误区：大图很好看，但乱找图就不好了。千篇一律的商务图库，强行按产品内容找图，都没有让客户去进一步去了解的欲望。

解决方案：

大图并不过时，可以精确使用场景，或发散联想

渐变回归流行，实现品牌色的乾坤大挪移

单色也抢眼，加上插画，过目不忘冲击力强

视频动起来，快速解说产品故事

交互前端：内容分割及响应式页面的变化

误区：有些人或许会觉得，做好了头部设计也就完成了一半了，下面的内容一溜地排下去就好了。其实还差得远。接下来的内容，排列逻辑、层次和分割衔接上的处理，都会对整体效果有比较大的影响。先来看一个自我感觉良好的模版案例。在规定的宽度范围内，这个排版确实是错落有致。但是一旦涉及到响应式页面，需要适配的时候，往往会在过大或者过小的宽度上造成效果上的偏差，很容易变成错乱无序了。

解决方案：

通过色块或背景等明显的分割方式进行模块划分关注

每一个层级宽度的页面展示效果

写在最后

这里只是列举了些以往的踩坑经验和建议，并不是体系的设计归纳总结，姑且整合成一份资料，仅供切磋探讨。