APP UI設計及切圖規範

01-25

1.概述

1.1 編寫目的

該文檔主要針對移動端開發的視覺設計和開發過程中的工作環節做統一的規劃規範，是系統進入UI設計的前置文檔。部分內容來自網路收集修編，轉載請註明由嗡嗡（iwengweng.cn）整理。

1.2 讀者對象

項目實施工作組UI/UE設計人員。

2.色值規範

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

色彩範圍值：以通用字型大小C開頭標識，在Android開發中對應相應的配置文件

參考：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為寬度尺寸為基準標註。

字體：按照640/750寬尺寸中的像素進行標註。
顏色：按照實際的顏色值標註，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。
在文件名中需要區分是幾倍圖，例如: xxxxx@2x.png。

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 字體