嘗試閱讀《Human Interface Guidelines》原文翻譯學(xué)習(xí)iOS設(shè)計(jì)指南。

用戶通常希望能夠在他們所有的設(shè)備或任何場(chǎng)景中使用他們喜歡的app。在iOS系統(tǒng)中，界面元素和布局可以為不同的設(shè)備自動(dòng)配置改變形狀和大小，在ipad上可以處理并行任務(wù)，在分割視圖中，當(dāng)屏幕旋轉(zhuǎn)時(shí)等等。設(shè)計(jì)一個(gè)能夠在任何環(huán)境中提供良好體驗(yàn)的適應(yīng)性接口是至關(guān)重要的。

設(shè)備屏幕尺寸和方向

iOS設(shè)別有不同的屏幕尺寸，并且可以用于橫向或縱向。

為了了解屏幕分辨率如何影響app的視覺設(shè)計(jì)，see?Image Size and Resolution。

自動(dòng)布局

自動(dòng)布局是構(gòu)造自適應(yīng)界面的開發(fā)工具。適應(yīng)Auto Layout可以定義管理app中內(nèi)容的規(guī)則（稱為約束），例如，你約束一個(gè)按鈕，使其始終以水平方向?yàn)橹行?，并定位在圖像的下方八個(gè)點(diǎn)，這于可用的屏幕空間無(wú)關(guān)。

自動(dòng)布局自動(dòng)調(diào)整布局根據(jù)指定的約束時(shí)，某些環(huán)境變化(稱為特性)檢測(cè)。 你可以設(shè)置你的應(yīng)用程序動(dòng)態(tài)地適應(yīng)大范圍的特性，包括：

布局指南及安全區(qū)

布局指南定義的矩形區(qū)域?qū)嶋H上并不顯示在屏幕上，但有助于內(nèi)容的定位、對(duì)齊和間距。 該系統(tǒng)包括預(yù)定義的布局指南，可以很容易地在內(nèi)容周圍應(yīng)用標(biāo)準(zhǔn)的頁(yè)邊距，并限制文本的寬度以獲得最佳的可讀性，此外還可以定義自定義布局指南。

大小類別（Size Classes）

Size classes是根據(jù)大小自動(dòng)分配給內(nèi)容區(qū)域的特性。 該系統(tǒng)定義了兩個(gè)大小類，規(guī)則(表示擴(kuò)展空間)和緊湊(表示約束空間) ，用于描述視圖的高度和寬度。

一個(gè)視圖可以包含任何大小類別的組合：

與其他環(huán)境變化一樣，iOS 會(huì)根據(jù)內(nèi)容區(qū)域的大小類動(dòng)態(tài)調(diào)整布局。 例如，當(dāng)垂直大小類從緊湊高度變?yōu)槌Ｒ?guī)高度時(shí)，可能是因?yàn)橛脩魧⒃O(shè)備從橫向旋轉(zhuǎn)到縱向方向，制表符條可能變得更高。

Device Size Classes

根據(jù)屏幕大小，不同大小的類組合適用于不同設(shè)備上的全屏體驗(yàn)。

Multitasking Size Classes

在 iPad 上，當(dāng)你的應(yīng)用程序運(yùn)行在多任務(wù)配置中時(shí)，size 類也適用。

總體布局考慮

確保主要內(nèi)容在其默認(rèn)大小時(shí)是清晰的。 人們不必為了閱讀重要文本而水平滾動(dòng)，或者為了看到主要圖像而縮放，除非他們選擇改變大小。

在整個(gè)應(yīng)用程序中保持整體一致的外觀。 一般來說，具有相似功能的元素應(yīng)該看起來相似。

使用視覺重量和平衡來傳達(dá)重要性。 大件物品吸引眼球，顯得比小件物品更重要。 大一點(diǎn)的東西也更容易點(diǎn)擊，當(dāng)一個(gè)應(yīng)用程序被用于分散注意力的環(huán)境時(shí)，比如在廚房或者健身房，這一點(diǎn)尤其重要。 一般來說，將主要項(xiàng)目放置在屏幕的上半部分，并且在從左到右的閱讀上下文中放置在屏幕左側(cè)附近。

使用對(duì)齊來簡(jiǎn)化掃描和溝通組織和層次結(jié)構(gòu)。 對(duì)齊使應(yīng)用程序看起來整潔有序，幫助人們?cè)跐L動(dòng)時(shí)集中注意力，并且更容易找到信息。 縮進(jìn)和對(duì)齊還可以指示內(nèi)容組之間的關(guān)系。

如果可能的話，支持縱向和橫向方向。 人們喜歡在不同的方向使用應(yīng)用程序，所以當(dāng)你能滿足這個(gè)期望時(shí)是最好的。

為文本大小的更改做好準(zhǔn)備。 人們希望大多數(shù)應(yīng)用程序在設(shè)置中選擇不同的文本大小時(shí)能夠響應(yīng)。 為了適應(yīng)一些文本大小的變化，您可能需要調(diào)整布局。 有關(guān)應(yīng)用程序中文本使用的詳細(xì)信息，請(qǐng)參閱排版。

為交互元素提供充足的觸摸目標(biāo)。 盡量保持所有控件的最小可伸縮面積為44 pt x 44 pt。

在多個(gè)設(shè)備上預(yù)覽你的應(yīng)用程序。 您可以使用模擬器(包含在 Xcode 中)預(yù)覽您的應(yīng)用程序，并檢查剪輯和其他布局問題。 如果你的應(yīng)用程序支持橫向模式，不管設(shè)備是左旋還是右旋，都要確保你的布局看起來很棒。 全屏 iphone 不支持倒置肖像模式。 有些功能，比如廣色圖像，最好在實(shí)際設(shè)備上預(yù)覽。

在較大的設(shè)備上顯示文本時(shí)應(yīng)用可讀性邊距。 這些頁(yè)邊距使文本行足夠短，以確保舒適的閱讀體驗(yàn)。

適應(yīng)環(huán)境的變化

在上下文更改期間保持對(duì)當(dāng)前內(nèi)容的關(guān)注。 內(nèi)容是你的最高優(yōu)先級(jí)。 當(dāng)環(huán)境發(fā)生變化時(shí)，改變注意力會(huì)讓人感到迷惑和沮喪，并且會(huì)讓人覺得失去對(duì)應(yīng)用程序的控制。

避免不必要的布局變化。 當(dāng)有人旋轉(zhuǎn)一個(gè)設(shè)備，整個(gè)布局不必改變。 例如，如果你的應(yīng)用程序在縱向模式下顯示一個(gè)圖片網(wǎng)格，它就不必在橫向模式下顯示與列表相同的圖片。 相反，它可以簡(jiǎn)單地調(diào)整網(wǎng)格的尺寸。 嘗試在所有情況下保持一種可比較的體驗(yàn)。

如果您的應(yīng)用程序必須以單一方向運(yùn)行，那么支持這兩種變體。 一個(gè)只在橫向模式下運(yùn)行的應(yīng)用程序應(yīng)該是可用的，不管用戶是向左還是向右旋轉(zhuǎn)設(shè)備。 一個(gè)只在肖像模式下運(yùn)行的應(yīng)用程序應(yīng)該在用戶旋轉(zhuǎn)設(shè)備180度時(shí)將其內(nèi)容旋轉(zhuǎn)180度ーー除了不支持倒置肖像模式的 iPhone x。 如果你的應(yīng)用程序沒有自動(dòng)旋轉(zhuǎn)當(dāng)有人拿著設(shè)備在錯(cuò)誤的方向，他們會(huì)本能地知道旋轉(zhuǎn)它。 你不需要告訴他們。

根據(jù)上下文自定義應(yīng)用程序?qū)啌Q的反應(yīng)。 例如，一個(gè)允許人們通過旋轉(zhuǎn)設(shè)備移動(dòng)角色的游戲，在游戲中可能不應(yīng)該改變方向。 但是，它可以根據(jù)當(dāng)前的方向顯示菜單和導(dǎo)入序列。

確保你的應(yīng)用程序可以在 iPad 上運(yùn)行，而不僅僅是在 iPhone 上。 用戶喜歡在任何一種 iOS 設(shè)備上運(yùn)行應(yīng)用程序的靈活性。 即使你希望大多數(shù)人在 iPhone 上使用你的應(yīng)用程序，界面元素在 iPad 上也應(yīng)該保持可見性和功能性。 如果你的應(yīng)用程序的某些功能需要專門針對(duì) iphone 的硬件(比如3D touch) ，考慮在 iPad 上隱藏或禁用這些功能，讓人們使用你的應(yīng)用程序的其他功能。

當(dāng)重復(fù)使用現(xiàn)有的藝術(shù)品時(shí)，要注意長(zhǎng)寬比的差異。 不同的屏幕大小可能有不同的長(zhǎng)寬比，導(dǎo)致藝術(shù)作品出現(xiàn)裁切、凸框或凸框。 確保重要的視覺內(nèi)容在所有顯示大小上都保持在可視范圍內(nèi)。

設(shè)計(jì)全屏體驗(yàn)

擴(kuò)展可視元素以填充屏幕。 確保背景延伸到顯示器的邊緣，并且垂直滾動(dòng)布局，如表格和集合，一直延伸到底部。

避免顯式地將交互式控件放在屏幕的最底部和角落。 人們使用顯示器底部邊緣的滑動(dòng)手勢(shì)來訪問主屏幕和應(yīng)用程序切換器等功能，這些手勢(shì)可能會(huì)取消你在這個(gè)區(qū)域?qū)崿F(xiàn)的自定義手勢(shì)。 屏幕的遠(yuǎn)端角落可能是人們很難達(dá)到舒適的地方。

插入必要的內(nèi)容，以防止裁剪。 一般來說，內(nèi)容應(yīng)該居中對(duì)稱插入，這樣它在任何方向上看起來都很棒，不會(huì)被圓角夾住，不會(huì)被傳感器外殼隱藏，也不會(huì)被進(jìn)入主屏幕的指示器遮擋。 為了達(dá)到最好的效果，使用標(biāo)準(zhǔn)、系統(tǒng)提供的界面元素和自動(dòng)布局來構(gòu)建你的界面，并堅(jiān)持布局指南和 UIKit 定義的安全區(qū)域。 當(dāng)設(shè)備處于橫向時(shí)，對(duì)于某些應(yīng)用程序(比如游戲)來說，將可伸縮的控件放在屏幕的下方(延伸到安全區(qū)域以下) ，以便為內(nèi)容提供更多的空間可能是合適的。 在屏幕頂部和底部放置控件時(shí)使用匹配的插入，并在 Home 指示器周圍留出足夠的空間，這樣人們?cè)谠噲D與控件交互時(shí)就不會(huì)意外地瞄準(zhǔn)它。 因?yàn)?Home 指示器仍然集中在屏幕上，它相對(duì)于你的應(yīng)用程序界面的位置可能會(huì)改變。

插入全寬度按鈕

一個(gè)延伸到屏幕邊緣的按鈕可能看起來不像一個(gè)按鈕。 尊重標(biāo)準(zhǔn)的 UIKit 邊距的兩側(cè)全寬按鈕。 屏幕底部的全寬按鈕如果有圓角并與安全區(qū)域底部對(duì)齊，看起來最好，這也確保了它不會(huì)與 Home 指示器沖突。

不要掩蓋或呼吁特別注意關(guān)鍵的顯示功能

不要試圖通過在屏幕頂部和底部放置黑條來隱藏設(shè)備的圓角、傳感器外殼或訪問主屏幕的指示器。 也不要使用諸如括號(hào)、飾邊、形狀或說明文字等視覺裝飾來引起對(duì)這些區(qū)域的特別注意。

注意狀態(tài)欄的高度

全屏 iphone 的狀態(tài)欄比老款 iphone 的高。 如果你的應(yīng)用程序假設(shè)一個(gè)固定的狀態(tài)欄高度來定位狀態(tài)欄下面的內(nèi)容，你必須更新你的應(yīng)用程序來根據(jù)用戶的設(shè)備動(dòng)態(tài)定位內(nèi)容。 請(qǐng)注意，全屏 iphone 的狀態(tài)欄在語(yǔ)音記錄和位置跟蹤等后臺(tái)任務(wù)激活時(shí)不會(huì)改變高度。

如果你的應(yīng)用程序目前隱藏了狀態(tài)欄，重新考慮全屏 iphone 的決定

全屏 iphone 比老款 iphone 有更多的垂直空間，狀態(tài)欄占據(jù)了你的應(yīng)用程序可能無(wú)法充分利用的屏幕區(qū)域。 狀態(tài)欄還顯示人們認(rèn)為有用的信息。 它只應(yīng)該被隱藏以換取附加值。

允許自動(dòng)隱藏的指標(biāo)訪問主屏幕節(jié)制

當(dāng)啟用自動(dòng)隱藏時(shí)，如果用戶幾秒鐘沒有觸摸屏幕，指示器就會(huì)淡出。 當(dāng)用戶再次觸摸屏幕時(shí)，它會(huì)重新出現(xiàn)。 這種行為只能用于被動(dòng)觀看，比如播放視頻或照片幻燈片。

END.THANKS FOR YOUR READING~

如有不當(dāng)，還請(qǐng)多多指教~