赞助商
立即赞助

超详细!手把手教你用Sketch搭建组件库(下)

交互设计3年前 (2021)发布 流光
2.4K 0 0

今天,我们讲解下组件的动态响应式,这组件库搭建的重中之重,是 Sketch 搭建组件库系列的终篇!

依旧,一纲:

  • 么是态响应式
  • 关于弹性布局
  • 关于固定边缘
  • 关于固定尺寸
  • 手把手战节
  • 弹性布的嵌套
  • 后

什么是动态响应式

响应式估计大家不陌生,业点讲就是,系统对不同的媒介(运行 web 的设备)及视窗(显示网页的浏览器窗口)所产生的适应变化。

做跨设备响应的友接触会较多,从大屏(pc)、中屏(平)到小屏(移端),为了适配同的设备需要产至个断点的设计方案。

市面全局响应的比较好的,antD (https://ant.design/index-cn)算一,家可以去官网感受下蚂蚁如何实媒介、视窗的完响应的。

超详细!手把手教你用Sketch搭建组件库(下)

回归到主题,组件的响应式页面响应式其实本质都一样的,都元素随父级的所产的应变化。只不过组件的父级可以一编组、也可以页面。

组件进响应处理意义大。拿前文这个商品卡片举例,如我们其不做任何适配处理,那在进尺寸伸时会这样:

超详细!手把手教你用Sketch搭建组件库(下)

图片、距变形失真,个组件都遭到了破坏,效常挫。

但是如果对组件进行一个适配理,一切都变得非常然柔顺:

超详细!手把手教你用Sketch搭建组件库(下)

而在 sketch ,实现动态响应效功能是 Resizing(后统翻译为弹性布局)

关于弹性布局

所谓弹性布局,是让元素跟随父级编组或者画板尺寸变化而生适应变化。在 sketch 应着右侧板 Resizing 功能。含 Pin to Edge(固定边缘)、Fix Size(固定尺寸)和 Preview(预览)。(请忽略文版截图蹩脚翻译。。)

超详细!手把手教你用Sketch搭建组件库(下)

不过要注意是,弹性布局需要拥有个参照物实现尺寸和位关系控制。所以弹性布局板有在元素存在父级关系时才会出现,这里父级括编组和画板。如元素没有任何父级关系裹,仅仅在个页,那并不会出现弹性布局功能。

拿商品卡片举例,一开始这个卡片存在于一个画板中,这就味着它是作为一个存在于画板父之下,所以会出现弹性布局功能。

超详细!手把手教你用Sketch搭建组件库(下)

但是,当将画板给它撤掉,让它独立得存在于页面中,你会发现弹性布局功能消失了。就是因为此的商品卡片缺失了父关系,没有法使用参照物来控制其尺寸和位置关系。

超详细!手把手教你用Sketch搭建组件库(下)

不过,当将其编组后,弹性布局再次出现,就是由于商品卡片再一次获得了父关系,只是这次的父由画板变更为编组了。

超详细!手把手教你用Sketch搭建组件库(下)

固定边缘

固定边缘(Pin to Edge),即固定元素到边缘内距。

不论怎拉伸,岿然不动。

拿品标签举例。未固定边缘时,拉伸直接破坏组件内的间距,显不是我们想要的。

超详细!手把手教你用Sketch搭建组件库(下)

我们希望内容与与左边缘的内间距持不变,该怎么搞呢?

非简单,进入源组件页面,在右侧弹性布面中将容固定到左侧边缘即可。

超详细!手把手教你用Sketch搭建组件库(下)

到标签组件,就会发现论我们怎么拉伸,容始终是固定在左侧边缘的。

超详细!手把手教你用Sketch搭建组件库(下)

关于固定尺寸

固定尺寸(Fix Size)即固定元素自身的尺寸大小。

拿商图为例,没有固定尺寸时,拉伸后会失真变形。

超详细!手把手教你用Sketch搭建组件库(下)

我们想要商图尺寸随编组或者画尺寸的改变而改变,择固定图片的宽。

超详细!手把手教你用Sketch搭建组件库(下)

论我们怎么拉伸编组,82 年的拉菲尺寸依旧保持变。

超详细!手把手教你用Sketch搭建组件库(下)

关于预览

我们在选定一种属以时在右窗口中预览到效果,以帮助我们判断是不是自己想要的。注意,我们在点选预览动画只播放一次。果想要次观看效果,需要 hover 在预览窗口上哦~

超详细!手把手教你用Sketch搭建组件库(下)

不在很组件中,固定边缘和固定尺寸往往是相互搭、次使用,下面我们通一战来巩固。

手把手实战环节

依旧是我们的个品卡,我们的目标就是让卡中的所有元素能够适任意的尺寸,包括不同的宽度和高度。

超详细!手把手教你用Sketch搭建组件库(下)

第一步,确定参照物。

确定整个商品卡片这个组件为响应参照物,后续所有的素都要跟随它尺寸的变化而变化。

第二步,确定响应策略。

在这一步,确定卡片中所有素的位置关系和尺寸的响应规则。

首先,我们需要品标题、品价和标签持下方和左的内间距固定,同时它们的尺寸持固定(已经提前建立从左至右的自适应规则)所以我们固定左下边缘和宽高。

中,标签由于是嵌套在商卡片组件当中的,我们需要对标签组件做一次弹性布。固定左侧边缘和宽即可。

超详细!手把手教你用Sketch搭建组件库(下)

商图我们希望保持尺寸跟随改变,直接固定宽。商图背景需要始终保持个方向间距的一致,因此固定上左右的边缘。

超详细!手把手教你用Sketch搭建组件库(下)

最后来个弹性布的总览。

超详细!手把手教你用Sketch搭建组件库(下)

三步,响应效果测试。

到激动人心的测试节!嗯,看着相当完美。任意尺寸能轻松 hold 住。

超详细!手把手教你用Sketch搭建组件库(下)

当,一步节的效果果不在我们的预期之内,需要返回检查每一个元素的弹局在哪里出问题,比文字的对齐方式啊,比父子级的关系啊等等,反复试~

弹性布局的嵌套

弹局是以嵌套使用的。

如,我对 A 使了弹性布,那么 A 的父级 B 可使弹性布。一层层嵌套,就可应对那些复杂页面的响应效果。只是嵌套的调试适配较为麻烦,而且很容易在某个环节忽略掉。

这里我借鉴了幺零三佬所使用的办法,将具备父子级关系的元素一层层得逐级拆解,并每一层分层行弹性布局规则制。

比如这个页,它含了较多层级,如接草率上手做弹性布局会很麻烦,而毫逻辑做法也很低效。正确做法是步步拆解后分层展开。

超详细!手把手教你用Sketch搭建组件库(下)

为了便于阅读理解,下层版块和元素抽象成了骨架图。

第层弹性布局

首先,从个版来看,我们确定个画板作为响应参照物,而内容区域需要保持不变安全边距。所以我们接固定内容区域四个边缘。

超详细!手把手教你用Sketch搭建组件库(下)

第二层弹性布局

接,我们对内区域行拆解。我们的弹性布局对象变拆解后的四版块,参照依旧整画板。我们希望搜索框 banner 的高度与方间距保持不变,因此固高度方。商品版块宽高可以自由变化,所以仅固方。

超详细!手把手教你用Sketch搭建组件库(下)

第层弹性布

最后,我们对各个版再次拆解,绝大分被拆解为了最小颗粒。此时的弹性布子级对象变为了这些更细分的元素,如暗示、图标、大标题、折扣标等等。而响应参照物则变为了元素依附的父级。如搜索框是暗示和图标元素的父级,而 banner 就是字、按钮和图片的父级。最后的布规则如,具体逻辑再赘述~

超详细!手把手教你用Sketch搭建组件库(下)

基于这个拆解的步骤,我们可清晰得在每一层级进行分层弹性布~

看下骨架图的响应效果,啥问题。

超详细!手把手教你用Sketch搭建组件库(下)

再看下界面的响应效果~可以

超详细!手把手教你用Sketch搭建组件库(下)

最后

sketch 搭建组件库系列就此结束了,从组件的搭建、到组件的态自适应、再到组件的态响应式,这个环节缺一可。过很多东西我自己在摸索阶,章尚且面面俱到。后续有任何的疑问或者建议,随时留言。

但愿这篇文章对所帮。我 AndrewChen,下见。

欢迎关注作者微信公众号:「转设计笔记」

超详细!手把手教你用Sketch搭建组件库(下)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

@烧炖:2018年的七夕是个星期五。晚上7点,设计师小王正在收拾东西,他和隔壁组的小姐姐约好了去看电影,打算7:30下班。正收...
sketch
最近团队尝试使用Figma构建一套适用团队的组件库与规范,发现Figma比Sketch的构建方式要更简单和更灵活,尤其是自动布局(Aut...
Figma
工作中大家都可能遇到过,设计完成后因为某些原因突然要批量修改某一个字段文字的大小,或者某个按钮的颜色。 领导一声令...
组件
今天给大家带来的是如何建立设计师个人的插画组件库,因内容过长并知识点过多,请泡杯枸杞观看。 关于个人插画组件库的 3 ...
插画组件库
前段时间发现蓝湖的同步盘从官网下线了,问了客服,说是维护中,具体开放日期不明(目前已正常)。当时我们的设计团队要用这...
Mac 技巧
第一次知道 Figma 是在 2016 年,但真正用起来还是在去年。那时苦于 Sketch 每次更新都会导致一些插件不能用,且界面不够精致...
Figma
之前给大家详细的解析了个人插画组件库的设计方法以及个人见解。 今天就带大家来全面分析一下品牌插画组件库的建立及应用。 ...
品牌插画
Sketch 是一款轻量、易用的矢量设计工具,它为数字设计而生,小巧但功能强大,今天我总结并整理了一些 Sketch 不为人知的快捷...
sketch