在Symbol中改變文字樣式，你的Sketch應該這麼做
最近比較忙，導致更新進度慢了下來。由於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技巧，提升設計效率。
推薦閱讀：
