再談IOS、安卓、網(wǎng)頁設(shè)計的UI尺寸問題

各種屏幕的分別在我們開始解釋細節(jié)前，我們必須先定義討論的范疇。本篇文章主要專注在探討UI設(shè)計師如何處理各式各樣的屏幕種類；屏幕的大小多變，就算大小一樣，其細致度也有差，有的屏幕顆粒很粗，有的則細到眼睛看不到個別像素點，專業(yè)的設(shè)計師如何讓自己的設(shè)計在各種屏幕上達到近似的體驗?zāi)兀课覀円葟摹阜直媛省箍雌?。分辨率、像素密度分辨率一詞在各種領(lǐng)域的定義有細微的差別，在UI設(shè)計中，我們可以理解成「顯示器呈現(xiàn)影像細節(jié)的能力」。也就是說，成像單位越細小、越密集的屏幕，分辨率就越高。而大多數(shù)屏幕的成像單位是像素（Pixel），因此描述密度/分辨率的方法就是抓一段固定長度（通常是英吋），看看里面塞進了幾顆像素點，固定長度能塞越多顆，就代表這個屏幕的點越細。這就像我們計算人口密度時，會抓出一平方公里的地區(qū)，然后看看里面塞了多少人，就能描述人口密度了。舉個例子，現(xiàn)在蘋果發(fā)表了一支很奇葩的方形手機，屏幕長寬都只有一英吋，畫面大小是10×10 pixel，名稱叫做「iPhone Inch」：

庫克：「為了進一步與任天堂加深合作關(guān)系，蘋果再一次重新發(fā)明了手機?！埂负揽趷蹎选珕琛?！」全場起立鼓掌。
好的，這支手機的屏幕長寬都是1英吋、長寬各排列了10顆像素，顯然我們?nèi)绻朊枋銎聊挥卸嗉氈碌脑挘梢哉f：「屏幕的像素密度是每英吋10 pixel」，或者換句話說，「iPhone Inch的分辨率是10 ppi」。
等一下，ppi這單位是什么？意思就是「Pixels Per Inch，每英吋塞進了幾顆像素點（像素密度）」。由于市場反應(yīng)良好，反正蘋果做什么大家買就對了；來年蘋果老調(diào)重彈，又推出了s升級版—— iPhone Inch s：

「這是我們有史以來的手機，Amazing～」庫克語畢，全場歡呼不斷。接著播放產(chǎn)品介紹影片。在上一輪斗爭失勢遭到明升暗貶，淪為影片配音員的CDO Jony Ive操著一口迷人的英國腔開始介紹產(chǎn)品：「??我們經(jīng)過了徹底地重新設(shè)計，現(xiàn)在有金色版，讓每個人的個性能充分表達??」看來錢寧兄「re-design」的定義可能和大多數(shù)人不太一樣。接著庫克把保險業(yè)務(wù)Phil叫上臺，解釋硬件配置?！高@是我們史上的屏幕，像素點的密度提升到先前的兩倍，只要你目洨，它就是視網(wǎng)膜屏幕，讓你分辨不出像素點，售價只要$9999?！?img src="/upload/pic18/5ba8ec4cb96ca.jpg" alt="安卓UI設(shè)計尺寸規(guī)范"/>
好，既然長寬的像素點都提升為兩倍來到了20×20 pixel，那我們依照前面的說法，這塊屏幕分辨率就是20 ppi。OK，現(xiàn)在我們都會作運算了，讓我們暫且擱下上面的方塊手機，回到昔日榮光iPhone 7，拿尺來測量看看：

這支iPhone 7的屏幕寬度是2.3吋，橫向總共排列了750顆pixel，也就是說，每英吋塞進了750/2.3 ≈ 326顆pixel，所以我們會說「iPhone 7的分辨率是326 ppi」。關(guān)系式如下：

△分辨率關(guān)系式清楚了解何謂分辨率以后，現(xiàn)在來看看繪圖時的狀況吧。iOS的pt單位讓我們繼續(xù)稍早的故事，由于蘋果又再一次重新發(fā)明手機，公司里的設(shè)計師和工程師可苦了，又要做新的App來上架，PM立刻準備好了兩代機種給工程師測試：

「好，美工，你要在畫面上放什么東西？」工程師一臉不耐煩地說。
「那個??我不是美??」設(shè)計師還沒說完，就被大吼一聲：
「??？你連分辨率都要人教，還說自己是設(shè)計師！」呵呵，這工程師一定南部來的。「好啦??我要在畫面上放一條分隔線，灰色的?！?br/>「粗細呢？」
「1 px。」
「呵呵！就說你是美工，說要1px？來，你自己看看這是什么」

怎么會兩臺手機的畫面不一樣呢？原來是因為，當(dāng)一個屏幕分辨率（像素密度）越高的時候，像素點就會越密集、越小顆，因此我們使用px當(dāng)單位來做UI的話，就會發(fā)生不同分辨率的屏幕呈現(xiàn)不同的狀況，那這要怎么解決呢？我們繼續(xù)看下去。工程師：「來，美工，我跟你說，我現(xiàn)在跟你講好一件事，你看一下這兩支手機的畫面?！?img src="/upload/pic18/5ba8ecb0deb5c.jpg" alt="移動端UI設(shè)計知識"/>
「看到左邊銀色機子的小紅點沒？」
「有喔～」
「現(xiàn)在開始，以銀色機子的『1顆px』為基準，這顆紅點的大小，就當(dāng)成新的標(biāo)準尺寸單位，你就叫它『1 pt (point,點)』，這個點點不管搬到哪里就是那么大，我現(xiàn)在把它搬到金色的機子上??」
「你看，在金色機子上，紅點為了維持一樣的大小，他的長/寬就會各涵蓋到2顆px，所以原本銀色機子上『1 pt』等于『1 px』，但到了屏幕密度兩倍的地方，『1 pt』的大小就會代表『2 px』，我們從今以后就不要用px當(dāng)單位了，這樣好不好？」
「好喔～但是我弄懂以后你不能再叫我美工了！」
「好啦！那剛剛的分隔線可以幫我弄粗一點嗎？」
「你要多粗？」
「就粗『一點』??！」
「??」所以啊，一個新單位：pt（point）的誕生，就是為了解決不同的屏幕上，px大小會變來變?nèi)サ膯栴}，現(xiàn)在先讓工程師和設(shè)計師領(lǐng)個便當(dāng)休息一下，我們來看看應(yīng)用題：
由左至右，分別為iPhone一代、iPhone 4，與iPhone 6 Plus蘋果推出一代iPhone一直到現(xiàn)在的iPhone 7，屏幕的「像素密度」有兩次大變化（注意是密度變化喔！我們在這里不管屏幕的大?。?，一次是在iPhone 4的時候，屏幕尺寸不變，但像素密度變成兩倍，來到了326 ppi，賈伯斯稱呼其為「視網(wǎng)膜屏幕（Retina Display）」。而第二次是iPhone 6推出時，也一并出現(xiàn)了大尺寸的iPhone 6 Plus，Plus不只是大，而且像素密度還變成了三倍，目前蘋果所有的產(chǎn)品里，只有iPhone 6/7 Plus擁有三倍密度的屏幕。細心的你可能發(fā)現(xiàn)Plus 401 ppi明明就不是初代iPhone 163 ppi的三倍，那怎么會說是三倍密呢？這個為了避免你吸收來不及，先保留待下次解釋，總之你先記住，iPhone 6/7 Plus是目前擁有三倍密度屏幕的機種。好，我們回憶一下剛剛的小劇場：

工程師在一個屏幕上放了一顆1 px的小紅點，說那個大小叫做「1 pt」，這個點拿到右邊的新機上，「大小不變」，但長寬變成了2px，所以如果以后用「pt」來當(dāng)大小單位的話，就不用再管那個變來變?nèi)サ膒x了。在iOS的世界也是這么運作的，我們在初代iPhone上標(biāo)出一顆紅色的pixel，然后說它的長度（或?qū)挾龋┙凶觥? pt」，這顆紅色的點拿到有視網(wǎng)膜屏幕、密度兩倍的iPhone 4上，它的長度就會涵蓋了視網(wǎng)膜屏幕上的2px；若拿到三倍密度的Plus上面，猜猜這個小紅點的長度會涵蓋幾px？如果你知道為什么會是3px，那恭喜你真的完全弄懂了背后的機制，就是這樣子而已，現(xiàn)在我們來看看Android。Android的dp單位在Android的世界里，手機廠牌型號好多好多，屏幕大小和密度也是一團亂；Google身為教主，當(dāng)然要制訂一套規(guī)則來一統(tǒng)天下，方法呢，就是制定好幾個「密度等級」：

如果你的屏幕分辨率落在160 ppi左右的話(注)，我們就稱之為「MDPI (中等分辨率)」；那如果你的屏幕分辨率落在320 ppi左右呢，就叫做「XHDPI，Extra-High (超高分辨率)」??其余按圖類推。注：Android用的單位叫dpi，但為了溝通方便，我們都還是用ppi接著就跟蘋果一樣。學(xué)人精Google說，我們把MDPI的屏幕定為基準點，它是一倍像素密度（上頭寫的1x），我們在這顆屏幕上挑一顆pixel，把它弄成紅色，接著把這個小紅點移到XHDPI的2x屏幕上的時候，它就會變成涵蓋2px了，所以以后就把這顆小紅點的尺寸變成新單位，iOS叫做「pt」是吧？好，那這個新單位我叫它「dp (Density-Independent Pixels)」！所以，iOS的pt和Android的dp其實是相同的運作原理，使用它當(dāng)單位來做圖、溝通，就可以避免使用px造成的偏差了。網(wǎng)頁設(shè)計里的pt單位除了iOS和Android外，如果也有接觸網(wǎng)頁設(shè)計的朋友，可能知道CSS里也有pt這個單位可以使用，但在這里先給結(jié)論：CSS的pt單位和我們前面所提的iOS pt其實是沒有關(guān)系的，其運作方式也不相同，所以硬要放在一起想就會永遠搞不清楚啦！pt這個單位詞，其實最早源自于傳統(tǒng)的鉛字印刷，是用來表示鉛字塊的尺寸，在印刷和平面設(shè)計的世界里，1 pt = 1/72英吋；而CSS之所以有pt這個單位，其實是要把網(wǎng)頁印刷/打印出來的時候用到的。在網(wǎng)頁設(shè)計里，屏幕顯示和實體印刷，可以擁有兩份不同的CSS來決定樣式；習(xí)慣良好的網(wǎng)頁設(shè)計師，會特別寫一份CSS，在印刷的時候給計算機使用（例如拿掉背景圖、字體顏色改成灰階，比較省墨水），而實體世界的字級單位：pt就會在這時派上用場，所以其實CSS里的pt單位，不是讓你拿來在屏幕上使用的喔！適合屏幕顯示的CSS單位有em、rem、px ??等等，有興趣的朋友可以再自行研究。

網(wǎng)站欄目：再談IOS、安卓、網(wǎng)頁設(shè)計的UI尺寸問題
文章來源：http://www.muchs.cn/news17/186817.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、面包屑導(dǎo)航、做網(wǎng)站、營銷型網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)