最近比較忙过咬，導致更新進度慢了下來。由于UI黑客以原創(chuàng)為主制妄，所以就沒有轉載其他文章掸绞，努力確保各位粉絲看到的都是最新鮮的原創(chuàng)干貨。

不過這段話間耕捞，自己也收集到了很多實際工作中的典型設計問題衔掸。

因為，加入到《Sketch進階課-組件管理與團隊協(xié)作》課程的設計師砸脊，會被邀請進入一個專屬的答疑微信群，可以提出自己在工作中遇到的設計問題纬霞，從而得到解答凌埂，這也是課程的特色服務之一。

不過隨著群里設計師的增多诗芜，一些問題會被重復提出瞳抓，變得漸漸具有普遍性。所以準備開個答疑系列伏恐，讓更多的設計師接觸實際案例孩哑，避免踩坑。

對我自己來說翠桦，也是一個知識沉淀的過程横蜒。收集實際問題胳蛮，然后進行分析、解答丛晌、分享仅炊，這個過程對設計師的成長是很重要的。同時也給自己帶來了最新的文章主題和素材澎蛛，大家放心抚垄，后面更新速度會加快，UI黑客就是一個以原創(chuàng)文章為主的UI設計自媒體谋逻。

今天開始第一期的問題答疑呆馁。

如果你也在工作中遇到存有疑惑、無法解決的設計問題毁兆，不妨看看這個系列浙滤，也許會有新的收獲。

問題描述

群里A同學的問題是這樣的：輸入框symbol的文字style發(fā)生改變后荧恍，文字無法垂直居中瓷叫。聽起來很難理解？下面用圖片展示下送巡。

可以看到原本輸入框的12號字摹菠，換了14號大小的文字樣式后，整體文字往下移動骗爆，無法垂直居中次氨。

原因是，即使外面的文字樣式發(fā)生改變摘投，symbol本體內(nèi)的文字位置并沒有變化煮寡，距離框頂部的距離一直保持固定。

輸入框高度固定犀呼，里面的文字大小變化幸撕，說明文字高度也變化，那么如果還要保持垂直居中外臂，就需要設置文字距離頂部不是固定值坐儿，而是個變化數(shù)值，這個目前Skertch的常規(guī)方法還無法做到宋光，我們需要另辟蹊徑貌矿。本文中使用的字體是蘋方。

解決辦法

這里要引入CSS的line-height屬性原理罪佳。在網(wǎng)頁代碼中逛漫，文字垂直居中于框內(nèi)，可以把文字的line-height值設置和框高度相同赘艳，即可實現(xiàn)垂直居中酌毡，與文字大小無關克握。比如

height:?40px;

line-height:?40px;

那么在sketch中我們也可以這么做。

首先我們確定阔馋，輸入框的高度是32px玛荞，那么就需要把symbol中的文字高度設置為32px。這里不是改動line行高屬性呕寝，而是把單行文字變?yōu)榭蛭淖盅校虻母叨仍O置為32px，保證任何文字的頂部位置是一樣的下梢。接著再把段落的對齊方式改為垂直居中客蹋，保證任何文字在框中都是垂直劇中的。

最后再update文字樣式孽江。

同樣的讶坯，我們把14號字的樣式也這么做，變?yōu)槲淖挚蚋谄粒O置32高度辆琅，垂直居中。

最后我們再來試驗下symbol的文字樣式切換这刷，不管是12還是14都可以與輸入框垂直居中婉烟，實現(xiàn)了A同學想要的方法。

方法分析

這個方法僅僅是改變了文字的顯示范圍暇屋，在Sketch中似袁，文本由單行彈性轉化為寬高固定的框，其樣式是不會發(fā)生變化的咐刨。

另外即使我們的文字使用了垂直居中昙衅，但如果增加內(nèi)容，也是以正常的頂部對齊流來延展的定鸟，并不會改變頂點的位置而涉。

在symbol中也是適用的。下面例子中左側的文字就是我們設置好的12號字垂直居中樣式联予，更改字數(shù)后啼县，還是以頂部對齊，并沒有發(fā)生變化躯泰。

但是我們上面更改的只是文本的寬度谭羔，如果更改了高度华糖，情況就不一樣了麦向。

把symbol中的文字框高度拉伸一點，然后再還原原來的高度客叉，看著沒變化诵竭，但是垂直對齊方式中话告，頂部和底部對齊被激活，文本框變?yōu)榻^對高度卵慰。

再看symbol沙郭，文字變?yōu)榇怪本又校奈淖謨?nèi)容也是垂直居中裳朋，會給我們的設計帶來不便病线。

以上就是解決輸入框symbol的文字style發(fā)生改變后，文字無法垂直居中的方法鲤嫡，我們使用了固定文本框高度送挑，再使其垂直居中。

不過文本默認是頂部對齊暖眼，我們改為垂直對齊違背了正常的文字流方向惕耕，實際項目中也不建議這么改。

建議方法

實際上诫肠，A同學的問題是個偽需求司澎，輸入框高度固定，里面的文字大小變化栋豫，說明文字高度也變化挤安，更說明框的高度也需要發(fā)生變化。

大部分設計問題主要來源于實際工作笼才，解決問題也是為工作服務漱受，進而提升設計效率。當我們對一個問題疑惑不解的時候骡送，一定要回到最開始：我為什么要這么做昂羡？這么做對我的設計有什么提升？

在一個項目中摔踱，輸入框里的文字大小基本是一致的虐先，如果出現(xiàn)更大號的文字，那就需要更高的輸入框派敷，本質上是另一個組件了蛹批。按照組件化設計，輸入框也是分類型的篮愉，對應不同的框高和字號腐芍。

比如在Antdesign中，輸入框基本分為大中小三個組件试躏，在不同的頁面環(huán)境中使用最合適的一個猪勇，而不是沒有邏輯地更改輸入框樣式。

我們在Sketch做組建的過程中也是如此颠蕴，所以建議分開做輸入框A和B泣刹。從根本上說助析，不應該直接用輸入框A更換字體大小，因為他們不是同一個組件椅您。

總結

最后給出的解決方案是外冀，做出兩個輸入框樣式A和B，以適應不同的頁面需求掀泳。

組件化設計并不是說組件越少越好雪隧，而是要依據(jù)具體的頁面環(huán)境以及團隊的組件規(guī)范，最重要的是要讓自己的組件體系變得清晰和易用员舵。

如果你對Sketch組件管理和團隊協(xié)作不了解膀跌，就趕快加入課程吧，《Sketch進階課-組件管理與團隊協(xié)作》固灵，掌握更高級的Sketch技巧捅伤，提升設計效率。