iOS界面設(shè)計(jì)課件

1、Sketch 網(wǎng)站UI設(shè)計(jì)（微課版）主講老師：06 iOS界面設(shè)計(jì)目錄02繪制iPhone 8 APP界面01繪制iPhone X APP界面繪制iPhone X APP界面iOS系統(tǒng)界面用戶元素在iOS界面中，由很多不同元素構(gòu)成，每個(gè)元素都有不同的外觀和尺寸，并且在界面中承載著不同的功能，而這些大量的可以直接使用的視圖和控件，可以幫助開(kāi)發(fā)者快速的創(chuàng)建界面。頂部導(dǎo)航欄傳感器不同狀態(tài)欄的作用是展示設(shè)備的基本系統(tǒng)信息，例如當(dāng)前事件、時(shí)間和電池狀態(tài)及其他更多信息。視覺(jué)上狀態(tài)欄是和導(dǎo)航欄相連的，都使用一樣的背景填充。 為配合APP的風(fēng)格和保證可讀性，狀態(tài)欄內(nèi)容有兩種不同的風(fēng)格，分別為暗色（黑）和亮色（

2、白）。標(biāo)簽欄和搜索欄傳感器不同標(biāo)簽欄用于切換視圖、子任務(wù)和模式，并且對(duì)程序?qū)用嫔系男畔⑦M(jìn)行管理，通常在屏幕底部。默認(rèn)情況下使用和導(dǎo)航欄一樣的輕微半透明，以及使用和系統(tǒng)一樣的模糊處理遮住的內(nèi)容。操作案例繪制iPhone X啟動(dòng)界面表格視圖純表格分組表格默認(rèn)帶副標(biāo)題帶數(shù)值iOS系統(tǒng)界面設(shè)計(jì)規(guī)范確保程序可行確保APP可以在iPhone和iPad中通用基于Web網(wǎng)頁(yè)重新設(shè)計(jì)iPhone X 的APP界面設(shè)計(jì)對(duì)于所有設(shè)計(jì)師來(lái)說(shuō)，iPhone X的界面設(shè)計(jì)都是陌生而熟悉的。之所以說(shuō)它陌生是因?yàn)閕Phone X才剛問(wèn)世，而熟悉是因?yàn)橛质且豢頸Phone產(chǎn)品，這就給了設(shè)計(jì)師一種非常微妙的感覺(jué)。編輯位圖在Ske

3、tch中可以非常方便的使用位圖元素，但是Sketch不是一個(gè)位圖編輯軟件，它所提供的位圖編輯功能比較簡(jiǎn)單。雙擊位圖或者單擊工具欄上的“編輯”按鈕，在檢查器中即可顯示位圖編輯。iPhone X的屏幕尺寸屏幕尺寸 在豎屏中，iPhone X 顯示屏的寬度與4.7英寸的 iPhone 6、iPhone 7和iPhone 8一致。但是 iPhone X 顯示屏比4.7英寸顯示屏高145 pt，為內(nèi)容增加了大約20的垂直空間。iPhone X的屏幕尺寸iPhone X的布局在 iPhone X 上設(shè)計(jì) App 時(shí)，你必須確保布局內(nèi)容填滿屏幕，并且不會(huì)被設(shè)備的圓角、傳感器外殼或用于訪問(wèn)主屏幕的指示器所遮擋

4、。繪制iPhone 8 APP界面iOS APP界面設(shè)計(jì)UI模板Sketch不僅為用戶提供了各式各樣的畫板模版，還為用戶提供了iOS用戶界面設(shè)計(jì)元素的各種模版。iPhone 8的組件Sketch中為用戶提供了 “iOS用戶界面設(shè)計(jì)”的各種元素組件。凡是iOS 的系統(tǒng)設(shè)計(jì)元素，“iOS 用戶界面設(shè)計(jì)”選項(xiàng)下都有。并且Sketch提供的組件會(huì)隨著iOS系統(tǒng)的升級(jí)而做出相應(yīng)的更改。操作案例繪制iPhone系統(tǒng)視頻播放界面iPhone X的組件Sketch中的“iOS用戶界面設(shè)計(jì)”選項(xiàng)下，有一項(xiàng)iPhone X，這就是Sketch軟件順應(yīng)IPhone手機(jī)的更新速度而做出的調(diào)整。iOS界面設(shè)計(jì)規(guī)范用戶想

5、要設(shè)計(jì)出優(yōu)秀的iOS界面，僅是會(huì)熟練操作各種繪圖軟件是不夠的，還需要熟知iOS 界面設(shè)計(jì)規(guī)范。操作案例繪制“休閑空間”啟動(dòng)頁(yè)1設(shè)計(jì)與技術(shù)相結(jié)合網(wǎng)頁(yè)界面是整個(gè)網(wǎng)站的“門面”，網(wǎng)頁(yè)能否吸引瀏覽者，是否能夠引起瀏覽者的興趣，是否還能夠吸引瀏覽者再次光臨，其界面設(shè)計(jì)是至關(guān)重要的界面尺寸設(shè)備分辨率狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度iPhone X11252436px44px88px98pxiPhone6 /6/7/8 plus12422208 px60px132px146pxiPhone6/7/87501334 px40px88px98pxiPhone5/5s/5c6401136 px40px88px98p

6、xiPad3/4/Air/Air2/mini220481536 px40px88px98pxiPad1/21024768 px20px44px49pxiPad mini1024768 px20px44px49px圖標(biāo)尺寸設(shè)備App Store應(yīng)用程序主屏幕spotlight搜索iPhone6 /7/8 plus10241024px180180px114114px8787 pxiPhone6/7/810241024px120120px114114px5858pxiPhone5/5s/5c10241024px120120px114114px5858pxiPad3/4/Air/Air2/mini210241024px180180px114114px100100pxiPad1/210241024px9090px7272px5050pxiPad mini10241024px9090px7272px5050px內(nèi)部設(shè)計(jì)在繪制iPhone界面和圖標(biāo)時(shí)，要注意遵守這些規(guī)則。1、所有能點(diǎn)擊的圖片不得小于44px（Retina需要88px）2、單獨(dú)存在的部件必須是雙數(shù)尺寸3、兩倍圖以2x作為命名后綴 4、充分考慮每個(gè)控制按鈕在4中狀態(tài)下的樣式移動(dòng)APP設(shè)計(jì)過(guò)程中的要點(diǎn)在一個(gè)成熟且高效的移動(dòng)APP產(chǎn)品團(tuán)隊(duì)中，UI設(shè)計(jì)師必須在前期就加入到項(xiàng)目設(shè)計(jì)中