APP在IOS與Android系統(tǒng)界面設計規(guī)范

時間：2022-05-24 10:48:01 | 來源：網(wǎng)絡營銷

時間：2022-05-24 10:48:01 來源：網(wǎng)絡營銷

相信很多人都在開發(fā)設計APP時會遇到很多界面上的問題，剛開始接觸UI設計的新手們，碰到最多的就是有關尺寸多少，界面多大，文字怎么樣才合適的問題了，關于APP我是不是要根據(jù)不同的系統(tǒng)做幾套不同大小的才能適應呢？一大堆問題都讓人頭疼！

下面我就在億企邦上跟大家做一點技巧總結(jié)和界面設計規(guī)范，雖然每個工程師們所使用的控件，書寫布局習慣來實際移交的圖是不一樣的，但八九不離十，都是遵循一個原則，便捷開發(fā)、自適應強的開發(fā)模式。

一、APP在IOS系統(tǒng)界面設計規(guī)范

iOS是由蘋果公司開發(fā)的移動操作系統(tǒng)，蘋果公司最早于2007年1月9日的Macworld大會上公布這個系統(tǒng)，最初是設計給iPhone使用的，后來陸續(xù)套用到iPod touch、iPad以及Apple TV等產(chǎn)品上，iOS與蘋果的Mac OS X操作系統(tǒng)一樣，屬于類Unix的商業(yè)操作系統(tǒng)。

1、尺寸及分辨率

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

（1）、界面尺寸

（2）、圖標尺寸

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

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

2、界面基本組成元素

iPhone的APP界面一般由四個元素組成，分別是：狀態(tài)欄(status bar)、導航欄(navigation)、主菜單欄(submenu)、內(nèi)容區(qū)域(content)。

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

狀態(tài)欄(status bar)：就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域，其高度為：40px；

導航欄(navigation)：顯示當前界面的名稱，包含相應的功能或者頁面間的跳轉(zhuǎn)按鈕（具體可查看億企邦《移動APP導航設計的10種模式》的相關介紹），其高度為：88px；

主菜單欄(submenu，tab)：類似于頁面的主菜單，提供整個應用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px；

內(nèi)容區(qū)域(content)：展示應用提供的相應內(nèi)容，整個應用中布局變更最為頻繁，其高度為：734px；

至于我們經(jīng)常說的iPhone5/5s的640*1136的尺寸，其實就是中間的內(nèi)容區(qū)域高度增加到910px。

在最新的iOS7的風格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導航欄合在了一起，但是再怎么變，尺寸高度也還是沒有變的，億企邦建議大家在設計iOS7風格的界面的時候多多注意下。

3、字體大小

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

上圖是用戶體驗做過的一個小調(diào)查，可以看出用戶可接受的文字大小（至于其它的用戶體驗點，可查看億企邦《APP用戶體驗開發(fā)的10大原則》的相關介紹）。

4、切圖

切圖是APP設計中的一個重要過程，關系到APP的界面實現(xiàn)，及各種適配性還有各種性能。

IOS在沒6plus前，我們只需要提供兩種圖，普通圖及視網(wǎng)膜屏幕圖。

以640×1136（640×960是一樣的）做的設計圖的話就會好辦一點，直接出設計圖上的原大小圖標，比如我們命名一個圖片叫img-line.png，我們給開發(fā)的圖就要改變這個名字叫 img-line@2x.png就是在后綴名前加上@2x表示視網(wǎng)膜屏的圖，iPhone4的還需要把這個圖尺寸按比例縮小50%，得到正真的img-line.png。

然后把這兩個圖移交給開發(fā)，iPhone6的圖在規(guī)范里是與5s使用的是一樣的，也是@2x圖，有些UI則需要做適當?shù)倪m配，比如拉長，拉高，這個開發(fā)會去做。

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

另外，億企邦要提醒大家一點：在出可按的圖片切圖時需要注意圖片的可按區(qū)域大小，有時圖標很小，實際切出來的放在上面，用手指是按不到的，我們就需要對圖片單獨處理，拓寬圖片的有效區(qū)域，這里是拓寬非放大，就是改變畫布大小使圖片尺寸面積擴大，使圖片四周拓寬多余的透明區(qū)域，從而改變可按大小。

5、顏色值問題

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

二、APP在Android系統(tǒng)界面設計規(guī)范

Android是一種基于Linux的自由及開放源代碼的操作系統(tǒng)，主要使用于移動設備，如智能手機和平板電腦，由Google公司和開放手機聯(lián)盟領導及開發(fā)。

1、尺寸及分辨率

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

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

2、界面基本組成元素

Android的app界面和iPhone的基本相同：狀態(tài)欄、導航欄、主菜單、內(nèi)容區(qū)域。

Android中我們?nèi)∮玫?20*1280的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。

狀態(tài)欄高度為：50px

導航欄高度為：96px

主菜單欄高度為：96px

內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)

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

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

3、字體大小

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

同樣，在用戶體驗的調(diào)查中，可以看出用戶可接受的文字相應問題。

具體大小，還是那句話，找自己喜歡的app界面，手機截圖后放進PS自己對比調(diào)節(jié)字體大小，切記，一定是高清截圖。

4、切圖

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

5、顏色值問題

Android顏色值取值為十六進制的值，比如一綠色的值，給開發(fā)的值為#5bc43e。

億企邦點評：

憑借便攜、觸屏、高清的豐富體驗，以iphone和android為代表的手機移動設備正悄然改變著企業(yè)的商務運行，這使得原本定義為消費設備的產(chǎn)品逐漸也應用于商務領域，從而引發(fā)了企業(yè)級應用廠商把研發(fā)重點轉(zhuǎn)移至移動應用平臺，將APP作為其提供推廣品牌、接觸消費者，甚至銷售內(nèi)容的渠道，APP的開發(fā)與推廣成為了移動互聯(lián)網(wǎng)行業(yè)的一個巨大的市場。