html博客页面设计思路,[实验] HTML to Sketch 逆向设计思路

本文来自网易云社区

作者：马宝

看了很多插件，比如“sketch一步导出html文档”，sketch-measure 导出设计标注，都是基于正向模式下设计的插件，所谓从“视觉”到“技术实现”， 你肯定会遇到这样或哪样的重新设计需求，在反向模式下，我思考可不可以在将两者翻转，将现有网页还原成设计稿。

这是一个已经完成的实验，仅限于试验学习～

常见的网页也就是HTML是一种结构化标准标记语言，搭配CSS 、JS使用 常见的设计文档，有个特性图层分层的、群组，某种程度是也是结构化的，.sketch 、.psd 、.ai 其中sketch 的开放性是最好的。所以 HTML to sketch也是最合适的。

考虑到现实的情况不可能有html to sketch 现在的应用达到我的目的，所以我把公式转化成

思路一 html 保存pdf ，sketch 打开；这个方法比较适合单页很小，不复杂的网页。设置麻烦，不适合多屏网页

思路二 html to svg to sketch；sketch同时支持 pdf 和svg 格式的文档的。效果上svg 优于pdf 格式，矢量路径效果更好；

所以html to svg 一步就可以让sketch 还原网页设计。

顺着思路二往下看【正式实验】

输入你想要转化的网址

设置参数 Browser Width(页面宽度):1440 Timeout(网站延时)：200

convert to svg (保存SVG)

sketch 打开下载的HtmltoSvg.svg

微调图层 默认转化时，图片会加黑边影响美观

配几张截图

实验中遇到的问题

视察滚动很复杂的网页很难转化

转化有错位

绝对／相对／悬停 定位图层 逻辑可能会错

有什么好处?

试过便知 快速复位原始设计档

联带思考的一些问题

sketch 和 PSD 格式可以相互转化么？

ai 和sketch 哪个更适合做 icons？

本文来自网易云社区，经作者钱烽授权发布

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。