先思考做这个页面是为了什么？且行业优势是什么

　　先思考做这个页面是为了什么？且行业优势是什么

　　首先想想这个页面是做什么用的？

　　→ 告诉访问者我们的产品是做什么的，行业优势是什么。

　　如何写介绍让访问者第一时间了解产品？优势如何体现？

　　→ 直接在banner上写我们的产品是：可以营销的客服系统。我们的优势：价格低，转化率高。

　　→ 在首页标注价格和功能。如果参观者比较过其他竞争产品，他们就会知道我们的产品是真正的低价和全功能。高转化率体现在主动营销以吸引访客转化。并且足够聪明，可以帮助客户服务减少大量时间并提高服务质量以促进转化。

　　其他附加品牌形象模块：公司资质、客户量、客户案例展示等

　　经过短暂的思考，整个模块布局大概就出来了。

　　那么，我们需要考虑的是，如何在竞品的基础上，在同一个模块上做到比竞品更好。比如banner文案，怎么介绍，让客户看到我们和网站的竞品同时选择我们？

　　基于这个答案，你可以继续问自己：这个文案是否突出了我们产品的最大卖点？各种模块可以类推。

　　和同龄人比较，有一个思维模板可以套用：没有我的人，有我的人更好，人好我贱。从这点出发，想起来会简单很多。

　　当然，在内容层面，我们至少要先通过自己的水平，我们觉得我们比竞品更好，访问者才有可能选择我们。

　　剩下的页面也可以通过问自己“这个页面达到什么目的？怎么做”来推导出模块结构。当然，前提是你要浏览大量类似的网站，并对各个模块有很好的了解。

　　2.网站风格探索

　　有了内容，下一步就是建立设计风格。很多工具软件网站和客服系统竞赛网站都有一个共同点，就是图形化，色彩艳丽，整体风格非常年轻，图形化。表达产品特性往往更直观。

　　将这个词变成完整的可执行规范不是一步到位的事情。第一步，确定主题色（如果有传承品牌色，无需更改或微调），然后具体到网站配图，图标等，慢慢建立原型整个风格。

　　确定主题颜色：

　　最直接的方法是印象板提取法：识别几个网站或产品关键词，从关键词开始到实物，然后在百度上搜索大量相关图片。这将形成一个通用的颜色。然后将此通用颜色微调为您自己的品牌颜色。

　　

　　图标和图片样式：

　　如果有图片，可以选择一个页面，将各个模块大致展开，做一点高保真预览样式。高清大图、手绘插画、2.5D、C4D物理构图都可以尝试，只要符合你官网的基调即可。

　　确定图标的风格，可以先找三个关键词需要图标来表达（为什么选三个？因为三个图标可以看到系列风格的效果，两个太少了，四个是工作量太大），颜色可以在品牌色的基础上稍微扩大，或者加入少量的点缀色。

　　形式上不要太拘束，可以参考别人的作品，2.5D，长投影，MBE等风格都可以尝试。需要注意的是图标和图片的风格要统一，否则会显得不伦不类。

　　当图标和图片匹配满意时，再微调和派生图标以适应不同的场景。

　　

　　

　　四、规范开发

　　确定内容和样式后，就可以制作高保真网页，制定设计规范，如文字颜色间距、图形大小和位置等，然后根据此规范制作其他页面。

　　当根据此规则制作其他页面时，您可能会发现此规范受到特别限制。这个时候就要慎重考虑通用性是否足够好，如果不够好就修改。

　　如果在制作衍生页面的过程中，发现有一些规范中没有的情况，请及时补充。这样，你就有了一套书面规范，做起来会更基础。

　　五、改编

　　目前主流的网站都是自适应的，即根据屏幕大小自动调整布局。可以扩展一个更大的版本和移动版本，告诉前端如何设置模块的流量和缩放规则，比如苹果官网。

　　当然，最重要的是定义每个元素属于哪个组件，适配规则是什么。

　　1.设计稿尺寸

　　为了预览不同屏幕的效果，可以在基础版（1200宽，内容960））的基础上衍生出其他版本的设计稿：

　　400px 是最小尺寸。小于400时，接口为固定间距版本1。

　　大于400小于960时，界面为版本1，随着屏幕变宽自动调整间距。

　　大于960小于1200时，界面为版本2，随着屏幕变宽自动调整间距。

　　大于1200时，界面为版本3，随着屏幕变宽自动调整间距。

　　2.适配原理

　　比例缩放：比例缩放是指元素的尺寸不是固定的，而是会随着屏幕宽度变大而变大。适用于图形和流体组件：元素大小保持不变，位置或元素间距随屏幕宽度变化。 网站的大部分主要内容都按照这个原则进行了改动。 ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ?????????????????????????????????????????????????????? ???????????????????????????????????????文字流自适应：一行文字的数量与屏幕的宽度成正比。屏幕越宽，一行中可以显示的文本就越多。 网站 大部分文字可以保持字号不变，数字变化。只有少数标题需要更改字体大小。适当变形：在保持现有结构的同时，以不同的形式表现出来。例如，当导航栏适配于移动终端时，它被折叠成一个汉堡包图标。更改前后的样式需要保证用户体验。 六、搜索优化&网页加载优化1.搜索优化

　　关键词optimization

　　比如百度关键词，你可以在百度站长首页添加关键词到你的页面，选择合适的关键词，增加搜索曝光率。但数量不宜过多，否则重量可能会下降。可以在网页代码头部的meta标签→关键字内容中查看。

　　搜索结果优化

　　您可以在百度百科上创建自己的词条，树立权威形象。还有目标用户群的推广，比如百度知乎、知乎等平台在客服系统领域进行更多的回答和曝光。酒香也怕巷子深，再好的产品也需要曝光。

　　最重要的是官网搜索词的优化：

　　

　　例如百度搜索客服系统中出现的官网入口收录以下四项内容：

　　2. 页面加载优化

　　用户打开网页最满意的时间是2-5秒。如果他们等待超过 10 秒，99% 的用户会关闭网页。页面加载缓慢对于访问者第一次接触我们的产品来说是一种非常不友好的情况。所以需要优化页面加载速度。

　　可以从以下几点展开：

　　合并样式表和脚本文件；压缩组件；将样式表放在头部；使用js事件处理机制动态改变元素样式；压缩图片，使用svg代替png和jpg；使用图片懒加载；精简代码；避免重定向。 七、总结

　　总之，整个过程首先要考虑信息层面，然后推导内容，调整模块布局，最后做视觉设计和规范制定（当然这是基于旧版本的设计）规范不再可用）。

　　网站上线后，我们还是要看看其他人网站哪些地方做得好，分析一下他比我们做得好的地方（用户体验，视觉效果，信息表达都有可能），想想结合我们网站的实际情况进行设计，控制变量进行效果测试。选择转换效果好的版本上线。只有对自己的网站保持批判的态度，才不会被时代抛弃。

　　本文由@JUN原创发表，人人网是产品经理。未经许可禁止转载

　　标题图片来自Unsplash，基于CC0协议