|
Post by account_disabled on Jan 27, 2024 20:51:06 GMT -7
Anima 构建了两个超级有用的 Sketch 插件。自动布局可帮助设计人员在 Sketch 中创建响应式布局,而Launchpad将响应式设计导出为接近完成的 HTML/CSS 网站,具有良好的代码质量。TL;DR — 观看视频…… Backward Skip 10s Play Video Forward Skip 10s “等等……另一个网站建设者?真的吗?” 嗯,Launchpad 更像是一个 HTML/CSS 导出器,具有一些令人印象深刻的功能。它不是典型的所见即所得编辑器,因为您实际上是在 Sketch(一款一流的用户界面设计工具)中进行设计工作。您仍然需要一个能够将 4 星级代码输出并将其转变为 5 星级网站的开发人员,但这仍然可以为您节省大量时间。Launchpad 的实际功能如下: 响应式设计(如果与自动布局结合) 视频、链接和表格 字体系列后备 这是您可以构建的基础。它会为您节省无数个小时的宝贵时间,但它不会带您到达终点线。 这是一件好事,因为很少的代码优化会对 SEO 和转化产生很大的影响,所以这些是您需要手动完成的事情。 让我们来学习如何使用它吧! 确保您已先下载Launchpad。不用担心自动布局,因为它现在会自动捆绑到 Launchpad 中。我们有很多内容要介绍,但我会保持简 WhatsApp 号码数据 短! 具有草图和自动布局的响应式设计 首先,让我们将一组图层/对象浮动到父容器(在本例中是画板本身)的右上角。打开检查器中“自动布局”选项卡中的“Pin”下拉列表,然后选中顶部和右侧的复选框(或单击视觉表示上的点)。 另外,确保两侧(顶部和右侧)的偏移量(从画板)为“17px”,并点击“W”复选框以将组声明为具有固定宽度(否则,当容器/画板为调整大小后,响应对象将被压缩,就好像声明为容器的 % 一样)。 对于 HTML/CSS 开发人员来说,“固定”可以模仿浮动元素 (float:left或) 或与或组合的float:right定位元素 (position:fixed或) 。 具有自动布局的响应式设计 这是调整大小时的外观(注意其他元素如何被挤压,但我们固定的元素仍然固定在画板的右上角): Learn to Code with JavaScript 使用 Sketch 和 Launchpad 进行响应式测试 自动布局还能做什么? 固定只是冰山一角。自动布局还可以帮助您: 垂直/水平对齐对象 以 % 或 px 声明对象的宽度(和最小/最大宽度) 定义偏移量(以 % 或 px 为单位) 在“纵向”和“横向”之间快速切换进行测试 切换到另一个画板预设以在其他设备中进行测试 使用可视化图表或传统复选框 UI 进行导航 创建“Stacks”,相当于 Flexbox 的 Sketch 如上所述,当使用 Launchpad 导出时,这些布局选项会转换为 CSS(是的,甚至是 Flexbox/Stack 设置)。尝试一下吧。它非常简单,因此您在学习如何对齐对象或在不同设备画板和方向之间切换时不会有任何困难。 链接 每个画板基本上都是一个网页,因此连接屏幕很容易。 我们先设置主页。
|
|