《交互數(shù)字內(nèi)容設(shè)計(jì)》課件-第二章 初識(shí)移動(dòng)設(shè)備的操作系統(tǒng)

第二章初識(shí)移動(dòng)設(shè)備的操作系統(tǒng)本章主要講述當(dāng)前移動(dòng)設(shè)備的主流操作系統(tǒng)Android系統(tǒng)（谷歌）和IOS系統(tǒng)（蘋(píng)果），了解其設(shè)計(jì)規(guī)范。英寸

像素

點(diǎn)

分辨率

2.1IOS系統(tǒng)的組成要素及設(shè)計(jì)規(guī)范

2.1.1IOS系統(tǒng)簡(jiǎn)介IOS系統(tǒng)是由蘋(píng)果公司開(kāi)發(fā)的手持設(shè)備操作系統(tǒng)，主要應(yīng)用于iPhone、

iPad和iPodTouch?等手持設(shè)備。IOS系統(tǒng)一直在引領(lǐng)移動(dòng)端界面設(shè)計(jì)潮流，早期的界面采用擬物化風(fēng)格，自IOS7之后一直采用扁平化風(fēng)格，

設(shè)計(jì)時(shí)應(yīng)使用形狀工具進(jìn)行繪制，這樣更方便后期尺寸、顏色或形狀的修改。

1.界面尺寸：3.5英寸（iPhone1/2/3/4/4S）、4英寸（iPhone5/5S/5C）、4.7英寸（iPhone6/6S）、5.5英寸（iPhone6plus/6Splus）等。2.分辨率：320*480像素（iPhone1/2/3）、640*960像素（iPhone4/4S）、640*1136像素（iPhone5/5S/5C）、750*1334像素（iPhone6/6S）、1080*1920像素（iPhone6plus/6Splus）等，2.1.2尺寸及分辨率

點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本iOS界面尺寸設(shè)備分辨率狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度Iphone6plus1080x1920px54px132px146pxIphone6/6s750x1334px40px88px98pxIphone5/5c/5s640x1136px40px88px98pxIphone4/4s640x960px40px88px98px狀態(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)用中布局變更最為頻繁。內(nèi)部設(shè)計(jì)1、所有能點(diǎn)擊的圖片不得小于44px（Retina需要88px）2、單獨(dú)存在的部件必須是雙數(shù)尺寸3、充分考慮每個(gè)控制按鈕在4種狀態(tài)下的樣式，如圖2.1.3交互界面的組成元素

狀態(tài)欄導(dǎo)航欄內(nèi)容區(qū)標(biāo)簽欄Iphone6圖例1.圖標(biāo)的圓角和光暈效果2.1.4系統(tǒng)圖標(biāo)

2.圖標(biāo)大小狀態(tài)欄圖標(biāo)20—24px桌面圖標(biāo)120x120px導(dǎo)航欄、工具欄圖標(biāo)44x44px標(biāo)簽欄圖標(biāo)50x50px最大96x64px設(shè)置圖標(biāo)58x58pxSpotlight圖標(biāo)80x80px3.圖標(biāo)格式IOS系統(tǒng)圖標(biāo)和控件的標(biāo)準(zhǔn)格式為PNG格式，它是目前交互界面設(shè)計(jì)使用的主流圖片格式，是一種無(wú)損壓縮的圖片格式。點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本2.1.5字體一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。IOS9中文字體：蘋(píng)方/PingFangSCIOS8中文字體：常州華文的黑體-簡(jiǎn)，在macosx系統(tǒng)中選擇黑體-簡(jiǎn)IOS英文、數(shù)字：Helvetial狀態(tài)欄規(guī)范用戶(hù)依賴(lài)于狀態(tài)欄的重要信息，如信號(hào)，時(shí)間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。Pt和px的換算750×1334尺寸的換算關(guān)系1pt=2px，12pt的文字算過(guò)來(lái)就是24px也就是說(shuō)程序員拿到我們的px單位的標(biāo)注稿，自己除以2就是pt了。點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本2.1.6標(biāo)準(zhǔn)色I(xiàn)OS提供的色值：RGB色彩模式色值標(biāo)注，如：192，192，192Android提供相關(guān)顏色的16進(jìn)制色值及配色方案

在photoshop軟件中提取16進(jìn)制色值：如：#c0c0c0。導(dǎo)航欄規(guī)范導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動(dòng)作按鈕，如添加，編輯，完成。請(qǐng)注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。搜索欄工具欄Stepper控件提示框提示對(duì)話(huà)框是用于輸送關(guān)鍵信息和提示快速操作。提示應(yīng)保持最少文字，退出一定是明顯。分段控制框滑塊開(kāi)關(guān)布局標(biāo)準(zhǔn)控件ios1334x750pxIphone6/6s標(biāo)簽欄點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本2.2Android系統(tǒng)界面規(guī)范點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本1.Android界面尺寸點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

2.界面尺寸（1280x720px）狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和標(biāo)簽欄一樣的：96px

內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）3.常用尺寸Android界面默認(rèn)菜單欄的高度是：72px；Android界面每個(gè)元素之間最小的間距是：12px；Android界面默認(rèn)btn的高度是：60pxpx=ppi/160*dp4.常用屏幕尺寸240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本5.字體規(guī)范、大小5.X版本：思源黑體/NotoSansHan5.0以下版本：DroidSansFal