Question

前端切图切到很高的境界是怎样一种体验

Answer 1

就我个人的一点经验分享一下，谈不上很高的境界，只说是一点心得，我认为比较好的切图的同学是，如何在众多林立的需求之间取得一个平衡。说到底还是眼界的问题，刚开始可能纠结如何命名css比较易用，过后可能纠结html结构是否合理，然后页面是否兼容，可复用，再往后页面功能设计是否合理，页面体验是否符合人的基本心理需求。做的时间长了，就有空琢磨这个产品到底如何，能否真的占有一定的市场或用户量，然后做失败几个产品之后，看看其它行业是否还有潜力的机会，是否有与互联网接合的切点。然后在跨地区看看，地球那边的行业是怎么样的？所以，下午去巴黎看看那边是否有订餐需求不是一个梦。然后在每个阶段下对前端的审视或要求是不一样的，也谈不上很高的境界，只是公司或人原来的目标或需求变了，所以就像我以前提到一样，这个点永远都达不到，只有无限可能的接近。

然后在分享点目前我接触到具体的体验：
1. 满足UI同学的视觉需求。
无论是css hack还是通过js进行差异化处理，从技术手段上无底线的实现UI同学的视觉要求。这是工作负责的态度，也是自我需求突破的一个手段。从UI同学来说，做的设计稿没有达到要求，是对其本身工作成果的不尊重。

2. 控制好后端同学的数据显示。
前端做为后端同学的代言人，无趣的数字通过有趣的交互或界面展现出来，本身是一件很美好的事情，通过合作的方式让整个流程完美无瑕，但总是在外界因素的影响下，把握不好。

3. 在这有限的条件下提高自己的效率或代码质量。
这就要提到一般页面的 页面的健壮性，扩展性，复用性。

a. 健壮性：
这个怎么说呢，UI出的psd图是一个页面理想状态下的形态，而页面有数据，会出现两种极端状态，一，数据极多，二，数据极少。所以在页面排版的时候，考虑这两种状态，以免数据太多的时候，撑破页面，以免数据太少，页面部分元素会出现收回去状况，这样的页面会出现一些细节没有处理的常规失误。

b. 扩展性：
可以说，这个也是第一条的扩充，扩展性的意思为，在页面的模块很少的时候，要考虑未来添加子模块或兄弟模块的状态，为将来留好html接口。在将来添加模块的时候，尽可能少的去动原来的html结构，使html易于扩展。这个具体情况，具体处理。一般的处理就是如果有可能会有兄弟元素就多套一层，为后台添加兄弟元素尽可能的不影响现有结构。这个点乍看起来很小，其实如果扩充到整个项目，多个项目就有可观的效应了。

c. 复用性：
由于页面中风格相似的模块很多，或页面中与页面中相似的模块很多，但是总会有那么一丁点的差异，这是设计师认识世界然后在表达世界的产物，我们理解设计师的职业操守，所以只能在前期做一些技术处理，免得后期问候某岗位的亲人。具体的有的模块高点有的模块低点，还有结构完全一样，但底纹不一定。这样建议把表现形式的样式放在一个class中，物理属性放在一个class中。还有就是装饰性的图片决不不以明标签的方式插入到页面中，内容式的内容绝对以<img src="" />的方式插入中去，以免将来多主题，多语言版本的实现。

可能有时候还有的情况是，页面完全切不出来，html，css完全不知道怎么写了。但基础掌握良好，概念基本清楚。这时候我个人建议应该是吸收别人好的东西时候到了，也是个人水平瓶颈的时候，需要在坚持一下完全的突破。具体的方式就是，用firebug去分析先有的bat各个项目的各个页面，总有你可以借鉴的地方。

Answer 2

用蓝湖一键标注，下载不同格式的切图。

还有设计图逻辑连线、交互说明、分状态展示、高保真原型制作预览等功能。

对设计图进行树状连线，清晰展示跳转逻辑。

还可在一旁添加细节说明，方便团队成员的理解。