MeeGo移動終端設備開發UI設計基礎教程
51CTO曾經為大家介紹過《移動開發界面設計兩大關鍵要素》，其中界面設計以UI設計法則作為我們的核心信條，他驅使我們的每一個討論都以設計步驟為基礎。MeeGo的界面可以根據不同的屏幕大小、分辨率和比例來調整，同時還支持肖像和風景模式。使用這個教程可以幫助你解決在設計和開發MeeGo應用程序上遇到的問題，他們的內容都是“活”的，因此在項目開發的同時他們的內容也會隨著增加和改變。
51CTO推薦專題：MeeGo：無所不在的移動操作系統
MeeGo開發
怎樣來用這些信息
目標
你可以使用這些指南作為設計MeeGo程序的向導，目前他們的內容主要涵蓋了交互和視覺設計的部分。視覺設計的指南今后還會有新的版本或手冊。
這不是真正的說明書
這些指南不是用來替代擁有詳細技術內容的說明書。相反，它是對MeeGo交互模式的一個大概描述。我們期望真正的說明書不久可以提供給大家下載，它將對每一個開發工具做出詳細的描述，并且提出相關的建議。
1、MeeGo Basics
UI Model 總攬（概況）
MeeGo的UI設計總概
鎖屏（Lock Screen）
當用戶***次喚醒移動設備的時候顯示
主頁（Home）
通過按鍵進入已經打開的應用程序。顯示收藏的應用程序，并且可以進入開始鍵。
啟動欄（Launcher）
進入移動設備中任何可用的應用程序
手勢和觸摸操作的簡單介紹
手勢和觸摸操作介紹
鎖屏
當用戶按下電源按鍵把移動設備從閑置的狀態喚醒的時候，該設備的屏幕是鎖住的。
鎖屏
移動設備的屏幕上會顯示墻紙（用戶可以自己更換），日期和時間，還有解鎖按鈕。用戶可以通過拖拽屏幕上的解鎖按鈕到墻紙區域來解鎖屏幕。在屏幕鎖定的情況下移動設備仍然可以接收消息和通知，他們會以相似的形式疊放在一個通知欄里。
啟動欄（Launcher）
開始欄是一個包含了顯示所有安裝在移動設備里的應用程序的鏈接（圖標）的平面。在開始欄里，用戶可以瀏覽每個應用程序，而且還可以向在屏幕下方的快速啟動條里添加最多4個應用程序的鏈接（圖標）。在編輯模式下，用戶還可以改變這些應用程序的鏈接（圖標）的順序。
啟動欄
所有的應用程序會以4x4的網格形式顯示在啟動欄里。在應用程序超過16個的情況下，系統會自動在原頁面的右邊新建一個相同的頁面來放置多余的鏈接（圖標）。用戶可以通過把當前頁面托下屏幕來完成頁面之間的從轉換。每當用戶安裝了新的應用程序時，這個新的應用程序的鏈接（圖標）將會被放在***面。
切換器（Switcher）
很多時候用戶會同時運行多個應用程序，例如在聽歌的時候寫短信等，這既是多任務處理。切換器是管理多任務處理的一塊區域。切換器的基本功能如下：
切換器
當用戶***次啟動一個應用程序時，即開始了一個新的任務。在該應用程序里此任務將會以當前內容的動態縮略圖形式顯示在切換器中。用戶可以通過屏幕左上角的主頁按鈕（home）選擇進入切換器。
當第二個應用程序被打開時，這個新的任務就被加入到了切換器當中。在這種情況下，MeeGo可以讓用戶通過按主頁按鈕（home）的方式來進行應用程序之間的切換。用戶即可以從啟動欄中打開應用程序，也可以從一個應用程序中打開另外一個應用程序，例如從email里打開地圖或圖片。
當用戶點擊啟動欄中之前已經被開啟的應用程序時，系統會顯示該應用程序，并不會重新啟動該應用程序。
程序的順序，瀏覽方式和不同模式之間的轉換
MeeGo中的任務會以它們被打開的先后順序從左到右顯示。每當新的任務被打開時，它就會把之前的任務的面板向左推移，并且在之前的任務右邊添加一個縮略圖。切換器的默認顯示方式是把焦點給到最近用過的任務上，其他的任務一字向右排開排列。縮略圖按照任務被打開的時間長短來排列。
用戶即可以通過慢慢的拖拽縮略圖，也可以通過從列表的一邊快速平移到另一邊來瀏覽被開啟的任務。在快速切換的時候，用戶可以通過輕點屏幕來使其停在被點擊的位置，但是該應用程序不會被打開。要打開該應用程序，用戶需要點擊相應的縮略圖。用戶可以用多點觸控動作讓切換器進入總攬模式。使用兩個手指同時向內滑動的手勢可以讓縮略圖進入網格顯示的界面。該網格***可以達到3x3的模式，在達到這個***規格之后，切換器就會開始創建新的頁面來顯示之前頁面未顯示的縮略圖。
#p#
核心交互動作（CoreInteractions）
UI的反饋（UI Feedback）
直接反饋是指當用戶使用觸摸UI的時候，用戶接收到的該操作的信息反饋。只要有操作，就會得到反饋。間接反饋是指當用戶沒有使用移動設備時得到的反饋，或接收到的反饋并不是由正在使用的UI所引起的反饋。
直接反饋可以是用戶操作后得到的震動反饋，聲音反饋或視覺信息反饋。間接反饋則基本上為消息或通知類型的反饋。此消息或通知可以同時包括聲音和震動反饋，也可以只是視覺信息反饋，或只包括視覺信息和聲音反饋。(但原則上講也可以只是視覺信息和震動反饋)
一般情況下，當一個移動設備的屏幕被鎖定時，用戶通常都不是在使用該設備。而你如果要把用戶的注意力從別的地方吸引到該設備上時，你可以使用聲音和震動類型的反饋，并且再附加上一條視覺信息反饋。但有時候就算用戶在使用該設備時，他們的注意力也會在別的地方。比如說如果一個操作需要等待的時間很長，那么用戶的注意力也許就會被轉移到別處，或者當用戶的注意力光集中在移動設備的某些硬件上時（例如鍵盤），那么在屏幕上發生的事就會被漏掉。還有些時候，在用戶做完一個操作就需要馬上得到反饋信息的時候（例如用戶在發Email時忘了輸入“接受者”的時候），只使用一個視覺信息反饋（例如一個消息框）就可以了，因為此時用戶的注意力已經在這個設備上了。
在有些情況下，你可以使用聲音和震動反饋來強調視覺反饋。例如，有些確認消息可能會在顯示的同時還播放一個帶有疑問性質的聲音，從而來強調用戶需要特別注意此操作。然而，在使用聲音和震動的同時也需要多注意，因為太頻繁的話會讓用戶感覺很討厭。你可以只用聲音來提示用戶，或聲音加上視覺信息也是不錯的選擇，但是***不要只使用聲音和震動。
當不確定用戶的注意力在不在移動設備上的時候，你可以使用震動反饋來提醒他們。例如，當打開一個網頁時用了很長的時間，就算這時候移動設備的屏幕并沒被鎖住，用戶的注意力很可能已經不在該設備上了，這時候你可以使用一個短震動來提醒他們網頁已經加載完畢。
短震動可以用來確認用戶完成的動作，這時候視覺消息反饋也許就會顯得太多余了。例如，給移動設備充電，連接電源線時（或因為插了一個不符合規則的電源線從而導致移動設備并沒有開始充電時）。在這些情況下，震動反饋就顯得很適用了，因為用戶手里正在拿著他們的移動設備。
另外要注意的是，不管是基于聲音反饋形式的警告響聲，還是基于視覺信息反饋的一條消息，都要看用戶當時在用哪種情景模式。例如，在用戶正在通話時，該移動設備的鈴聲也許會有所改變。（有時候會只發出嗶嗶的聲音，有時候會是震動）
文本輸入Text Input
MeeGo即支持普通的物理鍵盤，也支持虛擬鍵盤。
當用戶需要輸入文本的時候，虛擬鍵盤會自動被激活。瀏覽器的標簽欄和狀態欄同時也會消失，從而給用戶提供出更大的顯示空間。MeeGo的虛擬鍵盤還包括肖像和風景兩種模式，當用戶旋轉移動設備的方向，即從豎立狀態轉移為水平狀態時（或執行相反的動作時），屏幕的整體內容也會很流暢的進行相應的轉換。
文本輸入
用戶即可以通過輕敲文本輸入域的外邊，又可以通過把虛擬鍵盤拖拽到屏幕下方的方式來關閉虛擬鍵盤。需要注意的是，在以拖拽的方式關閉了虛擬鍵盤后，用戶并不可以再將其從下方拖拽出來。要想重新開啟虛擬鍵盤，用戶可以通過再次點擊文本輸入域來將其激活。
文本輸入2
只要物理鍵盤被激活，虛擬鍵盤就會自動關閉。
刪除文字
每按下退格鍵（backspace）一次，可以向回刪除一個字。長按可以連續向回刪除多個字。
語言
輸入語言的選擇是自動的，MeeGo會根據用戶在***次開機設置其移動設備時的設置來選擇相應的輸入語言。用戶可以在“設置”里改變當前設置。
確認
在大多情況下，應用程序都會有一個“確認鍵”，例如在發信息或登錄網站時。另外還有些軟件會在用戶輸入文本時自動進行確認并執行相應的操作，例如在搜索時，MeeGo會在用戶輸入想要搜索的信息同時自動顯示出相應的搜索結果。
然而，MeeGo還有些其它類型的確認方式。在一個只有一條線的文本域下，輸入鍵（enter）會執行確認功能。（例如輸入網址或密碼時）
確認方式
當然你也可以在該文本域的下方加一個確認按鈕，但是我們只建議在需要快速輸入信息的時候使用，例如填表。
全屏模式
某些應用軟件只有在全屏模式下才能讓用戶感覺到更爽。但是，不要忘了添加一個退出全屏的按鈕（適用的情況下***再加上導航顯示）。MeeGo的全屏模式有兩種：
兩種全屏模式
完全全屏模式
所有的控件（標題欄，狀態欄，附加控制欄等）都不可見，輸出的顯示為***尺寸內容。用戶可以通過觸摸屏幕的方式來顯示控件。完全全屏模式非常適合于多媒體播放。
含有控件的全屏模式
因為有些運行MeeGo的移動設備也許會沒有相應的導航按鍵功能，所以提供一種固定的帶有退出功能的按鍵在進行全屏播放時是很有必要的。在有些情況下，用觸摸屏幕的方式顯示控件是不可能的，（例如一個含有交互內容的Flash播放器）在這種情況下不管什么時候，用戶都需要這種按鍵來退出或關閉全屏播放。
在應用程序的內容中嵌入退出功能
應用程序的內容中嵌入退出功能
在少數的幾種特殊情況下，比如說游戲，需要讓用戶玩的盡可能的盡興。所以***在使游戲全屏顯示的同時還有一個退出鍵來使用戶退出到另外一個界面，從而顯示各項選擇按鍵。
英文原文：http://meego.com/developers/ui-d ... andset/meego-basics
轉載地址：http://www.meegoq.com/forum.php?mod=viewthread&tid=149&extra=page%3D1
【編輯推薦】
