sketch生成android布局,Sketch新功能—

从2019年九月到2020年二月的半年中，Sketch 经历了高密度的更新节奏，从58版本一路更新到了62版本，一些已有功能得到了优化和补充，也有一些全新的大功能，今天马克笔设计留学的Muzi老师来说一说这几个版本的更新中最重要的一个功能更新 —— 智能分布 Smart Layout 。

Sketch智能分布功能

在 Sketch 58 中首次发布了智能更新功能，并且在随后的四个大版本中不断的更新完善。接下来带大家看一下什么是智能分布。

Sketch智能分布 (Smart Layout)，指的是组件(symbol)功能中新增的 layout 选项。在新建组件(Symbol)时，可以看到弹窗中的 Layout 选项中新增了 6 个属性，分别对应不同的分布排版方式，下面是每个属性的介绍。

1.No Layout / 无

正常布局，也就是和原先一样，没有特殊效果。

2. Left to Right Layout / 从左往右布局

赋予 Symbol 组件智能布局效果，组件尺寸会自动根据内容变化，方向是水平从左往右布局。

3. Horizontally Center Layout / 水平居中布局

同上，方向是中间往左右两端布局。

4. Right to Left Layout / 从右往左布局

同上，方向是从右往左布局。

5. Top to Bottom Layout / 从上往下布局

赋予 Symbol 组件智能布局效果，组件尺寸会根据内容变化，方向是垂直从上往下布局。

6. Vertically Center Layout / 垂直居中布局

同上，方向是中间往上下两端布局。

7. Bottom to Top Layout / 从下往上布局

同上，方向是从下往上布局。

并且，编辑智能分布的元件时，属性栏中会出现专门的设置窗口。

由于Sketch智能分布功能的复杂性，为了让用户能够掌握这个功能，在 Sketch 59 版本的更新中。官方在欢迎界面中增加了一个教程模板，我们可以直接打开它去学习和练习这个功能。

Sketch智能分布的应用

自适应按钮

自适应按钮指的是，按钮中，文字两端距离按钮边界的距离固定，随着文字数量的变化，按钮长短自动调节。

它的制作方法是，首先制作一个按钮，文字两端距离按钮边界的距离为24。

第二步，把这个按钮转化为 Symbol，出现弹窗中 Layout 下拉中，选择从左往右布局 Left to Right Layout，这样一个自适应按钮就做好了，无论按钮文字有多少，两段距离都是固定值 24。

除此之外还可以用元件嵌套用法实现

Sketch自适应卡片

自适应卡片的制作应用的是垂直方向布局，制作步骤和上一个大致相同。首先制作一个卡片，然后把这个卡片转化为 Symbol，出现弹窗中 Layout 下拉中，选择从上往下布局 / Bottom Layout，这样一个自适应的卡片就做好了，无论卡片中的内容有多少，垂直距离都是固定值。

文章作者：MUzi

南安普敦大学交互设计硕士

擅长交互设计与用户体验相关专业辅导和课程知识体系建立

sketch生成android布局,Sketch新功能——智能分布 Smart Layout相关推荐

sketch生成android布局,Sketch一键生成自适应按钮及布局Compo
提取码:0czh 安装下载并解压 Compo.zip 双击 Compo.sketchplugin 完成安装使用选中目标图层执行 Plugins > Compo > Create C ...
sketch生成android布局,让 Sketch 小部件布局如此轻松：Compo
Compo 是一个让你轻松组合小部件布局的 Plugins.通过 Compo,使用快捷键 Command ⌘ + J,可以使一个文字图层转换为一个 button,或者使一个现有图层转换为一个小部件,并 ...
android SystemUI S新功能--- 系统主题随壁纸变化
android SystemUI S新功能- 系统主题随壁纸变化在android S 上系统有一个新功能,就是系统的主题颜色,可以随壁纸的变化而变化, 具体代码在:
android 无线充电架构,大神发现Android 11隐藏新功能：反向无线充电放心了
原标题:大神发现Android 11隐藏新功能:反向无线充电放心了今天,谷歌正式发布了Android 11开发者预览版,不过XDA大神在研究Pxiel 4的Android11系统时,发现了隐藏的新功 ...
sketch生成android代码,java – 从Android Processing Sketch保存图像
我正在尝试从我的 Android Processing草图中保存图像,但是我收到错误.如何将草图保存到用户手机图库中的图像文件? public void draw(){ beginShape(); f ...
蓝湖根据设计图生成html,蓝湖新功能｜一键生成整页代码，帮开发留住头发
蓝湖 Sketch 插件更新啦!此次更新优化了插件的上传速度,还有配套惊喜功能[一键生成整页代码]上线! 设计师更新 Sketch 插件后,上传移动端设计图,开发即可查看.复制使用设计图对应的整页代码 ...
android 7.0 新功能介绍（Nougat）
多窗口支持在 Android 7.0 中,我们为该平台引入了一个新的而且非常需要的多任务处理功能 - 多窗口支持. 现在,用户可以一次在屏幕上打开两个应用. 在运行 Android 7.0 的手机和 ...
MIUI12查看Android版本,MIUI12新功能与支持机型一览开发版内测申请教程
4月27日下午的小米10青春版发布会上,小米首先带来了全新的MIUI12,新的系统对Android进行了全方位的优化,和上一版MIUI11相比,在UI设计和细节功能等各个方面都有了明显的提升.根据发布 ...
android 5.0 新功能,Android 5.0新特性有哪些？安卓5.0新功能汇总
Android 5.0新特性有哪些?经过一段时间曝光与测试后,期待已久的Android L系统正式发布了,新一代安卓系统正式名称为Android 5.0 Lollipop(棒棒糖).Android 5 ...

sketch生成android布局,Sketch新功能——智能分布 Smart Layout

sketch生成android布局,Sketch新功能——智能分布 Smart Layout相关推荐

最新文章

热门文章