---

前言

前端制作中界面设计是主要的部分，也是很多开发者的痛点，想要制作一个较为简洁美观的界面并不容易，有时还需要一些ui制作的要求，本文将讲述如何方便快捷地完成界面制作，如何调试界面。

---

一、前端设计痛点

作为一名开发者，前端设计中的样式调整对我来说是一件比较麻烦的事，涉及到各种盒子的样式设计，呈现何种内容，如何呈现，是否有动效等，如果直接在开发工具内调整css样式效率很低。于是我就思考是否有一种较为快捷的开发方式，就像绘画一样排列各种模块，并能够快速得到所需的样式属性值。
接下来我将讲述我摸索出的一条较为快捷的开发途径，希望能对大家有所帮助。

二、如何简化设计

1.即时设计软件使用

即时设计是一款功能强大的可在线编辑的ui设计软件，通过类似绘画，p图的方式对元素进行堆叠，完成界面的设计工作，此外通过即时设计也能够快速设计软件的图标和矢量图，也可以在内置的组件库中找所需的图标添加到设计稿中。

可点这里进入：即时设计软件网址

在网站的设计界面中，我们可以自行添加所需的元素到设计稿中，插入图片，填充内容，甚至某些动态效果都能在即时设计中完成，使用这种设计方式能够便捷页面开发同时美化界面设计。

2.code.fun组件生成代码

在即时设计中完成的设计稿如何转化为前端代码供开发者使用呢？可以看到，即时设计内置的代码生成的组件，使用内置的code.fun组件能够一次性地生成整个设计稿的前端代码包括html,css和js，生成的代码能够复制到开发软件中使用(例如uniapp)，这样就完成的基础的界面设计。



不过不推荐直接使用生成的代码，因为代码中类名都是自动生成的，如果后续需要更改样式，绑定html标签时难以查找，代码可读性较差。
建议只是参考生成代码的css部分，通过点击设计稿中的某元素即可得到对应的样式，复制到自拟的css属性中即可。

3.合并样式及调试

可以看到，code.fun已经将设计稿中的各个盒子分组，我们只需要完成界面骨架部分在绑定生成的css属性就完成了基本的界面制作。
代码完成后，可使用uniapp中运行“运行到内置浏览器”进行调试，或者使用手机模拟器调试，看样式是否和设计稿中相同，一些模块的位置是否需要修改，完成界面的调试工作

总结

本篇文章重点讲述基于即时设计的前端界面开发方式，通过在即时设计中完成的设计稿，使用内置code.fun插件生成前端所需的css代码，最后使用uniapp的运行调试测试界面效果，从而简化了前端样式设计的过程，提升了整体开发效率。
之后将会更新即时设计和uniapp的相关知识总结，可以期待一下。