正文

ui設(shè)計比例（ui設(shè)計比例不對）

發(fā)布時間：2023-04-28 02:40:43 稿源：創(chuàng)意嶺閱讀： 1630

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計比例的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、軟件開發(fā)里的編程人員與ui設(shè)計人員的比例大概為多少？ui設(shè)計人員的工資比編程人員低多少？
2、移動端UI設(shè)計的PPI,邏輯像素,作圖尺寸及適配
3、手機(jī)UI設(shè)計的基本規(guī)范
4、ui設(shè)計需要會dpi ppi px dp換算嗎

ui設(shè)計比例（ui設(shè)計比例不對）

一、軟件開發(fā)里的編程人員與ui設(shè)計人員的比例大概為多少？ui設(shè)計人員的工資比編程人員低多少？

這需要看你的項(xiàng)目大小了，項(xiàng)目是什么性質(zhì)了，不同的項(xiàng)目不同的做法

一個ui負(fù)責(zé)一套軟件界面設(shè)計就夠了（算是中小軟件、中小應(yīng)用了），大的軟件最多增加一兩個，有一些公司，一個ui設(shè)計人員負(fù)責(zé)幾套軟件界面，算是工作飽和度很高，一般算法為一個ui設(shè)計配三到五個程序員加一個pm、一個測試人員，就可以組成一個項(xiàng)目開發(fā)小組。

工資這個算法來說，不一定會比程序員低很多的，除非是剛剛畢業(yè) 出來做ui的

寫html的程序員工資不一定會比做ui設(shè)計人員的工資低，有可能還會高很多。

二、移動端UI設(shè)計的PPI,邏輯像素,作圖尺寸及適配

說明：本文主要從UI設(shè)計師角度，試圖回答在移動產(chǎn)品UI設(shè)計過程中會遇到的以下問題：

1、如何理解「像素密度」和「邏輯像素」兩個概念？

2、面對琳瑯滿目的手機(jī)型號和屏幕大小，應(yīng)該選擇何種倍率和尺寸進(jìn)行作圖？

3、基準(zhǔn)設(shè)計稿完成后，如何進(jìn)行屏幕適配？

說明：本章涉及的概念有：屏幕尺寸、PPI、DPI、物理像素。

諾曼在《情感化設(shè)計》一書中提到愉悅感的四大類，其中第一類是：生理的愉悅，也就是本能的感官體驗(yàn)。畫質(zhì)的清晰、細(xì)膩、逼真是視覺感官體驗(yàn)的一部分。而畫質(zhì)是由屏幕性質(zhì)決定的。

當(dāng)前市場手機(jī)型號眾多，如何判斷不同屏幕清晰度質(zhì)量的好壞？這里，我們需要引入一個重要概念。

我們知道，屏幕是由很多像素點(diǎn)組成的，每個點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們看到的畫面。當(dāng)我們眼睛的視桿細(xì)胞和視錐細(xì)胞接收到的光線越多，我們感知到的畫面就會越豐富。而如果需要光線多，就需要保證像素點(diǎn)夠多。

我們在計算「人口密度」時，會抓出一平方公里的地區(qū)，看里面塞了多少人，據(jù)此，判斷人口的密集程度。同理，我們可以抓出一英寸的界面，看里面塞了多少個像素點(diǎn)，判斷像素的密集程度，這就是「像素密度」。

前面提到，「像素密度」表示一英寸界面中的像素點(diǎn)數(shù)，所以它跟兩個參數(shù)有關(guān)：界面尺寸和像素。

一般手機(jī)的出廠配置信息中都標(biāo)有「屏幕尺寸」，指的是屏幕的對角線長度，單位是inch（1英寸=2.54厘米，大約是食指最末端那根指節(jié)的長度）。設(shè)備長、寬的實(shí)際長度，即「物理尺寸」，用勾股定理計算可得屏幕尺寸。

我們也可以查到設(shè)備的分辨率，即在橫縱切上的像素點(diǎn)數(shù)，也叫「物理像素」，單位是px。

拿到這兩個參數(shù)，就可以計算出「像素密度」。

還有一種計算方法，是先算出「物理像素」的平方和，再開根號，最后除以「屏幕尺寸」。

從計算方法可以看出，像素密度就是pixels per inch，簡稱：PPI。

值得注意的是，在Android系統(tǒng)中，除了像素密度PPI，還有一個DPI，也是「像素密度」，全名為：Dots per inch，兩者的區(qū)別是：

PPI：表示物理像素密度，是客觀存在不會改變的。

DPI：表示軟件像素密度，是軟件參考了ppi后，人為指定的一個固定值，寫在系統(tǒng)出廠配置文件上，保證在某一個區(qū)間的ppi在軟件上使用同一個值，它是安卓特有的。

所以，可能有幾款安卓手機(jī)的PPI不同，但是DPI相同。比如，有3款相同分辨率不同尺寸手機(jī)的ppi可能分別是430,440,450，那么在Android系統(tǒng)中，可能dpi會全部指定為480，以保證相同分辨率手機(jī)的表現(xiàn)一致。

蘋果手機(jī)型號有限，所以沒有DPI的概念，全部用PPI表示。

「像素密度」是連接數(shù)字世界和物理世界的橋梁。它是設(shè)備的固有屬性，反映了屏幕呈現(xiàn)影像細(xì)節(jié)的能力。像素密度越高，屏幕顯示的密度越高，擬真度就越好。Retina屏比普通屏清晰，就是因?yàn)樗南袼孛芏确艘槐丁?span style="display:none">Bb3創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司

我們可以根據(jù)「像素密度」判斷屏幕顯示質(zhì)量的好壞。iPhone 3gs和iPhone 4物理尺寸相同，但是后者的ppi為326，是前者163的兩倍，分辨率也是兩倍的關(guān)系，說明4的呈像能力更佳。同時也可以看出，手機(jī)屏幕的物理尺寸和像素尺寸是不成比例的。

總之：只要兩款手機(jī)的「像素密度」相同，它們的顯示「精細(xì)程度」就是相同的。

說明：本章涉及的概念有：邏輯像素、倍率、邏輯像素密度。

假如我們在界面A（1英寸，4x4 px）上放一個1×1像素的紅方格，然后把它移動到同樣尺寸、2倍像素密度的界面B（1英寸，8x8 px）上，如下圖所示。

在界面B上，紅方格還是涵蓋了1×1像素，但是實(shí)際的物理尺寸卻變小了。這是不符合一般人的常識的，為什么同一個內(nèi)容在同樣尺寸的界面上顯示不一樣？

如何解決這個問題？我們可以試著分析一下：

對比界面A和B，B的「像素密度」更大，「界面-物理像素」也更大。

紅方格在移動過程中，方格的「物理像素」不變，方格的「物理尺寸」變小。

以上因素中，「物理尺寸」是我們唯一肉眼可以觀察到的屬性。我們的目標(biāo)是讓紅方格的變化過程符合常識，也就是保持紅方格的「物理尺寸」不變。根據(jù)「像素密度」的計算公式，紅方格物理尺寸一定時，當(dāng)像素密度變成2倍，在界面B中的紅方格的物理像素就必須變成原來的2倍。

物理尺寸一樣，紅方格在界面A和界面B中顯示的內(nèi)容物的多少就是一樣的。為了標(biāo)記這種“不同分辨率界面呈現(xiàn)同樣多內(nèi)容顯示效果”的能力，我們引入一個抽象概念，它就是「邏輯像素」。我們約定把界面A的物理像素作為基準(zhǔn)，界面B可用對應(yīng)的像素乘以倍數(shù)得出，A和B的顯示范圍是一樣的。這個基準(zhǔn)就是邏輯像素。

現(xiàn)在，我們再次把紅方格，從界面A移到界面B，因?yàn)榻缑鍮的像素密度是界面A的2倍，為了紅方格在兩個界面中肉眼可見的大小排版一致，根據(jù)公式，紅方格在界面B中占據(jù)的物理像素是界面A中的2倍，如下圖所示：

邏輯像素作為一組基準(zhǔn)手機(jī)的分辨率尺寸，為了表達(dá)方便，需要有統(tǒng)一的單位。

由于iOS和Android的開發(fā)工具不同，邏輯像素在兩個平臺的單位名稱也不同，iOS是pt, Android是dp, 設(shè)計師可以簡單理解為：pt=dp

iOS 的 pt ：point 表示點(diǎn) 。

Android 的 dp ：Density-independent Pixels，指密度無關(guān)像素。

計量單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。

「邏輯分辨率」就是用邏輯像素描述屏幕的分辨率；「邏輯像素密度」是用“屏幕像素密度”相對于“基準(zhǔn)屏幕密度”的倍數(shù)表示，即相對密度。

假設(shè)「邏輯像素密度」為n，那么 1 pt = 1 dp = n px。具體單位之間的換算關(guān)系隨倍率變化：

@1×倍：1pt=1dp=1px

@1.5×倍：1pt=1dp=1.5px

@2×倍：1pt=1dp=2px

@3×倍：1pt=1dp=3px

@4×倍：1pt=1dp=4px

可以把「邏輯像素」和「物理尺寸】相關(guān)聯(lián)，在分辨率較低的手機(jī)中，可能1pt=1px,而在分辨率較高的手機(jī)中，可能1pt=2px，這樣的話，一個108*108pt的控件，在不同的手機(jī)中就能表現(xiàn)出肉眼觀看的差不多的大小，只是分辨率高的展示的更加清楚。如下圖所示。

知道了邏輯像素和單位，實(shí)際「物理像素」的計算公式：

iOS的分辨率：px=pt * 倍率.（其中pt是邏輯像素尺寸，iOS常用倍率為@2×，@3×）

Android的分辨率：px=dp * (dpi / 160). (其中dp是邏輯像素尺寸, dpi是邏輯像素密度，160是規(guī)定的@1×的基準(zhǔn)邏輯像素密度)。

「邏輯像素」是人為約定的，會影響屏幕顯示內(nèi)容的多寡，與影響清晰度的「像素密度」無關(guān)。

物理分辨率：硬件所支持的。

邏輯分辨率：軟件可達(dá)到的。

當(dāng)兩個設(shè)備邏輯像素一致，顯示容量就一樣；當(dāng)邏輯像素不一致時，尺寸大的那個顯示的內(nèi)容多。

比如，以iPhone 3gs 和iPhone 4 為例，兩者的物理尺寸一致，邏輯分辨率一致；物理分辨率3gs是320×480, 4是640×960，后者無論物理分辨率，還是像素密度都是前者的2倍。因?yàn)槲锢矸直媛什煌?的硬件支持的呈像質(zhì)量更高；因?yàn)檫壿嫹直媛氏嗤?，兩者的軟件可達(dá)的容納物的多少是一致的。

再比如，有兩臺Android設(shè)備的屏幕尺寸為480x800px和720x1280px，它們分別屬于hdpi和xhdpi，除以各自倍率1.5倍和3倍，得到邏輯像素為320×533dp和360×640dp。很顯然，后者更寬更高，能顯示更多內(nèi)容。

邏輯分辨率的三大作用：

1、作為屏幕顯示內(nèi)容多少（也就是容積）的表征。邏輯像素尺寸大，顯示的內(nèi)容就多，和設(shè)備實(shí)際的分辨率尺寸、像素密度和倍率都無關(guān)。

2、保證控件在不同屏幕間切換符合人的常識和預(yù)期：屏幕顯示內(nèi)容的多少，和分辨率、像素密度無關(guān)，和屏幕的物理大小有關(guān)，這也符合人們的常識：屏幕越大，顯示內(nèi)容越多。

3、應(yīng)用于設(shè)計和開發(fā)：我們不需要關(guān)注屏幕的像素密度，只需要關(guān)心邏輯分辨率即可，方便設(shè)計溝通。

說明：熟悉了概念，下面進(jìn)入實(shí)操：UI設(shè)計作圖。

UI設(shè)計過程中，在我們決定采用哪一種手機(jī)屏幕的尺寸作圖前，應(yīng)該首先考慮選擇何種倍率呢。

因?yàn)檎恰副堵省?，把大大小小的屏幕拉回到了同一水平線，得以保證一套設(shè)計稿適應(yīng)各種屏幕。

另外，在為開發(fā)提供的設(shè)計資源圖片中，同一張圖通常有兩個，甚至三個尺寸。文件名有的帶@2x或@3x字樣，有的不帶。其中@2x,@3x就表示是倍率。不帶的用在普通屏上，帶的用在Retina屏上。只要圖片準(zhǔn)備好，iOS或Android會自己判斷用哪張。

我們可以直接選擇邏輯像素尺寸（也就是x1倍率）進(jìn)行設(shè)計作圖。

但是，x1倍率的設(shè)備目前差不多已被淘汰。而我們通常會將做好的設(shè)計圖導(dǎo)入對應(yīng)設(shè)備查看效果，目前主流設(shè)備都采用x2、x3倍率，x1的設(shè)計圖放入主流設(shè)備查看效果必須進(jìn)行放大，粗略的放大會導(dǎo)致失真，影響效果查看。所以x1倍率在最終查看效果圖時存在缺陷。

那x3倍率的怎么樣？

在與程序員溝通、設(shè)計切圖時，我們都會進(jìn)行倍率之間的換算。x3切圖換算不方便；

另外，程序員拿到標(biāo)注圖后，需要將其中的px轉(zhuǎn)換成pt進(jìn)行開發(fā)。（1）情況1：x2倍率下，將列表高120px, 頭像高102px的標(biāo)注轉(zhuǎn)換成邏輯像素后為：60pt,52pt，兩者是無法居中對齊的，會有1pt誤差，最終設(shè)備呈現(xiàn)效果就會有2px的像素偏移；（2）情況2：假如將x3倍率的100px轉(zhuǎn)換成邏輯像素，由于邏輯像素與物理像素一樣，必須取整數(shù)，程序員只可能在33pt和34pt之間選取一個數(shù)值。如果采用33pt，最終呈現(xiàn)在設(shè)備上的尺寸是99x99px, 有1px誤差；如果采用34pt，最終設(shè)備呈現(xiàn)的尺寸是102x103px, 有2px誤差。所以，為確保設(shè)計圖的落地效果，我們需要：

在x1倍率下，尺寸必須為偶數(shù)；

在x2倍率下，尺寸必須為 4的倍數(shù)；

在x3倍率下，尺寸必須為 6的倍數(shù)。

可以看出，x3倍率的執(zhí)行難度最高。

通過以上，我們也可以排除“x3倍率”作為我們的作圖選擇。

因?yàn)閤1倍率、x3倍率都存在明顯短板，常用倍率只剩下x2倍率。鑒于x2倍率各方面都比較均衡，所以：

選擇x2倍率作為我們的作圖尺寸。

選定作圖倍率后，我們就可以選擇具體的作圖尺寸。

目前iPhone的主流機(jī)型在x2倍率下的尺寸有5種，如下圖：

其中，iPhone X 可以認(rèn)為是iPhone 6 的加長版；iPhone XR 可以認(rèn)為是iPhone 6P的加長版。如下圖：

所以這4種尺寸可以歸為2個類型：寬度為750和828的。

而Android系統(tǒng)邏輯像素已統(tǒng)一為360x640，x2倍率就是：720x1280.

最后，總結(jié)出雙平臺@2x倍率，共計4種屏幕尺寸。

大屏?xí)r代，用小屏為設(shè)計基準(zhǔn)顯然不合時宜。我們一般選擇中間尺寸為基準(zhǔn)進(jìn)行適配，因?yàn)閺闹虚g向上或向下適配，調(diào)整幅度最小。

中間尺寸有兩個分別是iOS和Android的，要選哪一個？

大多數(shù)設(shè)計師日常用的都是iPhone，對Android開發(fā)可能了解不夠；同時Android驗(yàn)收不太受重視，設(shè)計師對Android的容錯率較高，這也導(dǎo)致Android端常常容易出問題。根據(jù)“哪里問題多，從哪里著手”的原則，可選擇以 720×1280 作為設(shè)計基準(zhǔn)。

但是選擇750×1334也沒有毛病，很多比較傾向于iOS設(shè)計。兩者都可以“一稿適配雙平臺”。

當(dāng)然，很多團(tuán)隊(duì)都是同時出iOS和Android兩套設(shè)計稿，那就可以：

同時把 750×1334 px 和 720×1280 px 作為設(shè)計基準(zhǔn)。

為了發(fā)現(xiàn)作圖尺寸和設(shè)計規(guī)范之間的關(guān)系，我們對比不同倍率的屏幕控件尺寸：

發(fā)現(xiàn)：控件高度隨倍率等比放大/縮小。

（其中iPhone Xs Max只不過頂部狀態(tài)欄在原來的20pt基礎(chǔ)之上增加了24pt變?yōu)?4pt，底部增加34pt的主頁指示器。）

相同倍率，對比控件尺寸：

發(fā)現(xiàn)：相同倍率，控件大小不變。頁面尺寸變化，不會對控件大小產(chǎn)生影響。

綜上得出：控件大小只隨倍率變化，與實(shí)際作圖尺寸無關(guān)。也就是說：

作圖尺寸對設(shè)計規(guī)范沒有任何影響，設(shè)計規(guī)范就是組件規(guī)范。

說明：開始作圖后，我們開始考慮更多的細(xì)節(jié)問題。

什么是適配？

就是讓同一套APP的UI設(shè)計，在不同尺寸分辨率比例的「移動終端設(shè)備」上都能正常顯示。為此需要根據(jù)不同機(jī)型對構(gòu)成界面的組件進(jìn)行的一系列調(diào)整。

為什么要適配？為了在多樣性的設(shè)備環(huán)境中追求體驗(yàn)的一致，保持理想的展示效果。適配只看3個參數(shù):

渲染像素——屏幕截圖的圖片尺寸，單位 px

邏輯像素——程序員開發(fā)所用尺寸，單位 pt

倍率——渲染像素/邏輯像素得到的倍數(shù)關(guān)系，常見倍率有@2x、@3x。倍率決定切圖。

界面元素按照屏幕大小整體等比例縮放，一般是界面版式特殊，布局不能變化的情況。比如圖片墻、圖片列表。適配時，控件尺寸大小隨屏幕寬度變化自適應(yīng)。屏幕越寬，單屏顯示內(nèi)容越少。

注意：界面縮放過程中，要保證資源圖片在拉伸后的清晰度，避免降低產(chǎn)品品質(zhì)。

對局部控件做調(diào)整，進(jìn)行縮放或自適應(yīng)。比如，圖片列表控件中局部圖片的放大，文字列表控件文字長度的自適應(yīng)。

如果界面不適合拉伸，或界面本來就有很多可擴(kuò)展區(qū)域，可考慮將增加的空間分配到這些區(qū)域，增加元素的間距。比如，九宮格列表。

還有一些滿屏界面，比如啟動圖、音樂播放器、活動H5頁等。因?yàn)轱@示屏寬高比不同，拉伸會導(dǎo)致形變?？梢酝ㄟ^調(diào)整背景間距增加延展性。

我們平常講的適配常常都是指寬度的適配，因?yàn)橐话憬缑娴膬?nèi)容總是在縱向存在超過一屏的滾動內(nèi)容，可以不斷往下滾動，所以縱向的適配設(shè)計常常被忽略。

但是，全面屏的出現(xiàn)，使我們不得不正視這個問題。因?yàn)槿嫫羷⒑：推聊粓A角的問題，導(dǎo)致整體高度的變化，進(jìn)而影響了比例的變化。

首先，iPhone全面屏出現(xiàn)了劉海和屏幕圓角設(shè)計，我們需要重新定義「安全區(qū)域」，確保頁面內(nèi)容不能超出安全區(qū)域。

具體的安全區(qū)高度=屏幕高度-44-34（單位：pt），如下圖所示

以下就頂部、底部和滿屏界面進(jìn)行適配。

頂部區(qū)域，非全面屏狀態(tài)欄高為20pt, 全面屏狀態(tài)欄高為44pt, 兩者存在24pt, 在設(shè)計頂部時，需要就差值作出適配。

一般頂部區(qū)域主要放置的控件以及應(yīng)對策略：

底部區(qū)域用于手勢進(jìn)入主屏或切換應(yīng)用。如果將觸發(fā)交互行為的按鈕放在屏幕底部，會破壞APP的操作體驗(yàn)。除了一些無操作的信息流可以不用另外設(shè)置，常規(guī)做法都是將底部操作區(qū)全部提高34pt。

上文已經(jīng)提到，正常全屏適配的常規(guī)做法就是間距調(diào)整，全面屏依然適用。需要注意的是一些全屏的視頻播放，需要控制在安全區(qū)域內(nèi)。

馬上即將迎來折疊屏手機(jī)，折疊屏的適配也需要納入考慮范圍。目前有華為和三星兩家手機(jī)廠商即將發(fā)布折疊屏。相關(guān)尺寸參數(shù)如下：

目前淘寶設(shè)計推薦的方法是，采用內(nèi)容流動的適配方式。

具體需要等正式上市，再進(jìn)行專門適配。待續(xù)……

說明：以下提供iOS和Android兩個平臺一些常見的手機(jī)型號、屏幕尺寸、分辨率等參數(shù)。

iOS常用的邏輯像素有：320×568 pt（5/5c/5s/se），375×667 pt（6/6s/7/8），375×812pt（X/Xs），414×736 pt（6p/6sp/7p/8p），414×896pt（XR/Xs Max），常用倍率有：@3x，@2x.

根據(jù)友盟數(shù)據(jù)，目前iPhone使用最多的是6/6s/7/8的750×1334px屏幕,倍率為2，邏輯像素320x667 pt。上升勢頭最猛，未來有望登上第一的是6p/6sp/7p/8p的1080×1920px屏幕。倍率為2，邏輯像素414x736 pt。

注意：iphone 6plus適配中，有設(shè)計版，物理版，放大版：

因?yàn)閜lus屏幕有1080個像素點(diǎn)，但截屏后發(fā)現(xiàn)圖像是1242像素，就是在一個物理有1080個像素點(diǎn)的屏幕里塞了個1242像素的內(nèi)容。而放大版，就是iphone 6的尺寸等比放大1.5倍得出的分辨率。

在iPhone6的x2倍設(shè)計稿中，界面元素之間的常用距離，親密距離：20px；疏遠(yuǎn)距離：30px。

疏遠(yuǎn)距離：比如，所有元素距離手機(jī)屏幕最左邊的距離。

親密距離：比如，左邊圖標(biāo)與右邊文字之間的距離。

安卓由于屏幕尺寸過多，分辨率跨度大，根據(jù)dpi分成幾個范圍區(qū)間：

像素密度為160dpi左右的稱為mdpi, 240左右的為hdpi, 320左右的xhdpi…以此類推。這樣，所有的安卓屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率。

Android約定：當(dāng)dpi=160時，倍率為@1x，邏輯像素=320×480 dp 或 360×640 dp ，稱之為mdpi，其它的都是基于此通過倍率轉(zhuǎn)化：hdpi:1.5倍；xhdpi:2倍；xxhdpi:3倍；xxxhdpi:4倍。

如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一，基準(zhǔn)為：360x640 dp。

在實(shí)際操作中，我們要用「邏輯像素尺寸」思維來思考界面，把單位設(shè)置成邏輯像素。打開PS的首選項(xiàng)——單位與標(biāo)尺界面，把尺寸和文字的單位都改成點(diǎn)（Point）。這里的點(diǎn)也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它。

要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實(shí)就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300。

本文從理論入手，先介紹了「像素密度」和「邏輯像素」兩個重要概念，其中像素密度影響“屏幕的成像質(zhì)量”，邏輯像素影響“界面的容積能力”；接著進(jìn)入實(shí)際操作，設(shè)計作圖應(yīng)該選擇何種倍率和屏幕尺寸；然后是細(xì)節(jié)的處理，常用的適配方法，以及全面屏的適配。最后是iPhone和Android手機(jī)的一些設(shè)計參數(shù)。

三、手機(jī)UI設(shè)計的基本規(guī)范

大家都知道手機(jī)采用的：一個是蘋果的iOS系統(tǒng)，另一個就是谷歌公司的安卓系統(tǒng)。華為的鴻蒙系統(tǒng)雖然早就上線，但是還沒有真正運(yùn)用在手機(jī)移動端上，小阿在這里期待著，希望有一天也能寫“華為‘鴻蒙系統(tǒng)’的界面尺寸規(guī)范?！?span style="display:none">Bb3創(chuàng)意嶺 - 安心托付、值得信賴的品牌設(shè)計、營銷策劃公司

這兩者之間有一個明顯的區(qū)別就是iOS系統(tǒng)是非開源的，簡單來說就是不能別隨意改動的，連圖標(biāo)都是必須帶圓角的，對交互設(shè)計師很友好的。

而安卓系統(tǒng)就是開源的，界面可以隨意改動，尺寸也沒有特別的規(guī)范，圖標(biāo)、尺寸成千上萬種，根據(jù)手機(jī)品牌不同，形狀也不同，對于交互設(shè)計稍微有那么些許不友好。

那我們就來看看安卓和iOS的具體有哪些界面規(guī)范。

一、iOS界面規(guī)范

首先蘋果分為兩種尺寸，一種是中碼比如6s、7、8等，這種我們一般切圖命名為@2X。還有一種就是Plus版本，這種一般切圖命名為@3X。

蘋果6s 的尺寸750px * 1334px，6s Plus的尺寸就是1242px * 2208 px。兩者之間的關(guān)系就是1.5倍，怎么說呢，就是6s之類的手機(jī)想要變成Plus，我們設(shè)計師稍微想要偷懶一下設(shè)計，只需要整體擴(kuò)大1.5倍，比如圖標(biāo)。

來分析一下界面的尺寸規(guī)范：

首先是狀態(tài)欄，就是信號電池欄的高度為40px。導(dǎo)航欄部分，就是“設(shè)置”欄高度為88px。

而下邊的底部欄（導(dǎo)航欄）高度則為98px。

注意這三種尺寸是規(guī)定比較死的。我們做開發(fā)遇到Plus版把以上尺寸等比例擴(kuò)大1.5倍就可以了。剩下的中間空白部分，我們就可以任意填充內(nèi)容，Banner或者圖標(biāo)？

☆ 關(guān)于圖標(biāo)部分

蘋果的圖標(biāo)極具有美感，完全符合柵格黃金比例，所以看起來十分協(xié)調(diào)。因?yàn)槎际鞘褂玫木W(wǎng)格進(jìn)行規(guī)范化設(shè)計，所以一整套圖標(biāo)都保持著高統(tǒng)一性。

整個點(diǎn)擊圖標(biāo)最小不能小于44px，一般大小為58px，圓角為12px,但是我們習(xí)慣取為整數(shù)60px,就會非常的標(biāo)準(zhǔn)。為什么一定有最小的控制呢？因?yàn)槲覀兪种赣幸粋€觸碰面呀~低于上述的寬度，就可能碰不到。一定要非常注意用戶的使用感受哦。

☆ 關(guān)于分割線部分

注意分割線不是一條線，是一個寬度為1px的矩形，而且顏色多為灰色。

☆ 關(guān)于板塊與板塊之間

板塊與板塊之間的灰色條間隔是30-70之間，一般來說取整數(shù)。iOS系統(tǒng)采取了70 px,有利于減輕用戶的閱讀負(fù)擔(dān)。列表的高度一般高于88 px，列表與列表之間的距離是10px-30px,太小會有碰撞。作為UI設(shè)計師，這一點(diǎn)是要考慮的是吧？

☆ 關(guān)于列表中的尺寸規(guī)范以及字體要求

☆ 關(guān)于左右間隔的安全區(qū)域

這個安全區(qū)域又稱之為留白邊距，iOS的原生態(tài)頁面【設(shè)置】頁面的邊距是30px,根據(jù)不同產(chǎn)品有不同的調(diào)整，寬度一般在16px--30px浮動，最大的特點(diǎn)就是數(shù)值全是偶數(shù)。

☆ 關(guān)于切換按鈕的尺寸

☆ 關(guān)于字體

iOS系統(tǒng)的字體是蘋方字體，字體的顏色和粗細(xì)也大有講究，標(biāo)題等文字就是粗體，一些說明文字等就是淺色非加粗體。常常用文字的粗細(xì)體來區(qū)分重要信息和次要信息，進(jìn)行信息層級的劃分。字體顏色很少采用純黑色，一般用的是深灰色和淺灰色。

主標(biāo)題的字體大小設(shè)置一般是32-36左右，加粗居中。列表中的文字就要小一些，字體大小為30，不會加粗。輔助性字體大小一般24-26。說明文字一般不會小于22，最小設(shè)置為20，再小就看不到啦。另外需要注意的一點(diǎn)是所有的字號設(shè)置都必須為偶數(shù)，上下級內(nèi)容字號極差關(guān)系為2-4號。

關(guān)于蘋果界面的小部分尺寸規(guī)范就介紹到這里，下期再做安卓界面的尺寸介紹。

作為UI設(shè)計師，一定要具體掌握界面的大小尺寸來適應(yīng)美學(xué)觀點(diǎn)，讓人感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)極快吸引用戶的注意力。

二、安卓界面規(guī)范

眾所周知，安卓系統(tǒng)是開源的，國內(nèi)又有超多的手機(jī)廠商，小米、魅族、華為、oppo、三星等，每一個品牌有屬于自己的UI設(shè)計規(guī)范，但是我們主要分析UI界面尺寸規(guī)范。

1、字體

安卓系統(tǒng)中文采用的是思源黑體，英文字體為robot字體。

只使用偶數(shù)單位 24 pt，28 pt，36 pt等字體大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

講圖標(biāo)之前先來分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次數(shù)值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系統(tǒng)專用的長度單位，設(shè)備獨(dú)立像素的意思。不同設(shè)備有不同的顯示效果,這個和設(shè)備硬件有關(guān)。多為圖標(biāo)使用，文字則用sp(放大像素)，主要用于字體顯示best for textsize。

px是像素的意思，不同設(shè)備顯示效果相同。

安卓各屏幕密度關(guān)系如下：

3、圖標(biāo)

不同手機(jī)品牌的圖標(biāo)的標(biāo)志是不一樣的，對應(yīng)不同大小屏幕的尺寸如下：

系統(tǒng)圖標(biāo)的尺寸：

快捷圖標(biāo)的尺寸：

應(yīng)用圖標(biāo)的尺寸：

4、應(yīng)用欄的尺寸

從左到右依次是：① 應(yīng)用欄高度：56dp；應(yīng)用欄左右內(nèi)邊距為16dp；應(yīng)用欄圖標(biāo)上下左內(nèi)邊距為16dp；應(yīng)用欄標(biāo)題左內(nèi)邊距為72dp；應(yīng)用欄標(biāo)題下邊距：20dp；

②應(yīng)用欄高度為128dp；

③操作欄高度為56dp；標(biāo)題欄高度：80dp；標(biāo)題欄底部內(nèi)邊距：8dp；描述區(qū)域高度：72dp；描述區(qū)底部內(nèi)邊距：16dp。

5、列表高度

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③子標(biāo)題：48dp；④列表項(xiàng)：72dp

垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。

垂直邊距

①狀態(tài)欄：24dp；②工具欄：56dp；③標(biāo)題和列表項(xiàng)：48dp；④子標(biāo)題：48dp；⑤內(nèi)容區(qū)域間距離為8dp

6、切圖

上周我們講到iPhone 6與iPhone 6 Plus約是1.5的關(guān)系，而xhdpi的Android手機(jī)屏幕與xxdpi的屏幕剛好是1.5倍的關(guān)系，所以iPhone 6 Plus和xxhdip也可以共用一套切圖，掌握好尺寸關(guān)系，能讓工作變得簡單很多。

7、界面適配

安卓多屏幕支持的基礎(chǔ)是它能夠管理應(yīng)用程序的布局和位圖可繪制對象的渲染以適當(dāng)?shù)姆绞綄Ξ?dāng)前屏幕配置的能力。該系統(tǒng)處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放位圖可繪制在屏幕密度正確呈現(xiàn)您的應(yīng)用程序在每個屏幕的配置，來優(yōu)化用戶界面設(shè)計，帶來更良好的用戶體驗(yàn)。

如何做到安卓界面適配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的關(guān)系；明白實(shí)際密度和系統(tǒng)密度的關(guān)系，dp、sp、px的區(qū)別；明白dp與px的轉(zhuǎn)換。這里不做過多闡述，后期寫一篇具體的~

安卓的界面規(guī)范就講到這里，要明白設(shè)計界面規(guī)范的意義是確保設(shè)計的統(tǒng)一性與合理性，規(guī)范維護(hù)的是項(xiàng)目的統(tǒng)一，為了項(xiàng)目利益最大化，高效化。所以作為UI設(shè)計師的我們，如果一點(diǎn)設(shè)計規(guī)范不遵守，全靠自己想當(dāng)然，那就別發(fā)給前端人員啦，他也看不懂。

所以作為UI設(shè)計，必須要要遵守設(shè)計規(guī)范，這樣才能做到設(shè)計有道可尋，希望以上回答對你了解手機(jī)界面設(shè)計規(guī)范有所幫助。

四、ui設(shè)計需要會dpi ppi px dp換算嗎

需要的

介紹下各自的定義：

px： pixel，像素，電子屏幕上組成一幅圖畫或照片的最基本單元

pt: point，點(diǎn)，印刷行業(yè)常用單位，等于1/72英寸

ppi: pixel per inch，每英寸像素數(shù)，該值越高，則屏幕越細(xì)膩

dpi: dot per inch，每英寸多少點(diǎn)，該值越高，則圖片越細(xì)膩

dp: dip，Density-independent pixel, 是安卓開發(fā)用的長度單位，1dp表示在屏幕像素點(diǎn)密度為160ppi時1px長度

sp: scale-independent pixel，安卓開發(fā)用的字體大小單位。

以下是換算關(guān)系：

一、pt和px

公式一： 1pt= (DPI / 72) px

當(dāng)photoshop中新建畫布的分辨率為72ppi( 即 72dpi時 )， 1pt=1px; 當(dāng)新建畫布分辨率為72*2=144ppi時，1pt=2px

二、ppi和dpi

dpi最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度。DPI值越小圖片越不精細(xì)。當(dāng)DPI的概念用在計算機(jī)屏幕上時，就應(yīng)稱之為ppi。同理： PPI就是計算機(jī)屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量。因此，在電子屏幕顯示中提到的ppi和dpi是一樣的，可認(rèn)為

公式二：dpi=ppi

三、ppi計算方法

ppi是指屏幕上的像素密度，其計算方法為：

公式三： ppi= 屏幕對角線上的像素點(diǎn)數(shù)/對角線長度 = √ (屏幕橫向像素點(diǎn)^2 + 屏幕縱向像素點(diǎn)^2)/對角線長度

以小米2s為例，該屏幕分辨率為720px*1280px，4.3英寸。則點(diǎn)密度為 √ (720^2 +1280^2) /4.3 = 342ppi。

四、px和dp

dp為安卓開發(fā)時的長度單位，根據(jù)不同的屏幕分辨率，與px有不同的對應(yīng)關(guān)系。

安卓端屏幕大小各不相同，根據(jù)其像素密度，分為以下幾種規(guī)格：

1dp定義為屏幕密度值為160ppi時的1px，即，在mdpi時，1dp = 1px。

以mdpi為標(biāo)準(zhǔn)，這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5

: 2 : 3;即，在xhdpi的密度下，1dp=2px;在hdpi情況下，1dp=1.5px。其他類推。

公式四： 1dp=(屏幕ppi/ 160)px