android的界面設計規范

A. 手機UI設計的基本規范

大家都知道手機採用的：一個是蘋果的iOS系統，另一個就是谷歌公司的安卓系統。華為的鴻蒙系統雖然早就上線，但是還沒有真正運用在手機移動端上，小阿在這里期待著，希望有一天也能寫「華為『鴻蒙系統』的界面尺寸規范。」

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

垂直邊距

①狀態欄：24dp；②工具欄：56dp；③標題和列表項：48dp；④子標題：48dp；⑤內容區域間距離為8dp

6、切圖

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

7、界面適配

安卓多屏幕支持的基礎是它能夠管理應用程序的布局和點陣圖可繪制對象的渲染以適當的方式對當前屏幕配置的能力。該系統處理的大部分工作由布局縮放以適合屏幕尺寸/密度和縮放點陣圖可繪制在屏幕密度正確呈現您的應用程序在每個屏幕的配置，來優化用戶界面設計，帶來更良好的用戶體驗。

如何做到安卓界面適配呢？大家一定要很清楚的了解解析度、屏幕大小、密度的關系；明白實際密度和系統密度的關系，dp、sp、px的區別；明白dp與px的轉換。這里不做過多闡述，後期寫一篇具體的~

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

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

B. Android UI規范是什麼

從事UI設計行業的朋友都知道，每一張設計稿都是有規范尺寸的，並且IOS的和Android還不同，IOS UI設計規范為375*667 1x的尺寸，那麼Android UI規范是什麼呢，下面讓我們一起來了解一下。

• 01

  在做Android UI設計的時候，畫布的尺寸我們一般都是選擇360*640 1x，也就是說是選擇720*1280這個尺寸。

• 02

  我們從上到下來進行了解，最上邊的是狀態欄，狀態欄的高度是25。

• 03

  在狀態欄中肯定就是信號、電源以及時間這些了，每個Android定製系統的擺放樣式都不同，這一點不用糾結。

• 04

  狀態欄下邊就是導航欄了，導航欄起到的是導航作用，高度是45px。

• 05

  導航欄中間一般都是有文字來起到提醒作用的，導航文字的大小一般都是18px。

• 06

  在最下方就是我們的標簽欄了，標簽欄的作用就是給用戶提供切換界面的作用，標簽欄的高度為50px。

• 07

  在標簽欄中擺放的肯定就是我們的ICON圖標了，要注意，圖標的切圖點擊區域不能夠小於24px。

• 08

  一些ICON圖標的下方還會有文本，這里文本的大小一般就是10或者是11px了，因為范圍有限。

特別提示

本文尺寸均為1x。

C. 淺談iOS與Android設計規范：6類交互設計規范對比

iOS和Android兩個不同的平台，肯定是有很多區別的，下面就從交互的角度，談談區別。

以前就讀過IOS和Android的規范，但是覺得沒啥大用處，因為現在APP為了保持一致性，通常在IOS和Android上的設計是一樣的，而且一些小公司只設計IOS的交互原型，因為只要IOS上能用，安卓上肯定沒問題，前段時間，和一個人聊，問我它倆的區別，當時一臉懵逼，不知從何說起。畢竟是兩個不同的平台，肯定是有很多區別的，下面就從交互的角度，談談區別。
一、全局導航
IOS：通常放在底部，方便用戶點擊
Android：通常放在上面，下面有物理按鍵，防止誤操作。

解析：因為Android比IOS多了物理按鍵，為了防止誤操作，所以只能將全局導航放在上面，但是隨著屏幕越來越大，上面是手指無法觸及的區域，所以切換起來相對成本較高。
二、二級導航
IOS：通常放返回、上一級標題、標題（居中），操作通常只有一個
Android：通常返回控制項、logo、下拉菜單、重要操作、更多操作

解析：IOS顯示了上一級的名稱，讓用戶點擊返回後，心裡有預期，Android放了APP的logo，增加了品牌性，但是就使用來講，用戶不知道點擊會回到哪，下拉菜單和更多操作都需要點擊才能顯示，增加了操作步驟。
三、工具欄
IOS：通常放在最下面，方便操作
Android：放在導航欄里，將重要操作放在外面，其他放在更多里。

解析：IOS將操作都放在底部，區域更大，操作更方便。Android將操作放在了頂部，顯得很擁擠，並且還收起了一部分，需要用戶查找，但是卻節省了空間，讓內容顯示區更大。
四、提示框
IOS：出現在屏幕中間，可以帶圖標，可以不帶，可以是靜態的，也可以是動態的。
Android：不可以帶圖標，不能是動態的，最多隻可以帶一個操作按鈕，最多隻能出現一個提示，不能和低端的懸浮按鈕重合。

解析：IOS的設計理念是盡量不打擾用戶，只要用戶能看見變化，輕易不會出現提示，只有一些用戶無法感知時，才會出現提示框，所以可以是動態的，像調節音量。Android的提示要比IOS重一些，因為它可以帶一個按鈕。
五、警示框
IOS：標題和按鈕是必須的，可以有內容和輸入

Android：主要有四種：用途、內容、事件、表現。
1、用途包含了標題，內容和事件。

六、手勢定義
IOS的手勢規定有8種，如下：

解析：IOS只有8種手勢，Android有14種，但是很多都不常用，個人感覺IOS的8種已經完全夠用了，定義那麼多種，用戶的學習成本就會提高，而且Android的有些手勢並沒有定義可以做什麼，所以給出這么多手勢也沒有用。
結語
本文對IOS和Android的規范進行了對比，Android的規范那是相當詳細，但是IOS的只給出了設計原則，所以，一些是我自己總結的，可能對比的還不夠全面，歡迎大家一起討論。

D. Android 平台設計規范有哪些

1、尺寸以及解析度：

Android的界面尺寸比較流行的有：480*800、720*1280、1080*1920，我們在做設計圖的 時候建議是以 480*800的尺寸為標准；

2、界面基本組成元素：

界面基本組成元素包括：狀態欄+導航欄+主菜單欄+內容區域；以480*800的尺寸為標准下的 各個元素的高度(其實導航欄和菜單欄每一個應用都或許不一樣，android對於尺寸沒有太明確的 數據規范)如下：

3、字體：

Android 系統中，Droid Sans 是默認字體，與微軟雅黑很像；

4、操作欄：

1、」操作欄」對於 Android 應用來說是最重要的設計元素，它通常在應用運行的所有時間都呆 在屏幕頂部；

2、 操作欄的基本布局：

1向上＋2 Spinner視圖控制＋3 重要操作按鈕＋4 更多操作：其中，向上按鈕，點擊後是去到 當前界面的上一個層級，非第一層級界面有此按鈕，第一層級界面則無向上按鈕；Spinner 是 用於展示內容的下拉菜單，其內容包括視圖的快速切換和顯示相關內容的完整信息；更多操作 （action overflow）是集合操作欄中不常用的和非重要操作的地方。

5、多面板布局：

多面板布局更多的是針對平板電腦，把手機端的目錄視圖和詳情視圖兩個層級的界面，甚至更 多的頁面，復合展示在同一個界面中，有效地利用平板電腦的屏幕空間，扁平化層級結構，簡 化導航。這點在iPad上已經運用得相當嫻熟了。

6、選擇：

Android4.0中的長按與Android2.3及更早期的版本有很大的不同。早期版本長按操作後，是 出現情境菜單的浮出層。在Android4.0中，長按後在操作欄的位置會覆蓋一個臨時的情境操 作欄，不再彈出情境菜單浮出層。在臨時情境操作欄的環境下，當前界面的內容項允許被單個 處理，也允許被批量處理。

7、返回和向上：

返回按鍵用在手機全局的虛擬導航欄中，基於用戶最近查看的界面歷史，採用時間倒序的方式， 連接界面間的關系。向上按鈕用在操作欄的左側，基於層級結構，點擊後是去到當前界面的上一 個層級，若當前界面已經是最高一級，則沒有向上按鈕。

8、主題樣式：

推出三套默認主題：Holo淺色主題、Holo深色主題、Holo淺色底+深色操作欄主題。主推app在 這三套默認主題的基礎上做設計，以加快app研發效率，但只是建議使用，並沒有完全強制。

9、觸摸與反饋：

用戶觸摸應用中的可操作區域，應當在視覺上有響應，微小的反饋會給用戶帶來很好地效果；

10、按鈕：

1、按鈕的3種表現形式如下圖：

2、對於僅包括圖標的按鈕，不需要使用背景色；

11、滑塊：

滑塊的幾種表現形式如下圖：

12、進度條：

如果某個操作需要花費很長的時間，就需要用進度條的指示和旋轉圈的形式來表示：

1、如果你可以知道當前任務完成的比例，那麼使用進度條，讓用戶了解大約還需要多久才能完成；

2、當使用旋轉圓圈時，不要配以文字標簽。旋轉的圓圈已經表明了正在進行後台操作。

13、開關：

用戶通過開關作出選擇，包括3種形式：復選框+單選按鈕+開關；

1、復選框：用戶可以在一個集合中作出多個選擇：

2、單選按鈕：單選按鈕允許用戶在一個集合中做一次選擇；

3、開關：開關控制單個選項的狀態；

14、對話框：

應用通過對話框讓用戶作出決定或者填寫一些信息，

1、對話框的左邊一般情況下是取消按鈕，右邊是確定按鈕；

E. 如何設置AndroidUI設計字體的大小規范

Android UI設計字體，由於android廠商和設備之多，目前沒含陵寬有特定的標准，但根據設備的尺寸，有一個建議的原則，如下：

sp和dp一樣，是android開發里特有的單位，設計師在做UI設計的時候通常最初是建立320*480這個尺寸的畫布開始的，這個尺寸的畫布在android解析度的分類中稱為mdpi，在這個尺寸下，ps里的1px就等於android中的1dp，同樣，這個時候1點的字就等於android中1sp。

UI即User Interface（用戶界面）的簡稱。UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味，還談亮要讓軟體的操作變得舒適、簡單、自由，充分體現軟體的定位和特點。由於UI設計涉及學科交廣，作為UI設計的主體，設計公司的專業程度及規模是汪橡決定作品質量的重要條件，大部分設計公司無法同時滿足UI設計對各方面人才的要求，以至於出產的作品大多存在各種缺陷

F. 移動應用界面設計的尺寸設置及規范

一、android篇

1、android解析度

Android的多解析度，一向是設計師和開發者非常頭疼的事兒。盡管如此，對於多分辨造成的復雜問題，也是大家要優先解決的。Android支持多種不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi

注意，ppi、dpi 是密度單位，不是度量單位 ：

dpi主要應用於輸出，重點是列印設備上；ppi對於設計師應該比較熟悉，photoshop畫布的解析度常設置為72像素/英寸，這個單位其實就是ppi 。盡管概念不同，但是對於移動設備的顯示屏，可以看作ppi=dpi 。

ppi的運算方式是：PPI = √（長度像素數² + 寬度像素數²） / 屏幕對角線英寸數。即：長、寬各自平方之和的開方，再除以屏幕對角線的英寸數。

以iphone5為例，其ppi=√（1136px² + 640px²）/4 in=326ppi（視網膜Retina屏）

對於android手機，一個不確切的分法是，720 x 1280 的手機很可能接近 320 dpi （xhdpi模式），480 x 800 的手機很可能接近 240 dpi （hdpi模式），而320 x 480 的手機則很接近 160 dpi（mdpi模式）。

2、單位換算方法

android開發中，文字大小的單位是sp，非文字的尺寸單位用dp，但是我們在設計稿用的單位是px。這些單位如何換算，是設計師、開發者需要了解的關鍵。

簡單理解的話，px（像素）是我們UI設計師在PS里使用的，同時也是手機屏幕上所顯示的，dp是開發寫layout的時候使用的尺寸單位。

為什麼要把sp和dp代替px？ 原因是他們不會因為ppi的變化而變化，在相同物理尺寸和不同ppi下，他們呈現的高度大小是相同。也就是說更接近物理呈現，而px則不行。

根據單位換算方法，可總結出：

當運行在mdpi下時，1dp=1px ：也就是說設計師在PS里定義一個item高48px，開發就會定義該item高48dp ；

當運行在hdpi模式下時，1dp=1.5px ：也就是說設計師在PS里定義一個item高72px，開發就會定義該item高48dp ；

當運行在xhdpi模式下時，1dp=2px ：也就是說設計師在PS里定義一個item高96px，開發就會定義該item高48dp ；

當你的app需要適配多個dpi模式的時候，請參考圖1的比例進行換算 。

3、設計稿基本元素的尺寸設置

為了適應多解析度的手機，理想的方式是為每種解析度做一套設計稿，包括所用到的icon、設計稿標注等。但在實際開發中，這種方法耗時耗力。所以通常會選擇折中的方法。

方法一 ：在標准基礎上（比如xhdpi）開始，然後放大或縮小，以適應到其他尺寸。不足之處是，對於更高解析度的手機，圖標被放大後會導致質量不高。

方法二： 以最高解析度為基準設計，然後縮小適應到所需的小解析度上。缺點是，圖標等若都最大尺寸，載入時速度慢且耗費流量較多，對於小解析度的用戶也不夠好。

結合友盟的解析度佔比數據、也為了方便換算到android開發中的尺寸單位， 推薦設計稿的畫布尺寸選用 720X1280 ，解析度仍舊為72ppi（像素/英寸）。

在android規范中對於導航欄、工具欄等的尺寸沒有明確的規定。但根據48dp原則，以及一些主流的android應用的截圖分析，總結一下尺寸要求：

狀態欄高度 ：50 px

導航欄、操作欄高度 ：96 px=48dp x 2

主菜單欄高度 ：96 px

內容區域高度 ：1038 px （1280-50-96-96=1038）

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，高度也和菜單欄一樣為：96 px

4、圖標和字體大小（來自官方規範文檔）

a、啟動圖標（home頁或app列表頁）

整體大小為48 x 48 dp

b、操作欄圖標，代表用戶在app中可以使用到的最重要的圖標

整體大小為32 x 32 dp ，圖形實際區域為 24 x 24 dp

c、小圖標/場景圖標，提供操作或特定項目的狀態。

比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ，圖形實際區域為 12 x 12 dp 。

d、通知圖標

如果app有通知，要提供一個有新通知時顯示在狀態欄的通知圖標。整體大小為24 x 24 dp ，圖形實際區域為 22 x 22 dp 。

註：android規范提供的尺寸單位是dp，若設計稿尺寸設為720 x 1280 ，圖標大小需在規范要求的尺寸數字上乘以2。比如操作欄圖標32 x 32 dp ，則設計稿上應該是64 x 64 px 。

e、字體大小

Android規范中的要求如下：

前面提到Android開發中的字型大小單位是sp，而換算關系是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上，字體大小可選擇為 24px 、28px 、32px 、36px ，主要根據文字的重要程度來選擇，特殊情況下也可能選擇更大或更小的字體。

f、其他尺寸要求

通常把48dp作為可觸摸的UI元件的標准。

為什麼要用48dp呢？一般來說，48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米，以方便用戶手指能准確並且舒適觸摸目標區域 。

如果你設計的元素高和寬至少48dp，你就可以保證：

（1）觸摸目標絕不會比建議的最低目標（7mm）小，無論在什麼屏幕上顯示。

（2）在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。

另外，每個UI元素之間的空白通常是8dp 。

二、iOS篇

1、解析度

iPhone 界面尺寸：

iPad 界面尺寸：1024×768、2048×1536

（以上單位都是像素，至於解析度一般網頁UI和移動UI基本上都只要 72 ppi）

2、單位換算px、pt

這里需要先區分pt、px，pt(磅值)是物理長度單位，指的是72分之一英寸。手機上看來同一大小的字磅值是一樣的，但是換算成不同解析度手機的字型大小px值不一樣。（px=pt*ppi/72）

iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5的ppi沒有變化，兼容性方面要增加類似首屏畫面等程序上的判斷。

在iPhone界面上元素的定位、尺寸是通過一個單位point，而非px，屏幕上固定有320x480pt，retina屏兩倍的解析度改變的只是pt和px之間的比例而已，這樣就能實現不改變程序，只上傳兩套圖片就兼容兩個解析度。

****在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機尺寸來設計，比較方便預覽效果，一般用 640×960 或者 640×1136 的尺寸設計。其中設計稿的畫布解析度設為默認的72ppi（此時1px=1pt ），所以設計師可以統一採用px為單位。
開發拿到設計稿時，將上面標注的以px為單位的字型大小大小、圖像尺寸除以2，就是非retina屏上的pt值，這樣在retina屏上也可以根據此pt值換算對應的px大小，以確保不同的解析度下有合適的效果。****

3、基本元素的尺寸設置

iPhone的APP界面一般由四個元素組成，分別是：狀態欄、導航欄、主菜單欄以及中間的內容區域。

這里取用 640×960 的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸：

狀態欄：就是我們經常說的信號、運營商、電量等顯示手機狀態的區域，其高度為：40 px

導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間跳轉的按鈕，其高度為：88 px

主菜單欄：類似於頁面的主菜單，提供整個應用的分類內容的快速跳轉，其高度為：98 px

內容區域：展示應用提供的相應內容，整個應用中布局變更最為頻繁的，其高度為：734 px=960-40-88-98

以上尺寸適用於 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其實就是中間的內容區域高度增加到：910 px，其他尺寸也同上。

4、常用圖像、圖標大小（來自官方規範文檔）

單位：像素

5、字體大小

iOS交互設計規範文檔上，對字體大小沒有做嚴格的數值規定，只提供了一些指導原則：

單位：點pt

– 即便用戶選擇了最小文字大小，文字也不應小於 22 點。作為對照，正文樣式在大字型大小下使用 34 點字體大小作為默認文字大小設置。

– 通常來說，每一檔文字大小設置的字體大小和行間距的差異是 2 點。例外情況是兩個標題樣式，在最小、小和中等設置時都使用相同字體大小、行間距和字間距。

– 在最小的三種文字大小中，字間距相對寬闊；在最大的三種文字大小中，字間距相對緊密。

– 標題和正文樣式使用一樣的字體大小。為了將其和正文樣式區分，標題樣式使用加粗效果。

– 導航控制器中的文字使用和大號的正文樣式文字大小（明確來說，是 34 點）。

– 文本通常使用常規體和中等大小，而不是用細體和粗體。

網路用戶體驗做過的一個小調查：

單位：像素px

還有個方法就是找你覺得好的APP應用，手機截圖後放進PS自己對比調節字體大小。