IOS與Android APP界面設計規范要點


IOS篇

一、尺寸及分辨率

iPhone界面尺寸:320*480、640*960、640*1136

iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)

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

如果是我來做的話,我會使用640×1136,對plus做單獨的修改適配,因為plus的屏幕實在是大了,遵循屏大顯示更多內容的原則這里本應該是需要修的了。有更好辦法的話希望大家可以分享一下。

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

二、界面基本組成元素

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

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

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

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

主菜單欄(submenu,tab):類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98px

內容區域(content):展示應用提供的相應內容,整個應用中布局變更最為頻繁,其高度為:734px01

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

PS:在最新的iOS7的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎么變,尺寸高度也還是沒有變的,只不過大家在設計iOS7風格的界面的時候多多注意下~02

三、字體大小

iPhone上的字體英文為:HelveticaNeue 。至於中文Mac下用的是黑體,Win下則為華文黑體(最新字體稱為黑體-簡)。

下圖是百度用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小。03

四,切圖

切圖是APP設計中的一個重要過程,關系到APP的界面實現,及各種適配性還有各種性能

IOS在沒6plus前,我們只需要提供兩種圖,普通圖及視網膜屏幕圖。

以640×1136(640×960是一樣的)做的設計圖的話就會好辦一點。直接出設計圖上的原大小圖標,比如我們命名一個圖片叫 img-line.png,我們給開發的圖就要改變這個名字叫 img-line@2x.png 就是在后綴名前加上@2x表示視網膜屏的圖,iPhone4的還需要把這個圖尺寸按比例縮小50%,得到正真的img-line.png。然后把這兩個圖移交給開發,iPhone6的圖在規范里是與5s使用的是一樣的,也是@2x圖。有些UI則需要做適當的適配,比如拉長,拉高,這個開發會去做。

對於IPhone6 plus的話范里給出的是@3x相信大家也知道是怎么回事,但如果要使用PS放大的話,大家做圖的時候就需要使用形狀工具來做,放大后還需要仔細微調,這里就不多做講解

溫馨提示: 在出可按的圖片切圖時需要注意圖片的可按區域大小,有時圖標很小,實際切出來的放在上面,用手指是按不到的,我們就需要對圖片單獨處理,拓寬圖片的有效區域,這里是拓寬非放大,就是改變畫布大小使圖片尺寸面積擴大,使圖片四周拓寬多余的透明區域 ,從而改變可按大小。

五,顏色值問題

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

ANDROID篇

一、尺寸及分辨率

Android界面尺寸:480*800、720*1280、1080*1920

Android比iPhone的尺寸多了很多套,建議取用720*1280這個尺寸,這個尺寸720*1280中顯示完美,在1080*1920中看起來比較清晰,切圖后的圖片文件大小也適中,應用的內存消耗也不會過高。

二、界面基本組成元素

Android的app界面和iPhone的基本相同:狀態欄、導航欄、主菜單、內容區域。

04

Android中我們取用的720*1280的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸。

狀態欄高度為:50px

導航欄高度為:96px

主菜單欄高度為:96px

內容區域高度為:1038px(1280-50-96-96=1038)

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

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

05

三、字體大小

Android 上的字體為:Droid sans fallback,是谷歌自己的字體,與微軟雅黑很像。

同樣,百度用戶體驗的調查中,可以看出用戶可接受的文字相應問題。06

具體大小,還是那句話,找自己喜歡的app界面,手機截圖后放進PS自己對比調節字體大小,切記,一定是高清截圖

四,切圖

Android設計規范中單位是dp,dp在安卓機上不同的密度轉換后的px 是不一樣的,所以按照設計圖的px轉換成dp也是不一樣的,這個可以使用轉換工具轉換,開發一般會有,也有些開發會使用px做單位,因為做了前期的轉換工作

五,顏色值問題

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM