web网页界面如何给前端标注、切图？
时间：2024-02-16 02:55:01 | 来源：网站运营
时间：2024-02-16 02:55:01 来源：网站运营
web网页界面如何给前端标注、切图？：网页界面的标注和切图在早些时期确实是很困扰设计师的事情。
先说说标注，以前标注是在ps中做各种距离的标尺线在赋予数字说明，直接使用ps标注插件或者像素大厨等第三方工具，这种标注方式现在也有很多在使用，这种方式优点在于前端同学可以直接在平面上体现各个空间的标注尺寸，缺点在于输出后界面比较乱，需要输出效果图及标注两种，不易于优化修改。现在很多第三方或者一些插件能直接识别输出html文件过保存网站中，前端选择某个空间会直接显示具体数据(还能直接给出代码哦)，我自己用的measure直接导出html文件，还有在线的zeplin，前提是用sketch。ps的同学也有蓝湖这种第三方协作平台。
再是切图，主要注意切图片在实际使用中需要的大小，有些需要和留白一起切；图片的物理大小不易过大；icon类的图标看情况在重复性高、基数大、扁平化的情况下建议使用字体包。
移动端和pc的差异标注基本都没有，如果需要设计不同分辨率的情况看公司需要几套设计稿(一般一套就行)但标注同样标注，有需要注明的地方文字说明则可以。切图的话移动端2倍图和3倍图，pc端看项目是否要在mac上的需求，毕竟图片大也影响使用速度啊。
好了说了这么多，其实各个公司也会有不同的环境和准则，如果公司已经使用习惯一套方案可以先按照之前的习惯来，在慢慢把自己的想法和工具推广出去，毕竟好的、效率高的东西大家都喜欢。
在线咨询
