在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

最近比较忙,导致公众号的更新进度慢了下来。由于UI黑客以原创为主,所以就没有转载其他文章,努力确保各位粉丝看到的都是最新鲜的原创干货。

不过这段话间,自己也收集到了很多实际工作中的典型设计问题。

因为,加入到《Sketch进阶课-组件管理与团队协作》课程的设计师,会被邀请进入一个专属的答疑微信群,可以提出自己在工作中遇到的设计问题,从而得到解答,这也是课程的特色服务之一。

不过随着群里设计师的增多,一些问题会被重复提出,变得渐渐具有普遍性。所以准备开个答疑系列,让更多的设计师接触实际案例,避免踩坑。

对我自己来说,也是一个知识沉淀的过程。收集实际问题,然后进行分析、解答、分享,这个过程对设计师的成长是很重要的。同时也给公众号带来了最新的文章主题和素材,大家放心,后面更新速度会加快,UI黑客就是一个以原创文章为主的UI设计公众号。

今天开始第一期的问题答疑。

如果你也在工作中遇到存有疑惑、无法解决的设计问题,不妨看看这个系列,也许会有新的收获。

问题描述

群里A同学的问题是这样的:输入框symbol的文字style发生改变后,文字无法垂直居中。听起来很难理解?下面用图片展示下。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

可以看到原本输入框的12号字,换了14号大小的文字样式后,整体文字往下移动,无法垂直居中。

原因是,即使外面的文字样式发生改变,symbol本体内的文字位置并没有变化,距离框顶部的距离一直保持固定。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

输入框高度固定,里面的文字大小变化,说明文字高度也变化,那么如果还要保持垂直居中,就需要设置文字距离顶部不是固定值,而是个变化数值,这个目前Skertch的常规方法还无法做到,我们需要另辟蹊径。本文中使用的字体是苹方。

解决办法

这里要引入CSS的line-height属性原理。在网页代码中,文字垂直居中于框内,可以把文字的line-height值设置和框高度相同,即可实现垂直居中,与文字大小无关。比如

height: 40px;
line-height: 40px;

那么在sketch中我们也可以这么做。

首先我们确定,输入框的高度是32px,那么就需要把symbol中的文字高度设置为32px。这里不是改动line行高属性,而是把单行文字变为框文字,框的高度设置为32px,保证任何文字的顶部位置是一样的。接着再把段落的对齐方式改为垂直居中,保证任何文字在框中都是垂直剧中的。

最后再update文字样式。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

同样的,我们把14号字的样式也这么做,变为文字框,设置32高度,垂直居中。

最后我们再来试验下symbol的文字样式切换,不管是12还是14都可以与输入框垂直居中,实现了A同学想要的方法。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

方法分析

这个方法仅仅是改变了文字的显示范围,在Sketch中,文本由单行弹性转化为宽高固定的框,其样式是不会发生变化的。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

另外即使我们的文字使用了垂直居中,但如果增加内容,也是以正常的顶部对齐流来延展的,并不会改变顶点的位置。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

在symbol中也是适用的。下面例子中左侧的文字就是我们设置好的12号字垂直居中样式,更改字数后,还是以顶部对齐,并没有发生变化。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

但是我们上面更改的只是文本的宽度,如果更改了高度,情况就不一样了。

把symbol中的文字框高度拉伸一点,然后再还原原来的高度,看着没变化,但是垂直对齐方式中,顶部和底部对齐被激活,文本框变为绝对高度。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

再看symbol,文字变为垂直居中,更改文字内容也是垂直居中,会给我们的设计带来不便。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

以上就是解决输入框symbol的文字style发生改变后,文字无法垂直居中的方法,我们使用了固定文本框高度,再使其垂直居中。

不过文本默认是顶部对齐,我们改为垂直对齐违背了正常的文字流方向,实际项目中也不建议这么改。

建议方法

实际上,A同学的问题是个伪需求,输入框高度固定,里面的文字大小变化,说明文字高度也变化,更说明框的高度也需要发生变化。

大部分设计问题主要来源于实际工作,解决问题也是为工作服务,进而提升设计效率。当我们对一个问题疑惑不解的时候,一定要回到最开始:我为什么要这么做?这么做对我的设计有什么提升?

在一个项目中,输入框里的文字大小基本是一致的,如果出现更大号的文字,那就需要更高的输入框,本质上是另一个组件了。按照组件化设计,输入框也是分类型的,对应不同的框高和字号。

比如在Antdesign中,输入框基本分为大中小三个组件,在不同的页面环境中使用最合适的一个,而不是没有逻辑地更改输入框样式。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

我们在Sketch做组建的过程中也是如此,所以建议分开做输入框A和B。从根本上说,不应该直接用输入框A更换字体大小,因为他们不是同一个组件。

总结

最后给出的解决方案是,做出两个输入框样式A和B,以适应不同的页面需求。

在Symbol中改变文字样式,你的Sketch应该这么做-UI黑客

组件化设计并不是说组件越少越好,而是要依据具体的页面环境以及团队的组件规范,最重要的是要让自己的组件体系变得清晰和易用。

最后打个小广告,如果你对Sketch组件管理和团队协作不了解,就赶快加入课程吧,《Sketch进阶课-组件管理与团队协作》,掌握更高级的Sketch技巧,提升设计效率。