MeeGo手持移動設(shè)備的UI設(shè)計指導(dǎo)書_第1頁
MeeGo手持移動設(shè)備的UI設(shè)計指導(dǎo)書_第2頁
MeeGo手持移動設(shè)備的UI設(shè)計指導(dǎo)書_第3頁
MeeGo手持移動設(shè)備的UI設(shè)計指導(dǎo)書_第4頁
MeeGo手持移動設(shè)備的UI設(shè)計指導(dǎo)書_第5頁
已閱讀5頁,還剩11頁未讀, 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)

文檔簡介

1、 . . 16/16 HYPERLINK :/ HYPERLINK :/ 更多企業(yè)學(xué)院:中小企業(yè)管理全能版183套講座+89700份資料總經(jīng)理、高層管理49套講座+16388份資料中層管理學(xué)院46套講座+6020份資料國學(xué)智慧、易經(jīng)46套講座人力資源學(xué)院56套講座+27123份資料各階段員工培訓(xùn)學(xué)院77套講座+ 324份資料員工管理企業(yè)學(xué)院67套講座+ 8720份資料工廠生產(chǎn)管理學(xué)院52套講座+ 13920份資料財務(wù)管理學(xué)院53套講座+ 17945份資料銷售經(jīng)理學(xué)院56套講座+ 14350份資料銷售人員培訓(xùn)學(xué)院72套講座+ 4879份資料1.介紹在這個信息高度發(fā)達的新移動時代,人們希望他們的終

2、端設(shè)備能包含更多的應(yīng)用,圍繞這個對豐富手機應(yīng)用的追求,一個新的經(jīng)濟正在發(fā)展。以設(shè)計法則作為我們的核心信條,他驅(qū)使我們的每一個討論都以設(shè)計步驟為基礎(chǔ)。 MeeGo的界面可以根據(jù)不同的屏幕大小、分辨率和比例來調(diào)整,同時還支持肖像和風景模式。 使用這些指南可以幫助你解決在設(shè)計和開發(fā)MeeGo應(yīng)用程序上遇到的問題,他們的容都是“活”的,因此在項目開發(fā)的同時他們的容也會隨著增加和改變。 怎樣來用這些信息 目標你可以使用這些指南作為設(shè)計MeeGo程序的向?qū)?,目前他們的容主要涵蓋了交互和視覺設(shè)計的部分。視覺設(shè)計的指南今后還會有新的版本或手冊。這不是真正的說明書這些指南不是用來替代擁有詳細技術(shù)容的說明書。相反

3、,它是對MeeGo交互模式的一個大概描述。我們期望真正的說明書不久可以提供給大家下載,它將對每一個開發(fā)工具做出詳細的描述,并且提出相關(guān)的建議。2.UI Model 總攬(概況)鎖屏(Lock Screen)當用戶第一次喚醒移動設(shè)備的時候顯示主頁(Home)通過按鍵進入已經(jīng)打開的應(yīng)用程序。顯示收藏的應(yīng)用程序,并且可以進入開始鍵。啟動欄(Launcher)進入移動設(shè)備中任何可用的應(yīng)用程序手勢和觸摸操作的簡單介紹符號名字動作用途Tap(輕點)(快速按下并松開)打開物件,選擇按鈕,連接。插入光標(在文本區(qū)域)顯示隱藏的控件使?jié)L動的瀏覽器等操作停止。Longpress(長按)(按住按鍵)顯示目標菜單切換

4、到全鍵盤Drag(拖拽)(按住并拖拽到合適位置并松開)平移或滾動容。在文本區(qū)域選擇并改變文本的顏色(此動作需要一開始橫向選擇,否則將執(zhí)行平移動作)Flick(快速拖拽)(快速拖拽并松開)快速平移或滾動容(在某些情況下會顯示新的容,例如觀看圖片時,從一圖片換到另一)DoubleTap(雙擊)(在一定時間輕點兩次)縮放(觸摸屏)靜音警告(加速器)捏(多點觸控的手勢)(按下按鍵,松開)縮放(隨著手指在屏幕的相應(yīng)位置觸摸)Two-fingerlong Press(兩個手指長按)(按住按鍵,松開)選擇文本(在不可編輯的文本域)鎖屏當用戶按下電源按鍵把移動設(shè)備從閑置的狀態(tài)喚醒的時候,該設(shè)備的屏幕是鎖住的。

5、移動設(shè)備的屏幕上會顯示墻紙(用戶可以自己更換),日期和時間,還有解鎖按鈕。用戶可以通過拖拽屏幕上的解鎖按鈕到墻紙區(qū)域來解鎖屏幕。在屏幕鎖定的情況下移動設(shè)備仍然可以接收消息和通知,他們會以相似的形式疊放在一個通知欄里。啟動欄(Launcher)開始欄是一個包含了顯示所有安裝在移動設(shè)備里的應(yīng)用程序的(圖標)的平面。在開始欄里,用戶可以瀏覽每個應(yīng)用程序,而且還可以向在屏幕下方的快速啟動條里添加最多4個應(yīng)用程序的(圖標)。在編輯模式下,用戶還可以改變這些應(yīng)用程序的(圖標)的順序。 所有的應(yīng)用程序會以4x4的網(wǎng)格形式顯示在啟動欄里。在應(yīng)用程序超過16個的情況下,系統(tǒng)會自動在原頁面的右邊新建一個一樣的頁面

6、來放置多余的(圖標)。用戶可以通過把當前頁面托下屏幕來完成頁面之間的從轉(zhuǎn)換。每當用戶安裝了新的應(yīng)用程序時,這個新的應(yīng)用程序的(圖標)將會被放在最后面。切換器(Switcher)很多時候用戶會同時運行多個應(yīng)用程序,例如在聽歌的時候?qū)懚绦诺龋@既是多任務(wù)處理。切換器是管理多任務(wù)處理的一塊區(qū)域。切換器的基本功能如下:當用戶第一次啟動一個應(yīng)用程序時,即開始了一個新的任務(wù)。在該應(yīng)用程序里此任務(wù)將會以當前容的動態(tài)縮略圖形式顯示在切換器中。用戶可以通過屏幕左上角的主頁按鈕(home)選擇進入切換器。當?shù)诙€應(yīng)用程序被打開時,這個新的任務(wù)就被加入到了切換器當中。在這種情況下,MeeGo可以讓用戶通過按主頁按鈕

7、(home)的方式來進行應(yīng)用程序之間的切換。用戶即可以從啟動欄中打開應(yīng)用程序,也可以從一個應(yīng)用程序中打開另外一個應(yīng)用程序,例如從email里打開地圖或圖片。當用戶點擊啟動欄中之前已經(jīng)被開啟的應(yīng)用程序時,系統(tǒng)會顯示該應(yīng)用程序,并不會重新啟動該應(yīng)用程序。程序的順序,瀏覽方式和不同模式之間的轉(zhuǎn)換MeeGo中的任務(wù)會以它們被打開的先后順序從左到右顯示。每當新的任務(wù)被打開時,它就會把之前的任務(wù)的面板向左推移,并且在之前的任務(wù)右邊添加一個縮略圖。切換器的默認顯示方式是把焦點給到最近用過的任務(wù)上,其他的任務(wù)一字向右排開排列??s略圖按照任務(wù)被打開的時間長短來排列。 用戶即可以通過慢慢的拖拽縮略圖,也可以通過從

8、列表的一邊快速平移到另一邊來瀏覽被開啟的任務(wù)。在快速切換的時候,用戶可以通過輕點屏幕來使其停在被點擊的位置,但是該應(yīng)用程序不會被打開。要打開該應(yīng)用程序,用戶需要點擊相應(yīng)的縮略圖。用戶可以用多點觸控動作讓切換器進入總攬模式。使用兩個手指同時向滑動的手勢可以讓縮略圖進入網(wǎng)格顯示的界面。該網(wǎng)格最高可以達到3x3的模式,在達到這個最高規(guī)格之后,切換器就會開始創(chuàng)建新的頁面來顯示之前頁面未顯示的縮略圖。核心交互動作(CoreInteractions)UI的反饋(UI Feedback)直接反饋是指當用戶使用觸摸UI的時候,用戶接收到的該操作的信息反饋。只要有操作,就會得到反饋。間接反饋是指當用戶沒有使用移

9、動設(shè)備時得到的反饋,或接收到的反饋并不是由正在使用的UI所引起的反饋。直接反饋可以是用戶操作后得到的震動反饋,聲音反饋或視覺信息反饋。間接反饋則基本上為消息或通知類型的反饋。此消息或通知可以同時包括聲音和震動反饋,也可以只是視覺信息反饋,或只包括視覺信息和聲音反饋。(但原則上講也可以只是視覺信息和震動反饋) 一般情況下,當一個移動設(shè)備的屏幕被鎖定時,用戶通常都不是在使用該設(shè)備。而你如果要把用戶的注意力從別的地方吸引到該設(shè)備上時,你可以使用聲音和震動類型的反饋,并且再附加上一條視覺信息反饋。但有時候就算用戶在使用該設(shè)備時,他們的注意力也會在別的地方。比如說如果一個操作需要等待的時間很長,那么用戶

10、的注意力也許就會被轉(zhuǎn)移到別處,或者當用戶的注意力光集中在移動設(shè)備的某些硬件上時(例如鍵盤),那么在屏幕上發(fā)生的事就會被漏掉。還有些時候,在用戶做完一個操作就需要馬上得到反饋信息的時候(例如用戶在發(fā)Email時忘了輸入“接受者”的時候),只使用一個視覺信息反饋(例如一個消息框)就可以了,因為此時用戶的注意力已經(jīng)在這個設(shè)備上了。 在有些情況下,你可以使用聲音和震動反饋來強調(diào)視覺反饋。例如,有些確認消息可能會在顯示的同時還播放一個帶有疑問性質(zhì)的聲音,從而來強調(diào)用戶需要特別注意此操作。然而,在使用聲音和震動的同時也需要多注意,因為太頻繁的話會讓用戶感覺很討厭。你可以只用聲音來提示用戶,或聲音加上視覺信

11、息也是不錯的選擇,但是最好不要只使用聲音和震動。當不確定用戶的注意力在不在移動設(shè)備上的時候,你可以使用震動反饋來提醒他們。例如,當打開一個網(wǎng)頁時用了很長的時間,就算這時候移動設(shè)備的屏幕并沒被鎖住,用戶的注意力很可能已經(jīng)不在該設(shè)備上了,這時候你可以使用一個短震動來提醒他們網(wǎng)頁已經(jīng)加載完畢。 短震動可以用來確認用戶完成的動作,這時候視覺消息反饋也許就會顯得太多余了。例如,給移動設(shè)備充電,連接電源線時(或因為插了一個不符合規(guī)則的電源線從而導(dǎo)致移動設(shè)備并沒有開始充電時)。在這些情況下,震動反饋就顯得很適用了,因為用戶手里正在拿著他們的移動設(shè)備。 另外要注意的是,不管是基于聲音反饋形式的警告響聲,還是基

12、于視覺信息反饋的一條消息,都要看用戶當時在用哪種情景模式。例如,在用戶正在通話時,該移動設(shè)備的鈴聲也許會有所改變。(有時候會只發(fā)出嗶嗶的聲音,有時候會是震動)文本輸入Text InputMeeGo即支持普通的物理鍵盤,也支持虛擬鍵盤。當用戶需要輸入文本的時候,虛擬鍵盤會自動被激活。瀏覽器的標簽欄和狀態(tài)欄同時也會消失,從而給用戶提供出更大的顯示空間。MeeGo的虛擬鍵盤還包括肖像和風景兩種模式,當用戶旋轉(zhuǎn)移動設(shè)備的方向,即從豎立狀態(tài)轉(zhuǎn)移為水平狀態(tài)時(或執(zhí)行相反的動作時),屏幕的整體容也會很流暢的進行相應(yīng)的轉(zhuǎn)換。 用戶即可以通過輕敲文本輸入域的外邊,又可以通過把虛擬鍵盤拖拽到屏幕下方的方式來關(guān)閉虛

13、擬鍵盤。需要注意的是,在以拖拽的方式關(guān)閉了虛擬鍵盤后,用戶并不可以再將其從下方拖拽出來。要想重新開啟虛擬鍵盤,用戶可以通過再次點擊文本輸入域來將其激活。只要物理鍵盤被激活,虛擬鍵盤就會自動關(guān)閉。刪除文字每按下退格鍵(backspace)一次,可以向回刪除一個字。長按可以連續(xù)向回刪除多個字。語言輸入語言的選擇是自動的,MeeGo會根據(jù)用戶在第一次開機設(shè)置其移動設(shè)備時的設(shè)置來選擇相應(yīng)的輸入語言。用戶可以在“設(shè)置”里改變當前設(shè)置。確認在大多情況下,應(yīng)用程序都會有一個“確認鍵”,例如在發(fā)信息或登錄時。另外還有些軟件會在用戶輸入文本時自動進行確認并執(zhí)行相應(yīng)的操作,例如在搜索時,MeeGo會在用戶輸入想要

14、搜索的信息同時自動顯示出相應(yīng)的搜索結(jié)果。然而,MeeGo還有些其它類型的確認方式。在一個只有一條線的文本域下,輸入鍵(enter)會執(zhí)行確認功能。(例如輸入網(wǎng)址或密碼時)當然你也可以在該文本域的下方加一個確認按鈕,但是我們只建議在需要快速輸入信息的時候使用,例如填表。全屏模式某些應(yīng)用軟件只有在全屏模式下才能讓用戶感覺到更爽。但是,不要忘了添加一個退出全屏的按鈕(適用的情況下最好再加上導(dǎo)航顯示)。MeeGo的全屏模式有兩種:完全全屏模式:所有的控件(標題欄,狀態(tài)欄,附加控制欄等)都不可見,輸出的顯示為最大尺寸容。用戶可以通過觸摸屏幕的方式來顯示控件。完全全屏模式非常適合于多媒體播放。含有控件的全

15、屏模式:因為有些運行MeeGo的移動設(shè)備也許會沒有相應(yīng)的導(dǎo)航按鍵功能,所以提供一種固定的帶有退出功能的按鍵在進行全屏播放時是很有必要的。在有些情況下,用觸摸屏幕的方式顯示控件是不可能的,(例如一個含有交互容的Flash播放器)在這種情況下不管什么時候,用戶都需要這種按鍵來退出或關(guān)閉全屏播放。在應(yīng)用程序的容中嵌入退出功能在少數(shù)的幾種特殊情況下,比如說游戲,需要讓用戶玩的盡可能的盡興。所以最好在使游戲全屏顯示的同時還有一個退出鍵來使用戶退出到另外一個界面,從而顯示各項選擇按鍵。3.設(shè)計你的應(yīng)用程序設(shè)計技巧:保持簡單易用有問題要一個一個的解決,并且一定要解決徹底 要盡量使應(yīng)用程序簡單易用 要盡量使應(yīng)

16、用程序短小精干,最好做到一鍵多用,減少不必要的功能 設(shè)計程序時最好要遵循從上到下的原則,把重要的容放在上面 從人體工程學(xué)的方面考慮,在設(shè)計程序時一定要注意人的手指對操作的影響等關(guān)鍵性問題要注意滾動條的使用一個好的滾動條可以幫助用戶理解應(yīng)用程序的一部分容,并會讓用戶在還沒使用滾動條的時候就知道容里大概包含了什么。盡量只使用滾動條在重復(fù)的容或列表上,不要把重要的容放在滾動條里默認可見區(qū)域的下方,要讓用戶在不使用滾動條的情況下就看見他們,因為人們有時也許不知道他們需要使用滾動條才能找到他們需要的容。要保持應(yīng)用程序和核心容相一致如果允許,盡量在你的應(yīng)用程序中使用MeeGo中的常用組件。這會讓用戶很快的

17、上手并熟練的使用你的程序。除了在全屏播放下(如視頻播放器),每個應(yīng)用程序的每個界面都需要有“Home”和“Back”按鍵。要站在用戶的角度考慮當設(shè)計程序的時候,要考慮什么因素會是用戶放棄使用你的應(yīng)用程序而去使用其他的應(yīng)用程序。要為多線程任務(wù)處理優(yōu)化你的程序。要有標志性的特征盡量讓你的應(yīng)用程序的每個界面即都有特點又意圖明確,就算是在切換器(Switcher)里被縮小的圖標也是這樣。一個應(yīng)用程序應(yīng)該有其獨特的容和功能,并在不損失用戶使用體驗、感覺的情況下盡量提高程序的標志性,即要讓用戶感覺你的程序耳目一新。要明確你程序的用途在你開始設(shè)計應(yīng)用程序之前,明確你將要設(shè)計的程序的用途是非常重要的。這一點應(yīng)

18、該是驅(qū)使你設(shè)計程序的主要目的。同時還要考慮應(yīng)用程序的重點和用戶使用此程序的動機。明確程序的用途還會幫助你完善程序界面和交互的設(shè)計?!靶省背绦?如果一個應(yīng)用程序需要頻繁的實際操作,例如發(fā)短信,那么我們可以歸納這種類型的程序為“效率”程序。這種類型的程序一般都是要求效率第一,不光是程序的任務(wù)執(zhí)行的要好,而且還要快。此類程序要求用戶可以在使用該程序時得到快速響應(yīng),并且程序要簡單易用。此類程序最好使用簡單的“向下排列模式”界面,并帶有一個簡單的工具條。因此,這類程序的UI大多是由常用組件來組成的,越簡單越好。簡單的界面并不意味著用戶不能達到其使用初衷。程序的使用投入感還有些應(yīng)用程序比較偏向于娛樂或需

19、要豐富的視覺效果體驗,例如播放視頻或玩游戲等,在這些情況下經(jīng)常會用到全屏功能。在用戶切換到新的視覺環(huán)境下,控制MeeGo行為的核心UI可以讓用戶得心應(yīng)手的使用該程序,但有時候自定義布局或組件卻會給用戶提供更好的使用體驗。游戲是這種類型程序的典型代表。當用戶啟動一個游戲的時候他們也期待將會進入一個“新的世界”。不管這個游戲有著簡單還是復(fù)雜的結(jié)構(gòu),其容,控制和交互都是由設(shè)計者來設(shè)計完成的。有些時候,這并不能讓用戶使用的得心應(yīng)手。因此,如果提供一些簡單的可以讓用戶自定義的功能則會大大提高用戶的使用體驗。程序的基本界面 應(yīng)用程序有時會有多種顯示方式(例如全屏顯示,表格顯示等),但是大多數(shù)的顯示方式都遵

20、循著一個基本結(jié)構(gòu)。狀態(tài)欄 狀態(tài)欄的主要用途有顯示手機、網(wǎng)絡(luò)等的信號強弱,電池電量以與消息信息等。在某些情況下,應(yīng)用程序可以不含有狀態(tài)欄。標題欄 標題欄包含了主屏按鈕,標題,視圖菜單以與關(guān)閉和還原按鈕。每個界面的標題欄都有其相對應(yīng)的標題。換句話說,在多數(shù)情況下標題欄是根據(jù)用戶進入到不同界面時隨時更新的。此外,在某些情況下,應(yīng)用程序可以不含有標題欄。容區(qū)域容區(qū)域是程序執(zhí)行大多數(shù)動作時以與程序結(jié)構(gòu)發(fā)生變化的顯示區(qū)域。容區(qū)域可以包含方向選擇,文本和多媒體等容。程序的這些動作不僅局限于使用視圖菜單和工具欄,他們有時會和程序容一起顯示。其他類型的動作,例如多媒體控制按鈕,則總是和程序的容在一起顯示。具體請

21、參考“常見組件”的容。工具欄 工具欄是在用戶需要使用應(yīng)用程序時,可以控制該程序核心命令的一個可選的固定工具條。工具欄同樣也可用于方向控制,但最多只限于4個動作。在風景模式下(即把設(shè)備水平放置),工具欄在屏幕上方顯示,和標題欄一起。雖然即可以在工具欄中使用圖標,也可以使用文字(但兩者不可同時使用),但趨于移動設(shè)備屏幕的局限性,一般使用圖標的效果比文字要好。布局的建議 就像在本篇前面提到的“要明確你程序的用途”中說的一樣,在設(shè)計應(yīng)用程序的時候不僅要考慮到怎么去設(shè)計,還要注重程序的布局,因為布局會極大程度的影響用戶使用應(yīng)用程序的操作感。例如列表方式的布局非常適合于需要顯示目錄類(多個文件或多項任務(wù))

22、的程序。 雖然導(dǎo)航方式可以幫助組織應(yīng)用程序的結(jié)構(gòu)布局,但是他們卻不管應(yīng)用程序怎么顯示這個布局。“向下排列模式”就是個很好的例子。這種模式可以應(yīng)用于很多應(yīng)用程序中,例如本和圖片瀏覽器等。他可以顯示不同類型的容,因此很常用。 在這里我們給出大家兩種顯示圖片的選擇(見下圖),他們都采用“向下排列模式”作為他們的導(dǎo)航方式。應(yīng)用程序不顯示長列表,只用縮略圖作為提供主要信息的手段。這種向下排列的方式和在程序首頁提供通向最新添加或最近訪問的文件的快速通道,有助于用戶更加方便的使用該應(yīng)用程序,從而提高使用效果。 設(shè)計的時候要考慮到程序容的不同種類以與其結(jié)構(gòu)的復(fù)雜性,還有移動設(shè)備屏幕的實際尺寸。肖像模式(垂直狀

23、態(tài)) VS. 風景模式(水平狀態(tài))應(yīng)用程序的視圖界面要適應(yīng)移動設(shè)備不同的方位狀態(tài)(垂直或水平)。風景模式(即把設(shè)備水平放置)比較適合于觀看視頻播放,而肖像模式(即把設(shè)備垂直放置)則比較適用于如本之類需要往下滾動顯示多條信息的程序。 MeeGo對以上兩種模式均提供相應(yīng)的常用組件。換言之,使用這些常用組件可以減少程序設(shè)計者在界面設(shè)計上的很多工作。不管怎樣,我們建議程序員在設(shè)計程序時對組件的任何修改都要注釋出來,因為有些修改會影響程序的使用效果。 MeeGo中默認的組件是可以被修改過后的組件所覆蓋的。我們建議所有的應(yīng)用程序最好都要有肖像和風景兩種模式。這主要是因為使用MeeGo的移動設(shè)備有著不同的硬

24、件類型。例如在有側(cè)滑鍵盤的移動設(shè)備中,風景模式是至關(guān)重要的,其他硬件類型的設(shè)備以此類推。因此用戶不應(yīng)該因為要使用某種程序而強制把移動設(shè)備垂直放置或平放。但玩游戲是少數(shù)例外中的一個,因為大多情況下玩游戲是要根據(jù)不同類型的游戲來選擇設(shè)備的方位狀態(tài)的。 程序的視圖界面應(yīng)根據(jù)移動設(shè)備的方位狀態(tài)來進行縮放或重新布局,從而來適應(yīng)當前屏幕。1欄VS2欄列表可能是最常用的UI布局了。列表根據(jù)移動設(shè)備不同的方位狀態(tài)也有著不同的動作。 肖像模式可以顯示更多的列表信息,風景模式可以顯示一條信息中更多容。所以對于文本顯示來說,風景模式更為有用。 在使用風景模式時,有些應(yīng)用程序會把屏幕一分為二,使視圖界面形成兩列,這樣

25、做可以非常合理的使用移動設(shè)備中有限的顯示空間。分屏一般都是當顯示的容沒有按一定的排列順序排列時才被使用,一般都是在第一級的向下排列模式的頁面。但是,當顯示的容按照一定規(guī)則排列的時候最好不要用分屏。(例如按日期排列或A-Z排列等) 按鈕應(yīng)該被集中在一起(在分屏時尤為重要),并且寬度在兩種方位模式下都要一樣于屏幕寬度。設(shè)置應(yīng)該每時每刻都考慮到應(yīng)用程序的設(shè)置。用戶通過程序中的視圖菜單進入設(shè)置選項。在設(shè)置的視圖界面中,應(yīng)該包括Home,Back和標簽。(視圖菜單不是必須的)在某些情況下,提供一個應(yīng)用程序中常用設(shè)置的快速通道會給用戶帶來方便。這些快速通道可以是一個應(yīng)用程序相應(yīng)全局設(shè)置的子設(shè)置界面。例如,

26、要在一個Email程序的子視圖界面下設(shè)置賬戶,通過普通的方法用戶需要一步步的進入到賬戶的設(shè)置菜單。如果提供一個賬戶設(shè)置的快捷欄則會方便很多。但是這樣就會使界面的導(dǎo)航發(fā)生變化。例如用戶通過快捷欄進入到一個設(shè)置的子設(shè)置界面時,“Back”按鈕只會將視圖界面返回到打開這個子設(shè)置界面之前的界面,并不是這個設(shè)置的最上級界面。 在設(shè)置的視圖界面中,把有著相近或連帶關(guān)系的幾個設(shè)置分組放在一起會幫助用戶更方便的找到他們所需要的設(shè)置。每個組可以包括多項項目,例如文本,圖像和按鈕等。 如果用戶可以從UI直接進行某些設(shè)置,則不要將這些設(shè)置放在設(shè)置的視圖界面中。例如如果用戶可以從桌面的時鐘上直接設(shè)置鬧表的話,則不要將

27、鬧表的設(shè)置放到時鐘的設(shè)置的界面中。注意當用戶完成了一項設(shè)置時,該設(shè)置應(yīng)該立即生效,沒有保存設(shè)置的需要。你可以使用視圖菜單中的撤銷按鈕取消任何已經(jīng)完成的設(shè)置,或?qū)⒃O(shè)置恢復(fù)成初始狀態(tài)。撤銷按鈕只在設(shè)置被改變之后才出現(xiàn)。應(yīng)用程序的導(dǎo)向 應(yīng)用程序有時會有多種導(dǎo)向形式。MeeGo提供了3中模板來幫助應(yīng)用程序?qū)崿F(xiàn)其主要功能。向下排列模板: 這是用的最多的一種模板,用于進入所有導(dǎo)向位置在頂部的應(yīng)用程序。布局不僅局限于列表形式。當用戶向下觀看容時,關(guān)閉按鈕被取代為返回(Back)按鈕。視圖菜單中的導(dǎo)向模板: 這個模板也是平時經(jīng)常會用到的,其原理為按照導(dǎo)向結(jié)構(gòu)來對程序的容進行優(yōu)先化。視圖菜單用于在導(dǎo)向選項之間選

28、擇轉(zhuǎn)換。和標簽條(見下面)正相反,這種轉(zhuǎn)換可以用于多項選項之間。因為所有的導(dǎo)向點都在應(yīng)用程序的頂部,所以就算導(dǎo)向被改變了,關(guān)閉按鈕仍在。要注意的是就算是在一個視圖菜單中,導(dǎo)向模板中的過濾器的功能也是不同的。過濾器和向下排列模板相似,關(guān)閉按鈕會被返回按鈕所代替,例如,在幾個信息賬號之間切換。標簽條模板: 這個模板用于快速進入不同的區(qū)域或模式。要注意在標簽條中和導(dǎo)向連接有關(guān)的混合動作(如“寫信息”)。在這種布局下如需要的話,要盡量使用程序容區(qū)域中的按鈕來進行操作。這個模板最多只能有4個導(dǎo)向選項,而且不能隨時間而變化。4.皮膚MeeGo提供了多種皮膚共程序設(shè)計人員選擇,其中即包括對系統(tǒng)整體皮膚的改變

29、,也允許人們在不改變整體的情況下依據(jù)自己喜好來進行個性化設(shè)置。設(shè)計人員只需花很少的時間對一些基本元素,如顏色、形狀和背景等進行設(shè)置即可得到一個完美的UI。此外,制作MeeGo的皮膚非常簡單,程序設(shè)計人員無需使用大量的代碼即可制作出一個完全新的皮膚來。更多關(guān)于“皮膚”的信息即將推出視覺效果的個性化更換視覺效果的好處:個性化用戶體驗上的視覺效果是一個可以讓一個移動設(shè)備具有你的特色的有力手段。個性化UI的基本元素包括:顏色,字體,照片和格式等。有時候只要一個小小的改變就可以讓整個設(shè)備的使用方式有所變化。使用不同的視覺外觀可以在一定程度上根據(jù)不同的用戶群體,年齡人口,地理位置和產(chǎn)品分類吸引一定人群。個

30、性化UI可以使你從競爭對手中脫穎而出,吸引你的用戶在不同的設(shè)備上使用你的程序,并增加對你程序的忠誠度。個性化視覺效果可以讓你做到事半功倍,可以說是四兩撥千斤那。MeeGo的主題系統(tǒng)可以說是萬能的,它即提供對整體主題的改變,也允許只對整體主題進行局部改變。對程序員來說,根據(jù)自己的風格只對基本顏色、字體以與背景等作出一點改變也是有可能的。此外,就算沒有復(fù)雜的代碼,也可以對主題作出最精細的編輯,從而使它煥然一新。個性化指南概要這一章將主要介紹怎樣通過用戶界面來個性化的主題顏色被應(yīng)用在應(yīng)用界面上顏色MeeGo允許人們對顏色進行自定義。MeeGo保留了一些基本顏色作為其主題顏色,使人們在對顏色進行自定義

31、時給予大體的方向指南。在這里我們建議大家多使用中型顏色作為個性化的主體顏色,并在適當?shù)牡胤绞褂脗€性化較強的顏色來突出自身的亮點。和打印出來的宣傳畫等東西不一樣,在我們個性化MeeGo的用戶界面時除了要考慮顏色的數(shù)量之外,還要考慮顏色的使用次數(shù)。鮮明的顏色最好用于在要突出顯示一個控件和界面的時候,例如一個已經(jīng)被選擇了的按鈕,或者是消息框等。更多關(guān)于顏色的介紹請參考“界面?zhèn)€性化基礎(chǔ)”。字體在MeeGo中變換字體和調(diào)整字體的大小是非常簡單的。更多容請參考“字體”章節(jié)。圖標圖標在MeeGo有著重要的作用。圖標一般用于在有限的屏幕中向用戶提供附加的信息。例如在移動設(shè)備中用于啟動一個程序的程序圖標。更多容

32、請參考“圖標”章節(jié)。LogoLogo一般是人們記住一個程序或軟件的最重要的元素。對于MeeGo來說,其Logo一般出現(xiàn)于當屏幕處于開關(guān)機的狀態(tài)時,和屏幕鎖定和回到主頁時。對于硬件廠商來說,其Logo可以貼在其出產(chǎn)的硬件上。照片和圖像照片和圖像有時候可以讓人們對你個性化的MeeGo系統(tǒng)留以深刻印象。如果一個圖像對你的個性化非常有代表性的話,你可以考慮把它作為主背景。更多情況下,主背景可以由與你個性化相關(guān)的圖形或你的個性化的基本顏色組成的圖像組成。更多容請參考“程序背景”章節(jié)。有的個性化有其自己的主題模式,例如一個貫穿整個個性化主題的曲線。用戶界面是由一套按鈕,開關(guān),進程條以與其他元素組成的。個性

33、化的界面應(yīng)盡量友好、柔和(例如下圖)。界面既可以做的非常簡單,也可以包含很多元素,但是一定要多而不亂。要實現(xiàn)這一點需要更多努力和對關(guān)于界面?zhèn)€性化的更多了解。更多容請參考“高級界面?zhèn)€性化”。界面?zhèn)€性化基礎(chǔ)顏色MeeGo的基礎(chǔ)主題主要包括三種顏色。所有的控件(例如按鈕,列表,開關(guān)等)通常具有:1.普通狀態(tài)(在基礎(chǔ)主題中為淺灰色)2.被按下的狀態(tài)(深灰色,呈現(xiàn)為被按下的狀態(tài))3.被選擇的狀態(tài)(通常用于切換按鈕和多選菜單,作用為指示出被選擇的項)主題中圖形的顏色在不同的控件中是不同的,主題中文本的顏色為通用的。怎樣個性化MeeGo中控件的圖形界面為SVG矢量圖形圖像,被儲存在svg文件夾中,設(shè)計人員可

34、以使用Inkscape或Illustrator CS4和以上版本進行編輯。其中顏色的規(guī)則必須被復(fù)制到所有的圖形組中。文本顏色的顏色規(guī)則是通用的,只可在constants.ini文件中進行修改。其他圖形顏色和文本顏色需要遵循一樣的規(guī)則。例如,默認的按鈕顏色為黑色,則文本顏色的color_foreground需要更改為白色。所以文本顏色的翻轉(zhuǎn)顏色為黑色。所以按下、所選狀態(tài)的圖形需要對黑色文本有足夠的對比度。要注意同樣要調(diào)整背景和對話框的顏色風格,確保文本具有良好的可讀性。顏色規(guī)則是允許有特例的,他們可以在特定控件的CSS文件中被修改。按鈕圖形文本顏色:COLOR_FOREGROUND (黑色)狀態(tài)

35、:還沒有被點擊過的按鈕的顏色狀態(tài)按鈕圖形文本顏色:COLOR_INVERTED_FOREGROUND (白色)狀態(tài):當按鈕被按下時的顏色(只會顯示一小段時間)按鈕圖形文本顏色:COLOR_FOREGROUND (黑色)狀態(tài):當按鈕被選擇時的顏色狀態(tài)。字體字體和大小是可以自定義的。怎樣個性化文件中使用的字體可以在constants.ini文檔中進行更改??筛牡娜莅ㄗ煮w名字和大小。字體必須只有被安裝后才能被使用。其他文本的大小可以不變,但是在使用一些新的字體的時候要注意該字體的大小是否合適。圖標移動設(shè)備上的任何圖標都可以被個性化。怎樣個性化MeeGo中的圖標文件均為SVG矢量文件,被存儲在圖標

36、文件夾中。因為它們是矢量圖像,所以圖標可以被任意改變大小來適應(yīng)相應(yīng)的布局。圖標的名稱代表了其相應(yīng)的應(yīng)用程序,例如icon-m-messaging-smiley-wink被用于和信息有關(guān)的應(yīng)用程序,icon-m-common-phone則用于和有關(guān)的應(yīng)用程序中。其他要注意背景會影響到圖標的顯示效果。如果應(yīng)用程序的命令區(qū)域被換成了白色,則現(xiàn)有的白色圖標不可見,而且要改變?yōu)樯畹念伾?yīng)用程序的背景應(yīng)用程序的背景可以是一圖片,也可以只是背景顏色。主頁和鎖屏的背景是不同的。怎樣個性化應(yīng)用程序的背景被存儲在圖像(Image)文件夾中,被叫做duiapplicationbackground.png. 其他應(yīng)

37、用程序的背景在設(shè)計時要注意和該應(yīng)用程序的用戶界面相符合。要注意對話框也有背景。被選擇的狀態(tài)個性化主題的一個簡單的方法就是更換其不同狀態(tài)下的顏色。被選擇的狀態(tài)的顏色在用戶界面上的很多地方都可以看到,例如按鈕,開關(guān),列表,消息框以與其他的相互元素中。按鈕狀態(tài)的變化個性化按鈕的變化是改變按鈕的外觀和使用感覺的一個好方法。按鈕的變化可以包括:1.3D效果的外觀2.光的效果和光的方向3.外觀、紋理的感覺怎樣個性化個性化的步驟和改變高亮顏色的步驟一樣。應(yīng)用于按鈕,開關(guān)以與其他元素的所有狀態(tài)必須使用一樣的規(guī)則。其他文本和背景顏色需要被進行相應(yīng)的調(diào)整。5.常用組件MeeGo的設(shè)計理念是“手指運動”,并且可以適

38、應(yīng)各種不同的屏幕尺寸和分辨率。例如,如果一個MeeGo中的常用組件有8mm高,那么不管屏幕的尺寸和分辨率如何,這個組件從始至終都會是8mm高。每個常用組件的大小和最終規(guī)格將會在今后的說明文檔中詳細解釋。常用組件說明按鈕按鈕可以用于起始一個動作,例如在本中選中一個。按鈕上面可以添加文本標簽用以說明按鈕的用途。按鈕的排列方式有左對齊,右對齊和居中。開關(guān)開關(guān)可以用于設(shè)置功能或函數(shù)的開關(guān)??梢栽陂_關(guān)旁邊添加文本標簽用以說明。開關(guān)上不能添加。開關(guān)在一個列表中只能用于一個功能或函數(shù)。如果在操作開關(guān)時需要執(zhí)行一些動作時,那么這些動作應(yīng)該在該開關(guān)旁列出來,用以說明。復(fù)選框復(fù)選框可以用于對多項信息的選擇。在復(fù)選

39、框旁應(yīng)該有注釋說明其用途。用戶可以使用單擊對復(fù)選框進行操作。圖標按鈕圖標按鈕由圖標(必選)和文本標簽(可選)組成。和按鈕不一樣,圖標按鈕沒有普通按鈕式的邊框,所以他們看起來更像是個圖標。例如工具條里的圖標按鈕?;瑮U滑桿可以用于連續(xù)性的設(shè)置值,如調(diào)節(jié)音量??梢詾榛瑮U定義文本標簽用以說明滑桿的用途??梢远x用滑桿設(shè)置值的縮略圖(當滑桿被滑動的時候顯示)。最大值和最小值是可選的。 播放進度條播放進度條時一種特殊的滑桿,用于顯示多媒體等播放的進度?;瑮U的前進速度是可定義的。最大值和最小值的顯示是可選的。進度條 已知周期用進度條來指出動作的狀態(tài),例如在有足夠空間以與過程持續(xù)時間已知時的上載和下載。進度條

40、可以被放在其他UI組件的最上層。(即先于其他任何UI組件顯示)當一個過程大于2秒時,建議使用進度條。進度條 未知周期當在不知道一個過程的持續(xù)周期下,進度條會暫時處在“未知周期”的形式下,直到該持續(xù)時間已知為止。不要將此進度條用于自動升級中。此進度條有兩種外觀,“螺旋器外觀”和“普通外觀”。要避免在同一個視圖界面中同時用到這兩種外觀。進度條 - 螺旋器外觀當可用空間有限并且持續(xù)周圍未知的情況下,可以將螺旋器外觀的進度條用于掃描或刷新等動作。當可用空間極其有限的情況下也可使用螺旋器外觀的進度條。螺旋器外觀的進度條可以被放在對話框、容器或視圖菜單中其他UI組件的最上層。(即先于其他任何UI組件顯示)

41、單選對話框該對話框用于快速接收用戶的回應(yīng)信息。當該對話框出現(xiàn)時,其后面的背景變暗并被鎖住,從而焦點集中在該對話框上。和消息框不一樣,只要用戶不點選關(guān)閉,該對話框?qū)⒉粫腢I上自動消失。要盡量保持對話框中的文本信息少而精。詢問對話框“詢問對話框”和“單選對話框”之間的不同之處是“詢問對話框”需要用戶必須在兩個選擇之間選擇其中一個。詢問對話框可以用于像刪除文件和從錯誤中恢復(fù)等任何重要性的操作。如果詢問對話框中包含多個按鈕,比如說有兩個按鈕,一個為“確認按鈕”,一個為“取消按鈕”。為了保持對話框從左到右,從上到下的風格習慣,最好把“確認按鈕”作為第一個按鈕,“取消按鈕”放到最后。多功能對話框多功能對

42、話框是普通詢問對話框的高級模式,可以用于獲取對話框中顯示的圖片或警告圖標的反饋信息。這種對話框要求用戶在進入到下一界面之前要進行相應(yīng)的動作。列表列表可以說成是一個垂直顯示的容器,而且是最常用的一種UI。在不知道要顯示的容有多少的情況下,通??梢钥紤]使用列表。當列表顯示時,其容的數(shù)目也是可以改變的。如果當列表中顯示的容超出了當前視圖界面,列表會自動平移。有時候在列表中會用到列表分隔線。列表分隔線可以把一個長列表分開,從而提高可讀性。對象菜單對象菜單是用戶可以對對象進行操作的含有一系列相關(guān)動作的列表。雖然對象菜單具有可擴展性,但是不要在里面放超過8個動作,從而避免菜單的平移。注意當用戶安裝其他含有

43、插件的應(yīng)用程序時,對象菜單中也許會加入新的菜單選項。工具欄/導(dǎo)航欄工具欄用于對當前正在獲得焦點的容執(zhí)行動作。在風景模式(即把移動設(shè)備水平放置)下,工具欄固定在UI的上方。在肖像模式(即把移動設(shè)備垂直放置)下,工具欄固定在UI的下方。要不在工具欄中放太多的命令,以2到4個重要的命令為佳。導(dǎo)航動作經(jīng)常被放在工具欄的右端。視圖菜單視圖菜單由包含了當前視圖(或應(yīng)用程序)相關(guān)命令的列表組成。該列表在長度上沒有限制,如果里面的容超過了屏幕尺寸則用戶可以通過滾動條來繼續(xù)向下查看容。但是要注意不要在視圖菜單里面放置太多的容。消息框消息框有兩種,即“無交互消息框”和“交互消息框”。在不能在當前UI上面顯示消息的

44、情況下,可以使用“無交互消息框”。當需要用戶在看到消息后進行一定操作時(如通知錯誤和例外時),可以使用“交互消息框”。組合框開放式組合框由子按鈕控件和對話框組成。組合框繼承了單選對話框的屬性和交互動作。例如,如果組合框的高大于屏幕尺寸,則組合框會平移并顯示一個位置指示器。封閉式組合框有三種不同的布局。6.Use FlowsSubmitted by on 9 July, 2010 - 02:34 Certain key aspects of the use flows, such as background image, can be customized easily by changing

45、the contents or parameters of specific configuration packages. The sections below will provide detailed information on the customizable parts of the use flows.Lock screen and unlock sequenceThe lock screen is shown when the user wakes the device from the idle state. The lock screen offers two altern

46、atives:Date/time at the top and unlock mechanism at the bottom Date/time and unlock mechanism at the top Date and time are placed at the top with possible notifications displayed above them. The unlock sequence is placed at the bottom of the screen.The unlocking is done by moving the lock icon upwar

47、ds to the drop area.Date and time are placed at the top with possible notifications displayed above them. The unlock sequence is placed at the top of the screen. The unlocking is done by moving the lock icon downwards to the drop area.How to customizeSelect the position of the lock (top/bottom) and

48、base your customization on this alternative. The lock screen button and drop area states are in the meegotouch-lockscreen.svg file. Update the colors, lock-button style, and transparency to your liking. The background in lock screen is the same in all the home and lock views. It can be zoomed and cr

49、opped differently to portrait and landscape. The default background is defined in the home application configuration file. The lock application related CS style file can be modified for more extensive changes. Home/Switcher screenThe home screen can have two different default layouts, a carousel, or

50、 a grid. Each one has its own set of customizable parameters.The general customizable options are how running applications are presented, their relative location, and the theme.The theme related parameters are found in the home application CSS file. The CSS has some common parameters for all the vie

51、ws (switcher views and launcher). For example, the page flip transition and the page indicator can be customized.CarouselThe carousel view displays the running applications in a carousel-like format. Switching between applications is done by panning the applications and selecting the one you want to

52、 use. Users can move from carousel view to grid view by zooming out.Theme customizingCarousel can be customized through the theme. The size of the cards, how much they overlap, how much the cards zoom, and even transition speed and rotation can be modified. The switcher style is accessible through t

53、he home application CSS file.The background is the same as in the lock and other home views. However, the switcher views have a blur and darkening effect to highlight the cards better. The opacity of the darkening can be customized.There are two different carousel switcher views.GridIn grid view, th

54、e running applications are displayed in a grid. There are several grid view pages if there are more running applications than can fit on the screen. Users can move from grid to carousel view by zooming in.Theme customizingThe grid, also called switcher overview, can be customized through theme. The

55、amount of rows and columns can be changed, as well as the spacing between the cards. The page indicator is the same as in the carousel view. The parameters are found in the same home application CSS file as the other home views.Different grid views.LauncherThe launcher features all the applications

56、available on the device.Customization options start with the theme and icon graphics. The default set of applications can also be customized, as well as the arrangement of icons. All of this provides tools to guide the end user to the most important applications and solutions. Further customization options include availability of a button for accessing an application store, and the target of the button. Theme customizingThe size and spacing of the icons can be customized. The icons press and release feedback graphics, sound, and haptics ar

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論