sketch-canvas-smaller-1

@JingDesign?:為什么Sketch中預置的畫板尺寸比真實分辨率???這個問題被成百上千的初學者問起過,每次都要費勁口舌來解釋,可是靜電實在架不住每天兩三遍甚至更多人問起同樣的問題。那么,就在這篇文章中,讓我們好好來解釋一下,為什么預置畫板會這么小。

事出有因,Sketch錯了嗎?

有太多太多剛剛上手sketch的小伙伴們都有這樣的問題,為什么我在Sketch中建立畫板,軟件預置的Artboard尺寸總是那么小呢?比如iphone6的真實分辨率是750-1334像素,但是sketch中的Artboard尺寸居然是375-667像素。同樣其他機型的預置尺寸也有問題,是sketch出錯了嗎?

PX和PT,別傻傻地分不清

我們必須了解最最基本的原理,才能在設計中以不變應萬變。首先我們來普及兩個度量單位 —— PX和PT。PX大家可能比較熟悉,就是像素,英文pixel的簡稱。靜電做最最通俗的解釋,請找一個放大鏡(不是電腦中的放大鏡,是真實的放-大-鏡),然后對準自己面前的顯示器或者手機屏幕觀看,大部分顯示器會在放大鏡下出現一個一個的點。這就是我們平時所說的像素的概念。在一臺物理分辨率為1080-1920的顯示器中,橫向分布1920個點,縱向則有1080個點。這些點通過顯示器的光學特性,為我們組成不同的圖像。

jd20150813 (2)

請注意, 在不同尺寸的顯示器上,這些點的單位面積并不是一樣的。比如一臺22英寸的1080p液晶顯示器與一臺同樣分辨率的27英寸的液晶顯示器,我們通過仔細觀察,可以發現這兩臺顯示器的像素分布。直觀感受就是,27英寸1080p分辨率的顯示器的顯示效果明顯遜于22英寸1080p顯示器的效果,比如顆粒感嚴重等等。 一個重要的原因就是,兩臺液晶面板中的“像素”顆粒大小不一。

由此可見,像素這個單位是一個相對單位,我們不能用厘米,毫米等等這些絕對度量單位來衡量他的長度或者寬度,因為,1像素只代表一個單位的“點”。

另一個重要單位是PT,這個單位也是iOS開發過程中使用的單位,與px這樣的相對單位不同,PT(Point)是一個絕對單位,中文名字是“磅因(或者磅)”,1PT等于1/72英寸。我們同樣用簡單直觀的例子來演示。

如果你手頭有兩部不同型號的iPhone,比如iphone6,iphone5,或者iphne4。靜電的推薦是用一部ip6和一部ip5或者ip6 plus,打開同樣一款應用。同時準備好一把尺子。

比如我們使用最多的QQ音樂,打開它,使用尺子分別測量最上方title“音樂館”文字的尺寸。經測量,音樂館文字的寬度為8mm,此時打開iphone6plus或者不同尺寸的ios手機,同樣測量它的尺寸,我們發現,“音樂館”文字的尺寸也約為8mm左右。如果大家覺得此方法并不合適,可以請iOS開發人員分別寫兩個針對不同尺寸機型適配的同一個文件,并在兩部手機安裝,確保這個文件中的字體使用一個字號,比如30PT。在兩個手機中運行并用尺子測量,我們發現他們的物理尺寸完全一樣。

jd20150813 (3)

請大家記住一點,px是相對單位,pt為絕對單位(類似單位為厘米,毫米等等)。在不確定屏幕密度的情況下,px與pt沒有任何可比性。

為什么使用3XX像素作為sketch設計稿的基準寬度?

原因一

對于px與pt如何轉換,涉及原理已經超出本文范圍,這里簡單的告訴大家,當dpi=160的時候,1dp=1px=1pt(作者經驗結論)。那么在這里我們要引出為什么使用375-667這樣的尺寸來做設計了,因為在這種情況下,也就是mdpi的分辨率(約320-480)時,1dp=1px=1pt。

簡單來計算下,當分辨率增大,比如增大到640-960px時,在密度不變的情況下,2px=1pt,因為像素點密集了,所以需要更多的點才能充滿單位物理尺寸。這也就是為什么我們會覺得iphone4的畫面比3GS的畫面要細膩的原因,因為dpi(ppi)升高了。(dpi或者ppi為每英寸的點或者像素,代表密度。)

所以,320這個寬度(3XX)就作為基準寬度,也叫做一倍尺寸沿襲下來。因為使用1作為基數,換算確實方便。

下圖是設計稿輸出尺寸與分辨率對照表。

jd20150813 (4)

原因二

對于iOS來說,同樣沿襲了這樣的概念,與安卓不同,320寬的基準分辨率下導出的素材為@1x,也叫做一倍圖。那么在iphone4,iphone5或者iphone6上使用的圖則是@2x,也叫做二倍圖,同理,iphone6 plus為@3x三倍圖。大家應該都知道對應分辨率與導出圖片的對應關系。如果使用640寬或者750寬為基準作圖,當然不是不可以,只不過我們在輸出@3x圖的時候,是不是要乘以1.5呢? 如果你一定要用@3x三倍圖的分辨率作圖,那么最終要生成二倍圖的時候,是不是要把輸出尺寸乘以三分之二呢?

如果是1.5還好,那么三分之二到底是什么鬼的倍數,0.6666666?有強迫的設計師真的看的過去么?

但是,如果我們使用一倍圖設計,那么1X2=@2x,1X3=@3x, 多么的簡單方便又容易理解不是么?

再加上sketch是全矢量繪圖軟件,不管你怎么放大縮小,導出的位圖也是不會虛的。

原因三

在開發工程師眼中,你如果使用640的分辨率作圖,那么按原大小標注設計稿中的尺寸的話,他們同樣在開發環境中是要換算為一倍尺寸的,比如你標注了字號為40px,那么最終開發工程師寫在代碼里的就是20pt,除以2的關系。

但是呢,如果使用一倍基準分辨率作圖,那么就不用除以2啦,所有尺寸開發工程師直接拿過去隨取隨用,多么方便簡單。相信之前跟隨靜電的xcode教程做過demo的小伙伴,一定對xcode中的尺寸設定印象深刻對吧。

要了解原理,建議大家用一用xcode,親自體驗一下開發工程師工作的原理,相信你的這些問題都可以迎刃而解。

使用一倍基準分辨率作圖 —— 你的明智之選

sketch作為一款純矢量的移動端UI設計軟件,不管是從設計還是到后期與開發工程師的配合方面,都嚴格遵從開發原理,這種設計方法可以最大限度保證設計稿的復現,同時也可以減小文件體積和系統資源消耗,不管是從哪個方面看,都是設計師制作UI界面的明智之選。不過,基于位圖輸出的photoshop就沒這方面的福利了,雖然photoshop CC 2015加入了多畫板功能,不過然并卵。一個文件中放置五六張畫板對于sketch來說無比輕松,且輸出文件只有幾M,但反觀photoshop,動輒幾個G的文件體積和巨大的系統資源消耗,恩哼,你懂。

最后總結一下原因,設計師使用一倍基準尺寸作圖,主要是方便,單位轉換方便,輸出切圖方便,理解簡單。對于工程師,他們不用再進行復雜的換算,有助于完美復現設計稿。

因此,不管是國內還是國外,越來越多的設計師開始使用一倍基準尺寸設計移動界面,還在猶豫?就差你了。如果你身邊的朋友還在糾結于這個問題,特別是那些剛剛從photoshop轉到sketch的小伙伴,速度把這篇文章轉發給他們看吧。

jd20150813 (5)

Sketch教程合集持續更新中:

  1. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(一)》
  2. 《SKETCH設計教室!從零開始學APP設計利器SKETCH(二)》
  3. 《SKETCH設計教室!帶你了解超好用的SKETCH插件》
  4. 《想要一稿過不加班?SKETCH絕配神器MIRROR搶先體驗》
  5. 《超實用!SKETCH大師最常用的3個實戰小技巧》
  6. 《前端神器!為網頁設計而生的15個優質SKETCH插件》
  7. 《SKETCH新手指南!10個幫你UI設計提速的SKETCH使用技巧》
  8. 《超能陸戰隊!手把手教你用SKETCH繪制萌萌噠的大白》

作者:@JingDesign

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量99萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的”福利”嗎?
添加 優秀網頁設計 微信號:【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏 6

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
相關推薦
2 收藏