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

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

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

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

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

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

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

问题描述

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

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

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

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

解决办法

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

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

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

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

最后再update文字样式。

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

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

方法分析

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

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

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

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

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

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

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

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

建议方法

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

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

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

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

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

总结

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

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

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