Linux開源手機系統MeeGo移動終端設備開發UI設計基礎教程

Linux開源手機系統MeeGo移動終端設備開發UI設計基礎教程

Linux開源手機系統MeeGo移動終端設備開發UI設計基礎教程

曾經爲你們介紹過《移動開發界面設計兩大關鍵要素》，其中界面設計以UI設計法則做爲咱們的核心信條，他驅使咱們的每個討論都以設計步驟爲基礎。MeeGo的界面能夠根據不一樣的屏幕大小、分辨率和比例來調整，同時還支持肖像和風景模式。使用這個教程能夠幫助你解決在設計和開發MeeGoOS應用程序上遇到的問題，他們的內容都是「活」的，所以在項目開發的同時他們的內容也會隨着增長和改變。

MeeGo開發

怎樣來用這些信息

目標

你可使用這些指南做爲設計MeeGo程序的嚮導，目前他們的內容主要涵蓋了交互和視覺設計的部分。視覺設計的指南從此還會有新的版本或手冊。

這不是真正的說明書

這些指南不是用來替代擁有詳細技術內容的說明書。相反，它是對MeeGoOS交互模式的一個大概描述。咱們指望真正的說明書不久能夠提供給你們下載，它將對每個開發工具作出詳細的描述，而且提出相關的建議。

一、MeeGo Basics

UI Model 總攬（概況）

MeeGo的UI設計總概

鎖屏（Lock Screen）

當用戶第一次喚醒移動設備的時候顯示

主頁（Home）

經過按鍵進入已經打開的應用程序。顯示收藏的應用程序，而且能夠進入開始鍵。

啓動欄（Launcher）

進入移動設備中任何可用的應用程序

手勢和觸摸操做的簡單介紹

手勢和觸摸操做介紹

鎖屏

當用戶按下電源按鍵把移動設備從閒置的狀態喚醒的時候，該設備的屏幕是鎖住的。

鎖屏

移動設備的屏幕上會顯示牆紙（用戶能夠本身更換），日期和時間，還有解鎖按鈕。用戶能夠經過拖拽屏幕上的解鎖按鈕到牆紙區域來解鎖屏幕。在屏幕鎖定的狀況下移動設備仍然能夠接收消息和通知，他們會以類似的形式疊放在一個通知欄裏。

啓動欄（Launcher）

開始欄是一個包含了顯示全部安裝在移動設備裏的應用程序的連接（圖標）的平面。在開始欄裏，用戶能夠瀏覽每一個應用程序，並且還能夠向在屏幕下方的快速啓動條裏添加最多4個應用程序的連接（圖標）。在編輯模式下，用戶還能夠改變這些應用程序的連接（圖標）的順序。

啓動欄

全部的應用程序會以4x4的網格形式顯示在啓動欄裏。在應用程序超過16個的狀況下，系統會自動在原頁面的右邊新建一個相同的頁面來放置多餘的連接（圖標）。用戶能夠經過把當前頁面託下屏幕來完成頁面之間的從轉換。每當用戶安裝了新的應用程序時，這個新的應用程序的連接（圖標）將會被放在最後面。

切換器（Switcher）

不少時候用戶會同時運行多個應用程序，例如在聽歌的時候寫短信等，這既是多任務處理。切換器是管理多任務處理的一塊區域。切換器的基本功能以下：

切換器

當用戶第一次啓動一個應用程序時，即開始了一個新的任務。在該應用程序裏此任務將會以當前內容的動態縮略圖形式顯示在切換器中。用戶能夠經過屏幕左上角的主頁按鈕（home）選擇進入切換器。

當第二個應用程序被打開時，這個新的任務就被加入到了切換器當中。在這種狀況下，MeeGo可讓用戶經過按主頁按鈕（home）的方式來進行應用程序之間的切換。用戶便可以從啓動欄中打開應用程序，也能夠從一個應用程序中打開另一個應用程序，例如從email裏打開地圖或圖片。

當用戶點擊啓動欄中以前已經被開啓的應用程序時，系統會顯示該應用程序，並不會從新啓動該應用程序。

程序的順序，瀏覽方式和不一樣模式之間的轉換

MeeGo中的任務會以它們被打開的前後順序從左到右顯示。每當新的任務被打開時，它就會把以前的任務的面板向左推移，而且在以前的任務右邊添加一個縮略圖。切換器的默認顯示方式是把焦點給到最近用過的任務上，其餘的任務一字向右排開排列。縮略圖按照任務被打開的時間長短來排列。

用戶便可以經過慢慢的拖拽縮略圖，也能夠經過從列表的一邊快速平移到另外一邊來瀏覽被開啓的任務。在快速切換的時候，用戶能夠經過輕點屏幕來使其停在被點擊的位置，可是該應用程序不會被打開。要打開該應用程序，用戶須要點擊相應的縮略圖。用戶能夠用多點觸控動做讓切換器進入總攬模式。使用兩個手指同時向內滑動的手勢可讓縮略圖進入網格顯示的界面。該網格最高能夠達到3x3的模式，在達到這個最高規格以後，切換器就會開始建立新的頁面來顯示以前頁面未顯示的縮略圖。

核心交互動做（CoreInteractions）

UI的反饋（UI Feedback）

直接反饋是指當用戶使用觸摸UI的時候，用戶接收到的該操做的信息反饋。只要有操做，就會獲得反饋。間接反饋是指當用戶沒有使用移動設備時獲得的反饋，或接收到的反饋並非由正在使用的UI所引發的反饋。

直接反饋能夠是用戶操做後獲得的震動反饋，聲音反饋或視覺信息反饋。間接反饋則基本上爲消息或通知類型的反饋。此消息或通知能夠同時包括聲音和震動反饋，也能夠只是視覺信息反饋，或只包括視覺信息和聲音反饋。(但原則上講也能夠只是視覺信息和震動反饋)

通常狀況下，當一個移動設備的屏幕被鎖定時，用戶一般都不是在使用該設備。而你若是要把用戶的注意力從別的地方吸引到該設備上時，你可使用聲音和震動類型的反饋，而且再附加上一條視覺信息反饋。但有時候就算用戶在使用該設備時，他們的注意力也會在別的地方。好比說若是一個操做須要等待的時間很長，那麼用戶的注意力也許就會被轉移到別處，或者當用戶的注意力光集中在移動設備的某些硬件上時（例如鍵盤），那麼在屏幕上發生的事就會被漏掉。還有些時候，在用戶作完一個操做就須要立刻獲得反饋信息的時候（例如用戶在發Email時忘了輸入「接受者」的時候），只使用一個視覺信息反饋（例如一個消息框）就能夠了，由於此時用戶的注意力已經在這個設備上了。

在有些狀況下，你可使用聲音和震動反饋來強調視覺反饋。例如，有些確認消息可能會在顯示的同時還播放一個帶有疑問性質的聲音，從而來強調用戶須要特別注意此操做。然而，在使用聲音和震動的同時也須要多注意，由於太頻繁的話會讓用戶感受很討厭。你能夠只用聲音來提示用戶，或聲音加上視覺信息也是不錯的選擇，可是最好不要只使用聲音和震動。

當不肯定用戶的注意力在不在移動設備上的時候，你可使用震動反饋來提醒他們。例如，當打開一個網頁時用了很長的時間，就算這時候移動設備的屏幕並沒被鎖住，用戶的注意力極可能已經不在該設備上了，這時候你可使用一個短震動來提醒他們網頁已經加載完畢。

短震動能夠用來確認用戶完成的動做，這時候視覺消息反饋也許就會顯得太多餘了。例如，給移動設備充電，鏈接電源線時（或由於插了一個不符合規則的電源線從而致使移動設備並無開始充電時）。在這些狀況下，震動反饋就顯得很適用了，由於用戶手裏正在拿着他們的移動設備。

另外要注意的是，不論是基於聲音反饋形式的警告響聲，仍是基於視覺信息反饋的一條消息，都要看用戶當時在用哪一種情景模式。例如，在用戶正在通話時，該移動設備的鈴聲也許會有所改變。（有時候會只發出嗶嗶的聲音，有時候會是震動）

文本輸入Text Input

MeeGo即支持普通的物理鍵盤，也支持虛擬鍵盤。

當用戶須要輸入文本的時候，虛擬鍵盤會自動被激活。瀏覽器的標籤欄和狀態欄同時也會消失，從而給用戶提供出更大的顯示空間。MeeGo的虛擬鍵盤還包括肖像和風景兩種模式，當用戶旋轉移動設備的方向，即從豎立狀態轉移爲水平狀態時（或執行相反的動做時），屏幕的總體內容也會很流暢的進行相應的轉換。

文本輸入

用戶便可以經過輕敲文本輸入域的外邊，又能夠經過把虛擬鍵盤拖拽到屏幕下方的方式來關閉虛擬鍵盤。須要注意的是，在以拖拽的方式關閉了虛擬鍵盤後，用戶並不能夠再將其從下方拖拽出來。要想從新開啓虛擬鍵盤，用戶能夠經過再次點擊文本輸入域來將其激活。

文本輸入2

只要物理鍵盤被激活，虛擬鍵盤就會自動關閉。

刪除文字

每按下退格鍵（backspace）一次，能夠向回刪除一個字。長按能夠連續向回刪除多個字。

語言

輸入語言的選擇是自動的，MeeGo會根據用戶在第一次開機設置其移動設備時的設置來選擇相應的輸入語言。用戶能夠在「設置」裏改變當前設置。

確認

在大多狀況下，應用程序都會有一個「確認鍵」，例如在發信息或登陸網站時。另外還有些軟件會在用戶輸入文本時自動進行確認並執行相應的操做，例如在搜索時，MeeGo會在用戶輸入想要搜索的信息同時自動顯示出相應的搜索結果。

然而，MeeGo還有些其它類型的確認方式。在一個只有一條線的文本域下，輸入鍵（enter）會執行確認功能。（例如輸入網址或密碼時）

確認方式

固然你也能夠在該文本域的下方加一個確認按鈕，可是咱們只建議在須要快速輸入信息的時候使用，例如填表。

全屏模式

某些應用軟件只有在全屏模式下才能讓用戶感受到更爽。可是，不要忘了添加一個退出全屏的按鈕（適用的狀況下最好再加上導航顯示）。MeeGo的全屏模式有兩種：

兩種全屏模式

徹底全屏模式

全部的控件（標題欄，狀態欄，附加控制欄等）都不可見，輸出的顯示爲最大尺寸內容。用戶能夠經過觸摸屏幕的方式來顯示控件。徹底全屏模式很是適合於多媒體播放。

含有控件的全屏模式

由於有些運行MeeGo的移動設備也許會沒有相應的導航按鍵功能，因此提供一種固定的帶有退出功能的按鍵在進行全屏播放時是頗有必要的。在有些狀況下，用觸摸屏幕的方式顯示控件是不可能的，（例如一個含有交互內容的Flash播放器）在這種狀況下無論何時，用戶都須要這種按鍵來退出或關閉全屏播放。

在應用程序的內容中嵌入退出功能

應用程序的內容中嵌入退出功能

在少數的幾種特殊狀況下，好比說遊戲，須要讓用戶玩的儘量的盡興。因此最好在使遊戲全屏顯示的同時還有一個退出鍵來使用戶退出到另一個界面，從而顯示各項選擇按鍵。