1.概述

1.1 編寫目的

該文件主要針對移動端開發的視覺設計和開發過程中的工作環節做統一的規劃規範，是系統進入UI設計的前置文件。

1.2 讀者物件

專案實施工作組UI/UE設計人員。

2.色值規範

系統採用統一色彩標註值，超出的需要進行登記管理。

色彩範圍值：以通用字號C開頭標識，在Android開發中對應相應的配置檔案

2.1 螢幕適配

Android 手機:

320 *480 機型： 
480 *800 機型： 
480 *854 機型： 
540 *960 機型： 
720 *1184 機型： 
800 *1280 機型： 
1080 *1776 機型：Sony Xperia Z/L36h 
1080 *1920 機型：

Android 平板:

480 *800 機型： 
600 *800 機型： 
600 *1024 機型： 
768 *1024 機型： 
800 *1280 機型： 
1600 *2560 機型：

蘋果手機:

320 *480 機型：iPhone 3gs 
640 *960 機型：iPhone 4和4s 
640 *1136 機型：iPhone 5和5s 
750 *1334 機型：iPhone 6 和6s 
1080 *1920 機型：iPhone 6 plus

蘋果Pad:

768 *1024 機型：ipad1、ipad2、ipad mini 
1536 *2048 機型：ipad3、ipad4、ipad air、ipad mini2

2.2 標註/切圖

2.2.1 Android篇

標註規範：

• 畫布大小：以720 x 1280解析度為準進行標註。
• 字型：按照畫素標註，只使用 24 pt，28 pt，36 pt 和 44 pt 的字型，並pt 值除以 2 作為 sp 數值交給工程師。
• 顏色：按照實際的顏色值標註，Android顏色值取值為十六進位制的值 比如一綠色的值， 給工程師的值為 #5bc43e。
• 間距：每個主要的控制元件必須標註出來，各種邊距必須標註清楚。所有尺寸的 px 值除以2作為 dp 數值交給工程師。

切圖：

• 統一採用Png格式
• 部分需要做適配的圖片需要製作.9格式

圖片優化：

• 圖片壓縮優化
• ICON 可採用PNG 8
• 支援完全透明和完全不透明兩種效果和256色
• 需要高清的可採用 PND24/32

切圖命名:

• 每個頁面按照設計高保真分目錄：hdpi（480 *800）xhdpi（720 *1080） xxdpi（1080 *1920）。

• 依圖片性質命名。例如 bg_xxx.png、btn_xxx.png、img_xxx.png、tab_xxx.png等。

2.2.2 iOS篇：

標註規範：

• 畫布大小：以@2x圖以640/750為寬度尺寸為基準標註。
• 字型：按照720寬尺寸中的畫素進行標註。
• 顏色：按照實際的顏色值標註，iOS顏色值取 RGB各顏色的值比如某個色值，給予IOS程式設計師的色值為 R:12 G:34 B:56給出的值就是 12,34,56(有時也要根據程式設計師的習慣，有時也用十六進位制)。
• 間距：每個主要的控制元件必須標註出來，各種邊距必須標註清楚。

參考：

切圖：

• 統一採用Png格式
• 以640/750寬解析度為@2x輸出三套尺寸：@1x @2x @3x

圖片優化：

• 圖片壓縮優化
• ICON 可採用PNG 8
• 支援完全透明和完全不透明兩種效果和256色
• 需要高清的可採用 PND24/32

切圖命名:

• 每個頁面按照設計高保真分目錄：@1x @2x @3x。
• 在檔名中需要區分是幾倍圖，例如: [email protected]。

2.3 設計規範

2.3.1 iOS篇

2.3.1.1 介面尺寸

設計圖單位：畫素72dpi。在設計的時候並不是每個尺寸都要做一套，尺寸按自己的手機來設計，比較方便預覽效果，一般用640 *1136或者750 *1334的尺寸來設計，現在iPhone6和plus出來後有很多人會使用6的設計效果。

Ps：作圖的時候確保都是用形狀工具(快捷鍵：U)畫的，這樣更方便後期的切圖或者尺寸變更。

2.3.1.2 介面基本元素

iPhone的app介面一般由四個元素組成，分別是：狀態列(status bar)、導航欄(navigation)、主選單欄(submenu)、內容區域(content)。

這裡取用640*960的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。

• 狀態列(status bar)：就是我們經常說的訊號、運營商、電量等顯示手機狀態的區域，其高度為：40px
• 導航欄(navigation)：顯示當前介面的名稱，包含相應的功能或者頁面間的跳轉按鈕，其高度為：88px
• 主選單欄(submenu，tab)：類似於頁面的主選單，提供整個應用的分類內容的快速跳轉，其高度為：98px
• 內容區域(content)：展示應用提供的相應內容，整個應用中佈局變更最為頻繁，其高度為:734px

至於我們經常說的iPhone5/5s的640*1136的尺寸，其實就是中間的內容區域高度增加到910px。

PS：在iOS7版本以上的風格中，蘋果已經開始慢慢弱化狀態列的存在，將狀態列和導航欄合在了一起，但是再怎麼變，尺寸高度也還是沒有變的，只不過大家在設計iOS7版本以上風格的介面的時候多多注意下： 

2.3.1.3 圖示尺寸

2.3.1.4 啟動圖片尺寸

640x960、640x1136、750x1334、1242x2208基本就涵蓋了所有情況：

iPhone Portrait iOS 8-Retina HD 5.5 （1242×2208） @3x 
iPhone Portrait iOS 8-Retina HD 4.7 （750×1334） @2x 
iPhone Portrait iOS 7,8-2x （640×960） @2x 
iPhone Portrait iOS 7,8-Retina 4 （640×1136） @2x 
iPhone Portrait iOS 5,6-1x （320×480） @1x 
iPhone Portrait iOS 5,6-2x （640×960） @2x 
iPhone Portrait iOS 5,6-Retina4 （640×1136） @2x

2.3.1.5 字型

iPhone 上的字型英文為： HelveticaNeue 至於中文，Mac下用的是黑體-簡，Win下則為華文黑體，所有字型要用雙數字號。 

2.3.1.6 顏色值

IOS顏色值取 RGB各顏色的值比如某個色值，給予IOS開發的色值為 R:12 G:34 B:56 給出的值就是 12,34,56(有時也要根據開發的習慣，有時也用十六進位制)

2.3.1.7 內部設計

• 1、所有能點選的圖片不得小於44px（Retina需要88px）
• 2、單獨存在的部件必須是雙數尺寸
• 3、兩倍圖以@2x作為命名字尾
• 4、充分考慮每個控制按鈕在4中狀態下的樣式，如圖

2.3.2 Android篇

2.3.2.1 介面尺寸

Android常用介面尺寸：480 *800、720 *1280、1080 *1920。

android的尺寸眾多，建議使用解析度為720x1280 的尺寸設計。這個尺寸 720x1280中顯示完美，在 1080x1920 中看起來也比較清晰；切圖後的圖片檔案大小也適中，應用的記憶體消耗也不會過高。

2.3.2.2 介面基本元素

• 狀態列高度：50 px
• 導航欄高度：96 px
• 標籤欄高度：96 px

Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了螢幕中，當然高度也是和標籤欄一樣的：96 px內容區域高度為：1038 px （1280-50-96-96=1038） 

Android為了在介面上區別於iOS，Android4.0開始提出的一套HOLO的UI風格一些app的最新版本都採用了這一風格，這一風格最明顯的變化就是將下方的主選單移到了導航欄下面，這樣的方式解決了現在很多手機去除實體鍵後再螢幕中顯示而出現的雙底欄的尷尬情景。 

2.3.2.3 圖示尺寸ps: Android設計規範中， 使用的單位是dp， dp在安卓機上不同的密度轉換後的px 是不一樣的。

2.3.2.4 啟動圖片尺寸

480 *800、720 *1280、1080 *1920基本滿足了大部分情況，不過鑑於安卓手機解析度過多，啟動頁還是建議進行適配開發。

2.3.2.5 字型

Android 上的字型為： Droid sans fallback ，是谷歌自己的字型，與微軟雅黑很像。 

2.3.2.6 顏色值

Android顏色值取值為十六進位制的值 比如一綠色的值， 給開發的值為 #5bc43e