超现实主义画风小魔师

webDeveloper&

Hyperrealism

超现实主义

也叫照相写实主义20世纪70年代兴起于美国的艺术流派

图中我们看到的绘画就是传说中的超现实主义了。是不是感觉和照片一样？是的，它不仅和照片一样，甚至比照片更像。

这种绘画的方式就是直接临摹真实的照片，又名超级写实主义。70年代后期逐渐在西方流行，追求的是完全丢掉个人情感的,真实地再现现实。

Thestory continues

说到超现实主义就不得不谈一下它的历史背景了。当时相机的出现，降低了绘画的成本，缩短了传统绘画周期，以往普通人是没有钱去请一个画家给自己画肖像的，而相机的出现不仅让画面更真实同时让照片进入到了平凡百姓家。那么问题来了，那些传统的写实派画家去那里了呢？真的被相机绝杀了么？然而并没有，一个新的事物的出现并不能完全取代一个另一个事物，而是产生了新的平衡，而超现实主义就是在这个时候诞生的。

超现实主义强调机器永远都没有办法超越我们所看到的东西，而人通过眼睛对于世界的观察可以把每个局部画到超越照片的细腻程度。那么接下来就要介绍今天主角了，我称它为‘超现实主义画风小魔师’，我先用一句话来概括一下它～

“小魔师！,一款让前端工程师可以下班看电影的神器”

光听这个口号你可能感觉有点懵逼，这和超现实主义有什么关系呢？那么我来解释一下，它们的最大共同点都是最真实的还原你所看到的图像。在IT行业存在严重的加班现象，而前端工程师的开发时间又很大一部分是花费在CSS布局上，CSS布局这里再解释一下就是前端工程师要把UI设计师的效果图通过代码的形式把图像在浏览器中显示出来，这整个的过程叫做CSS布局。这其中前端开发需要进行大量的切图，标注尺寸，和书写样式等一系列操作，为的就是尽可能真实的还原UI效果图。而通常在开发的过程中常常会遇到，在浏览器中显示的效果与效果图不一致的情况。而小魔师的出现瞬间解决了以上痛点，100%还原效果图，所见即所得，并且整个过程前端开发不需要写一行代码，大大节省了前端开发的工作时间，这也就是为什么口号中说的前端工程师可以下班看电影的原因。

了解了小魔师的主要用途，下面我们介绍一下这个工具的操作流程。

step1

将sketch设计工具做好的文件用 measure插件导出,并将文件压缩成.zip文件

step2

进入小魔师 创建项目

step3

上传压缩的好的文件

step4

上传.xlsx格式的接口文档

step5

在项目管理页面中点击进入UX页面配置

step6

左边的工具栏显示的是页面缩略图

中间的内容是页面，点击可以选中页面中的元素

右边是工具栏，可以配置元素的属性和动作

当配置完成后可以预览，也可以点击头部导航右边的‘代码生成’选择要生成的代码进行下载

step7

点击下载，我们就可以看到下载好的文件代码目录了 ,放到webpark中就可以运行了

以上是小魔师的全部操作流程，项目代码最终完美生成！

但事情并非我们想象中的那样完美，小魔师第一版在使用的过程中，我们犯了一个比较大的战略误区，为了让工具有更广泛的使用人群我们没有采用任何的前端UI框架，完全纯div进行布局。这很大程度上限制了UI设计人员使用sketch的操作习惯，需要完全按照统一的开发规范，并且操作的容错率很低。为了解决UI的操作规范问题，我们又有把解决方案转移回了前端代码上，使用了较为复杂的div嵌套布局方式增大了UI的操作容错率，而这无疑又给前端开发造成了很大的修改难度。

小魔师的项目我们只是迈出了第一步，由于种种原因项目暂时中断。我想如果再做的话，我觉得可以把业务范围只锁定在公司的后台管理系统上，并且使用大多公司都偏爱的ant.design PRO UI框架。虽然业务范围大大虽然缩小了，但或许可以真正意义上实现减少前端代码书写并且易于修改和维护的“超现实主义”美好愿景。

（如果你有更好的想法，欢迎在公众号中留言交流）

悄悄告诉你！～

我这么正经的胡说八道

连自己都感动了