1.概述 1.1 編寫目的
該文檔主要針對移動端開發的視覺設計和開發過程中的工作環節做統一的規劃規范,是系統進入UI設計的前置文檔。
1.2 讀者對象
項目實施工作組UI/UE設計人員。
2.色值規范
系統采用統一色彩標注值,超出的需要進行登記管理。
色彩范圍值:以通用字號C開頭標識,在開發中對應相應的配置文件
參考:開發設計規范
2.1 屏幕適配
手機:
320 *480 機型:
480 *800 機型:
480 *854 機型:
540 *960 機型:
720 *1184 機型:
800 *1280 機型:
1080 *1776 機型:Sony Z/L36h
1080 *1920 機型:
平板:
480 *800 機型:
600 *800 機型:
600 *1024 機型:
768 *1024 機型:
800 *1280 機型:
1600 *2560 機型:
蘋果手機:
320 *480 機型: 3gs
640 *960 機型: 4和4s
640 *1136 機型: 5和5s
750 *1334 機型: 6 和6s
1080 *1920 機型: 6 plus
蘋果Pad:
768 *1024 機型:ipad1、ipad2、ipad mini
1536 *2048 機型:ipad3、ipad4、ipad air、ipad mini2
2.2 標注/切圖 2.2.1 篇
標注規范:
切圖:
圖片優化:
切圖命名:
2.2.2 iOS篇:
標注規范:
參考:
切圖:
圖片優化:
切圖命名:
2.3 設計規范 2.3.1 iOS篇
2.3.1.1 界面尺寸
設計圖單位:像素72dpi。在設計的時候并不是每個尺寸都要做一套,尺寸按自己的手機來設計,比較方便預覽效果,一般用640 *1136或者750 *1334的尺寸來設計,現在和plus出來后有很多人會使用6的設計效果。
Ps:作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便后期的切圖或者尺寸變更。
2.3.1.2 界面基本元素
的app界面一般由四個元素組成,分別是:狀態欄( bar)、導航欄()、主菜單欄()、內容區域()。
這里取用640*960的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。
至于我們經常說的/5s的640*1136的尺寸,其實就是中間的內容區域高度增加到910px。
PS:在iOS7版本以上的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎么變,尺寸高度也還是沒有變的,只不過大家在設計iOS7版本以上風格的界面的時候多多注意下:
2.3.1.3 圖標尺寸
2.3.1.4 啟動圖片尺寸
、、、基本就涵蓋了所有情況:
iOS 8- HD 5.5 (1242×2208) @3x
iOS 8- HD 4.7 (750×1334) @2x
iOS 7,8-2x (640×960) @2x
iOS 7,8- 4 (640×1136) @2x
iOS 5,6-1x (320×480) @1x
iOS 5,6-2x (640×960) @2x
iOS 5,6- (640×1136) @2x
2.3.1.5 字體
上的字體英文為: 至于中文,Mac下用的是黑體-簡,Win下則為華文黑體,所有字體要用雙數字號。
2.3.1.6 顏色值
IOS顏色值取 RGB各顏色的值比如某個色值,給予IOS開發的色值為R:12 G:34 B:56給出的值就是12,34,56(有時也要根據開發的習慣,有時也用十六進制)
2.3.1.7 內部設計
2.3.2 篇
2.3.2.1 界面尺寸
常用界面尺寸:480 *800、720 *1280、1080 *1920。
的尺寸眾多,建議使用分辨率為 的尺寸設計。這個尺寸 中顯示完美,在 中看起來也比較清晰;切圖后的圖片文件大小也適中,應用的內存消耗也不會過高。
2.3.2.2 界面基本元素
最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,當然高度也是和標簽欄一樣的:96 px內容區域高度為:1038 px(1280-50-96-96=1038)
為了在界面上區別于iOSui切圖英文命名規范,.0開始提出的一套HOLO的UI風格一些app的最新版本都采用了這一風格ui切圖英文命名規范,這一風格最明顯的變化就是將下方的主菜單移到了導航欄下面,這樣的方式解決了現在很多手機去除實體鍵后再屏幕中顯示而出現的雙底欄的尷尬情景。
2.3.2.3 圖標尺寸
ps: 設計規范中, 使用的單位是dp, dp在安卓機上不同的密度轉換后的px 是不一樣的。
2.3.2.4 啟動圖片尺寸
480 *800、720 *1280、1080 *1920基本滿足了大部分情況,不過鑒于安卓手機分辨率過多,啟動頁還是建議進行適配開發。
2.3.2.5 字體
上的字體為: Droid sans ,是谷歌自己的字體,與微軟雅黑很像。
2.3.2.6 顏色值
顏色值取值為十六進制的值 比如一綠色的值, 給開發的值為#