前端切图之前你是如何分析设计图的?

当整个方案确定后, 设计师给出图后,在写代码之前你是如何分析这张图的?从哪几个个方面分析?
关注者
222
被浏览
8334

5 个回答

  1. 拿到图会先审一下,把图对应的场景里会出现的所有业务功能的需求都过一下,看是不是图里都有体现,有不明确或遗漏了的地方找UI一一核实.
  2. 然后确认不同屏幕宽度下,界面的各个地方是什么样子
  3. 最后确认在某部分数据缺失、异常、过多、过少的情况下是什么个展示
  4. 最最后确认下所有页面间的跳转关系、哪些地方可以过来,点去哪里,哪些地方是个各界面都一样的

以上所有都确定完并了然于胸之后,就可以开工了。以上如果真正做好了,就相当于整个项目就已经完成了一半了。真不是危言耸听,很多时候前端工程师开发中都会遇到需求变更、界面改版啥的,都是因为前期做之前没有把所有风险都处理完,导致问题后期暴露,改版、延期、加班、身心疲惫,最后一堆烂代码、烂交互仓促上线。

跑完题回来,终于可以开工了,先看所有页面间的关系,找出各个(界面css/交互逻辑js)一样的地方做成共用的,看看文件目录怎么规划下,想想之后上线时要怎么部署.

开始做单个页面了的时候,先写好整个界面的布局,这儿是上下结构,那儿是左右结构,里边再是什么结构的,不用写具体的内容,先把所有块的box写好

然后就是枯燥地往box里填空了,写的时候记得时常注意下,这个地方的代码是该写在box里,还是页面里,还是大模块里,还是整个项目里,就好了.....
能不切就不切,能少切就少切,没了