智能手機(jī)UI設(shè)計(jì)規(guī)范iOS系統(tǒng)規(guī)范iphone界面基本組成元素狀態(tài)欄(statusbar)：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px導(dǎo)航欄(navigation)：顯示當(dāng)前界面的名稱(chēng)，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕，其高度為：88px主菜單欄(submenu，tab)（標(biāo)簽欄）：類(lèi)似于頁(yè)面的主菜單，提供整個(gè)應(yīng)用的分類(lèi)內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px內(nèi)容區(qū)域(content)：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其高度為：734px。內(nèi)部設(shè)計(jì)1、所有能點(diǎn)擊的圖片不得小于44px（Retina需要88px）2、單獨(dú)存在的部件必須是雙數(shù)尺寸3、充分考慮每個(gè)控制按鈕在4中狀態(tài)下的樣式，如圖點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本1.iOS界面尺寸設(shè)備分辨率PPI狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度Iphone6plus1080x1920px401

ppi54px132px146pxIphone6/6s750x1334px326

ppi40px88px98pxIphone5/5c/5s640x1136px326

ppi40px88px98pxIphone4/4s640x960px326

ppi40px88px98pxppi（pixelsperinch）即每英寸像素，也叫像素密度。2.圖標(biāo)尺寸設(shè)備APPstore程序應(yīng)用主屏幕Spotlight搜索標(biāo)簽欄工具欄/導(dǎo)航欄Iphone6plus1024x1024px180x180px114x114px87x87px75x75px66x66pxIphone6/6s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone5/5c/5s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone4/4s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone6圖例3.狀態(tài)欄規(guī)范用戶依賴(lài)于狀態(tài)欄的重要信息，如信號(hào)，時(shí)間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。pt（point）是印刷業(yè)上長(zhǎng)使用的單位，磅的意思，是一種固定的長(zhǎng)度單位，可以用測(cè)量設(shè)備測(cè)量的單位。pt=px*3/41pt=1/72英寸4.導(dǎo)航欄規(guī)范導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動(dòng)作按鈕，如添加，編輯，完成。請(qǐng)注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。導(dǎo)航欄分類(lèi)第一種：app標(biāo)簽導(dǎo)航標(biāo)簽導(dǎo)航位于頁(yè)面底部，通常包含5個(gè)標(biāo)簽是比較合適的數(shù)量。這種導(dǎo)航是非常常見(jiàn)的，如果你的應(yīng)用需要用戶頻繁的在不同分頁(yè)切換，可以采用這種導(dǎo)航。它的缺點(diǎn)是會(huì)占用一定高度的空間。如微信最新版的APP界面設(shè)計(jì)圖。第二種：APP舵式導(dǎo)航目前流行一種標(biāo)簽導(dǎo)航的變體，個(gè)人把它稱(chēng)為“舵式導(dǎo)航”，因?yàn)樗臉邮胶芟褫喆嫌脕?lái)指揮的船舵，兩側(cè)是其他操作按鈕。當(dāng)頁(yè)面有處于同一層級(jí)的幾大部分內(nèi)容，同時(shí)又需要一個(gè)非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。如下圖葡萄社APP。第三種：APP抽屜式導(dǎo)航模式抽屜導(dǎo)航是講菜單隱藏在當(dāng)前頁(yè)面后，點(diǎn)擊入口即可像拉抽屜一樣拉出菜單，這種導(dǎo)航的優(yōu)點(diǎn)是節(jié)省頁(yè)面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面。比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對(duì)設(shè)置、關(guān)于等內(nèi)容的隱藏。這種導(dǎo)航設(shè)計(jì)需要注意的是一定要提供菜單畫(huà)出的過(guò)渡動(dòng)畫(huà)。自從path應(yīng)用以來(lái)，這種抽屜式導(dǎo)航菜單非常受到大家的喜愛(ài)。第四種：APP宮格導(dǎo)航（比如九宮格）這種宮格導(dǎo)航是將主要入口全部聚合在頁(yè)面，讓用戶做出選擇。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容，選擇壓力較大，采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少，往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。第五種：APP混合組合導(dǎo)航當(dāng)用戶需要聚焦內(nèi)容，同時(shí)又需要一些快捷入口能夠連接到某些頁(yè)面時(shí)，就可以采用組合導(dǎo)航。組合導(dǎo)航上方用宮格的形式展現(xiàn)快捷入口，與標(biāo)簽導(dǎo)航不同的是，這些宮格入口之間不需要是平級(jí)的關(guān)系，也不必包含整個(gè)層級(jí)的內(nèi)容，你可以將它理解為一種圖形化的文字鏈。這種導(dǎo)航比較靈活，能適應(yīng)架構(gòu)的快速調(diào)整。第六種：列表式APP導(dǎo)航列表式APP導(dǎo)航是我們?cè)贏PP設(shè)計(jì)種必不可少的一個(gè)信息承載模式。當(dāng)然作為一個(gè)APP的導(dǎo)航也是非常方便的。不過(guò)目前來(lái)看，列表導(dǎo)航通常用于二級(jí)頁(yè)，由于它與宮格導(dǎo)航一樣，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會(huì)在首頁(yè)使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。列表項(xiàng)目可以通過(guò)間距、標(biāo)題等進(jìn)行分組。第七種：tab導(dǎo)航用于二級(jí)頁(yè)，本質(zhì)和標(biāo)簽導(dǎo)航相同，當(dāng)應(yīng)用層級(jí)較多的情況下，可以采用tab導(dǎo)航，典型場(chǎng)景是用于改變的當(dāng)前的視圖，或?qū)Ξ?dāng)前頁(yè)面內(nèi)容進(jìn)行分類(lèi)查看。第八種：大圖輪播導(dǎo)航或是大圖上面的導(dǎo)航設(shè)計(jì)當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航，如果應(yīng)用得當(dāng)，能夠給人耳目一新的體驗(yàn)。這種導(dǎo)航能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性，操作也是最方便的。但是缺點(diǎn)是不能夠快速的定位對(duì)應(yīng)的分頁(yè)內(nèi)容。5.搜索欄6.工具欄Stepper控件

7.提示框提示對(duì)話框是用于輸送關(guān)鍵信息和提示快速操作。提示應(yīng)保持最少文字，退出一定是明顯。8.分段控制框9.滑塊10.開(kāi)關(guān)11.布局標(biāo)準(zhǔn)控件ios1334x750pxIphone6/6s點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本12.圖標(biāo)網(wǎng)格Apple使用黃金分割在它們的一些圖標(biāo)上。這讓圖標(biāo)保持良好的比例，同時(shí)確保了美感。雖然這是一個(gè)很好的規(guī)范，但它不是嚴(yán)格要求。甚至Apple在很多圖標(biāo)上也省略了它。點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本13.標(biāo)準(zhǔn)色點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本14.字體大小、規(guī)格一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。IOS9中文字體：蘋(píng)方/PingFangSCIOS8中文字體：常州華文的黑體-簡(jiǎn)，在macosx系統(tǒng)中選擇黑體-