在現(xiàn)在的互聯(lián)網(wǎng)行業(yè)中，有一個(gè)職業(yè)叫做UI設(shè)計(jì)師，UI的日常工作就是保證高保真設(shè)計(jì)稿的設(shè)計(jì)，對(duì)于IOS以及Android來說都是有不同的設(shè)計(jì)規(guī)范的，下面我們一起來了解一下IOS UI的設(shè)計(jì)規(guī)范。
成都創(chuàng)新互聯(lián)溝通電話：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁(yè)制作領(lǐng)域10多年，包括石涼亭等多個(gè)行業(yè)擁有豐富的網(wǎng)站營(yíng)銷經(jīng)驗(yàn)，選擇成都創(chuàng)新互聯(lián)，為企業(yè)保駕護(hù)航。
01
先來說說設(shè)計(jì)稿的尺寸，一般來說在做IOS設(shè)計(jì)稿的時(shí)候，設(shè)計(jì)稿尺寸我們都是選擇650*1334這個(gè)尺寸，如果是1x的話，就是375*667。
02
我們從上到下以1x的規(guī)范來進(jìn)行了解，最上邊的就是狀態(tài)欄了，狀態(tài)欄的高度是20，寬度都是375。
03
那么狀態(tài)欄都是有哪些元素呢？實(shí)際上就是信號(hào)、網(wǎng)絡(luò)狀態(tài)、時(shí)間以及電量和通知等。
04
在信號(hào)欄下邊就是我們的導(dǎo)航欄，導(dǎo)航欄的高度為44px。
05
導(dǎo)航欄中肯定是有導(dǎo)航文字的，導(dǎo)航文字一般來說我們都是居中對(duì)齊，并且導(dǎo)航文字的大小應(yīng)該為18px。
06
接下來就是最底部，最底部就是我們的標(biāo)簽欄了，標(biāo)簽欄中都是我們的切換圖標(biāo)，標(biāo)簽欄的高度為49px。
07
標(biāo)簽欄中的圖標(biāo)大小也是有規(guī)范的，最小的點(diǎn)擊區(qū)域我們必須保證為24px，低于這個(gè)范圍的話是不方便進(jìn)行操作的。
08
在圖標(biāo)的下方一般都還有文字，這里文字的大小比較小，可以根據(jù)圖標(biāo)大小來進(jìn)行調(diào)整，一般來說文字大小為11、10px。
09
總的來說著就我們IOS UI的設(shè)計(jì)規(guī)范了，其他還有就是內(nèi)容區(qū)域的文字大小規(guī)范了，一般來說都是16、15、14、12這四個(gè)文字大小，具體根據(jù)需求進(jìn)行設(shè)計(jì)。
現(xiàn)在iOS app 的尺寸也變多了，要適配到各種尺寸需要選擇一個(gè)折中的尺寸來向上向下適配，以前一般用的是iphone5的尺寸，iPhone6 plus出現(xiàn)后，iPhone6尺寸成了大多數(shù)設(shè)計(jì)師的選擇。
一、iPhone6的界面布局是：
屏幕是4.7英寸的，設(shè)計(jì)稿的大小750x1334px
☆ 狀態(tài)欄(status bar)：就是電量條，其高度為：40px；
☆ 導(dǎo)航欄(navigation)：就是頂部條，其高度為：88px；
☆ 主菜單欄(submenu，tab)：就是標(biāo)簽欄，底部條，其高度為：98px；
☆ 內(nèi)容區(qū)域(content)：就是屏幕中間的區(qū)域，其高度為：1334px-40px-88px-98px=1108px
二、關(guān)于iPhone6的圖標(biāo)的尺寸是：
☆導(dǎo)航欄的圖標(biāo)高度為44px（絕大部分功能按鈕）左右，標(biāo)簽欄的圖標(biāo)尺寸為50x50px左右，最大為96x64px。
☆關(guān)閉按鈕34px*34px，返回按鈕26px，簡(jiǎn)單筆畫圖標(biāo)40px。
三、常用的可點(diǎn)擊高度-登陸框、密碼框、功能列表等，統(tǒng)一設(shè)成88px。
四、搜索欄、輸入框、評(píng)論框、地址框的高度，在iPhone6的原型圖上，統(tǒng)一設(shè)成58px或60px。
五、在iPhone6設(shè)計(jì)稿中，界面元素之間的常用距離。
常用間距-親密距離：20px（與邊緣距離）；疏遠(yuǎn)距離：30px；
其它距離-10px，44px等；
區(qū)塊間隔：30-40px。
A、疏遠(yuǎn)距離：比如，改圖標(biāo)距離手機(jī)屏幕最左邊的距離；
B、親密距離：比如，左邊圖標(biāo)與右邊文字之間的距離。
六、黑白灰顏色常用的數(shù)值是：
① 文字黑色#333
② 文字深灰色#666
③ 文字淺灰色#999
④ 邊框淺灰色#e5e5e5
⑤ 背景淡灰色#f2f2f2
⑥ 按鈕背景純白色#ffffff
一、注意事項(xiàng)
1、在每個(gè)項(xiàng)目設(shè)計(jì)中只使用1-2個(gè)字體樣式，而在品牌字有明確的規(guī)范的情況下，只需要一種字體貫穿全文，通過對(duì)字體放大來強(qiáng)調(diào)重點(diǎn)文案。字體用的太多，越顯得不夠?qū)I(yè)。
2、不同的樣式的字體，形狀或系列最好相同，保證字體風(fēng)格的一致性。
3、字體與背景的層次要分明,確保字體樣式與色調(diào)氣氛相匹配
二、界面中文字選用的規(guī)則
在不同平臺(tái)的界面設(shè)計(jì)中規(guī)范的字體會(huì)有不同，像移動(dòng)界面的設(shè)計(jì)就會(huì)有固定的字體樣式，網(wǎng)頁(yè)中會(huì)有常用的幾個(gè)字體。
以下是在72像素/英寸下的規(guī)范
移動(dòng)端常規(guī)字體
IOS:常選擇華文黑體或者冬青黑體，尤其是冬青黑體效果最好， 方正蘭亭黑和方正黑體簡(jiǎn) 、方正中等線也運(yùn)用的比較多。
三、字體的大小
1、導(dǎo)航欄的文字大小是36-38px；
2、標(biāo)題字號(hào)：32px ，34px；
3、內(nèi)容區(qū)域的正文文字大小是：28px，30px；
4、輔助性文字：20px ， 24px，26px；
5、標(biāo)簽欄（或主菜單欄）的圖標(biāo)下方的文字大小為20px；
6、終極原則：不大于所在要件高度的一半;
7、行間距：字號(hào)的1.2-1.5倍。
下圖是百度用戶體驗(yàn)做過的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小：
狀態(tài)欄：40px???????? 導(dǎo)航欄：88px?????????標(biāo)簽欄：98px
狀態(tài)欄：40px???????? 導(dǎo)航欄：88px?????????標(biāo)簽欄：98px
狀態(tài)欄：60px???????? 導(dǎo)航欄：132px?????????標(biāo)簽欄：147px
狀態(tài)欄：132px???????? 導(dǎo)航欄：132px?????????標(biāo)簽欄：147px
狀態(tài)欄：88px???????? 導(dǎo)航欄：88px?????????標(biāo)簽欄：98px
全局邊距： 32px、30px、24px、20px（建議最小20px，邊距數(shù)字選擇偶數(shù)）
卡片間距： 20px、24px、30px、40px（通常上下間距最小不低于16px，過小的間距會(huì)造成用戶的緊張情緒）
最常用的兩種布局方式，列表式和卡片式
「信息」頁(yè)面通常采用列表式布局。注：列表舒適體驗(yàn)的最小高度是80px，最大高度視內(nèi)容而定。
例： 微信高度：136px????QQ高度：132px???? 自如高度110px???? 唯品會(huì)高度：106px。
每張卡片的內(nèi)容和形式都是相互獨(dú)立的互不干擾。
卡片本身一般是白色，而卡片之間的間距顏色一般是淺色，不同產(chǎn)品風(fēng)格顏色可能不同。
雙欄卡片布局形式，常見于圖片信息為主導(dǎo)，每一屏顯示至少4張卡片。
常見圖片尺寸比例：16:9、4:3、1:1、1:0.618(黃金比例)等
對(duì)齊、對(duì)稱、分組
文字是APP中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容。
在APP中字號(hào)范圍一般在20-36之間（@2x）。iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì)，字號(hào)還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。
36px： 用在少數(shù)標(biāo)題。例：導(dǎo)航標(biāo)題、分類名稱等。
32px： 用在少數(shù)標(biāo)題。例：店鋪標(biāo)題等。
30px： 用在較為重要的文字或操作按鈕。例：列表性標(biāo)題分類名稱等。
28px： 用于段落文字。例：列表性商品標(biāo)題等。
26px： 用于段落文字。例：小標(biāo)題模塊描述等。
24px： 用于輔助性文字。例：次要的標(biāo)語(yǔ)等。
22px： 用于輔助性文字。例：次要的備注信息等。
iOS 主流設(shè)備的分辨率分別是：
640x1136px：【（@2x）iPhone SE? 】
750 x1134px：【（@2x）iPhone6s/7/8? 】
1242x2208px：【（@3x）iPhone 6s/7/8 Plus? 】
1125x2436px：【（@3x）iPhone X?】
750x1624px：【（@2x）iPhone X?】
注： 基準(zhǔn)設(shè)計(jì)尺寸：750px?x?1334px。
重慶分公司
重慶分公司
