背景

只懂得简单的css、js、html、sketch 的开发人员

借助工具来开发一个产品详情页

传统的会需要用经过的过程

  • 设计稿 （ps or sketch)
  • 原型 (axure or sketch or 其它在线工具 如 xiaopu.com 或者蓝湖)
  • coding 过程： 切图-》使用前端框架 vue/react/angular

一个后端人员如何解决上面传统会需要经过的过程

  • 方式： 借助大而全的前端UI框架，如：antd
    • 过程1：需要使用sketch 设计（需要使用antd的sketch组件来设计）（设计的模板可以参考自 xiaopu.com）
    • 过程2： 根据设计稿，自己切图，并且使用antd自带的代码组件实现之；
  • 以上方式的优缺点：
    • 优点：antd的规范做指导，在你设计界面和代码的时候，都提供的相应的规范
    • 缺点：设计是一个门槛、切图也是一个门槛；
  • 如何解决上面的痛点：
    • 参考xiaopu上面的资源，自己设计原型（基于antd的控件），参考着设计出高保真的原型；
    • 使用imgcook 来切图（切点是只能一个区块一个区块来切），但已经实现得很好；
    • 把用imgcook切好的界面代码拷贝到代码里面，组合；

工具链接