近期收到热心用户反馈，“你们的官网首页怎么赤裸裸的”，PM 对此示意切实羞愧，大家都 忙着打磨产品，疏忽了官网的建设。
的确，极简格调 和极其简略 还是有很大区别的。
旧的 web 端
除了极其简略之外，它还有一个小问题，首页没有适配挪动端。
旧的挪动端
接下来我会从上面这三点分享如何设计咱们的新官网：
- 展现内容
- 页面布局
- 适配挪动端 - 响应式布局
展现内容
我设计时会从两个角度思考：
- 网友心愿在官网看到什么？
- 咱们心愿网友看完会做什么？
对于大家来说，官网的意义当然是 疾速理解产品做什么 ， 解决什么问题 ， 应用你产品能取得什么。
Eoapi 的用户是集体开发者 / 研发团队，集体开发者最关注易用性，而团队除了易用性外，还关注产品是否稳固、投入老本和预估收益。
我心愿网友们：
- 看完官网就能下载利用（超现实）
- 能够通过 Live Demo 疾速体验产品个性（略微靠谱）
- 即便不是咱们的指标用户，也能够记住咱们产品的个性，后续有需要的时候就能想起来。（低微）
需要剖析结束，剩下的就是内容筹备和排版设计了～
页面布局
VSCode
首先用关键词展现产品性能个性：智能、运行和调试、内置 Git、插件反对。
而后通过用户的实在形容拉近与电脑屏幕前你们的关系，就像商品的用户好评，有时候购物可能连商品介绍都没有看，我就会间接拖到评论区看评论，因为用户形容更实在、更可信。
web 端
挪动端
Eolink
Eolink 是咱们的 SaaS 产品，指标用户是研发团队，看重稳固、全面的性能、合作效率晋升。
所以首页展现了：
- 咱们拿到了融资（产品价值被认可）
- 版本更新（继续更新）
- 相干产品举荐
- 性能介绍
- 企业用户背书
web 端
挪动端
Postman
页面很清新，第一眼我认为是个输入框，认真看居然是注册框，斗胆猜想因为“祖师爷”之前的用户大多是集体开发者（次要应用 API 调试性能），从官网可见他要强烈推荐用户注册不要白嫖。
web 端
布局
本周有一个大迭代——近程数据源 行将上线，咱们开源项团队切实没有 UI，所以排版借（套）鉴（用）了咱们 SaaS 产品官网。
适配挪动端
这个在设计上就须要思考好，咱们官网应用的是 vite 框架，除了自写的组件外，其余，
源码在此：https://github.com/eolinker/e…
如果对官网框架选型感兴趣，请留言和咱们交换～后续也会出相应的文章分享选型教训。
最终成绩
材料
- 用体验设计思维做官网 — B 端产品官网设计实际 – 掘金
- 设计思考: 如何做好官网设计? | 人人都是产品经理
对于咱们
Eoapi 是一款类 Postman 的开源 API 工具，它更轻量，同时可拓展。
如果你对咱们的开源我的项目有任何的意见或者反馈，请私信给我，我会认真听的~
Github: https://github.com/eolinker/e…