UI設計師必讀的IOS 10人機界面中文版設計指南 (三)

分類欄目:經驗 - 設計教程

發布于 暫無評論

3. 特性(Features)

  • 3.1 多任務處理(Multitasking)

  • 3.2 通知(Notification)

  • 3.3 打印(Printing)

  • 3.4 快速查看(Quick Look)

  • 3.5 Siri

4. 視覺設計(Visual Design)

  • 4.1 動畫(Animation)

  • 4.2 品牌化(Branding)

  • 4.3 顏色(Color)

  • 4.4 布局(Layout)

  • 4.5 字體(Typography)

3.1 多任務處理(Multitasking)

多任務處理讓你能夠通過IOS設備上的多任務處理界面或是在iPad上使用四指手勢,隨時且快速地從一個應用切換至另一個。在iPad,多任務處理也能夠讓你在Slide Over,分屏視圖(Split View)或者畫中畫(Picture in Picture)模式下同時使用兩個app。從屏幕右側橫掃就能進入Slide Over模式,它能讓你在不離開當前app的情況下暫時性地使用第二個app ,比如在你使用Safari瀏覽器的時候快速地查看你的郵箱。分屏視圖讓你同時地使用兩個并排的app,而畫中畫讓你在一個app工作時也能觀看視頻。

設計一個能在多任務處理環境下從容工作的app取決于你的app是否能夠和諧地于其它應用在設備上共處。也就是說,你的app不應該使用過多的CPU、存儲空間、屏幕空間或是其它系統資源。它應該合理應對來自其它app的突發干擾和聲音,快速流暢地隱去后臺或是從后臺中被呼出,并且即使在后臺也能可靠地運行。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609071

準備好應對中斷,并且準備好隨時恢復。你的app在任何時候都可能被中斷。當中斷發生時,你的app應該快速精準地保存當前的狀態,這樣用戶返回app時,就能完美無縫地從他們上次離開的地方繼續使用。了解更多實施細則,請參閱 App Programming Guide for IOS 中的 Preserving Your App’s Visual Appearance Across Launches 部分。

確保你的界面能夠與雙倍高度的狀態欄(double-high status bar)共處。一些比如進行中的通話、錄音和共享功能會在屏幕頂部展示額外的一個狀態欄。在對此無準備的app中,這個增加的高度會遮擋其它的界面元素或是把它們擠下去,從而導致布局問題。在你的app中測試這些情況以保證你的界面能夠應對自如并且仍然看起來很棒。

暫停需要時時關注或是用戶參與的活動。如果你的app是一個游戲或是觀看媒體文件,請保證用戶在切換至其它app時也不會錯過任何內容。當他們切換回來時,讓他們從上一次離開的地方繼續就好像他們從未離開過。

恰當地處理來自應用外的聲音。有時候,你的app的音頻可能會被來自其它app或是系統的聲音打斷。比如,來電鈴聲或是被Siri打開的音樂播放列表會中斷你的app的音頻。當這種情況發生時,你的app應該以符合用戶預期的方式處理。對于重要的音頻干擾,比如播放音樂、廣播或是有聲讀物,你的app應該停止播放它自己的音頻。對于短暫的干擾,比如GPS導航通知,你的app應該暫時地降低它的音頻音量或是先暫停音頻然后在干擾結束時繼續播放。了解更多指導,請參閱 Audio。

在后臺完成用戶發起的任務。當用戶開啟了一個任務,即使離開了app他們也希望任務能夠被完成。如果你的app正在執行一個不需要額外用戶輸入的任務,請在app回到前臺前在后臺完成它。

節制地使用通知。無論你的app在前臺、后臺或是完全沒有被打開,它都能在特定的時間給用戶推送通知。使用通知來傳達重要訊息是可行的,但是避免讓用戶被過多通知煩擾。比如,當你的app在后臺時,不要每完成一個任務就給用戶展示一個通知。相反的,讓用戶通過返回你的app來查看任務的完成情況。了解更多指導,請參閱 Notifications。

了解關于iPad的實施細則,請參閱 Adopting Multitasking Enhancements on iPad。

3.2 通知(Notification)

無論設備被鎖屏還是在使用中,app都能隨時利用通知來提供及時和重要的信息。比如,通知可能會在以下幾種情況出現:當新消息到來時、一個事件將要發生時、有新數據可獲取時或是某些狀態發生改變時。用戶在鎖屏上、在屏幕頂部(使用設備時),以及通知中心(通過從屏幕頂部邊緣下滑呼出)看到通知欄。每個通知都包含應用名稱、一個app圖標以及一條消息。通知的到來也可能伴隨聲音提示,以及app圖標上小紅點角標的出現和更新。

每個app的通知行為都可以在設置里面被單獨管理。只要是支持通知功能的app,你有可以完全地打開或關閉這個功能。你同樣可以設置通知是否在通知中心和鎖屏上可見,是否在app圖標上出現角標,以及選擇以下一種通知樣式:

橫幅:當設備在使用時在屏幕上方出現幾秒,然后消失。

提醒框:當設備在使用時在屏幕上方出現,直到被手動關閉。

在未鎖屏的設備上通過點擊通知、或是在鎖屏時右滑,來結束通知、把它從通知中心移除并打開發送通知的應用展示相關的內容。比如,在未鎖屏的設備點擊一條新的郵件通知,就會打開郵箱并且顯示新的信息。

在一個未鎖屏的設備,上滑通知或讓它消失能夠關閉通知,也可能將它從通知中心移除。

使用3D Touch 在一個通知上按壓,或時在未鎖屏時在通知上下滑,就能打開拓展的詳情視圖。這個視圖支持自定義并且包含最多四個操作按鈕。比如,一個待辦事項app可以推送一個含有詳情視圖的任務通知,上面有可以推遲任務和標記為已完成的按鈕。一個日歷事件的通知提供了“小睡”操作來推遲事件的鬧鈴。

TIP:

通知可以是本地或是遠程的。本地通知由同一個設備發出和接收。一個待辦事項應用就使用本地通知來提醒用戶一個將要到來的會議或是到期日。遠程通知,也叫做推送通知,來自一個服務器。一個多玩家游戲就使用遠程通知讓每個玩家知道什么時候輪到他們了。

用戶必須明確通過選擇來接收來自每個app的通知——他們在第一次使用app的時候都被要求這么做。如果有人選擇不接收通知,他們同樣也能通過訪問設置來選擇接收。

提供有用的通知。用戶打開通知是為了快速獲得最新消息,所以你的重點是提供有價值的信息。使用完整的句子,句首字母大寫,合適的標點符號,并且不要截短你的信息——必要時系統會自動處理。避免在通知中引導用戶打開你的app,進入指定頁面然后點擊指定按鈕來完成一些任務,因為當通知被關閉時用戶很難記住它們。

就算用戶沒有作出回應,也不要為同一件事情發送多個通知。用戶只有在方便時才會理會通知。如果你為同一件事發送了多個通知,并且填滿了通知中心,那么用戶就很可能關閉來自你app的通知。

不要包含你的app名字和圖標。系統會自動地在每條通知的頂部顯示這些信息。

角標是用來補充說明通知,而不能表示重要的信息。記住app的角標可以被關閉。如果你的app依賴于通過角標來傳達重要信息,就等于你在冒著用戶會錯過這些信息的風險。

保持角標實時更新。當收到對應的消息時立即更新你的app角標數字。你也不想讓用戶猜測是否收到了新消息,他們只有在看到確切提示之后才會進入你的app查看。請注意將角標上的數字清零意味著同時在消息中心移除所有相關的通知欄。

提供聲音以輔助你的通知提醒。當用戶沒有盯著屏幕時,聲音是一個引起他們注意的絕佳方式。一個待辦事項app,在需執行重要任務時可能就會播放一個提示音。你的app可以使用自定義聲音或是系統的提示音來達到效果。如果你使用自定義的聲音,請確保它是簡短、與眾不同并且制作精良的。請參閱Local and Remote Notification Programming Guide中的Preparing Custom Alert Sounds部分。請記住用戶可以隨時地關閉通知提示音。他們也可以開啟伴隨著聲音的振動——這只能被手動開啟,而不能通過你的app程序來關閉。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609072

考慮提供一個詳情視圖。一個通知的詳情視圖提供了關于該消息的更多信息,并且允許他們在不離開當前環境的情況下去執行快速的操作。這個視圖應該包含有用、易識別的信息,讓人感覺就是一個你的app自帶的插件。它可以包含圖片、視頻以及其它內容,它還能在顯示時動態更新。比如,一個拼車app就能夠在該視圖展示一個地圖,并標出正在朝著你的位置行駛的汽車位置。

提供直觀、有用的操作。一個通知的詳情視圖能最多包含四個操作按鈕。這些按鈕應該用來執行常用、省時的任務,而不用通過打開你的app。使用簡短、首字母大小寫的名稱,明確地描述操作的結果。一個通知的詳情視圖還能在屏幕上呼出一個鍵盤用來收集執行操作需要的信息。比如,一個通訊app可以允許用戶直接在新消息通知上回復。

避免展示破壞性的操作。要在通知詳情視圖里展示破壞性操作之前請仔細考量。如果你必須展示它們,確保用戶擁有足夠的上下文信息,以避免出現意外后果。破壞性的操作應該以紅字呈現。

了解更多實現細節,請參閱Local and Remote Notification Programming Guide。

3.3 打印(Printing)

你的app能夠利用系統自帶的AirPrint技術來使用兼容的打印機實現圖片、PDF以及其它內容的無線打印。當用戶在有AirPrint功能的應用內瀏覽可打印的內容時,他們一般通過在導航欄或是工具欄點擊一個操作按鈕,然后再點擊打印按鈕來打開打印視圖。 這個視圖提供了一個可用打印機的列表以及一些自定義選項,比如打印的份數、頁面范圍,并且提供了一個開始打印的的按鈕。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609073

讓打印選項易于發現。如果你的app有一個工具欄或是導航欄,請使用系統提供的操作按鈕來打印。用戶對這個按鈕更加熟悉,并且在其它應用中也是用它來打印。如果你的app沒有工具欄或是導航欄,那么設計一個自定義的打印按鈕來代替。

只在可以打印的情況下才允許打印。如果在你的屏幕上沒有任何內容或是沒有可用的打印機,那么不要在用戶點擊“操作”按鈕后顯示打印按鈕。如果你的app使用自定義的打印按鈕,在無法打印時讓其不可點擊或是隱藏。

提供有價值的打印選項。想想用戶在打印來你的內容時會想要指定哪些選項。考慮可以選擇頁面范圍和打印份數的選項。啟用附加的選項,比如雙面打印,如果這樣有意義并且打印機也支持的話。

了解更多實現細節,請參閱 Drawing and Printing Guide for IOS 和 UIPrintInteractionController Class Reference。

3.4 快速查看(Quick Look)

在你的app中,快速查看讓用戶能夠預覽Keynote,、Numbers、Pages、PDF文檔、圖片以及其它類型的文件(即使你的應用并不支持這些文件格式)。郵件(Mail)使用Quick Look來查看附件。在下載附件之后,Mail在郵件信息內顯示附件的圖標和文件名。點擊圖標就能預覽附件。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609074

在當前環境下合理地展現預覽視圖。在iPhone上,如果你的app有導航欄,讓預覽視圖下移留出位置給導航欄,就和你的app其它層級的視圖一樣。在iPad或是沒有導航欄的app內,在一個全屏的有導航欄的模態視圖中打開預覽視圖。通過以上兩種方法,導航欄就能提供退出Quick Look的按鈕,以及預覽特有的一些按鈕,比如分享和標記。如果你的app包含一個工具欄,那么預覽特有的按鈕就會在工具欄出現而不是導航欄。

了解更多實現細節,請參閱 Document Interaction Programming Topics for IOS 和 Quick Look Framework Reference for IOS

3.5 Siri

你的app可以與Siri聯動來執行一些任務以應對來自用戶的語音命令和問題。

音頻和視頻通話應用:撥打電話和查找通話記錄

消息應用:發送消息和閱讀收到的消息

提供支付服務的應用:發送和請求支付

管理圖片的應用:查找和顯示圖片

提供交通服務的應用:預定行程和提供行程狀態信息

提供健身活動的應用:開始、暫停、恢復、結束和取消鍛煉

與CarPlay聯動的車載軟件:更改車上的音頻源、溫控系統、除霜設置、座椅溫度和無線電臺。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609075

Siri負責語言處理和語義分析來把語音請求轉換成你的app能夠處理的操作指令。你的app應該負責定義它所支持的功能、驗證收到的信息、為Siri提供它需展示的信息以及采取操作。

在驗證信息的時候,如果某些信息丟失或是不明確,你的app可以指示Siri來展示選項,向用戶請求確認,或是請求更多信息。按照Siri的邏輯,某些任務比如發送信息和支付,在app執行任務之前首先需要用戶確認。

來自你的app的回應信息會由Siri說出來并且呈現在Siri界面。合適的話,你的app可以提供自定義的內容讓Siri來展現。比如一個健身app,可能會提供自定義的鍛煉信息。

力求一個無需觸屏或注視屏幕的聲控體驗。用戶在使用Siri時不會經常盯著屏幕看。他們可能會通過耳機、汽車或是穿過房間來與Siri互動。盡可能地,讓用戶在無需解鎖屏幕的情況下也能完成任務。

快速應答并且減少交互操作。用戶使用Siri是為了方便,所以不要讓他們等待回應。你的app應該在收到請求之后盡快地驗證信息以及采取操作。當需要說明和更多信息時,呈現高效且集中的選項以降低需要額外提示的可能性。

將用戶直接帶到指定內容。從Sir轉換你的app,應該直接去往用戶期望的目的地。不要顯示中間畫面或是信息,阻礙轉換過程或是拖慢用戶。

保證是相關的、精確的以及合適的。你的app的回應必須和當前的請求相關而且必須精確地反映用戶期望。永遠不要包含可能會被認為是冒犯或是侮辱人格的內容。

將最安全、價格最低的選項設為默認值。一個應答無論如何都不應該騙人或歪信息,尤其是當它會帶來經濟上的影響時。對于一次涉及不同價位的購買,不要默認選擇最貴的。當用戶決定付錢時,不要在不告知用戶的情況下收取額外的費用。

提升自定義詞庫的準確性。通過定義那些用戶可能會在請求時用到的特殊術語,比如聯系人、照片標簽、相冊名字、路線選擇和運動名稱,你的app能夠幫助Siri去了解更多與執行你應用操作有關的內容。這些術語必須在你的app中是非一般的、特殊的,并且用戶可能會在發起請求時真正用到。這些你提供的詞匯不能包含其它應用的名字、與其它app明顯相關的術語、不合適的語言或是被系統占用的短語,比如“Hey Siri”。記住任何你定義的術語都會被Siri用來解決用戶請求,但是并不保證一定能夠被識別。

提供請求例句。為Siri提供例句,當用戶點擊Siri界面的幫助按鈕時這些例句就會被展現在指南里。使用這些例句引導用戶如何以最簡單高效的方式通過Siri來使用你的app。

確保你的自定義界面與Siri很好的融合。你可以使用app特有的顏色、象征性圖像或是其它設計元素來表達品牌風格,但是任何自定義界面元素必須讓人感覺它們仍然適合于Siri界面。

不要在自定義界面包含你的app名字和圖標。系統會自動展示這些信息。

不要打廣告。屬于你應用的Siri體驗永遠都不能包含廣告、營銷或是app內購買的推銷。

不要試圖模仿或是操控Siri。你的應用永遠都不能模仿Siri,也不能試圖復制由Siri提供的功能,或是提供一個來自于Apple公司的應答。

了解更多實現細節,請參閱 SiriKit Programming Guide。

4.1 動畫(Animation)

貫穿于IOS系統的優美、精細的動畫在用戶和屏幕屏幕內容之間建立了一種視覺上的聯系。當動畫被合理利用時,它能夠表達狀態、提供反饋、加強直接操縱感,并且視覺化呈現用戶的操作結果。

明智且審慎地使用動畫和動效。不要為了使用動畫而使用動畫。過度或是無理由的動畫會讓用戶感到不連貫或是錯亂,尤其是在那些不能提供沉浸式體驗的app中。IOS經常使用動效,比如在主屏和其它地方使用了視差效果,來建立用戶對深度的認知。這些效果有助于增強理解和提升愉悅感,但是濫用它們就會讓一個app變得令人困惑并且難以控制。如果你想使用動效,一定要進行用戶測試以保證它們真的能完成使命。

使用連貫的動畫。一個熟悉并流暢的體驗能一直讓用戶參與其中。用戶已經習慣了貫穿于IOS系統的精細動畫,比如平穩的過渡、橫豎屏之間的流暢轉換和基于物理現實的滾動。 除非你在創造一個沉浸式體驗,比如游戲,不然自定義動畫都應該和系統自動地動畫相符。

力求真實性和可信性。用戶可以接受藝術創造,但是當動效沒有意義或是違背了物理定律時,用戶就會感到混亂。打個比方,如果用戶通過在屏幕頂部下滑呼出一個視圖,那么他們應該也能通過上滑將該視圖關閉。

4.2 品牌化(Branding)

成功的品牌化不僅是單純地在應用中添加品牌元素。優秀的app通過優雅別致的文字、顏色和圖片來營造獨特的品牌辨識度。提供足夠多的品牌元素讓用戶感覺是處在你的app中,但要因為給予太多而變成干擾。

融入精妙的、不唐突的品牌元素。用戶使用你的應用是獲得娛樂、得到信息或是完成任務,而不是為了觀看一個廣告。要想達到最好的體驗,請巧妙地將品牌融于應用設計中。讓app圖標的顏色貫穿于界面設計是一個在你的app中提供專屬環境的好辦法。

不要讓品牌化阻礙了優秀的應用設計。首先,讓你的app像是一個IOS app。保證它是直觀的、易于導航的、易用的并且以內容為中心的。當你的app在其它平臺也適用,不要為了保持品牌的一致性而犧牲了設計的質量。

內容比品牌化更重要。在屏幕頂部一直放置一個除了展示品牌元素以外沒有任何用途的頭欄,就意味著犧牲了用來瀏覽內容的空間。取而代之的,考慮采用低侵入性的方式來實現品牌化,比如使用自定義的配色方案和字體,或是巧妙地自定義背景。

抵制住想要在應用中到處展示logo的誘惑。避免在app中到處展示logo,除非它是品牌化中是必不可少的一部分。這點在導航欄中尤其重要,因為提供一個標題比logo更加有用。

遵循Apple的商標準則。Apple的商標不能在你的應用名字或是圖像中出現。請參閱Apple Trademark List 和Guidelines for Using Apple Trademarks。

TIP

App Store 為突出你的品牌提供了更多的機會。了解相關指導,請參閱 App Store Marketing Guidelines。

4.3 顏色(Color)

IOS,顏色能夠暗示可交互性、增加活力以及提供視覺的連續性。在挑選app色調的顏色時,請參考系統的色彩方案,以保證這些顏色無論是單獨還是組合、在淺色背景還是深色背景上都看起來很棒。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609076

在app內使用互補的顏色。你的app內的顏色應該和諧共處,不會互相沖突和干擾。如果你的app風格的基礎色調是柔和的,那么使用一系列與之協調的柔和色調。

考慮在app中統一使用一種關鍵色來暗示交互性。在Note中,可交互的元素是黃色的。在Calendar中,可交互的元素是紅色的。如果你定義了一種關鍵色用于傳遞可交互性,那么你要保證其它顏色不會與之沖突。

一般來說,選擇與你的app logo相符的顏色數量有限的色板。巧妙地使用顏色是一個傳達品牌的好辦法。

避免給可交互和不可交互的元素使用相同的顏色。如果可交互和不可交互的元素是同一種顏色, 用戶就很難知道到底哪里是可點擊的。考慮半透明對顏色的影響。顏色在半透明元素之下和之上(比如工具欄)都會看起來很不一樣。

在多種光線條件下測試你的app的顏色方案。光線會在市內和室外、房間氛圍、不同的時間、氣候等條件下明顯地變化。你的app在現實世界中使用時看到的顏色不會一直和你在電腦上看到的顏色相同。你應該在不同的光線條件下預覽你的應用來觀察顏色的真實表現,比如在晴朗的戶外。必要時,應當調整顏色以求在大多數的使用場景下提供最好的視覺體驗。

考慮True Tone顯示屏對顏色的影響。True Tone顯示屏利用了環境光傳感器來自動調整顯示屏的白點,以適應當前環境下的光線情況。專注于閱讀、照片、視頻和游戲的應用可以通過確定一種白點糾正模式來強化或弱化True Tone 的效果。了解更多實現細節,請參閱 Information Property List Key Reference。

關注色盲用戶以及不同文化對顏色的認知差異。不同的用戶看見的顏色是不一樣的。比如,很多色盲用戶很難分辨紅色和綠色(以及任何灰色),或是藍色和橘色。避免把這些顏色組合作為區分兩種狀態或值的唯一方式。比如,用紅色方塊和綠色圓形來表示下線和上線狀態,而不是用紅色和綠色的圓形。有些圖形編輯軟件含有能夠幫助你證明你是否是色盲的工具。同樣地,考慮你對顏色的app在其它國家和文化中會被如何看待。比如,在某些文化里,紅色用來表示危險;但在另一些文化里,紅色又有著積極的含義。請確保在你的app中的顏色傳達了合適的訊息。

使用足夠的顏色對比度。在app中,過低的對比度會讓內容難以閱讀。比如,圖標和文本可能會和背景相融合。在線的顏色對比度計算器能夠幫助你精確的分析應用中的顏色對比度,以確保它符合最佳標準。請確保你的app對比度至少達到4.5:1,但是7:1更好,因為它符合更加嚴格的輔助功能標準。

4.4 布局(Layout)

用戶總是希望能夠在他們所有的設備以及任何一種模式下使用他們最喜歡的app。在IOS,界面元素和布局能夠被配置以在不同的設備中、在iPad中多任務操作時、分屏模式時以及屏幕旋轉時,自動改變形狀和大小。因此,提前計劃并且設計一個在任何環境下都能提供非凡體驗的app是十分重要的。

環境變化時保持當前內容的焦點不變。內容是你的最高使命。讓焦點隨著環境變化而改變是令人迷惑又沮喪的,它會讓用戶感覺當前的app失控了。

確保最重要的內容在默認大小下清晰可讀。除非用戶選擇調整大小,否則不應該讓用戶橫向滑動才能閱讀重要的文字信息,或是放大才能看清重要的圖片。

在app內保持整體一致的視覺外觀。一般來說,具有相似功能的元素應該看起來相似。

利用視覺權重和平衡來表示重要性。大的對象能夠抓住人的眼球,顯得比小的更加重要。大的對象也更易于點擊,當app在容易分散注意力的環境中(比如廚房和健身房)被使用時這點尤其重要。一般來說,把首要的對象放在屏幕的上半部分并且放在偏左的位置——處于從左往右的閱讀環境時。

利用對齊來方便瀏覽,并且表達結構和層級。對齊讓app看起來整齊有次序,當頁面滑動時有助用戶聚焦,更容易找到信息。縮進(indentation)和對齊還可以表明多組內容之間的關系。

避免無緣由的布局變動。即使用戶旋轉了設備,也不代表整體的布局需要變換。比如,如果你的app在豎屏模式展示了一網格的圖片,那么在橫屏模式你沒必要依次展示同樣的圖片。相反地,你只需要簡單地調整網格的尺寸就行了。盡量在任何環境下都能維持相當的體驗。

可能時,同時支持豎屏和橫屏模式。用戶更喜歡在兩種模式下都能使用app,所以最好能夠滿足他們的期望。

如果你的app只支持一種模式,那么請支持該模式的兩種變量。如果你的app只能在一種模式下運行,那么確保它能夠支持該模式的兩種方向變化是十分重要的。比如,如果你的app只在橫屏模式運行,那么無論Home鍵在左邊還是右邊,應用都該能正常使用。如果設備被旋轉180度,那么你的app內容也該同時旋轉180度。反之,當用戶拿錯設備方向時,你的app沒有自動旋轉,那么他們就會很自然地知道應該旋轉設備。你無需告訴他們該如何糾正。

根據當前使用內容來定制應用對旋轉的反應。比如,一個需要用戶旋轉設備來控制角色移動的游戲,就不會在游戲中根據設備的旋轉來改變模式。但是,它可以根據當前設備的旋轉方向來展示菜單和引導步驟。

為可交互元素提供足夠的空間。盡量讓所有控件都有不小于44pt x 44pt的點擊區域。

準備好應對文本大小的改變。當用戶在設置里選擇了不同的文本大小,他們總是希望大部分的app都能合理適配。為了適應某些文本大小的改變,你可能需要調整布局。了解更多關于應用內文本使用的信息,請參閱Typography。

了解更多適應性的實現細節,請參閱 Auto Layout Guide。

4.5 字體(Typography)

IOS的系統字體是San Francisco。該字體有兩個變種:SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)。當你在標簽和其它界面元素應用了系統字體時,IOS系統會根據字號自動選擇最合適的字體樣式。它還會根據需要自動改變字體,以滿足輔助性功能的設置。請前往 Resources 下載San Francisco字體。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609077

作為IOS的系統字體,San Francisco含有拉丁、希臘和西里爾字母,以及多種用于其它文字系統的字體。

強調重要信息。使用字體粗細、大小和顏色來強調app中最重要的信息。

如果可能的話,使用單種字體。混合使用多種字體會讓你的app看起來零散和草率。考慮使用一種字體和幾種樣式和大小。

可能時使用內置的文本樣式。內置的文本樣式讓你能在視覺上清晰地表達內容,同時保持最佳的可讀性。這些樣式建立在系統字體的基礎上并能讓你得益于關鍵的排版特性,比如動態字體,能夠根據每種字號自動調整字距和行間距。IOS含有以下文本樣式:

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609078

確保自定義字體清晰可辨。IOS支持自定義字體,但往往很難閱讀。除非你的app必須使用自定義字體,比如出于品牌目的或是為了營造沉浸式的游戲體驗,否則的話請堅決使用系統字體。如果你使用了自定義字體,請確保它是可讀的。

讓自定義字體實現輔助功能。系統字體能夠自動對輔助性功能做出反應,比如當需要加粗文本時。使用自定義字體的app,應該通過檢查輔助功能是否啟用或是向系統注冊以收到設定更改的通知,來執行同樣的行為。請參閱 Accessibility。

動態字體大小

SF UI字體的兩個變種經過精心的設計,無論尺寸大小都十分清晰可讀。動態字體通過讓閱讀者選擇喜歡字體大小,從而提供了額外的靈活度。

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-201609079

△ 最小號

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090710

△ 小號

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090711

△ 中號

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090712

△ 大號(默認)

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090713

△ 加大號

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090714

△ 超大號

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090715

△ 最大號

根據內容的優先級來應對字體大小的改變。不是所有的內容都一樣重要。當用戶選擇了一個更大的尺寸,他們只想讓自己關心的內容更易于閱讀,而不是希望屏幕上的每一個文字都變得很大。

字體使用和字距

在界面原型中使用正確的字體變種。當字號不大于19點時使用SF UI Text。使用SF UI Display來展示20號及更大的文字。根據以下規則適當調整字距:

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090716

uisdc-<a href=http://www.lbvorg.live/tags/381/ target=_blank class=infotextkey>IOS</a>-2016090717