iOS7界面設(shè)計(jì)規(guī)范(2) - UI基礎(chǔ) - iOS應(yīng)用解析

2013-06-26 11:08:57來(lái)源:Be For Web作者:

第二篇更多的是從技術(shù)的角度對(duì)iOS界面組成原理進(jìn)行了簡(jiǎn)單的解析,篇幅很短,可稍作了解;更多關(guān)于iOS開發(fā)入門的內(nèi)容可參考“設(shè)計(jì)師應(yīng)該了解的iOS應(yīng)用開發(fā)基礎(chǔ)知識(shí)”一文。另外,非常感謝各位朋友在微博上的支持與鼓

第二篇更多的是從技術(shù)的角度對(duì)iOS界面組成原理進(jìn)行了簡(jiǎn)單的解析,篇幅很短,可稍作了解;更多關(guān)于iOS開發(fā)入門的內(nèi)容可參考“設(shè)計(jì)師應(yīng)該了解的iOS應(yīng)用開發(fā)基礎(chǔ)知識(shí)”一文。另外,非常感謝各位朋友在微博上的支持與鼓勵(lì),不過(guò)有一點(diǎn)需要注意,目前做的這個(gè)版本(2013-06-15)并非iOS7設(shè)計(jì)規(guī)范的最終版;該版本的作用及注意事項(xiàng)詳見下面的重要提示。

重要:這是針對(duì)于正在開發(fā)中的API或技術(shù)的預(yù)備文檔(預(yù)發(fā)布版本)。雖然該文檔在技術(shù)精確度上經(jīng)過(guò)了嚴(yán)格的審核,但并非最終版本,僅供蘋果開發(fā)者計(jì)劃的注冊(cè)會(huì)員使用。蘋果提供這份機(jī)要文檔的目的,是幫助你按照文中描述的方式對(duì)技術(shù)的選擇及界面的設(shè)計(jì)開發(fā)進(jìn)行規(guī)劃。這些信息有可能發(fā)生變化,屆時(shí),你的設(shè)計(jì)開發(fā)方式需要基于最終版本的操作系統(tǒng)及文檔進(jìn)行相應(yīng)的調(diào)整和測(cè)試。該文檔或許會(huì)隨著API或相關(guān)技術(shù)在未來(lái)的發(fā)展而進(jìn)行更新。

譯文最后更新時(shí)間:2013-06-15

幾乎所有的iOS應(yīng)用都會(huì)用到一些由UIKit框架所定義的UI控件。對(duì)這些基本控件的名稱、角色和作用加以了解,你將能更好的在打造界面的過(guò)程中做出正確合理的設(shè)計(jì)決策。

01-uikit-ui-elements-ios-7-human-interface-guidelines-hig-basic-ios-app-anatonmy.png

UIKit框架提供的UI元素可以分為4大類:

  • 欄(Bars):包含與上下文內(nèi)容情境相關(guān)的信息,告訴用戶他們?cè)趹?yīng)用當(dāng)中所處的位置;同時(shí)還包含相關(guān)的導(dǎo)航功能,或是可以由用戶發(fā)起的操作。
  • 內(nèi)容視圖(Content views):包含當(dāng)前應(yīng)用所特有的內(nèi)容,并支持相關(guān)的交互行為,例如滾屏、插入、刪除、對(duì)列表?xiàng)l目進(jìn)行重新排序,等等。
  • 控制元素(Controls):產(chǎn)生行為或顯示信息。
  • 臨時(shí)視圖(Temporary views):臨時(shí)性的向用戶呈現(xiàn)重要信息,或提供額外的功能及選項(xiàng)。

除了定義UI元素以外,UIKit框架還定義了那些可以完成諸如手勢(shì)識(shí)別、繪制、輔助支持、打印支持等功能的對(duì)象。

從編程的角度來(lái)講,UI元素可以被看做是不同類型的視圖(views),因?yàn)樗鼈兌祭^承自UIView類。一個(gè)視圖知道怎樣將它自己輸出到屏幕上,知道怎樣捕獲用戶在它的范圍內(nèi)執(zhí)行的點(diǎn)擊行為。

要在應(yīng)用中管理一組或一系列具有繼承關(guān)系的視圖,你通常需要使用視圖控制器(view controller)。視圖控制器可以協(xié)調(diào)不同視圖的顯示方式,在用戶發(fā)起行為后執(zhí)行相應(yīng)的功能,并且對(duì)界面切換時(shí)所需的動(dòng)畫過(guò)渡效果進(jìn)行管理。

下圖展示了視圖和視圖控制器是怎樣協(xié)同工作來(lái)呈現(xiàn)iOS應(yīng)用界面的:

02-window-layers-ios-7-human-interface-guidelines-hig-basic-ios-app-anatonmy.png

雖然開發(fā)者們習(xí)慣于從視圖和控制器的角度來(lái)思考問(wèn)題,但用戶只會(huì)將應(yīng)用看做是由一個(gè)個(gè)界面所組成的整體。從這個(gè)角度講,每一“屏”都對(duì)應(yīng)著應(yīng)用中的一個(gè)明確的視覺狀態(tài)或模式。

注意:每個(gè)iOS應(yīng)用都包含一個(gè)窗口(window)。與桌面應(yīng)用中的概念有所不同,iOS中的窗口沒(méi)有真正的可視部分,而且不能從屏幕上的一個(gè)地方移動(dòng)到另外一個(gè)地方。多數(shù)iOS應(yīng)用只有一個(gè)窗口;那些支持外接顯示設(shè)備的應(yīng)用會(huì)有多個(gè)窗口。

iOS界面設(shè)計(jì)規(guī)范當(dāng)中會(huì)用到“屏(screen)”這個(gè)詞,因?yàn)樗鼙欢鄶?shù)用戶所理解。作為開發(fā)者,你可能還會(huì)在其他不同的上下文當(dāng)中讀到“屏”的概念,例如被用來(lái)指代UIScreen對(duì)象(用于訪問(wèn)外界顯示設(shè)備)。

贊助商鏈接: