移動互聯網設備的用戶界面樣式簡介
Intel的移動互聯網設備(Mobile Internet Device,MID)是一種新型的低功耗計算設備,它可以作為手持設備安裝到汽車等嵌入式環境中。本文檔是開發MID應用程序的UI指南。
MID應用程序架構以Hildon應用程序架構為基礎,並且秉承了Hildon中的一些用戶界面和風格特性。然而,MID的用戶界面、導航以及用戶體驗在許多方面都與Nokia N系列手持設備不同。
本指南旨在為開發人員提供建議,指導開發人員開發新的MID應用程序或者將現有應用程序移植到MID。它概括了MID用戶界面的一些主要特性,包括用戶交互、系統和應用程序的界面和外觀、控制鈕的常見位置以及導航。本指南的目的是為MID用戶提供一致、綜合的體驗。有關Hildon應用程序UI樣式的一般建議,請參閱Hildon UI Style Guide 2.
MID硬件規格及其制約因素
MID手持設備的體積比筆記本的體積小,具備基本的用戶輸入和系統導航,使用觸摸屏和有限的硬件按鈕及控制鈕。掌握這些基本情況對於應用程序的設計很重要。
硬件設備
各種設備之間的MID硬件特性差異較大,但是至少具備以下共同特征:
屏幕尺寸
最小: 對角線4.8英寸(最常見)
最大: 對角線7英寸
屏幕分辨率
大小:
水平像素:景觀模式下800或者1024
垂直像素:景觀模式下480或者600
應用程序不能只限定於固定的分辨率或者寬度/高度比例。比如,有些設備可能是800x480或者800x600。有的設備可能支持多種分辨率,比如800x480和1024x600。應用程序應該注冊通知,以了解屏幕分辨率或者屏幕方向何時發生變化。
顏色深度:最少16位(65536色)。默認:24位(16M 色)
DPI:225
輸入機制
觸摸屏:可通過人工觸摸進行系統操作
觸摸屏筆:有些設備會配備觸摸屏筆(可選),以便更准確地進行操作。
硬件控制:設備上的按鈕和控制鈕。
軟鍵盤:屏幕上會出現軟鍵盤,可通過手觸摸或者用觸摸屏筆輸入文本/數字。用戶可以設置編輯區聚焦時自動啟動軟鍵盤。
鍵盤(可選):設備可以配備鍵盤。
內存
因設備而定,最小256 MB。
存儲器
因設備而定,最小:1GB SSD。最大:硬盤容量(如果存在的話)
硬件控制
除了電源開關,沒有什麼硬件是MID必需配備的,包括鍵盤。通過屏幕上的控制條,用戶界面可實現完全面導航,並且可以完全通過觸摸來實現輸入。下一節介紹的硬件控制可以幫助簡化並加速常見用戶任務。
建議(期望)
* 電源開關:長按為開機或者關機;短按為喚醒或者待機
* 鎖定屏幕以免放在口袋時發現意外操作
* 全屏切換按鈕
* 跳轉到主屏幕按鈕
* 相機的快門按鈕在背面的鏡頭旁邊
* 上/下/左/右箭頭(在顯示器面板上)
其他特性
* 滾動控制(上/下/左/右以可覆蓋它)
* 亮度控制(設備可能具有環境亮度感應器)
* 音量控制
* 屏幕旋轉
* 用於顯示當前應用程序菜單的菜單鍵
設備示例照片
下圖是某MID的設計方案:
<!--[if !vml]--><!--[endif]-->
圖2-1:某MID的設計方案
MID UI目標
手持設備上的小屏幕UI
當屏幕為4.5英寸且用戶在眼睛距離屏幕12-18英寸遠的地方進行手動操作的時候,用戶界面必須是清晰而且完全可用的。應用設計時必須考慮:
* 屏幕分辨率必須是准確的800x480, 800x600, 和 1024x600。不可以是待定隨分辨率。
* 所有對話框都適適同一屏幕尺寸(對話框的相關信息詳下下文)
* 應用程序在全屏模式下運行良好,來回重復切換時屏幕都應清晰可見
* 盡量減少使用水平滾動條的需求
* 軟鍵盤激活之後,當前應用程序窗口的尺寸可能會縮小以容納軟鍵盤。這時必須確保編輯區域還處於聚焦狀態並且恢復尺寸之後依然可見。
可讀性和文本外觀
所設計的用戶界面必須在4.5英寸的小屏幕下運行良好。文本操作的選擇對於可讀性很重要。設計良好的應用程序會為大眾提供系統默認的字體選擇。這樣,用戶可以對字體大小和其他特性進行編輯。如果選擇提供習慣字體,那麼應高度關注字體大小、字形、行距和對比度。
手指觸摸第一,其次觸摸屏筆,最後鍵盤
MID UI必須通過手指觸摸屏操作就能實現完全導航。然而,MID UI的一個目標就是強調用手指觸摸進行最普通的操作而不是用觸摸屏筆完成。按照手指的一般特征,觸摸時控制區應該是1平方厘米或者更大(像素70x70,分辨率800x480)。觸摸區應該很容易就能找到而且其布局要根據手指操作的方便性來確定。
觸摸屏筆
在某些情況下,觸摸屏筆可能是必須的。非100%手指驅動的的應用程序與MID應該是可以兼容的。但是,使用觸摸屏筆要求用戶每次用完之後都要把筆放回原處。這會影響用戶的使用速度。設計用戶界面的時候應該考慮到這個問題。
文字輸入
應該盡量減少文字輸入的需要。如果有可能實現用手指觸摸點擊就能完成操作而不用輸入文字的話,應該加強調研。因為文字輸入是小型移動設備的克星。
右鍵單擊
右鍵單擊是通過長按觸摸屏實現的。這種方法笨拙、速度緩慢且效果不理想。如果有其他方法可以實現同樣的功能則應盡量避免使用右鍵單擊。
經過簡化的UI
系統的整體使用應該簡單。從Mobile Desktop UI開始,針對某些特定類型的體驗將產品設計成能夠快速操作一些關鍵的應用程序。該系統應該能夠支持軟件安裝且沒有數量限制。然而,其最終目的不是成為安裝了幾百個應用程序的標准桌面系統,而是提供一套核心的、集成性良好的應用程序來支持移動“on the go”任務,比如浏覽網頁、播放影音和通信(聊天/即時信息)。
產品設計應該考慮如何通過簡單的、手指導航的操作方式來實現最重要的特性。更高級的特性可以再進一步實現,但是典型的功能要迅速掌握。
小型窗口管理器
Matchbox Window Manager3或其同類的軟件包可以在全屏模式下提供簡單、基於堆棧的窗口管理器。應用程序窗口的上方會出現情景對話。但是,多個高級窗口不能同時並排顯示。新窗口會占滿整個屏幕,完全覆蓋當前的窗口。應用程序窗口的頂部或者兩側會有選項框或者任務導航板提供導航並顯示系統狀態。
菜單和工具欄
在實現最常用操作的前提下應該盡量減少菜單和工具欄的數量。有些地方可以采用子菜單、高級選項對話框的形式或者直接刪除不用。菜單是下拉列表(不是水平列表)。菜單不應只有一個選項(比如:文件->退出)。相反,應該將這一操作放在頂層。比較推薦的菜單組織形式如下所示。多級選項菜單備受推崇。
文件
編輯(剪切/復制/粘貼。選項:選項/首選項/設置)
--------
選項/首選項/設置
--------
關於
退出
對話框
所有對話框都必須適應800x480的分辨率。控制鈕應該足夠大且足夠清晰,能夠使用手指進行導航。對話框不要求能夠滾動,但是在必要時應該將高級特性添加到子對話框中。
有限資源
與標准的現代PC機相比,MID處理器的性能和資源非常有限。只要有可能,就應該盡量避免使用大量的內存,打開大量的文件或者處理大量進程。
節電
Intel的新一代移動處理器(代號為Menlow, Moorestown及其他)采用了低功耗設計,以顯著延長電池壽命。實現此特性的一個基本方法就是在設備待機時自動將CPU切換為低能耗狀態。這時必須確保機器待機不會引起CPU中斷。CPU可能在顯示0%利用率的同時接受應用程序的中斷命令。有關詳細信息,請參閱: http://www.lesswatts.org/projects/applications-power-management/
方向
MID的屏幕可以左旋90度。這種模式可以在UI上操作或者通過硬件控制。切換到肖像模式時(默認是景觀模式)也應正常運行。當系統切換到肖像模式時應該預先發出通知。
硬件交互
硬件交互因設備不同而有所差異。
UI交互
MID系統導航和用戶交互是通過手指(優先)、觸摸屏筆、軟鍵盤、硬盤(如果有)或者設備上的按鈕/控制鈕在用戶界面上進行操作實現的。
觸摸屏
* 單擊:點擊按鈕或者選中列表選項,是最常見的操作。
* 選中和激活:兩次觸摸,第一次是選中某一列表選項,第二次是選擇/下載/開始。這樣,在導航列表,比如從播放列表中挑選一首歌曲的時候,可以減少混亂。
* 手指向下按住:相當於右鍵單擊,顯示上下文菜單。
* 拖放:移動對象(或者重新排列列表選項)時,選中目標直接拖動到新的位置然後放開。
* 平移:觸摸屏幕並拖動手指可以移動當前查看的內容(相當於滾動)。平移的作用是,在浏覽頁面或者文檔編輯時,可以使用手指操作移動窗口中的內容。
* 手勢:用預定義手勢在屏幕上滑動手指作為某一操作啟動的快捷方式。滾動最為常用。
* 觸摸、移動:觸摸點擊菜單,菜單彈出之後把手指滑動到要選的選項,抬手再點擊選擇所選項。把手放到菜單區之外,選項操作動作會自動取消,也就不會有任何菜單選項被選中。
軟鍵盤
用戶界面會內置一個支持觸摸操作的軟鍵盤。用戶可對軟鍵盤做一些設置。軟鍵盤可通過手指或者觸摸屏筆進行操作。當軟鍵盤出現時,當前的應用程序會變得模糊或者會調整尺寸。
硬鍵盤
MID可能會配備硬鍵盤。而硬鍵盤也形式多樣,可能是滑蓋型、擴展型、可拆卸型或者凸出型。但是應用程序可能會無法檢測到硬件的存在。
MID用戶界面細節
MID Desktop UI
MID Desktop UI為應用程序提供了全圖形化的運行環境。它定義了各組件的總體布局,這與系統的導航和用戶的體驗密切相關。它包含以下主要部分:
* “主屏幕”:主屏幕將在系統啟動時顯示,之後可以在主屏幕啟動應用程序。
* 導航按鈕、工具欄或者控制鈕:這些特性允許用戶啟動應用程序和導航系統。
* 狀態欄:包含電池/電源狀態、網絡連接、音量和其他服務的狀態圖標的區域。
* 配置工具:應用程序需要配置系統設置的所有配置,包括網絡連接、電源和支持的用戶首選項。
以上羅列的MID Desktop UI組件的確切設計和布局根據運營系統供應商(OSV)而有所不同,甚至可能根據制造商隨帶的設備而有所差異。基於MID基准和用戶界面創建並根據建議設計的應用程序必須在任何一款MID Desktop UI上都運行自如。
眾所周知,當前的MID Desktop UI有兩套操作系統。一套是Red Flag(中科紅旗)開發的MIDINUX*。另一套是任何OSV都可能會用的Reference UI。Ubuntu正在為即將發布的Ubuntu-mobile版本定義自己的MID Desktop UI。
主屏幕示例
下圖展示了MID Desktop UI主屏幕的外觀設計。這並不是最終方案,但是關於簡化用戶體驗和手指觸摸導航方面的設計會參考較多。
<!--[if !vml]--><!--[endif]-->
圖6-1:Reference UI主屏幕
<!--[if !vml]--><!--[endif]-->
圖6-2:Red Flag主屏幕
應用程序啟動/激活
主屏幕是系統啟動之後出現的第一個畫面,並為用戶提供了用於啟動應用程序指示符(比如上圖演示的大圖標)。單擊應用程序圖標之後,程序將啟動並占滿選項框下面的區域。選項框的具體內容將在下一節中詳細介紹。
用戶可通過Task Switching(任務切換)控制鈕或者點擊專用硬件“Home Screen(主屏幕)”按鈕隨時切換到主屏幕。
應用程序UI布局
MID Desktop UI之間的差異形式多樣。然而,對於所有應用程序布局,如果基於Hildon應用程序框架,那麼都會與下圖相類似,頂部有一個面板(選項框)和應用程序區域。
<!--[if !vml]--><!--[endif]-->
圖 6-3:應用程序UI布局
選取框
Reference MID Desktop UI的選取框示例如下圖所示:
<!--[if !vml]--><!--[endif]-->圖6-4:Reference MID Desktop UI的選取框示例。
選取框可能包含多個組件,包括導航按鈕和系統狀態指示符。(Reference選取框組件的詳細介紹見附錄1)。切換到全屏模式時可隱藏選項框。
應用程序菜單
在選取框中可以看到一個應用程序菜單。應用程序菜單上有標簽顯示當前應用程序的名稱。Reference UI 和 Red Flag操作系統的選取框中的應用程序菜單示例如下:
<!--[if !vml]--><!--[endif]-->
圖6-5:Reference UI和Red Flag應用程序菜單示例
該菜單通常位於左上角,但是也可能在選取框的其他位置。該菜單的內容是在應用程序啟動時專門加載的。每次移植應用程序時,都應該確定哪些內容對於移動環境最為重要,以盡可能地減小菜單的大小。
用戶通過觸摸應用程序菜單中的標題來訪問菜單。用戶將從下拉菜單中選擇所需的菜單選項。
關閉/最小化按鈕
另一個常見但非必須的選取框組件是關閉和最小化按鈕。它們通常位於右上角,可用於關閉或隱藏當前應用程序。
應用程序區域
正常模式下,應用程序區域占滿選取框下方的區域。全屏模式下,選項框隱藏,應用程序窗口占滿全屏。
工具欄
應用程序區域內有應用程序工具欄。工具欄至少應該一些基本特性,使用戶能夠以最簡單的方式完成最常見的任務。工具欄應設計成觸摸式導航。采用Hildon框架時,工具欄位於屏幕底部。
滾動/平移
MID應用程序都應該使用平移來實現滾動(手指觸摸並拖動)。我們極不鼓勵使用標准窗口滾動條,而是使用"moko"滾動組件(適用於C和Python)來實現平移。
應用程序導航
應用程序導航是根據具體的應用程序而定的,在本指南中不具體討論。導航到其他應用程序的具體方式是由MID Desktop UI根據每個OSV量身設計的。在MID中,某些應用程序可能會自動啟動其他應用程序。比如,用戶點擊網頁上的在線電台鏈接時,媒體播放器會根據該統一資源定位符(Uniform Resource Locator, URL)自動啟動。如果用戶的聊天應用程序中有URL地址的鏈接,那麼用戶可以點擊鏈接並自動啟動浏覽器。
Hildon UI樣式推薦
Hildon User Interface Style Guide2 提供了基於Hildon的應用程序開發建議。8-14章包含許多適用於MID應用程序的概念,並且是推薦閱讀的。它們分別是:
第8章:如何構造菜單
第9章:上下文敏感菜單
第10章:如何使用工具欄
第11章:輸入法
第12章:拖放
第13章:對話框
第14章:通知
將應用程序移植到MID
將已有應用程序移植到MID共有兩個步驟。第一步是將應用程序加載到嵌入式MID軟件堆棧中並運行。完成此任務的具體操作介紹詳見Moblin.org網頁中的"SDK"部分。
第二個步驟是根據該MID UI樣式指南(詳見第3部分)調整用戶界面和交互。沒有第二個步驟,應用程序也能在MID上啟動和運行,但是不好看且不好用,不能滿足用戶的期望。
1 Nokia開發的Hildon應用程序框架。更多相關信息請參閱 www.maemo.org
2 Hildon UI樣式指南:www.maemo.org
3 Matchbox Window Manager詳見 http://matchbox-project.org/
4 MIDINUX是Red Flag專門為MID設計的Linux發行版