关于javascript:开源项目-PM-浅谈如何设计官网

3次阅读

共计 1110 个字符,预计需要花费 3 分钟才能阅读完成。

​近期收到热心用户反馈,“你们的官网首页怎么赤裸裸的”,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…

正文完
 0