1、尺寸以及分辨率：Android的界面尺寸比較流行的有：480*800、720*1280、1080*1920，我們?cè)谧鲈O(shè)計(jì)圖的時(shí)候建議是以480*800的尺寸為標(biāo)準(zhǔn)；2、界面基本組成元素：界面基本組成元素包括：狀態(tài)欄+導(dǎo)航欄+主菜單欄+內(nèi)容區(qū)域；以480*800的尺寸為標(biāo)準(zhǔn)下的各個(gè)元素的高度(其實(shí)導(dǎo)航欄和菜單欄每一個(gè)應(yīng)用都或許不一樣，android對(duì)于尺寸沒(méi)有太明確的數(shù)據(jù)規(guī)范)如下：3、字體：Android系統(tǒng)中，DroidSans是默認(rèn)字體，與微軟雅黑很像；4、操作欄：1、”操作欄”對(duì)于Android應(yīng)用來(lái)說(shuō)是最重要的設(shè)計(jì)元素，它通常在應(yīng)用運(yùn)行的所有時(shí)間都呆在屏幕頂部；2、操作欄的基本布局：1向上＋2Spinner視圖控制＋3重要操作按鈕＋4操作：其中，向上按鈕，點(diǎn)擊后是去到當(dāng)前界面的上一個(gè)層級(jí)，非第一層級(jí)界面有此按鈕，第一層級(jí)界面則無(wú)向上按鈕；Spinner是用于展示內(nèi)容的下拉菜單，其內(nèi)容包括視圖的快速切換和顯示相關(guān)內(nèi)容的完整信息；操作（actionoverflow）是集合操作欄中不常用的和非重要操作的地方。5、多面板布局：多面板布局的是針對(duì)平板電腦，把手機(jī)端的目錄視圖和詳情視圖兩個(gè)層級(jí)的界面，甚至的頁(yè)面，復(fù)合展示在同一個(gè)界面中，有效地利用平板電腦的屏幕空間，扁平化層級(jí)結(jié)構(gòu)，簡(jiǎn)化導(dǎo)航。這點(diǎn)在iPad上已經(jīng)運(yùn)用得相當(dāng)嫻熟了。6、選擇：Android4.0中的長(zhǎng)按與Android2.3及更早期的版本有很大的不同。早期版本長(zhǎng)按操作后，是出現(xiàn)情境菜單的浮出層。在Android4.0中，長(zhǎng)按后在操作欄的位置會(huì)覆蓋一個(gè)臨時(shí)的情境操作欄，不再?gòu)棾銮榫巢藛胃〕鰧?。在臨時(shí)情境操作欄的環(huán)境下，當(dāng)前界面的內(nèi)容項(xiàng)允許被單個(gè)處理，也允許被批量處理。7、返回和向上：返回按鍵用在手機(jī)全局的虛擬導(dǎo)航欄中，基于用戶最近查看的界面歷史，采用時(shí)間倒序的方式，連接界面間的關(guān)系。向上按鈕用在操作欄的左側(cè)，基于層級(jí)結(jié)構(gòu)，點(diǎn)擊后是去到當(dāng)前界面的上一個(gè)層級(jí)，若當(dāng)前界面已經(jīng)是最高一級(jí)，則沒(méi)有向上按鈕。8、主題樣式：推出三套默認(rèn)主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在這三套默認(rèn)主題的基礎(chǔ)上做設(shè)計(jì)，以加快app研發(fā)效率，但只是建議使用，并沒(méi)有完全強(qiáng)制。9、觸摸與反饋：用戶觸摸應(yīng)用中的可操作區(qū)域，應(yīng)當(dāng)在視覺(jué)上有響應(yīng)，微小的反饋會(huì)給用戶帶來(lái)很好地效果；10、按鈕：1、按鈕的3種表現(xiàn)形式如下圖：2、對(duì)于僅包括圖標(biāo)的按鈕，不需要使用背景色；11、滑塊：滑塊的幾種表現(xiàn)形式如下圖：12、進(jìn)度條：如果某個(gè)操作需要花費(fèi)很長(zhǎng)的時(shí)間，就需要用進(jìn)度條的指示和旋轉(zhuǎn)圈的形式來(lái)表示：1、如果你可以知道當(dāng)前任務(wù)完成的比例，那么使用進(jìn)度條，讓用戶了解大約還需要多久才能完成；2、當(dāng)使用旋轉(zhuǎn)圓圈時(shí)，不要配以文字標(biāo)簽。旋轉(zhuǎn)的圓圈已經(jīng)表明了正在進(jìn)行后臺(tái)操作。13、開(kāi)關(guān)：用戶通過(guò)開(kāi)關(guān)作出選擇，包括3種形式：復(fù)選框+單選按鈕+開(kāi)關(guān)；1、復(fù)選框：用戶可以在一個(gè)集合中作出多個(gè)選擇：2、單選按鈕：?jiǎn)芜x按鈕允許用戶在一個(gè)集合中做一次選擇；3、開(kāi)關(guān)：開(kāi)關(guān)控制單個(gè)選項(xiàng)的狀態(tài)；14、對(duì)話框：應(yīng)用通過(guò)對(duì)話框讓用戶作出決定或者填寫(xiě)一些信息，1、對(duì)話框的左邊一般情況下是取消按鈕，右邊是確定按鈕；
成都創(chuàng)新互聯(lián)專(zhuān)注于魚(yú)臺(tái)網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供魚(yú)臺(tái)營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，魚(yú)臺(tái)網(wǎng)站制作、魚(yú)臺(tái)網(wǎng)頁(yè)設(shè)計(jì)、魚(yú)臺(tái)網(wǎng)站官網(wǎng)定制、小程序定制開(kāi)發(fā)服務(wù)，打造魚(yú)臺(tái)網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供魚(yú)臺(tái)網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
[img]眾所周知，安卓系統(tǒng)是開(kāi)源的，國(guó)內(nèi)又有超多的手機(jī)廠商，小米、魅族、華為、oppo、三星等，每一個(gè)品牌有屬于自己的UI設(shè)計(jì)規(guī)范，但是我們主要分析UI界面尺寸規(guī)范。
1、字體
安卓系統(tǒng)中文采用的是思源黑體，英文字體為robot字體。
只使用偶數(shù)單位 24 pt，28 pt，36 pt等字體大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？
講圖標(biāo)之前先來(lái)分析一下一排英文的意思：
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次數(shù)值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系統(tǒng)專(zhuān)用的長(zhǎng)度單位，設(shè)備獨(dú)立像素的意思。不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān)。多為圖標(biāo)使用，文字則用sp(放大像素)，主要用于字體顯示best for textsize。
px是像素的意思， 不同設(shè)備顯示效果相同。
從左到右依次是：① 應(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)題欄底部?jī)?nèi)邊距：8dp；描述區(qū)域高度：72dp；描述區(qū)底部?jī)?nèi)邊距：16dp。
5、列表高度
垂直邊框、水平外邊距、邊框左右外邊距各16dp；帶有圖標(biāo)或者頭像的內(nèi)容有72dp的左邊距。
垂直邊距
①狀態(tài)欄：24dp；②工具欄：56dp；③子標(biāo)題：48dp；④列表項(xiàng)：72dp
軟件界面設(shè)計(jì)相關(guān)的各項(xiàng)介紹
界面設(shè)計(jì)是為了滿足軟件專(zhuān)業(yè)化標(biāo)準(zhǔn)化的需求而產(chǎn)生的對(duì)軟件的使用界面進(jìn)行美化優(yōu)化規(guī)范化的設(shè)計(jì)分支。具體包括軟件啟動(dòng)封面設(shè)計(jì)，軟
件框架設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動(dòng)條及狀態(tài)欄設(shè)計(jì)，安裝過(guò)程設(shè)計(jì)，包裝及商品化。
在設(shè)計(jì)的過(guò)程中有較多注意的關(guān)鍵問(wèn)題，以下列出幾點(diǎn)：
(1)軟件啟動(dòng)封面設(shè)計(jì)
應(yīng)使軟件啟動(dòng)封面最終為高清晰度的圖像，如軟件啟動(dòng)封面需在不同的平臺(tái)、操作系統(tǒng)上使用將考慮轉(zhuǎn)換不同的格式，并且對(duì)選用的色彩不
宜超過(guò)256 色，最好為216色安全色。軟件啟動(dòng)封面大小多為主流顯示器分辨率的1/6大。如果是系列軟件將考慮整體設(shè)計(jì)的統(tǒng)一和延續(xù)性。在上面應(yīng)該醒目的標(biāo)注制作或支持的公司標(biāo)志、產(chǎn)品商標(biāo)，軟件名稱(chēng)，版本號(hào)，網(wǎng)址，版權(quán)聲明，序列號(hào)等信息，以樹(shù)立軟件形象，方便使用者或購(gòu)買(mǎi)者在軟件啟動(dòng)的時(shí)候得到提示。插圖宜使用具有獨(dú)立版權(quán)的，象征性強(qiáng)的，識(shí)別性高的，視覺(jué)傳達(dá)效果好的圖形，若使用攝影也應(yīng)該進(jìn)行數(shù)位處理，以形成該軟件的個(gè)性化特征。
(2)軟件框架設(shè)計(jì)
軟件的框架設(shè)計(jì)就復(fù)雜得多，因?yàn)樯婕败浖氖褂霉δ埽瑧?yīng)該對(duì)該軟件產(chǎn)品的程序和使用比較了解，這就需要設(shè)計(jì)師有一定的軟件跟進(jìn)經(jīng)驗(yàn)，能夠快速的學(xué)習(xí)軟件產(chǎn)品，并且在和軟件產(chǎn)品的程序開(kāi)發(fā)員及程序使用對(duì)象進(jìn)行共同溝通，以設(shè)計(jì)出友好的，獨(dú)特的，符合程序開(kāi)發(fā)原則的軟件框架。軟件框架設(shè)計(jì)應(yīng)該簡(jiǎn)潔明快，盡量少用無(wú)謂的裝飾，應(yīng)該考慮節(jié)省屏幕空間，各種分辨率的大小，縮放時(shí)的狀態(tài)和原則，并且為將來(lái)設(shè)計(jì)的按鈕，菜單，標(biāo)簽，滾動(dòng)條及狀態(tài)欄預(yù)留位置。設(shè)計(jì)中將整體色彩組合進(jìn)行合理搭配，將軟件商標(biāo)放在顯著位置，主菜單應(yīng)放在左邊或上邊，滾動(dòng)條放在右邊，狀態(tài)欄放在下邊，以符合視覺(jué)流程和用戶使用心理。
(3)軟件按鈕設(shè)計(jì)
軟件按鈕設(shè)計(jì)應(yīng)該具有交互性，即應(yīng)該有3到6種狀態(tài)效果：點(diǎn)擊時(shí)狀態(tài)；鼠標(biāo)放在上面但未點(diǎn)擊的狀態(tài)；點(diǎn)擊前鼠標(biāo)未放在上面時(shí)的狀態(tài)；點(diǎn)擊后鼠標(biāo)未放在上面時(shí)的狀態(tài)；不能點(diǎn)擊時(shí)狀態(tài)；獨(dú)立自動(dòng)變化的狀態(tài)。按鈕應(yīng)具備簡(jiǎn)潔的圖示效果，應(yīng)能夠讓使用者產(chǎn)生功能關(guān)聯(lián)反應(yīng)，群組內(nèi)按鈕應(yīng)該風(fēng)格統(tǒng)一，功能差異大的按鈕應(yīng)該有所區(qū)別。
(4)軟件面板設(shè)計(jì)
軟件面板設(shè)計(jì)應(yīng)該具有縮放功能，面板應(yīng)該對(duì)功能區(qū)間劃分清晰，應(yīng)該和對(duì)話框，彈出框等風(fēng)格匹配，盡量節(jié)省空間，切換方便。
(5)菜單設(shè)計(jì)
菜單設(shè)計(jì)一般有選中狀態(tài)和未選中狀態(tài)，左邊應(yīng)為名稱(chēng)，右邊應(yīng)為快捷鍵，如果有下級(jí)菜單應(yīng)該有下級(jí)箭頭符號(hào)，不同功能區(qū)間應(yīng)該用線條分割。
(6)標(biāo)簽設(shè)計(jì)
標(biāo)簽設(shè)計(jì)應(yīng)該注意轉(zhuǎn)角部分的變化，狀態(tài)可參考按鈕。
(7)圖標(biāo)設(shè)計(jì)
圖標(biāo)設(shè)計(jì)色彩不宜超過(guò)64色，大小為16x16、32x32兩種，圖標(biāo)設(shè)計(jì)是方寸藝術(shù)，應(yīng)該加以著重考慮視覺(jué)沖擊力，它需要在很小的范圍表現(xiàn)出軟件的內(nèi)涵，所以很多圖標(biāo)設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)使用簡(jiǎn)單的顏色，利用眼睛對(duì)色彩和網(wǎng)點(diǎn)的空間混合效果，做出了許多精彩圖標(biāo)。
(8)滾動(dòng)條及狀態(tài)欄設(shè)計(jì)
滾動(dòng)條主要是為了對(duì)區(qū)域性空間的固定大小中內(nèi)容量的變換進(jìn)行設(shè)計(jì)，應(yīng)該有上下箭頭，滾動(dòng)標(biāo)等，有些還有翻頁(yè)標(biāo)。狀態(tài)欄是為了對(duì)軟件當(dāng)前狀態(tài)的顯示和提示。
(9)安裝過(guò)程設(shè)計(jì)
安裝過(guò)程設(shè)計(jì)主要是將軟件安裝的過(guò)程進(jìn)行美化，包括對(duì)軟件功能進(jìn)行圖示化。
(10)包裝及商品化
最后軟件產(chǎn)品的包裝應(yīng)該考慮保護(hù)好軟件產(chǎn)品，功能的宣傳融合于美觀中，可以印刷部分產(chǎn)品介紹，產(chǎn)品界面設(shè)計(jì)。
圖標(biāo)設(shè)計(jì)規(guī)范
數(shù)位設(shè)計(jì)引入了一種新的圖標(biāo)設(shè)計(jì)樣式。以下是設(shè)計(jì)和創(chuàng)建樣式圖標(biāo)的具體規(guī)范。
圖標(biāo)樣式應(yīng)該有趣、色彩豐富且充滿活力，因?yàn)楝F(xiàn)在的系統(tǒng)支持圖標(biāo)是32位圖標(biāo)，并且邊緣非常平滑。在矢量程序中繪制完每個(gè)圖標(biāo)后，再用Adobe Photoshop進(jìn)行處理可使圖像更加完美。本規(guī)范是專(zhuān)為設(shè)計(jì)者編寫(xiě)的。在創(chuàng)建圖像時(shí)，建議您與高水平的圖形設(shè)計(jì)者一起工作，尤其是具有豐富的矢量和 3D軟件經(jīng)驗(yàn)的圖形設(shè)計(jì)者。
圖標(biāo)設(shè)計(jì)概述的目的是讓您熟悉WindowsXP的新樣式，為創(chuàng)建圖標(biāo)做好準(zhǔn)備。
圖標(biāo)樣式特性
(1) 色彩豐富，是對(duì)WindowsXP外觀的補(bǔ)充。
(2) 不同的角度和透視特性為圖像增添了動(dòng)態(tài)活力。
(3) 元素的邊角十分柔和，并略微有些圓滑。
(4) 光源位于圖標(biāo)的左上角，同時(shí)有環(huán)繞光照亮圖標(biāo)的其它部分。
(5) 漸變效果使圖標(biāo)具有立體感，進(jìn)而使圖標(biāo)的外觀更加豐滿。
(6) 投影使圖標(biāo)更具對(duì)比度和立體感。
(7) 添加輪廓可使圖像更清晰。
(8) 日常對(duì)象(如計(jì)算機(jī)和設(shè)備)具有更現(xiàn)代化的個(gè)人外觀。
圖標(biāo)尺寸
Windows XP圖標(biāo)有四種尺寸，建議使用以下四種尺寸：
(1) 48x48像素
(2) 32x32像素
(3) 24x24像素
(4) 16x16像素
圖標(biāo)色彩深度支持
WindowsXP支持32位圖標(biāo)。32位圖標(biāo)為24位圖像加上8位alpha通道。使圖標(biāo)邊緣非常平滑，且與背景相融合。
每個(gè)WindowsXP圖標(biāo)應(yīng)包含以下三種色彩深度，以支持不同的顯示器顯示設(shè)置：
24位圖像加上8位alpha通道(32位)
8位圖像(256色)，加上1位透明色
4位圖像(16色)，加上1位透明色
調(diào)色板
圖標(biāo)中使用的主要顏色。
對(duì)象的角度和分組
WindowsXP樣式圖標(biāo)使用的透視網(wǎng)格：并非所有對(duì)象使用16?6的復(fù)雜圖像都能獲得較好效果。某些對(duì)象通常以直觀圖像顯示：文檔圖標(biāo)、符號(hào)圖標(biāo)(如警告或信息圖標(biāo))、單一對(duì)象圖標(biāo)(如放大鏡)
除非創(chuàng)建重疊輔助對(duì)象可以更清楚地表達(dá)圖標(biāo)的含義，否則就可讀性和完整性而言，還是應(yīng)使用直觀圖像。還應(yīng)考慮如何按組查看圖標(biāo)，以便確定如何將對(duì)象分組。
投影
使用投影后，WindowsXP圖標(biāo)將更清晰且更具立體感?？稍赑hotoshop中實(shí)現(xiàn)這種效果，本指南的后面部分將對(duì)此進(jìn)行描述。若要為圖像添加投影，請(qǐng)?jiān)?Photoshop中雙擊圖像的圖層，并選擇Drop Shadow。然后將Angle更改為135，Distance更改為 2，Size更改為2。此時(shí)投影為75%不透明黑色。
輪廓
繪制XP樣式圖標(biāo)時(shí)，為圖像添加輪廓可使之更清晰，并可保證圖像在不同背景色上都具有較好效果。
概念
設(shè)計(jì)圖標(biāo)時(shí)，請(qǐng)考慮以下因素：
使用已有概念以確保真實(shí)表達(dá)了用戶的想法?？紤]圖標(biāo)在用戶界面環(huán)境中以何種形式出現(xiàn)，以及如何作為圖標(biāo)集的一部分使用?？紤]圖形的
文化背景。避免在圖標(biāo)中使用字母、單詞、手或臉。必須用圖標(biāo)表示人或用戶時(shí)，請(qǐng)盡可能使其大眾化。如果圖標(biāo)中的圖像由多個(gè)對(duì)象組成，應(yīng)考慮如何使圖像尺寸更小。建議在圖標(biāo)中使用的對(duì)象不超過(guò)三個(gè)。對(duì)于 16?6的尺寸大小，還可考慮刪除某些對(duì)象或簡(jiǎn)化圖像使之更容易辨認(rèn)。
透明工具
將Gif Movie Gear(GMG)打開(kāi)一個(gè)對(duì)話框，其中顯示您的圖標(biāo)。使用吸管工具單擊圖標(biāo)的背景色。此顏色將更改為暗黃綠色(或在 GMG中選作
透明背景色的顏色)。重復(fù)所有4位和8位幀。若要保存圖標(biāo)，請(qǐng)選擇 File-Save Icon As...。
創(chuàng)建工具欄
Windows工具欄圖標(biāo)除不使用投影之外，使用的樣式與其它圖標(biāo)相同。由于工具欄圖標(biāo)非常小，建議您使用簡(jiǎn)單的圖像。如果以直觀方式顯示
圖像即可清晰地表達(dá)圖標(biāo)的含義，則不必使用其它復(fù)雜方式。
創(chuàng)建AVI
WindowsXP使用8位AVI。創(chuàng)建.avi文件的過(guò)程與創(chuàng)建圖標(biāo)的過(guò)程相同-在Photoshop中準(zhǔn)備圖像，然后將其拖動(dòng)到GMG 中。請(qǐng)按以下指導(dǎo)創(chuàng)建8位圖標(biāo)。若要使用GMG保存AVI，請(qǐng)轉(zhuǎn)至File-Export As-AVI file。創(chuàng)建.avi文件時(shí)，請(qǐng)考慮以下因素：使用品紅(R255 G0 B255)作為背景透明色。在Photoshop中，重要的一點(diǎn)是不要出現(xiàn)雜散像素。請(qǐng)將填充能力設(shè)置為0，并確認(rèn)未選中取消鋸齒。
軟件人機(jī)界面
UI即User Interface(用戶界面)的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。好的UI設(shè)計(jì)不僅是讓軟件變得
有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。
美麗的事物常常會(huì)讓人無(wú)法抗拒。這就是為什么產(chǎn)品出色的外觀設(shè)計(jì)對(duì)于電腦、汽車(chē)、日用品、家具、食品、服裝等等幾乎所有商品的銷(xiāo)售與推廣，都有著舉足輕重的作用的原因。
同樣的道理，對(duì)于軟件公司來(lái)說(shuō)，軟件產(chǎn)品就是他們的商品，而軟件界面就是他們產(chǎn)品的外觀，界面的美觀與否，直接關(guān)系到了軟件產(chǎn)品的營(yíng)銷(xiāo)成敗。
我們可以清楚地看到，微軟公司對(duì)軟件界面設(shè)計(jì)的重視。請(qǐng)回想一下您在第一次見(jiàn)到win2000時(shí)的情景，與nt4.0相比是否驚嘆他界面的美觀性與易用性？而您如果使用過(guò)xp系統(tǒng)，則會(huì)被其令人神奇的感官概念而震驚折服！金山公司的金山詞霸就是國(guó)內(nèi)軟件成功的例子了，從金山詞霸3.0到金山詞霸2001 的變化堪稱(chēng)經(jīng)典。著名的網(wǎng)頁(yè)動(dòng)畫(huà)制作軟件flash從3.0到4.0，僅僅修改了圖標(biāo)和窗體，立即大為增色…
現(xiàn)今世界上成功的軟件公司都非常重視軟件界面的美化設(shè)計(jì)工作，因?yàn)樗麄兩羁痰刂溃诩ち业氖袌?chǎng)競(jìng)爭(zhēng)中，僅僅有強(qiáng)大的功能是遠(yuǎn)遠(yuǎn)不夠的，不足以戰(zhàn)勝?gòu)?qiáng)勁的對(duì)手。我們可以相象一下，您在挑選手機(jī)的時(shí)候，如果有兩款手機(jī)，性能相同，而第一款比第二款要美觀很多，那么您將選擇哪一款呢？當(dāng)然是美觀的那一款了。試想，您的客戶，也會(huì)拿您和您競(jìng)爭(zhēng)對(duì)手的軟件做這樣的比較的。
現(xiàn)在的軟件企業(yè)都知道，廣告和市場(chǎng)推銷(xiāo)活動(dòng)對(duì)市場(chǎng)營(yíng)銷(xiāo)的作用是多么的重要，并不遺余力地打廣告、做活動(dòng)、做推廣。但我們知道，這些活動(dòng)的最終目的，是為了讓用戶購(gòu)買(mǎi)并使用軟件產(chǎn)品，而用戶最終使用的也是您的產(chǎn)品，那么為什么不在軟件界面的美觀性上多下些工夫呢？在諸如家用電器、汽車(chē)、電腦等成熟的市場(chǎng)中，用非常精美的廣告去推廣一種功能強(qiáng)大卻丑陋無(wú)比的產(chǎn)品，是一種笑話。然而，這樣的笑話在軟件行業(yè)里卻屢見(jiàn)不鮮。這也是像中國(guó)足球一樣，中國(guó)軟件業(yè)與國(guó)外相比較存在的一個(gè)很大的差距。
實(shí)踐證明，各商家只要在產(chǎn)品美觀設(shè)計(jì)方面很小投入，將會(huì)有很大產(chǎn)出。其投入產(chǎn)出比，要比在功能領(lǐng)先性開(kāi)發(fā)上的投入大得多。
在用戶把軟件買(mǎi)回去后，他們和您企業(yè)的聯(lián)系，或者說(shuō)您企業(yè)形象在客戶眼中的表現(xiàn)，很大一部分是通過(guò)您軟件的界面來(lái)傳達(dá)的，那么美觀友好的用戶界面對(duì)于宣傳您的企業(yè)文化，對(duì)于給客戶灌輸您的企業(yè)理念，對(duì)于您企業(yè)的宣傳運(yùn)做都將是非常有益的。尤其如果您的公司做的是項(xiàng)目承包形式的業(yè)務(wù)，那么無(wú)論是在競(jìng)標(biāo)的時(shí)候，還是在項(xiàng)目交付使用以后，美觀的界面都會(huì)給您的客戶以信心和良好的印象。
要成為一款有競(jìng)爭(zhēng)力的軟件，不光要有強(qiáng)大的功能，也需要有一個(gè)友好的界面設(shè)計(jì)?？v觀當(dāng)今的it行業(yè)，其軟件界面設(shè)計(jì)的發(fā)展趨勢(shì)大體上有如下幾種技術(shù)：
1. 命令語(yǔ)言用戶界面的發(fā)展。
根據(jù)其語(yǔ)言的特點(diǎn)，及人機(jī)交互的形式的分為
a. 形式語(yǔ)言
b. 自然語(yǔ)言。
c. 類(lèi)自然語(yǔ)言。
2. 圖形用戶界面的廣泛應(yīng)用
圖形用戶界面和人機(jī)交互過(guò)程極大地依賴(lài)視覺(jué)和手動(dòng)控制的參與，因此具有強(qiáng)烈的直接操作特點(diǎn)
3. 直接操縱用戶界面技術(shù)的成熟。
用戶最終關(guān)心的是他欲控制和操作的對(duì)象，他只關(guān)心任務(wù)語(yǔ)義，而不用過(guò)多為計(jì)算機(jī)語(yǔ)義和句法而分心。對(duì)于大量物理的、幾何空間的以及形象的任務(wù)，直接操縱已表現(xiàn)出巨大的優(yōu)越性。
4. 多媒體用戶界面及多通道用戶界面的發(fā)展大大豐富了計(jì)算機(jī)信息的表現(xiàn)形式。
5. 虛擬現(xiàn)實(shí)技術(shù)的應(yīng)用
虛擬現(xiàn)實(shí)系統(tǒng)向用戶提供身臨其境(immerse)和多感覺(jué)通道(multi-sensory)體驗(yàn)，作為一種新型人機(jī)交互形式，虛擬現(xiàn)實(shí)技術(shù)比以前任何人機(jī)交互形式都有希望徹底實(shí)現(xiàn)和諧的、以“人為中心”的人機(jī)界面。
一、android篇
1、android分辨率
Android的多分辨率，一向是設(shè)計(jì)師和開(kāi)發(fā)者非常頭疼的事兒。盡管如此，對(duì)于多分辨造成的復(fù)雜問(wèn)題，也是大家要優(yōu)先解決的。Android支持多種不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意，ppi、dpi 是密度單位，不是度量單位 ：
dpi主要應(yīng)用于輸出，重點(diǎn)是打印設(shè)備上；ppi對(duì)于設(shè)計(jì)師應(yīng)該比較熟悉，photoshop畫(huà)布的分辨率常設(shè)置為72像素/英寸，這個(gè)單位其實(shí)就是ppi 。盡管概念不同，但是對(duì)于移動(dòng)設(shè)備的顯示屏，可以看作ppi=dpi 。
ppi的運(yùn)算方式是：PPI = √（長(zhǎng)度像素?cái)?shù)2 + 寬度像素?cái)?shù)2） / 屏幕對(duì)角線英寸數(shù)。即：長(zhǎng)、寬各自平方之和的開(kāi)方，再除以屏幕對(duì)角線的英寸數(shù)。
以iphone5為例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（視網(wǎng)膜Retina屏）
對(duì)于android手機(jī)，一個(gè)不確切的分法是，720 x 1280 的手機(jī)很可能接近 320 dpi （xhdpi模式），480 x 800 的手機(jī)很可能接近 240 dpi （hdpi模式），而320 x 480 的手機(jī)則很接近 160 dpi（mdpi模式）。
2、單位換算方法
android開(kāi)發(fā)中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們?cè)谠O(shè)計(jì)稿用的單位是px。這些單位如何換算，是設(shè)計(jì)師、開(kāi)發(fā)者需要了解的關(guān)鍵。
簡(jiǎn)單理解的話，px（像素）是我們UI設(shè)計(jì)師在PS里使用的，同時(shí)也是手機(jī)屏幕上所顯示的，dp是開(kāi)發(fā)寫(xiě)layout的時(shí)候使用的尺寸單位。
為什么要把sp和dp代替px？ 原因是他們不會(huì)因?yàn)閜pi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現(xiàn)的高度大小是相同。也就是說(shuō)更接近物理呈現(xiàn)，而px則不行。
根據(jù)單位換算方法，可總結(jié)出：
當(dāng)運(yùn)行在mdpi下時(shí)，1dp=1px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高48px，開(kāi)發(fā)就會(huì)定義該item高48dp ；
當(dāng)運(yùn)行在hdpi模式下時(shí)，1dp=1.5px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高72px，開(kāi)發(fā)就會(huì)定義該item高48dp ；
當(dāng)運(yùn)行在xhdpi模式下時(shí)，1dp=2px ：也就是說(shuō)設(shè)計(jì)師在PS里定義一個(gè)item高96px，開(kāi)發(fā)就會(huì)定義該item高48dp ；
當(dāng)你的app需要適配多個(gè)dpi模式的時(shí)候，請(qǐng)參考圖1的比例進(jìn)行換算 。
3、設(shè)計(jì)稿基本元素的尺寸設(shè)置
為了適應(yīng)多分辨率的手機(jī)，理想的方式是為每種分辨率做一套設(shè)計(jì)稿，包括所用到的icon、設(shè)計(jì)稿標(biāo)注等。但在實(shí)際開(kāi)發(fā)中，這種方法耗時(shí)耗力。所以通常會(huì)選擇折中的方法。
方法一 ：在標(biāo)準(zhǔn)基礎(chǔ)上（比如xhdpi）開(kāi)始，然后放大或縮小，以適應(yīng)到其他尺寸。不足之處是，對(duì)于更高分辨率的手機(jī)，圖標(biāo)被放大后會(huì)導(dǎo)致質(zhì)量不高。
方法二： 以最高分辨率為基準(zhǔn)設(shè)計(jì)，然后縮小適應(yīng)到所需的小分辨率上。缺點(diǎn)是，圖標(biāo)等若都最大尺寸，加載時(shí)速度慢且耗費(fèi)流量較多，對(duì)于小分辨率的用戶也不夠好。
結(jié)合友盟的分辨率占比數(shù)據(jù)、也為了方便換算到android開(kāi)發(fā)中的尺寸單位， 推薦設(shè)計(jì)稿的畫(huà)布尺寸選用 720X1280 ，分辨率仍舊為72ppi（像素/英寸）。
在android規(guī)范中對(duì)于導(dǎo)航欄、工具欄等的尺寸沒(méi)有明確的規(guī)定。但根據(jù)48dp原則，以及一些主流的android應(yīng)用的截圖分析，總結(jié)一下尺寸要求：
狀態(tài)欄高度 ：50 px
導(dǎo)航欄、操作欄高度 ：96 px=48dp x 2
主菜單欄高度 ：96 px
內(nèi)容區(qū)域高度 ：1038 px （1280-50-96-96=1038）
Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96 px
4、圖標(biāo)和字體大?。▉?lái)自官方規(guī)范文檔）
a、啟動(dòng)圖標(biāo)（home頁(yè)或app列表頁(yè)）
整體大小為48 x 48 dp
b、操作欄圖標(biāo)，代表用戶在app中可以使用到的最重要的圖標(biāo)
整體大小為32 x 32 dp ，圖形實(shí)際區(qū)域?yàn)?24 x 24 dp
c、小圖標(biāo)/場(chǎng)景圖標(biāo)，提供操作或特定項(xiàng)目的狀態(tài)。
比如gmail app的星型標(biāo)記、一些內(nèi)容展開(kāi)收起用到的向下向上的圖標(biāo)等。整體大小為16 x 16 dp ，圖形實(shí)際區(qū)域?yàn)?12 x 12 dp 。
d、通知圖標(biāo)
如果app有通知，要提供一個(gè)有新通知時(shí)顯示在狀態(tài)欄的通知圖標(biāo)。整體大小為24 x 24 dp ，圖形實(shí)際區(qū)域?yàn)?22 x 22 dp 。
注：android規(guī)范提供的尺寸單位是dp，若設(shè)計(jì)稿尺寸設(shè)為720 x 1280 ，圖標(biāo)大小需在規(guī)范要求的尺寸數(shù)字上乘以2。比如操作欄圖標(biāo)32 x 32 dp ，則設(shè)計(jì)稿上應(yīng)該是64 x 64 px 。
e、字體大小
Android規(guī)范中的要求如下：
前面提到Android開(kāi)發(fā)中的字號(hào)單位是sp，而換算關(guān)系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設(shè)計(jì)稿上，字體大小可選擇為 24px 、28px 、32px 、36px ，主要根據(jù)文字的重要程度來(lái)選擇，特殊情況下也可能選擇更大或更小的字體。
f、其他尺寸要求
通常把48dp作為可觸摸的UI元件的標(biāo)準(zhǔn)。
為什么要用48dp呢？一般來(lái)說(shuō)，48dp轉(zhuǎn)化為一個(gè)物理尺寸約9毫米。通常建議目標(biāo)大小為7-10毫米，以方便用戶手指能準(zhǔn)確并且舒適觸摸目標(biāo)區(qū)域 。
如果你設(shè)計(jì)的元素高和寬至少48dp，你就可以保證：
（1）觸摸目標(biāo)絕不會(huì)比建議的最低目標(biāo)（7mm）小，無(wú)論在什么屏幕上顯示。
（2）在整體信息密度和觸摸目標(biāo)大小之間取得了一個(gè)很好的平衡。
另外，每個(gè)UI元素之間的空白通常是8dp 。
二、iOS篇
1、分辨率
iPhone 界面尺寸：
iPad 界面尺寸：1024×768、2048×1536
（以上單位都是像素，至于分辨率一般網(wǎng)頁(yè)UI和移動(dòng)UI基本上都只要 72 ppi）
2、單位換算px、pt
這里需要先區(qū)分pt、px，pt(磅值)是物理長(zhǎng)度單位，指的是72分之一英寸。手機(jī)上看來(lái)同一大小的字磅值是一樣的，但是換算成不同分辨率手機(jī)的字號(hào)px值不一樣。（px=pt*ppi/72）
iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5的ppi沒(méi)有變化，兼容性方面要增加類(lèi)似首屏畫(huà)面等程序上的判斷。
在iPhone界面上元素的定位、尺寸是通過(guò)一個(gè)單位point，而非px，屏幕上固定有320x480pt，retina屏兩倍的分辨率改變的只是pt和px之間的比例而已，這樣就能實(shí)現(xiàn)不改變程序，只上傳兩套圖片就兼容兩個(gè)分辨率。
****在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)尺寸來(lái)設(shè)計(jì)，比較方便預(yù)覽效果，一般用 640×960 或者 640×1136 的尺寸設(shè)計(jì)。其中設(shè)計(jì)稿的畫(huà)布分辨率設(shè)為默認(rèn)的72ppi（此時(shí)1px=1pt ），所以設(shè)計(jì)師可以統(tǒng)一采用px為單位。
開(kāi)發(fā)拿到設(shè)計(jì)稿時(shí)，將上面標(biāo)注的以px為單位的字號(hào)大小、圖像尺寸除以2，就是非retina屏上的pt值，這樣在retina屏上也可以根據(jù)此pt值換算對(duì)應(yīng)的px大小，以確保不同的分辨率下有合適的效果。****
3、基本元素的尺寸設(shè)置
iPhone的APP界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域。
這里取用 640×960 的尺寸設(shè)計(jì)，那我們就說(shuō)說(shuō)在這個(gè)尺寸下這些元素的尺寸：
狀態(tài)欄：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40 px
導(dǎo)航欄：顯示當(dāng)前界面的名稱(chēng)，包含相應(yīng)的功能或者頁(yè)面間跳轉(zhuǎn)的按鈕，其高度為：88 px
主菜單欄：類(lèi)似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)，其高度為：98 px
內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁的，其高度為：734 px=960-40-88-98
以上尺寸適用于 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到：910 px，其他尺寸也同上。
4、常用圖像、圖標(biāo)大?。▉?lái)自官方規(guī)范文檔）
單位：像素
5、字體大小
iOS交互設(shè)計(jì)規(guī)范文檔上，對(duì)字體大小沒(méi)有做嚴(yán)格的數(shù)值規(guī)定，只提供了一些指導(dǎo)原則：
單位：點(diǎn)pt
– 即便用戶選擇了最小文字大小，文字也不應(yīng)小于 22 點(diǎn)。作為對(duì)照，正文樣式在大字號(hào)下使用 34 點(diǎn)字體大小作為默認(rèn)文字大小設(shè)置。
– 通常來(lái)說(shuō)，每一檔文字大小設(shè)置的字體大小和行間距的差異是 2 點(diǎn)。例外情況是兩個(gè)標(biāo)題樣式，在最小、小和中等設(shè)置時(shí)都使用相同字體大小、行間距和字間距。
– 在最小的三種文字大小中，字間距相對(duì)寬闊；在最大的三種文字大小中，字間距相對(duì)緊密。
– 標(biāo)題和正文樣式使用一樣的字體大小。為了將其和正文樣式區(qū)分，標(biāo)題樣式使用加粗效果。
– 導(dǎo)航控制器中的文字使用和大號(hào)的正文樣式文字大小（明確來(lái)說(shuō)，是 34 點(diǎn)）。
– 文本通常使用常規(guī)體和中等大小，而不是用細(xì)體和粗體。
百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查：
單位：像素px
還有個(gè)方法就是找你覺(jué)得好的APP應(yīng)用，手機(jī)截圖后放進(jìn)PS自己對(duì)比調(diào)節(jié)字體大小。
重慶分公司
重慶分公司
