成人午夜激情影院,小视频免费在线观看,国产精品夜夜嗨,欧美日韩精品一区二区在线播放

iOS7用戶界面過渡指南(pdf版)

2013-07-05 09:48:55來源:搜狐mued作者:

iOS 7引入了許多用戶界面上的改變,比如無邊框的按鈕,透明操作欄,全屏視圖控制器布局。使用Xcode 5可以創建iOS 7項目,并使用模擬器一窺iOS 7用戶界面的變化。

iOS 7引入了許多用戶界面上的改變,比如無邊框的按鈕,透明操作欄,全屏視圖控制器布局。使用Xcode 5可以創建iOS 7項目,并使用模擬器一窺iOS 7用戶界面的變化。

例如,示例程序TheElement在iOS6和iOS7模擬器上分別看起來分別是這樣的。

iOS7模擬器上的樣子                                      iOS6模擬器上的樣子

模擬器上的樣子

注意:iOS 7 beta2 現已發布,支持iPad

對于這樣結構的程序,你甚至不用更新你的應用程序,但在開始之前還是有幾件事要考慮一下。當你操作內置的應用程序時,你會感覺到iOS 7的變化既微妙又深刻。熟悉的UI元素非常易于辨認,但它們看起來和原來變化很大。接近真實的虛擬觸摸變得更加柔和精妙,同時動態效果的真實性得到了增強。

注意:iOS 7上所有的UI元素看起來和原來區別很大,并且提供了許多新功能,但是你所熟悉的UIKit API基本上沒有變化太多。

隨著你探索的深入,會認識到iOS 7的主要主題:

  1. 順從。界面的作用是幫助用戶理解內容、和內容交互,而不是與內容競爭。
  2. 明晰。每個字號的字體都清晰可辨,icon精確易懂,裝飾元素恰如其分,對于功能的精確聚焦是設計驅動力。
  3. 深度。通過可視化的層、逼真的動畫,加深用戶的愉悅和理解。

因為iOS體驗發生了根本而普遍的變化,iOS 7為大家提供了一個珍貴的機會:重新審視你的app的核心目的是什么,為用戶提供什么樣的功能。盡管你現在可能還沒準備好利用這個機會,當你將app適配到iOS 7的時候,請記住這一點。(當你準備好重新審視你的app設計或者開始一個新項目的時候,請參閱《Designing for iOS 7(為iOS 7而設計)》)

了解app的特征

不論你準備重新設計app,或者只是改進設計,你都需要知道你的app的特質會對重新設計過程產生影響。首先請自問如下2個問題,它們能幫助你思考過渡的策略:

你使用Auto Layout來設計app了嗎?

如果你使用了Auto Layout來布局的話,你的工作量就少了很多。在Xcode 5中,Auto Layout會幫助app自動調整新的UI元素度量,并且對字號自動動態調整。Auto Layout對你從iOS 6升級到iOS 7,和同時支持兩個版本操作系統非常有幫助。

如果你沒有使用Auto Layout,現在開始學著使用吧,特別是當你需要支持app的多個版本的時候。如果使用手動布局或者區分性布局技術的話會比較麻煩,就需要時刻考慮確保字號改變的時候造成的布局變化是否合適。

你的app需要支持iOS 6嗎?

記住很多iOS用戶很可能在較短時間內升級他們的設備到iOS 7,他們不希望看到自己喜歡的app在iOS 7上表現得糟糕。

你也可能出于商業原因需要考慮對iOS 6的支持,這時最佳的方案仍然是將app先升級到支持iOS 7,然后盡可能地去將設計的變化運用到app的iOS 6版本。這個過程的處理細節請參考“支持iOS 6系統”(第7頁)。

接下來要檢查app是依照什么樣的方式定制的。不同定制方式影響了工作量。

定制分為三種類型:

標準型(Standard): app中只包含了UIKit中所提供的標準UI元素。

自定義型(Custom): app中完全使用了UIKit中沒有的自定義UI元素。

混合型(Hybrid): 既使用了標準元素,也用了自定義元素(包括使用UIKit著色和外表自定義API定制的自定義的標準元素)。

對標準型app。需要確認視覺和交互設計在iOS 7環境下時是否依然合適。如果你決定保持原有的布局和交互方式,主要的工作就是進行微調,確保app可以正常處理系統全局的手勢。

自定義型。這對工作量要求就比較高了。如果當前的UI和體驗依然合適的話,那要做的事情還不算多。相反,如果app的個性和體驗與iOS 7相差迥異,那為了迎合用戶的習慣,你可能就需要做比較多的工作了。

混合型。根據其使用自定義控件的多少與其和標準控件綁定情況不同,工作量也有所區別。重新審視混合型app的時候,還要確保自定義部分和標準部分依然可以一起正常工作。

注意:如果你的app以自定義的方式模擬了iOS 6的傳統UI,那就會需要花大力氣修改了,否則它會看起來非常陳舊。

過渡工作的范圍

了解你的app特征及其定制方式,能讓你大概知道怎么進行過渡。參考下面的清單,填充上自己項目的細節,來了解整個過渡工作的范圍。

強制每個app做的事情
  1. 更新app的icon,在iOS 7中,app的圖標尺寸是120 x 120像素(高分辨率下)。
  2. 更新app的載入圖像,如果原有的載入圖像中不包含頂欄部分的話,補充上狀態欄部分的圖像。
  3. 請支持Retina屏和iPhone 5的屏幕尺寸。(譯者注:不支持就不能更新了)
  • 建議每個app做的事情
  1. 確保app的內容在透明UI元素(比如透明的bar和透明鍵盤)和透明的系統狀態欄下依然可辨識。在iOS 7中,視圖控制器統一采用了全屏視圖(參考第11頁“使用視圖控制器”)。
  2. 重新設計自定義bar的icon。iOS 7下,bar上的按鈕圖標更加輕巧,風格也有變化。
  3. 拿掉按鈕的背景圖片, 重視現有的按鈕外觀,嘗試無邊框的按鈕。
  4. 檢查app中寫死的UI數值,比如size和position,用系統提供的動態數值替換它們。使用Auto Layout幫助你的app完成相應布局變化下的響應。(如果你這個菜鳥連Auto Layout都不知道是什么的話,請自行閱讀Cocoa Auto Layout Guide)
  5. 檢查app中使用UIKit的地方,看尺度和風格發生變化的控制器和視圖是否對布局和外觀產生了影響。比如,開關更加寬了,組合式表格(grouped tables)變成通欄的了,進度指示條變成了非常細的小條。更詳細的UI元素變化,請參考21頁的“操作欄和欄上的按鈕”,第26頁的“控件”,第19頁的“內容視圖”,第32頁的“臨時視圖”。
  6. 使用動態的字體。在iOS 7中,用戶可以自由調整app中的字號大小。如果開發者使用動態字體的話,用戶在系統中設定自定義字號的時候,app的字體也會發生相應的變化。更多信息請參考12頁的“使用字體”。
  7. 確保你的app不會與系統的新增手勢產生沖突:從屏幕底部向上滑動調出控制中心的手勢,從屏幕左右邊緣向中間滑動的前進后退手勢。
  8. app樣式中慎用投影、漸變、浮雕效果。因為iOS 7的美學重視平緩、分層——盡量少使用讓UI元素看起來擬實的視覺效果。
  9. 必要的話,將app升級到iOS 6中推薦的最佳實踐方法(如:Auto Layout和故事版)并確保app不使用廢棄的API。

現在你知道你需要做哪類事情了,了解更多關于視圖控制器、著色、字體的改變,請閱讀第11頁的“布局和外觀”。

如果你仍需支持iOS6

如果你必須支持iOS 6和7兩個系統,你可以在app運行的時候檢測操作系統的版本,并隨時加載相應的資源文件。更多信息請參考第7頁的“支持iOS 6系統”。

支持iOS 6系統

如果出于商業原因必須支持iOS 6或者更早期的系統版本,你需要選擇最切合實際的方式升級app到支持iOS 7。你選擇的技術可能有所不同,但總的建議是:聚焦在首先為iOS 7而重新設計,然后為app考慮iOS 6版本需要做的事情。

注意:在運行iOS 7的設備上,所有的系統界面元素(比如警告對話框和通知信息)都會使用iOS 7的默認外觀,即使你的app使用更早期的外觀。

使用Interface Builder支持app多版本

Xcode 5中的Interface Builder包含了諸多新功能 ,它們能幫助你將app過渡到iOS 7的同時支持舊的版本。

看一下你對用戶界面的升級會對早期版本產生什么樣的影響。使用Assistant Editor,可以在畫布上修改iOS 7故事版或xib文件的同時,看到這些變動會對iOS 6版本文件造成的影響。

預覽早期故事版文件和xib文件的方法:

  1. 在畫布上查看iOS 7故事版文件或者xib文件的時候,打開assistant editor。
  2. 打開Assistant彈出菜單。
  3. 在菜單中,定位到預覽項,然后選中相應故事版文件或xib文件。

預覽早期故事版文件

在iOS 7和早期版本iOS的UI預覽之間切換。如果你的app需要支持iOS 6.1之前的版本,使用這個功能來確認UI在早期版本看起來沒有問題。

在兩個版本的UI之間切換的方法:

  1. 在Interface Builder的檢查器中打開文件。
  2. 打開菜單“View as”。
  3. 選擇你想預覽的版本號。

更多關于Xcode 5中新的Interface Builder的信息,請參考“What’s New in Xcode”。

支持標準app的兩個版本

如果標準app的兩個版本使用相同的布局,使用Auto Layout創建適用于兩個版本iOS的用戶界面。要支持多版本的iOS,指定單獨一套的常量以便Auto Layout調整故事版和xib文件中的視圖和控制器。(更多信息參考“Constraints Express Relationships Between Views”)

如果標準app的兩個版本需要使用相同的外觀,但你又沒有使用Auto Layout,那么請使用offsets偏移量。在使用offsets前請將UI升級到iOS 7。接下來將早期UI元素的起始、高度、寬度的值指定為iOS 7中使用的offsets偏移量。

更多Auto Layout的內容,請看“Cocoa Auto Layout Guide”。

管理混合型app中的多個版本圖片

混合型app經常包含自定義圖片資源,比如操作欄按鈕圖標,操作欄或者其他控件的視圖背景。apps可以使用一種或多種資源分類方法來管理這些資源。(了解更多資源分類資料,請看“Asset Catalog Help”)

注意:資源分類(asset catalog)包括顯示在app中的資源;資源分類不能包含app的icon,載入圖像,或者其他任何外部過程需要獲取到的圖片。

混合型app如果需要支持多版本iOS,則必須自己管理圖像資源。將與app各個版本的圖片分別使用不同命名。

如果你的故事版或xib文件包含嵌入式圖片,考慮創建一個圖片視圖的出口(outlet),并在需要的時候加載合適的資源。在代碼中加載不同資源的方法,參考“Loading Resources Conditionally”。

依據附加條件加載資源

有時候,你需要考慮app在什么iOS版本上運行,才能在代碼中做出相應的對策。比如,在不同版本的app中,布局可能是截然不同的,可以通過加載不同的故事版或xib文件來實現。你可能需要使用不同代碼來處理API之間的不同之處,比如在給操作欄背景著色的時候使用barTintColor還是tintColor。

如果你需要為不同app版本加載不同的資源,但你只在Info.plist文件中指定了一個故事版或xib文件,那么你也可以先檢查系統版本然后加載對應的資源(application:didFinish-LaunchingWithOptions:)

檢測app是否當前運行在iOS 7環境的方法是:寫一個宏來檢查系統版本。下面的代碼展示了檢查系統版本并存儲結果的方法(方便以后隨時調用)。

NSUInteger DeviceSystemMajorVersion();

NSUInteger DeviceSystemMajorVersion() {

static NSUInteger _deviceSystemMajorVersion = -1;

static dispatch_once_t onceToken;

dispatch_once(&onceToken, ^{

_deviceSystemMajorVersion = [[[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@”.”] objectAtIndex:0] intValue];

});

return _deviceSystemMajorVersion;

}

#define MY_MACRO_NAME (DeviceSystemMajorVersion() < 7)

 

布局和外觀(Layout & Appearance)

iOS 7給你的app布局和UI帶來了不少變化。視圖控制器、著色、字體效果等的變化,會影響你的app中所有UIKit對象。

使用視圖控制器(View Controller)

在iOS 7中,視圖控制器都是全屏的。iOS 7視圖控制器的外觀給人傳達了更細膩的控制感。特別是新的全屏外觀讓你可以指定視圖的每個邊緣的布局。

視圖控制器接口wantsFullScreenLayout已作廢。如果你像以前那樣地指定wantsFullScreenLayout = NO,iOS 7中視圖控制器會在將其內容顯示到一個意外的屏幕位置。

UIViewController提供了如下屬性來調整視圖控制器的外觀:

  1. edgesForExtendedLayout
    這個屬性屬于UIExtendedEdge類型,它可以單獨指定矩形的四條邊,也可以單獨指定、指定全部、全部不指定。
    使用edgesForExtendedLayout指定視圖的哪條邊需要擴展,不用理會操作欄的透明度。這個屬性的默認值是UIRectEdgeAll。
  2. extendedLayoutIncludesOpaqueBars
    如果你使用了不透明的操作欄,設置edgesForExtendedLayout的時候也請將extendedLayoutIncludesOpaqueBars的值設置為No(默認值是YES)。
  3. automaticallyAdjustsScrollViewInsets
    如果你不想讓scroll view的內容自動調整,將這個屬性設為NO(默認值YES)。

iOS 7中,視圖控制器支持自定義視圖之間的過場動畫。另外,你可以使用iOS 7的新API來支持過場動畫過程中的用戶交互。更多信息請參考下面兩個文檔:《UIViewController過場動畫協議參考》和《UIViewController過場交互協議參考》。

iOS 7允許視圖控制器在app運行過程中改變系統狀態欄的樣式。開啟這個功能,請在Info.plist文件中添加鍵UIViewControllerBasedStatusBarAppearance,并將值設為YES。動態改變系統狀態欄的一個好方法是重寫preferredStatusBarStyle方法,用一個動畫模塊來更新狀態欄外觀,并調用setNeedsStatusBarAppearanceUpdate方法。

使用著色(Tint Color)

在iOS 7中,著色是UIView的一個屬性。iOS 7的app會使用著色來定義一個關鍵色,這個顏色表明“這里是可交互的”,或者表示元素選中的狀態。

當你指定某個視圖的著色的時候,這個顏色會自動繼承到所有的子視圖中。因為UIWindows繼承自UIView,你可以這樣通過設置窗體的著色屬性指定著色:

window.tintColor = [UIColor purpleColor];

如果不為窗體指定著色,則會使用系統默認的顏色。

默認情況下,視圖的著色是nil,意味著視圖使用父級的著色。也就是說哪怕你不設置著色的話,視圖也總能夠獲取到一個色值。

總的來說,最好在視圖還沒有顯示到屏幕上之前指定它的著色。想讓視圖繼承上個層級的著色的話,就將著色設置為nil。

重要:iOS 7不支持通過外觀代理API來設置著色。

當警告框(alert)和上拉菜單(action sheet)出現的時候,iOS 7自動將背后視圖的著色變暗。為了響應該色彩變化,在渲染時使用tintColor的自定義視圖的子類需要重寫tintColorDidChange方法,以便在合適的時候刷新渲染。

注意:在iOS 6中,tintColor可以用來給導航欄的背景著色、tab欄、工具欄、搜索欄、搜索欄的范圍選擇欄著色。而在iOS 7中,給背景著色只需要使用barTintColor屬性就可以了。

使用字體(Fonts)

iOS 7引入了動態字體(Dynamic Type),它讓你的app中的字體顯示更加出色。

最小字號下的郵件正文                                      最大非殘障輔助字號下的郵件正文

不同字號下的郵件正文

使用動態字體時,同時意味著:

  1. 所有文字的粗細,字間距,行高都被自動調整。
  2. 可以語義上指定不同的文字樣式:正文、腳注、大標題等等。
  3. 對動態字體和殘障輔助超大號字體都能有很好的響應效果。

要享受動態字體的好處,請用UIFont類下的preferredFontForTextStyle方法來生成文字,而不是直接指定字體的名稱和大小。iOS 7會保證每個大小字體的最佳可讀性。

關鍵詞:iOS7設計規范

贊助商鏈接:

主站蜘蛛池模板: 乌兰察布市| 故城县| 东平县| 双鸭山市| 洞口县| 山丹县| 利辛县| 右玉县| 台中市| 灵璧县| 克什克腾旗| 镇平县| 确山县| 抚州市| 曲阜市| 巫溪县| 永清县| 友谊县| 永新县| 桓仁| 光泽县| 雷山县| 周至县| 晋城| 马鞍山市| 会东县| 稻城县| 永福县| 中山市| 廉江市| 东方市| 且末县| 织金县| 平顶山市| 甘泉县| 鹿泉市| 惠东县| 贵定县| 饶平县| 长乐市| 黎城县|