一、UI的控件概述:
1、框架UI的元素分為4類: A:欄:狀態(tài)欄目和導(dǎo)航欄的結(jié)合體; B:內(nèi)容視圖:應(yīng)用顯示的內(nèi)容信息,包括相關(guān)的交互行為,例如滾屏、插入、刪除等操作進(jìn)行排序; C:控制元素:產(chǎn)品行為或顯示的信息; D:臨時(shí)視圖:臨時(shí)向用戶提供重要的信息,或提供額外的功能和選項(xiàng)。
2、框架UI的尺寸:
3、圖標(biāo)icon的尺寸:
二、UI的布局概述:
1、可點(diǎn)擊對(duì)象的區(qū)域:尺寸不要小于44*44px;
2、將重要的內(nèi)容和功能放在權(quán)重高的位置,將重要的元素放在前半屏比較好,對(duì)于閱讀習(xí)慣從 左到右的用戶來(lái)說(shuō),更貼近屏幕左側(cè)位置容易引起關(guān)注的;
3、利用視覺表現(xiàn)形式的權(quán)重和平衡,尺寸較大的元素具有更高的權(quán)重,對(duì)于尺寸較小的元素來(lái) 說(shuō),更能吸引目光,看上去更加重要;
三、UI的模態(tài)情景概述:
1、模態(tài):一種用來(lái)承載特定內(nèi)容、功能或體驗(yàn)的模式,有其自身的優(yōu)缺點(diǎn)。它可以幫助用戶完 成某些任務(wù),或在不受干擾的情況下獲取信息,但會(huì)暫時(shí)性的強(qiáng)迫用戶停止與應(yīng)用其他部分 的互動(dòng);
2、保持模態(tài)任務(wù)的簡(jiǎn)單、簡(jiǎn)短、易聚焦:不要將模態(tài)視圖打造的好像是嵌在應(yīng)用當(dāng)中的迷你應(yīng)用;
3、始終提供一種明顯而安全的退出方式:要確保用戶在退出模態(tài)視圖時(shí),能夠?qū)酉聛?lái)要發(fā)生的 事情有明確的認(rèn)知;
4、使用警告框來(lái)傳遞那些必不可少的重要信息,通常還要提供可執(zhí)行的功能選項(xiàng)。 四、UI的手勢(shì)交互概述: A:通過(guò)點(diǎn)擊(tap):按壓或選擇一個(gè)對(duì)象; B:通過(guò)拖拽:滾屏或移動(dòng)對(duì)象(將從界面的一邊移動(dòng)到另一邊); C:通過(guò)滑動(dòng)(flick):快速滾屏或移動(dòng)對(duì)象; D:通過(guò)一個(gè)手指輕掃(swipe):可展現(xiàn)更多內(nèi)容,例如:列表的刪除按鈕,從界面頂端展開通知中心; E:通過(guò)雙擊(double tap):可將內(nèi)容放大置于屏幕中間,主要是放大和縮小的轉(zhuǎn)換; F:通過(guò)雙指漲開(pinch open)或閉合(pinch close):對(duì)內(nèi)容進(jìn)行放大或縮?。?G:通過(guò)長(zhǎng)按(touch and hold):在可編輯或可選擇的文字上顯示放大鏡,用來(lái)定位光標(biāo); H:通過(guò)搖晃(shake)機(jī)身可執(zhí)行撤銷或重做的操作。
五、UI的動(dòng)畫概述: 1、漂亮而精致的動(dòng)畫效果遍布于ios各處,它們使應(yīng)用體驗(yàn)更具動(dòng)態(tài)性,更加吸引人,精細(xì)而恰 當(dāng)?shù)膭?dòng)畫效果可以: A:傳達(dá)狀態(tài) B:增強(qiáng)用戶對(duì)于直接操作的感知 C:通過(guò)視覺化的 方式向用戶呈現(xiàn)操作結(jié)果 2、盡可能與ios內(nèi)置的應(yīng)用的動(dòng)畫模式保持一致:人們已經(jīng)習(xí)慣內(nèi)置應(yīng)用當(dāng)中各種精妙的動(dòng) 畫效果,實(shí)際上,用戶往往會(huì)將內(nèi)置應(yīng)用當(dāng)中的動(dòng)效看作一種體驗(yàn)的標(biāo)準(zhǔn),例如切換視圖時(shí)的 平滑過(guò)渡效果,切換橫豎屏?xí)r的流暢反饋,或是能表現(xiàn)出各種物理效果的滾屏動(dòng)畫等等,這些 都逐漸成為了人們預(yù)期當(dāng)中的一部分。
六、UI的字體概述:
1、字體是ios7設(shè)計(jì)的關(guān)鍵,大多數(shù)操作都是點(diǎn)擊文字或點(diǎn)擊圖標(biāo),按鈕也會(huì)有,但是占的比重很??;
2、蘋果的默認(rèn)字體是Helvetica Nenu,一種纖細(xì)簡(jiǎn)單的文字,但那不是你唯一的選擇;
3、Ios7的字號(hào)稍微加大了,主要由于它的用途,而且文字之間的層級(jí)關(guān)系至關(guān)重要,利用顏色 和不同的粗細(xì),來(lái)保持文字的布局和UI元素的清晰易懂。
4、蘋果字體規(guī)格說(shuō)明: A:導(dǎo)航欄標(biāo)題:medium 34px; B:按鈕和表頭:light 34px C:表格標(biāo)簽:Regular 28px; D:Tab頁(yè)圖標(biāo)標(biāo)簽:Regular 20px