1. 程式人生 > >iOS和Android的app介面設計規範

iOS和Android的app介面設計規範

最近從一個程式猿變成產品汪了!人生職場的一次轉變吧!從開發人員轉產品,也需要很多基本工具和規範需要學習;
以下是自己對APP設計過程中一些自己寫學習和總結,難免有錯,歡迎指正;

在產品道路成長中,記錄一下iOS和Andoird的介面設計規範,方便進行標準的產品設計,並與設計師順暢溝通;

*iOS篇*

介面尺寸 :

這裡寫圖片描述

這裡寫圖片描述

圖示尺寸 :
這裡寫圖片描述

字型 :

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

百度使用者體驗部做過一個小調查, 對於app字型大小的調查結論如下:

這裡寫圖片描述

顏色值 :


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

內部設計 :

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

這裡寫圖片描述

Android篇

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

狀態列高度:50 px
導航欄高度:96 px
標籤欄高度:96 px
Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了螢幕中,當然高度也是和標籤欄一樣的:96 px
內容區域高度為:1038 px (1280-50-96-96=1038)

圖表尺寸:

這裡寫圖片描述

ps: Android設計規範中, 使用的單位是dp, dp在安卓機上不同的密度轉換後的px 是不一樣的;

字型 :

Android 上的字型為: Droid sans fallback ,是谷歌自己的字型,與微軟雅黑很像。
Android的字型大小調查結論是:

這裡寫圖片描述

顏色值 :

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