结合html做界面_用代码的思维输出你的界面

点击上面蓝字  宿野映像关注我，让我们一起成长学习吧?

ϟ

///写在前面 第一次写关于设计的东西。我工作年限尚浅，对于深入的问题并没有研究。本质上工作这两年即便自己足够的懒蛋，看的多了你也会有所成长。
我们应该都有过这样的经历，就是你设计好的页面交给开发写出来的总有差别。如果我们自己会写就能保证设计稿的高保真输出吗？当然你在这一行不一定就要懂代码，但你要站在开发的角度知道它 如何实现，如何正确输出你的设计稿。如果你工作在互联网，我觉得你应该要对开发的工作有所了解，不只是产品和设计，每个人。
所以，以下仅代表 个人看法，如果有疑问可以在下方给我留言?

///问题起源一个月前， Figma更新了Auto layout 3.0版本。
这一功能算不上革命性的，却在之前的基础更加完善、好用。加上组件化的结合，让我真的很享受在figma画界面的感觉。恰巧我在编辑公众号的过程中了解到CSS3里面的弹性布局 display: flex(如果你在做界面的设计，强烈建议你了解一下这一属性)嘿！好家伙，这个属性完全对应着figma里面的 Auto layout。恍然大悟，才感觉到之前画的界面只是在视觉上满足了需求，完全没在意“标注”的问题。 https://www.figma.com/file/oGY4fHu8ekYmuyZ5PcVegJ/Auto-Layout-playground-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%E7%89%88-Simplified-Chinese-Community?node-id=103%3A194
?(autolayout 3.0中文文档)

///以我个人为例在步入这个岗位前已经试图学习前端开发，不幸半途而废。
不过短促的学习中我知道了一个界面是如何构成，也了解一些HTML和CSS。而在早之前听到过一句话是， 所有的东西都是盒子组成的。

css盒模型上面?这个就是盒模型了，它标注了一个本体的构成。如果你经常浏览网页扒图，右键检查会经常看到它。 element(元素)、padding(内边距)、border(边框)、margin(外边距)▎跟界面输出有什么关系拿最简单的例子来说：在画一个图标时经常会用到24px这个尺寸，这是你在输出时切好的尺寸，你主动给留出了内边距padding。

很简单，通常下意识都会这样去处理。这就是一个盒模型(实际上以前我有过左边的切法?) 盒子可以嵌套，元素便可分为子元素和父元素。现在要做的不只是图标，所有元素都这样处理，像是之前很火的原子理论。

你一定见过上面这种操作。下面的图展示了我过去和现在的两种处理方法

上面两个过程达到的效果是相同的，区别是输出界面的 思维不同，图2更像是站在开发的角度看待问题，开发在查看标注时也更清晰明了。
这个案例其实没有过多思考，如果你下载了ios ui组件，你可以看到每一个组件都是一个模块。我们要做的就是，在整体的页面布局中利用相同的思维，这便是组件化的思维。///最后上面的例子是一个很沙雕的例子，借以说明。从现在的角度来说，界面的输出 不仅仅只是视觉稿，更是看到一个落地的产品，知道这个产品是如何做出来的。
设计是创意到执行的过程，也是视觉思维到产品思维的演化。
我们输出的界面，如何优化能更好的对接开发去做执行，我如何做的一套很好的组件，开发能够做更好的适配。
如果今天做的设计是站在帮助别人解决问题的基础上，你和开发之间的协作便会更为简单，相应更不会有矛盾。这是一次新的尝试，我在这些领域还不是很擅长，所以如果你有什么意见可以在下方留言并指点...
如果你喜欢别忘了关注我哦❤️End