最新iOS平臺設計規范二|7大應用架構

0 評論 8748 瀏覽 32 收藏 23 分鐘

編輯導讀:iOS是運行于iPhone、iPad和iPod touch設備上、最常用的移動操作系統之一。作為互聯網應用的開發者、產品經理、體驗設計師,都應當理解并熟悉平臺的設計規范。這有利于提高我們的工作效率,保證用戶良好的體驗。本文是iOS設計規范系列第二篇:7大應用架構。

架構是有關軟件/系統整體流程、結構與組件的抽象描述,用于指導大型軟件/系統各個方面的設計。iOS關于架構的指導原則分為7個如下的部分。

為了便于記憶,個人理解可以分為兩類,一類是使用流程:啟動 —新手引導—加載中—請求許可—設置項。另一類是結構組建:模態和導航。(請注意:這兩個及其重要?。?/p>

一、啟動(Launching)

啟動體驗會使用戶應用的感覺產生重大影響。無論用戶使用什么設備或者距上次打開多長時間,啟動體驗都應該是快速無縫的。以下準則可以幫助您設計令人愉悅的啟動體驗。

  1. 提供啟動屏幕。系統會在應用啟動時顯示啟動屏幕,并迅速將其替換為應用的第一個屏幕。啟動屏幕的功能是給人一種印象,即您的應用程序快速且響應迅速,同時允許加載初始內容。為確保從啟動屏幕無縫過渡,設計啟動屏幕時應當盡量接近于APP首頁。(設計規范雖如此,但實際上大家基本都在用廣告,大型APP比如微信QQ會用自己的品牌)
  2. 啟動頁采用適當的方向。如果您的應用同時支持縱向和橫向模式,則應使用設備的當前方向啟動。如果您的應用僅在一種方向上運行,則應始終以該方向啟動,并在必要時讓人們旋轉設備。除非有令人信服的理由,否則無論設備向左還是向右旋轉,處于橫向模式的應用程序都應正確定向自身。
  3. 避免事先詢問設置信息。人們對APP的預期是可以正常運行。我們應當首先保證大多數用戶,同時讓少數希望使用不同配置的用戶可以通過調整設置來滿足他們的需求。盡可能從默認設置或通過同步服務(例如iCloud)獲取設置信息。如果您必須詢問設置信息,請在首次打開應用程序時提示人們提供該信息,并告知用戶可以稍后在設置中進行修改。
  4. 避免顯示應用內許可協議和免責聲明。讓App Store顯示協議和免責聲明,以便人們在下載您的應用之前可以閱讀它們。如果您必須在應用程序中包括這些項目,請以平衡的方式集成它們,而不會破壞用戶體驗。(實際是大多數應用都在登錄頁面顯示協議和免責聲明,并要求用戶進行勾選)
  5. 當您的應用重啟時,恢復以前的狀態。不要讓用戶自己去追溯重啟前位置。應當保留并還原應用的狀態,以便用戶可以從上次中斷的地方繼續。
  6. 不要鼓勵重啟。重新啟動會花費一些時間,并使應用看起來不可靠且難以使用。如果應用程序存在內存或其他問題,經常導致必須通過重啟才能恢復,那一定要盡快解決掉這些問題。
  7. 避免要求別人對應用程序進行過快或過高的評分。在首次啟動后不久(或在用戶頻繁應用程序前)詢問評級很煩人,并且很可能會減少您收到的有用反饋的數量。應當鼓勵經過深思熟慮的反饋,并提供退出方式,絕不要強迫人用戶進行評級。

二、新手引導(Onboarding)

APP啟動后,您就可以歡迎新用戶并與回訪的新用戶重新建立聯系??焖?,有趣且具有教育意義的新手引導可以幫助用戶從APP中獲得最大收益,而不會遇到麻煩。

  1. 提供新手引導幫助人們享受您的應用程序,而不僅僅是設置它。用戶很高興有機會了解更多有關您的應用程序的信息,但他們也希望它能夠正常工作。所以避免在新手引導中出現設置或權限許可信息。
  2. 快速進入。在系統將啟動屏幕替換為初始屏幕之后,應當讓用戶立即進入并開始享受您的應用程序。如果您需要提供教程和引導,請務必提供一種跳過它們的方法,而且切忌向老用戶展示它們。
  3. 預想用戶可能會需要的幫助。主動尋找和思考用戶可能被卡住的地方。例如:游戲中在暫?;蚪巧珱]有前進時顯示一些有用的提示。讓用戶可以重播教程,以防第一次進入APP的他們錯過任何內容。
  4. 突出教程中的要點。為新用戶提供引導是好的,但這并不意味著這樣做就能成為優秀的APP。好的APP應當是直觀和自然的。如果你的APP需要過多的引導,那么請重新審視/反思你的設計。
  5. 讓學習變得有趣和易于發現。邊做邊學比閱讀一長串說明更有趣和有效。在上下文環境中,使用動畫和可交互性循序漸進地引導用戶。要避免顯示看起來像可交互的屏幕截圖。

三、加載中(Loading)

加載內容時,空白或靜態屏幕可能會使您的應用程序看起來像死機了,從而造成用戶的混亂和沮喪,甚至離開APP。

  1. 表明加載狀態。至少要有一個加載的圖標,可以表達正在發生的狀態。更好的方式是:使用類似進度條的形式,顯示明確的進度,讓用戶可以判斷自己大概需要等待多長時間。
  2. 盡快顯示內容。在用戶看到屏幕內容之前,不要讓用戶干等著加載。你可以使用占位符文本、圖形或動畫來告訴用戶,這個區域的內容還沒加載完成。在加載出內容后直接代替這些占位符元素。后臺也要盡可能使用預加載,例如在播放動畫或用戶正在操作導航欄的選項卡時,后臺預先加載出來即將播放和顯示的內容。
  3. 用引導或娛樂的方式來掩蓋加載的時間。比如很多游戲、視頻APP等,都可以放一段有趣的動畫或占位圖作為加載提示,緩解用戶焦急的心情。
  4. 自定義加載屏幕。盡管系統默認的進度指示器可以用,但有時會感覺它們脫離了主題,與APP的風格甚至顯得格格不入。設計師可以考慮用自定義動畫亦或是與APP風格相匹配的元素來設計,會使用戶有更沉浸式的體驗。

四、模態(Modality)

模態,是一種設計方式。一般作為臨時性的形式出現在頁面當中,和用戶先前上下文有明顯的區別。需要明確的操作才可以退出。模態的意義在于:

  • 幫助人們專注于一個獨立的任務或一組緊密相關的選項
  • 確保人們收到關鍵信息,并在必要時采取行動

iOS提供了警報、活動視圖(或共享表)和操作表的樣式,你可以在應用程序的特定情況下使用。為了在你的應用中呈現自定義的模態內容,iOS 13和更高版本支持以下兩種表現風格:

1.?工作表(卡片彈窗)

工作表演示樣式顯示為一張卡片,并覆蓋在頁面上。未被覆蓋的區域變暗顯示,無法進行交互。父視圖或上一張卡片的頂部邊緣在當前卡片的后面可見,這樣可以幫助人們記住他們在打開卡片時暫停的任務。人們通過以下方式關閉卡片:

  • 從屏幕頂部向下滑動
  • 卡內容滾動到頂部時,可以從屏幕任意位置向下滑動
  • 輕按一個按鈕

工作表常用在無法實現復雜任務的、非沉浸式的模式和內容。

2.?全屏

全屏演示風格涵蓋了整個屏幕。先前的視圖已完全覆蓋,從而最大程度地減少了視覺干擾。人們通過點擊按鈕來關閉全屏模式視圖。

使用全屏模式視圖獲取沉浸式內容(例如視頻,照片或相機視圖),或者使用受益于全屏演示的復雜任務(例如標記文檔或編輯照片)。

如果使用當前上下文模式視圖樣式在拆分視圖窗格,彈出窗口或其他非全屏視圖中顯示模式內容,則在緊湊環境中顯示模式內容時,應切換為使用工作表。

模態設計規范如下:

  1. 模態要在合適的時機使用。只有在需要將用戶的注意力集中在做出選擇或執行與當前任務不同的任務時,才能創建模態體驗。模態體驗使用戶脫離當前的頁面并需要用戶主動關閉,因此只有當創建模態體驗有明確的好處時才使用它。
  2. 在傳達重要信息或操作的情況下才使用警示框。通常情況下,彈出警示框意味著出現了問題。警示框會中斷體驗,需要點擊才能關閉。所以要讓用戶認為打斷是有必要的,否則不要隨便用。
  3. 確保模態上的任務簡單且集中。不要在你的APP中創建另一個APP。如果一個模態任務太復雜,那么當用戶進入模態視圖時,他們可能會忽略他們之前被暫停的任務。尤其要謹慎地創建涉及視圖層次結構的模態任務,因為人們可能會迷路而忘記了如何追溯其步驟。如果模態任務必須包含子視圖,請提供清晰的返回路徑和完成路徑。除非完成任務,否則不要使用“完成”按鈕。
  4. 始終要有取消/關閉模態視圖的按鈕。例如:你可以使用“完成”或“取消”。至少有一個按鈕以確保輔助技術訪問模態視圖,并代替手勢關閉模態視圖。
  5. 必要時,通過在關閉模式視圖之前進行確認來幫助人們避免數據丟失。不管人們是使用關閉手勢還是按鈕來關閉視圖,如果該操作可能導致用戶生成的內容丟失,請出示說明情況并提供解決方法的操作表。
  6. 不要讓模態視圖出現在Popover(彈出式窗口)上。除非是警示框,任何元素都不該出現在Popover上。在極少數情況下,當用戶在Popover中執行操作后需要用到模態視圖時,請在顯示模態視圖之前先關閉Popover。
  7. 通常為模態任務設置一個標題。當用戶進入模態任務時,他們會離開之前的頁面,因此最好使前后操作清晰連貫。你也可以在視圖的其他部分中,提供更全面描述任務或指導的文本。
  8. 模態視圖外觀應與APP風格統一。例如,當模態視圖包含導航欄時,它應該采用與APP導航欄相同的外觀。
  9. 為模態視圖的展示提供合適的過渡動畫。使用與APP風格統一的過渡動畫,增強用戶對內容轉變的認知。iOS默認的過渡方式是:模式視圖從屏幕底部向上滑入,被關閉時向下滑出。注意在整個APP中使用統一的模態轉換樣式。

五、導航(Navigation)

用戶往往會忽略APP的導航,除非當某些操作達不到他們的期望。我們的任務是在不會引起用戶過度注意的情況下,讓導航結構清晰、目的明確。導航在APP中應該顯得自然和熟悉,不應該主導界面或成為頁面內容中的焦點。

在iOS中,有三種主要的導航樣式:

1. 分層導航

每一屏只能做一個選擇,直到到達你的目的地。如果要前往另一個目的地,您必須按原路一級級返回,并從最開始的位置做出的選擇。iOS的設置和郵件兩個APP就是使用這種導航樣式。

2. 平級導航

在不同內容類別間進行切換,像音樂和App Store兩個APP就是用的這種導航樣式。

3. 內容驅動或體驗驅動導航

在APP的不同內容間切換,或者由內容本身定義導航。游戲、書籍和其他沉浸式APP通常使用此導航樣式。

一些APP會結合多種導航樣式,例如:使用平級導航的應用可以在每個類別中使用分層導航。

導航設計規范如下:

  1. 始終提供清晰明確的路徑。用戶應該知道他們在APP中的位置以及如何到達下一個目的地。無論導航風格如何,操作路徑必須符合邏輯,可預知易于遵循。一般情況下,一個頁面只給用戶提供一個入口。如果他們需要在多個場景下看到一個頁面內容,請考慮使用操作表、警示框、彈出式氣泡或模態視圖。
  2. 設計一種能快速、輕松地獲取內容的信息結構。為你的APP設計一個信息架構,在這個架構中,只需要最少的點擊、最少的滑動和最少的頁面數量便可以訪問相應內容。
  3. 使用手勢操作讓頁面切換更流暢。讓用戶以最小的阻力在頁面之間跳轉。例如,你可以讓人們從頁面側面滑動以返回上一個頁面。
  4. 使用標準導航組件。盡可能使用標準導航控件,例如頁面控件,標簽欄,分段控件,表視圖,集合視圖和拆分視圖。用戶已經很熟悉這些控件了,這樣能夠讓用戶更輕松地使用你的APP。
  5. 使用導航欄貫穿層級結構。導航欄的標題可以顯示層級結構中的當前位置,返回按鈕可以輕松返回到上一位置。
  6. 使用 Tab Bar(標簽欄)展示對應類別的內容或功能。使用標簽欄顯示對應類別的內容或功能。標簽欄可讓人們快速輕松地在不同類別之間切換。
  7. 在iPad上,使用拆分視圖而不是標簽欄。拆分視圖提供與選項卡欄相同的快速導航,同時更好地利用了大屏幕。
  8. 當您具有內容類型相同的多個頁面時,請使用頁面控件。頁面控件清楚地傳達了可用頁面的數量以及當前處于活動狀態的頁面。天氣應用程序使用頁面控件來顯示特定于位置的天氣頁面。

六、請求許可 (Requesting Permission)

APP必須得到用戶的授權才可以訪問其個人信息,包括:當前位置、日歷、聯系人信息、提醒和照片等。雖然用戶可能會覺得APP直接獲取個人信息可能更方便,但他們也希望能夠對自己的隱私數據進行自我管控。

例如:用戶喜歡系統自動獲取自己的實際位置去標記照片或尋找附近的朋友,但他們仍然希望可以選擇關閉這些功能。

在APP需要用到時才向用戶請求個人數據。用戶對個人信息的請求產生質疑是很正常的,尤其是他們發現當前的請求完全沒有必要時。確保只在用戶必須要用到個人數據時才會發出權限請求。例如:APP可能只有在激活位置跟蹤功能時才會請求獲得用戶的當前位置。

解釋APP需要這些個人信息的目的。在系統的權限請求警示框中提供自定義文本(示例用途字符串)。使用簡短和具體、禮貌的文案,讓用戶感覺輕松,沒有壓力。文案中沒有必要包含APP的名稱 – 因為系統可以自動識別你的APP并帶入名稱。

僅在應用需要正常運行時,才在啟動時請求權限。如果很明顯您的應用程序依賴于其個人信息進行操作,那么用戶將不會對此請求感到困擾。

沒有必要時不要請求位置信息。在獲得位置位置信息之前,檢查系統以查看是否已啟用位置服務。如果已經開啟, 你可以在用戶真的需要用到該功能時再進行警示框提醒,甚至可以直接省略掉警示框。

使用系統提供的警示框樣式。你可以在標準的權限警示框中自定義文本,但不要直接復制標準警示框行為的提示文本和外觀樣式。

七、設置項(Setting)

一些APP可能一開始就需要用戶進行設置或配置選項,但大部分APP應該避免或者講設置操作延遲。

成功的APP可以一開始就讓大多數人覺得好用、易用,同時還提供了一些便捷的路徑來調整體驗。當你的APP可以滿足大部分用戶的需求時,你就可以弱化他們對設置的需要。

  1. 從系統中請求信息。如果APP需要有關用戶、設備或環境的信息,請盡可能向系統請求,而不是直接詢問用戶。例如:如果你想要知道用戶的郵政編碼來提供本地選項時,可以向用戶請求獲取他們的位置。如果用戶拒絕訪問其當前位置,則優雅地退回到手動輸入。
  2. 仔細考慮APP中設置選項的優先級。APP的主頁是用來放置關鍵內容或者常用選項的。次級頁面更適合放置偶爾才會更改的選項。
  3. 系統“設置”中應當放置不經常更改的配置選項。系統的“設置”APP是更改系統配置的中心位置,但用戶必須離開你的APP才能到達“設置”APP。能在APP中直接調整設置會更方便。
  4. 在適當的時候提供去設置的快捷方式。如果APP包含引導用戶到“設置”的文本,例如:“轉到設置> MyApp>隱私>位置服務”,則會提供一個自動打開該位置的按鈕。

參考資料:

Apple Developer-Human Interface Guidelines.

#專欄作家#

曉吾,微信公眾號:體驗主義,人人都是產品經理專欄作家。騰訊高級交互設計師,前創新工場、新浪微博交互設計師。專注社交創新與娛樂產品設計。

本文由 @曉吾 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!