Menu

iPad UI 界面設計規範

dimensions_20100127.jpg (610×380)

本文檔的英文原版地址在此。目前中文版內的鏈接很多還是英文,待翻譯完成後會替換成中文鏈接。

iPad 的操作系統是 iOS 3.2,iPad 軟件用到的很多 UIKit 視覺元素和控件都和 iPhone 軟件一樣。因此,如果你有為 iPhone 開發軟件的經驗(並且熟悉 iPhone 用戶界面規範),對於開發 iPad 軟件會很有幫助。

iPad 在近似的底層架構上引入了一套新的用戶體驗系統,這套系統和 iPhone 的用戶體驗有很大區別。iPad 的屏幕更大,介面引人入勝且高度互動,這些特點令你能夠寫出另一級別的軟件。

在開發過程中,你應該認真花時間去吸收和感知 iPad 的用戶體驗,在用在這一過程中習得的知識設計出完全屬於 iPad 的應用程序。

 

iPad 的硬件特點

iPad 的以下特點對您的軟件的 UI 有很大影響:

一、屏幕大。(分辨率:1024 x 768。)

二、你無法預期用戶手持 iPad 時的朝向(橫版還是豎版,正著還是倒著)。

三、可接外置鍵盤,並用其替代 iPad 自身的軟鍵盤。

四、可放在底座上用。

為了更好地理解開發環境,也請注意 iPad 和 iPhone 的如下共同特點:

  1. 內存有限。
  2. 一次只能運行一個軟件。
  3. 各個軟件的參數設置都可以統一放在 Settings 這個預裝的應用程序裡。
  4. 用戶可以改變設備的朝向。
  5. 屏幕上的「幫助」內容不會很多,用語也比較簡單。
  6. 沒有「鼠標點擊」這個動作,只有手勢動作。
  7. 既能跑原生軟件,也能跑線上軟件,或是混合型軟件。
  8. 圖像的比特深度有統一標準:24 比特(R、G、B 各 8 比特),外加一條 8 比特的 alpha 通道。基本上,我們推薦您用 PNG 格式。

iPad 上的新 UI 元素與行為

在 iOS 3.2 裡,UIKit 引入了一些新的 UI 元素,舊有的一些元素也有了新的行為:

分欄模式(Split view)
這是 iPad 獨有的元素,您可以用它同時在屏幕上顯示多個視圖區域,例如把數據以「主幹-細節」或源列表的方式排布。由於它能壓縮信息層級,分欄模式是 iPad 軟件常見的用來組織信息的元素。請到「iPad 用戶體驗規範」一章瞭解分欄模式的各種用法。如想瞭解使用指南,請讀「分欄模式」。

 

懸浮層(Popover)
懸浮層也是 iPad 獨有的元素,可以用來臨時顯示附加信息、控件,或是與主視圖區域的內容相關的選項。有些信息或選項不需要一直出現在主視圖區域,懸浮層就是為此而生的。請到「用懸浮層來完成模態任務」一章瞭解分欄模式的各種用法。如想瞭解使用指南,請讀「懸浮層」。

 

結果列表按鈕
這是系統提供的按鈕,用它可以顯示搜索欄裡的搜索結果。(如想瞭解使用指南,請讀「搜索欄」。)

 

模態視圖有了新的顯示風格
在 iPad 裡,模態介面可以全屏,也可以佔據屏幕的一部分,也可以以表單的形式出現。因此,你可以根據軟件的用戶體驗與視覺設計更好地度身定做模態視圖。(如想瞭解使用指南,請讀「模態視圖」。)

 

工具欄可以放在不同的位置
你可以把工具欄放在屏幕的頂部或底部,還可以放在分欄模式或懸浮層的內部。(如想瞭解使用指南,請讀「工具欄」。)

 

「編輯」菜單可以顯示自定義的項目
除了標準的剪切、拷貝、粘貼、選擇以及全選這幾項以外,你可以自定義其他項目。(如想瞭解使用指南,請讀「添加『編輯』菜單」。)

 

軟鍵盤可以自定義
您可以用自行設計的帶有特殊按鈕的軟鍵盤來替代系統提供的軟鍵盤。(如想瞭解使用指南,請讀「自定義鍵盤」。)

 

軟鍵盤可以加入自定義的外接輸入設備
您可以在軟件裡為外接鍵盤添加單獨的介面,用戶通過點擊這個介面可以針對個別軟件進行輸入。

 

自定義的文字視圖支持多種風格的文字,亦可提供高級編輯功能
您可以提供各種文字處理功能,亦可支持拼寫檢查和自動補完。