iPad使用者體驗準則

本文譯自《iPad User Experience Guidelines》,供個人學習之用,水準有限,難免有欠妥之處。

iPad使用者體驗最主要體現在內容和交互:

  • 淡化程式UI,以便使用者關注所需的內容。
  • 美觀的內容形式,富有真實感。
  • 充分利用設備的性能來增強內容的交互性。

支援所有方位

優秀iPad程式的其中一個重要因素是可以在所有方位上運行。豎向的大螢幕可以滿足使用者流覽內容的需求(當豎螢幕較小時,使用者就會將螢幕旋轉為橫螢幕,這樣一行就可以顯示較多的文字)。使用者不太會注意最小設備結構minimaldevice frame;使用iPhone時,使用者單手握住手機時,螢幕多為豎向顯示;而雙手使用iPad,螢幕的顯示方位並不能確定或者home按鍵的位置,他們不認為設備有預設方位。這就導致使用者期望程式可以在當前方位上運行。所以程式儘量滿足iPad各方位的運行要求。

保證以首要內容為重點。當旋轉iPad的方位時,如重點顯示的內容發生變化,使用者會感覺對程式失去控制。

旋轉時如何顯示輔助資訊或者功能。儘管能保證上一條,還要考慮如何顯示較為次要的資訊。例如郵箱功能中,首要內容時發郵件,次要內容是連絡人和收件匣的清單。

橫屏的次要內容顯示在左邊的分視圖中

豎屏的次要內容顯示在氣泡框中。

再如,橫屏時,一款遊戲以長方形顯示,當旋轉到豎屏時,需要調整螢幕上的顯示區域,遊戲顯示邊框的上面或者下面增加顯示空間,用於顯示輔助資訊,而不是垂直拉伸顯示區域來撐滿整個螢幕。

避免佈局變化過大或者無緣由地改變。所有方位中都顯示相似的UI佈局旋轉時盡可能保留資訊和文本的原有格式。尤其閱讀文本時,重要的是避免旋轉之後使用者找不到讀到哪兒了。如果非要對頁面重新佈局,可以使用動畫説明使用者理解當前頁面的變化。例如,當旋轉時要必須增加或者移除文字方塊時,可以選擇隱藏動作並在新佈局中簡單地淡出。為了有助於合理地設計旋轉動作,可考慮在真實的生活中是如何和它們交互的。

避免使用UI元素或者定義一個旋轉的手勢來完成旋轉動作。應該是內容隨著iPad的旋轉而旋轉。

為每個顯示方位各提供一個啟動圖片。比如提供1004×768和748×1024的圖片來滿足兩個方位的顯示要求。

仔細考慮程式是否可以在所有方位上運行。有些程式只能在橫屏或者豎屏下顯示,此時:

  • 顯示程式為正常顯示方式,無論當前iPad是什麼方位。避免使用UI元素來告知使用者旋轉設備。支援180度旋轉。
  • 可以特殊處理輸入式旋轉動作。有些遊戲把旋轉設備當成操作方式,這時候橫豎屏切換時,可不改變遊戲的顯示方位。

增強交互

最好的iPad程式在使用者執行明確的任務時提供新穎的對話模式。不要為了填滿整個大螢幕而增加一些和主要任務沒有直接關聯的功能,而是提升程式的使用者體驗。

例如讀書程式中容許使用者閱讀時如能保留路徑會提升閱讀體驗,不需要跳轉到另外一個頁面而是使用氣泡框來變更路徑。程式可以讓使用者在文本中增加書簽和注釋,説明使用者交換書目或者對比閱讀進度。

資訊扁平化

iPad的大螢幕和新UI元素可以顯示更多的資訊,使用的得當可以避免尋找資訊時跳轉的次數過多,因此也改變iPhone的單屏顯示結構。

使用分欄。兩級的內容同時顯示使得資訊扁平化。

使用氣泡框。頂部的氣泡框可以顯示控制項或者工具,不必切換畫面即可完成操作。

工具列中顯示分段控制項。分段控制項可以顯示並列的資訊。

使用標籤欄。標籤欄顯示不同種類資訊或者是不同的程式模組。

減少全屏切換

相似的視覺元素,而在某一區域變更內容。普遍的規則是寧願轉換單獨的視圖或者元件,也不全屏切換,保證視覺穩定性,説明使用者理解自己所處的位置。

增強協作和聯繫

使用者將iPad視為私人設備,但是它合宜的尺寸可以加強真實的協作和分享。

真實感

程式顯示和現實生活越為相似,使用者就越容易理解程式如何操作並喜歡使用。但也不必過於精確,通常誇張的事物看起來更為真實並能傳遞更多的意義,當做是和使用者交流並表述程式本質的一次機會。使用動畫進一步地增強程式的真實感。通常,動作的真實感比程式的外觀更為重要,不符合物理規律的動作會讓使用者感覺到迷惑。

令人驚歎的圖形

高解析度的iPad螢幕所支援豐富、美觀和動人的圖形對使用者富有吸引力,因此可以嘗試增加程式中圖形的深度和細節。

弱化介面控制項

通過設計程式中的UI來組織資訊框架,減少控制項的數量和淡化顯示效果,創建和程式風格相符的控制項,這樣既不突出,但又易於發現。

最少的模態對話方塊

模態對話方塊打斷使用者的工作流,需用在合適的情況下:
  • 有必要吸引使用者注意力的時候。
  • 避免使用者因誤操作而導致的資料丟失。

重新思考清單

清單(也就是表視圖)在iPhone中常用於顯示大量的資料資訊,在iPad也是非常有用。但是還可以使用一個更豐富的方式來顯示同樣的資訊。例如:iPhone中的連絡方式是一個很有效率的清單。而在iPad中的連絡方式看起來是一個美觀的通訊錄,iPad的清單可以顯示更多的資訊。

多點觸摸

大螢幕支援自訂的多點觸摸,即使是多人同時使用iPad,牢記不用回應不標準的觸摸手勢,如果有的話,也只用一種方式來執行命令。

氣泡框

氣泡框和模態視圖有些相似,當氣泡框顯示時,不能操作主視圖。但模態視圖是模態的。然而氣泡框可以用在兩種途徑:
  • 模態。氣泡框出現時,周圍的介面淡化,需要一個明確的操作取消。
  • 非模態。點擊氣泡框周圍的介面也可以取消氣泡框。
如果在iPhone中使用了模態視圖,可以考慮可以氣泡框替代它。以下問題可以説明你決定氣泡框的使用是否合理:
  • 是否需要不同類型的輸入?如果是,使用氣泡框。氣泡框更適合顯示一個選擇器或者清單選項。
  • 是否需要使用者穿過多級視圖。如果是,使用氣泡框。氣泡框的結果適合顯示多級頁面,因為對主視圖的改變較小。
  • 可能在主視圖操作才可以完成任務嗎?如果是,使用非模態氣泡框。因為使用者點擊主視圖即可取消氣泡框,容許使用者中止操作氣泡框並返回主視圖。
  • 任務需要使用者深度投入並且是程式的一個主要功能?如果是,可能需要使用模態視圖。模態視圖的語境轉換説明使用者在任務上集中注意力,較大模態視圖便於使用者輸入大量的字元段。

從另一方面而言,這個任務代表程式功能的重要一部分,但要是不需要使用者深度投入注意力的話,氣泡框是更好的選擇,羽量級的視覺對於頻繁執行的任務而言更為親切。

是否任務執行只有一次或者很少,就像安裝任務。如果是,考慮使用模態視圖。使用者不會介意為了完成此類任務而停留在當前介面。

限制模態任務的複雜度

使用者樂於在一個模態視圖中完成一個子任務,因為語境的轉換清晰和短暫的。但是如果子任務太複雜,使用者會忽視主任務,當模態視圖全屏顯示並包含多個子視圖時,這種危險會增加。如果模態任務非要包含子視圖,確保給予使用者一個單獨和層次清晰的路徑,避免迂回。提供一個明顯和安全的方式退出模態任務,使用者能預見此操作的後果。

淡化檔管理

儘管iPad程式容許使用者創建和操作檔,這並不意味著使用者應該對於檔案系統有意識。iPad沒有像Mac OS一樣的檔搜索,使用者也不必想在電腦上一樣和檔進行交互。使用者不應該考慮檔案類型和位置,比如:

  • 打開和保存對話方塊中出現檔層級關係。
  • 檔的存取權限資訊。

一個檔處理常式鼓勵使用者預覽內容。如果iPad程式容許使用者創建和編輯文檔,最好提供文檔種類選擇器便於使用者打開一個現有文檔或者創建新文檔。理想情況下的文檔選擇器為:

  • 高度圖形化。使用者看到文檔的視覺形式時能很容易識別出需要的文檔。
  • 使用者使用最少的觸摸手勢找到需要的內容。例如打開一個文檔只需平移水準捲軸和輕擊文檔。
  • 創建新文檔的功能。當使用者沒有找到想要的文檔時,選擇器提供一個創建文檔的功能而不是到其他介面尋找此功能。

只有需要的時候才要求使用者保存

使用者應該確信他們的工作是即時地被保存,除非他們明確取消或者刪除。如果程式説明使用者創建和編輯文檔,保證使用者不需要明確地執行保存命令。如果程式的主要功能不是創建內容,但要容許使用者切換流覽和編輯模式,這時可以明確要求使用者保存修改內容。在這種情況下,資訊顯示的視圖中提供「編輯」按鈕,輕擊之後,該按鈕變為「保存」按鈕和「取消」按鈕。「編輯」按鈕的轉換提醒使用者當前介面為編輯模式,「刪除」按鈕讓使用者不保存修改內容的情況下退出程式。

工具列移至頂部

與iPhone程式不同,iPad的工具列在頂部,iPad寬大螢幕可以顯示工具列中的所有功能。

立即啟動

iPad程式啟動時使用者無須等待即可開始操作。當啟動時,iPad程式:

  • 顯示程式在當前方位上的啟動圖片,減輕使用者的等待感,讓使用者知道程式仍在運行。
  • 避免程式啟動變慢。啟動圖片(launch image)中顯示品牌資訊是容許的,但是銘記使用者啟動程式時每次都會看到這個內容。如果非要使用啟動畫面splash screen,明確顯示時候不是過長並且無需任何使用者交互。
  • 恢復程式上一次運行狀況。
  • 避免要求使用者提供啟動資訊。取而代之的是:
    • 關注80%的使用者需求。
    • 從系統中獲取更多的資訊。從系統中調取資訊可以避免輸入。
    • 使用者在輸入前受益。如果輸入不可避免,那也要在使用者先讓獲取有效資訊。

隨時準備停止

和iPhone一樣,iPad程式在使用者按「Home」鍵之後,因此:

  • 儘快和合理地保存資料。
  • 退出時保存介面的每一個細節。

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.