蘋果手機界面設計規(guī)范

《蘋果手機界面設計規(guī)范》由會員上傳分享，免費在線閱讀，更多相關內(nèi)容在行業(yè)資料-天天文庫。

1、蘋果手機界面設計規(guī)范　　篇一：IOS與Android界面設計規(guī)范整合　　IOS篇　　一、尺寸及分辨率iPhone界面尺寸：320*480、640*960、640*1136　　iPhone6：英寸(1334×750)，iPhone6Plus：英寸(1920×1080)　　iPad界面尺寸：1024*768、2048*1536　　單位：像素72dpi，在設計的時候并不是每個尺寸都要做一套，尺寸按自己的手機來設計，比較方便預覽效果，一般用640*960或者640*1136的尺寸來設計?！　s：作圖的時候確保都是用形狀工具(快捷鍵：U)畫的，這樣更方便后期的切圖或者尺寸變更?！　?/p>

2、(首三個系列的屏幕分辨率為320x480(HVGA)，163ppi；iPhone4及iPhone4S的屏幕分辨率為640x960，326ppi；iPhone5則是640x1,136，326ppi，而iPhone5的屏幕對比為接近16:9（71:40）。)　　二、界面基本組成元素　　iPhone的app界面一般由四個元素組成，分別是：狀態(tài)欄(statusbar)、導航欄(navigation)、主菜單欄(submenu)、內(nèi)容區(qū)域(content)。　　這里取用640*960的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸?！　顟B(tài)欄(statusbar)：就是我們經(jīng)常說的

3、信號、運營商、電量等顯示手機狀態(tài)的區(qū)域，其高度為：40px導航欄(navigation)：顯示當前界面的名稱，包含相應的功能或者頁面間的跳轉按鈕，其高度為：88px主菜單欄(submenu，tab)：類似于頁面的主菜單，提供整個應用的分類內(nèi)容的快速跳轉，其高度為：98px內(nèi)容區(qū)域(content)：展示應用提供的相應內(nèi)容，整個應用中布局變更最為頻繁，其高度為：734px　　[下圖為了說明我不是瞎掰的：960-40-88-98=734]　　至于我們經(jīng)常說的iPhone5/5s　　的640*1136的尺寸，其實就是中間的內(nèi)容區(qū)域高度增加到910px。　　PS：在最新的iOS7的

4、風格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導航欄合在了一起，但是再怎么變，尺寸高度也還是沒有變的，只不過大家在設計iOS7風格的界面的時候多多注意下~　　三、字體大小　　iPhone上的字體英文為：HelveticaNeue。至于中文Mac下用的是黑體，Win下則為華文黑體(最新字體稱為黑體-簡)。　　下圖是百度用戶體驗做過的一個小調(diào)查，可以看出用戶可接受的文字大小?！　∷?，列表欄目間距　　IOS設計規(guī)范中列表的高度為88px　　五，顏色值問題　　IOS顏色值取RGB各顏色的值比如給予IOS開發(fā)的色值為R:12G:34B:56給出的值就是12,34,56(有時也要

5、根據(jù)開發(fā)的習慣，有時也用十六進制)；Android開發(fā)的色值則使用十六進制#0c2238　　ANDROID篇　　一、尺寸及分辨率　　Android界面尺寸：480*800、720*1280、1080*1920。[單位：像素]　　Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應用的內(nèi)存消耗也不會過高?！　《⒔缑婊窘M成元素Android　　的app界面和iPhone的基本相同：狀態(tài)欄、導航欄、主菜單、內(nèi)容區(qū)域?！　ndroid中我們?nèi)∮玫?/p>

6、720*1280的尺寸設計，那我們就說說在這個尺寸下這些元素的尺寸。　　狀態(tài)欄高度為：50px　　導航欄高度為：96px　　主菜單欄高度為：96px　　內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)　　Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，當然高度也是和菜單欄一樣的：96pxAndroid為了在界面上區(qū)別于iOS，開始提出的一套HOLO的UI風格一些app的最新版本都采用了這一風格，這一風格最明顯的變化就是將下方的主菜單移到了導航欄下面，這樣的方式解決了現(xiàn)在很多手機去除實　　體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景?！　?/p>

7、三、字體大小　　Android上的字體為：Droidsansfallback，是谷歌自己的字體，與微軟雅黑很像?！　⊥瑯?，百度用戶體驗的調(diào)查中，可以看出用戶可接受的文字相應問題?！　【唧w大小，還是那句話，找自己喜歡的app界面，手機截圖后放進PS自己對比調(diào)節(jié)字體大小，切記，一定是高清截圖　　篇二：UI界面設計規(guī)范　　UI設計(流程/界面)規(guī)范　　一：UI設計基本概念與流程　　目的　　規(guī)范公司UI設計流程，使UI設計師參與到產(chǎn)品設計整個環(huán)節(jié)中來，對產(chǎn)品的易用性進行全流程負責，使UI設計的流程規(guī)范化，保證UI設計流程的