移動平臺設(shè)計規(guī)范

1、UI平臺設(shè)計規(guī)范尺寸規(guī)范之IOS篇01 尺寸及分辨率iPhone界面尺寸：320 * 480 640 * 960 640 * 1136 750 * 1334 1080 * 1920iPad界面尺寸：1024X * 768 2048 * 1536單位都是PX（像素，網(wǎng)頁UI與移動端UI分辨率一般都只要72）設(shè)計的時候不是每一個尺寸都做一套，一般采用750X1334的尺寸進行設(shè)計02 界面基本組成元素iPhone的APP界面一般都由4個元素組成狀態(tài)欄導(dǎo)航欄主菜單欄 內(nèi)容區(qū)域我們通常是采用750*1334的尺寸進行設(shè)計，在這個尺寸下個各個元素也有尺寸要求我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的

2、區(qū)域，高度：40PX顯示我們當前界面的名稱，包含想要的功能或者頁面的跳轉(zhuǎn)按鈕，高度：88PX頁面的主菜單，提供整個應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，高度：98PX展示應(yīng)用提供的相應(yīng)內(nèi)容，布局變更非常頻繁，高度為：1108PX狀態(tài)欄導(dǎo)航欄主菜單欄 內(nèi)容區(qū)域狀態(tài)欄高度：54PX （40PX）導(dǎo)航欄高度：132PX （88PX）標簽欄高度：146PX （98PX）iPhone plus 的尺寸不一樣在最新的IOS風格中，蘋果已經(jīng)慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄結(jié)合在一起，不過尺寸的高度還是沒變的，界面設(shè)計的時候需要多注意一下03 風格延伸04 字體大小iPhone上的字體英文為Helvetica Ne

3、nu，一種纖細簡單的文字，中文為一種比較細黑體（常用蘋方體、華文細黑、冬青黑體，不是微軟雅黑）A：導(dǎo)航欄標題：medium 34px；B：按鈕和表頭：light 34pxC：表格標簽：Regular 28px；D：Tab頁圖標標簽：Regular 20px我的音樂：34PX我的、淘歌、發(fā)現(xiàn)：30PXMUXXX：34PX本地音樂：30PX泡沫、鄧紫棋：24PX舉例說明05 圖標尺寸大小圖標都按照最大1024*1024進行設(shè)計，之后按照比例進行縮小、調(diào)整高光部分與圓角不需要做，ios系統(tǒng)自動生成程序應(yīng)用 120*120PX主屏幕 114*114PX Spotlight搜索 87*87PX標簽欄 7

4、5*75PX工具欄和導(dǎo)航欄 44*44PX05 IOS黃金柵格系統(tǒng)蘋果開發(fā)了一套黃金比例柵格系統(tǒng)，可以在你的圖標上很好地確定元素的尺寸和對齊。不過，即使在原生應(yīng)用的圖標上，蘋果的設(shè)計師們也沒有嚴格按照這個柵格系統(tǒng)來設(shè)計。所以，如果你的圖標元素不嚴格完全對齊柵格可以表現(xiàn)得很好，那么打破規(guī)則約束，自由發(fā)揮吧。06 UI的布局概述1、可點擊對象的區(qū)域：尺寸不要小于44*44px;2、將重要的內(nèi)容和功能放在權(quán)重高的位置，將重要的元素放在前半屏比較好，對于閱讀習慣從 左到右的用戶來說，更貼近屏幕左側(cè)位置容易引起關(guān)注的；3、利用視覺表現(xiàn)形式的權(quán)重和平衡，尺寸較大的元素具有更高的權(quán)重，對于尺寸較小的元素來 說，更能吸引目光，看上去更加重要；07 UI的手勢交互概述07 UI的手勢交互概述尺寸規(guī)范之Android篇01 尺寸及分辨率Android界面尺寸：482 * 800 720 * 1280 1080 * 1920Android的尺寸比IOS要多很多套，建議采用720*1280這個尺寸進行設(shè)計Android的APP界面與IOS基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單欄以及中間的內(nèi)容狀態(tài)欄高度：50PX導(dǎo)航欄高度：96PX主菜單欄高度：96PX內(nèi)容區(qū)域高度：1038PXAndroid規(guī)范沒有IOS標準，現(xiàn)在很多Android系統(tǒng)手機去掉了實體鍵，把功能鍵也放在了屏幕中，高度與菜