系統的講解下UI設計中的字型大小
做UI最常見的問題之一是我應該使用什麼大小的字型單位?也許是網站的,也許是個安卓應用,也有可能是個IPHONE或IPAD。
有人在想,這些東西能不能整合一下,搞個統一單位大小?我只能說很抱歉,現在這情況是不太可能,除非現在秦始皇爬起來做這麼一件事。
帶大家瞭解一下幾個常用的單位,分別是px、pt、sp和dp
現在高清螢幕的普及對設計師的規範造成了一定的干擾。”畫素”這個一直在用的單位現在要顧及到3種不同單位的挑戰,什麼點(points)啊、可縮放畫素(scaleable pixels)和無密度畫素(density-independent pixels),但是做為一名設計師最重要的事情是:
在使用Sketch、Figma和Adobe xd等設計軟體的時候,你都可以通過在文字框中輸入數字來控制字型的大小。不管你的單位是畫素或點什麼的,不用擔心用哪個,因為它最後軟體會在你匯出的時候換算成開發想要的單位。
什麼是畫素(PX)?
“畫素”是一個顯示呈現載體的術語,它是螢幕上最小的的平方光,也就是你家是由多少個1平面構成的。也就是螢幕裡一個小顆粒,它是指網站中的一個顯示單位。專業點說“畫素”的就是網站裡的“CSS畫素”,這是網站的計量單位,這是需要在網站程式碼裡輸入的數字,也就是開發者會在css裡輸入的程式碼:font-size:16px
什麼是點(PT)?
點也就是pt這個單位是蘋果公司產品的專用單位,在做IOS設計的時候,我們將用pt來表示。說實話,pt是個很好的單位,在硬體裡,1個點有時候變成四個畫素點(例如從IPhone4開始),後來有變成九個畫素點,(例如從IPhone X開始),不過最後被統一壓縮成6.81畫素點了。什麼IPhone 6+,7+,8+等,啊稀巴。
不過還是需要欣慰的,因為只要瞭解一個pt就可以,但是安卓就…啊稀巴。
什麼是可縮放畫素(DP)?什麼是無密度畫素(SP)?
先弄懂什麼是sp,其實sp可以理解為上面所說的pt,但是sp只能用於字型。dp是谷歌專門用在除了字型其他元素的單位,我不知道谷歌為什麼要這麼做,可能是為了證明自己比蘋果牛吧,也可能是要煩死那些有著喬布斯設計精神的設計師吧。抱歉,其實不是,他是為了顧及眼神不太好的人,設定他的手機字型比一般人的字型大個4倍,你仍然只用管用sp單位輸入1個數字就可以了。
好了,別多想了,只管知道個大概,知道怎麼用就行了,如果你想研究透,我覺的你可能是博士的料,畢竟小二本的我只能說這麼多了。