跟UI好好說話

　　程式設計師和UI之間，常常存在著“語言障礙”——其實就是慣用單位不同，導致語言不通，雞同鴨講眼碌碌。本文將以iOS裝置為例，做一回程式設計師與UI的翻譯機。
　　首先，我們來看一下iOS裝置的螢幕尺寸：

　　其實從上表就可以看出語言不通的根本原因就在於：程式設計師是用軟體尺寸(以邏輯點/PT為單位)來程式設計，而UI是按硬體尺寸(其實還有個“設計尺寸”)——也就是螢幕的實際物理尺寸(以畫素/PX為單位)來出圖。
　　蘋果在引入第一代Retina裝置開始後，為了不讓原有的應用程式在新的Retina螢幕上只佔半屏顯示，將應用程式繪製的所有內容都在內部乘以2，不需要作任何程式碼改動就可以適配Retina屏。所以程式設計師一般不會去管硬體尺寸，都是用軟體尺寸來交流。可UI不買這賬啊，他們用的都是用畫素來交流的。你要是跟UI說要一顆44*44的按鈕，那他肯定是給你一顆44*44px的。
　　當然你可以跟UI講清楚上面的規則，然後看誰妥協一下，要跟對方溝通時使用“外語”(乘以或除以相應的畫素密度)。但是更好的辦法是跟UI約定好，讓其使用一倍圖進行設計，再按相應倍數輸出，這樣溝通時就不需要換算了。還是回到上面的場景，那就變成UI在Sketch裡用一倍稿(375*667px的畫布) 畫了一顆44*44px的按鈕，然後輸出成88*88px(@2x)和132*132pc(@3x)的圖片，正好就是我們所需要的44*44pt。
　　細心的讀者可能已經發現，對於Plus系列機型，其硬體尺寸與軟體尺寸的比例實際上是2.608:1。也就是說，就硬體而已Plus系列並不是3倍的Retina屏，而就軟體而言卻是3倍大小。這意味著，應用程式使用的軟體螢幕尺寸414px*736px會安裝規則，首先對映為1242px*2208px的設計螢幕尺寸，再降低取樣縮小到適應1080px*1920px的實際硬體尺寸投射到螢幕上去，如下圖：