|
|
更換視覺效果的好處
個性化用戶體驗(yàn)上的視覺效果是一個可以讓一個移動設(shè)備具有你的特色的有力手段。個性化UI的基本元素包括：顏色，字體，照片和格式等。有時候只要一個小小的改變就可以讓整個設(shè)備的使用方式有所變化。
使用不同的視覺外觀可以在一定程度上根據(jù)不同的用戶群體，年齡人口，地理位置和產(chǎn)品分類吸引一定人群。個性化UI可以使你從競爭對手中脫穎而出，吸引你的用戶在不同的設(shè)備上使用你的程序，并增加對你程序的忠誠度。個性化視覺效果可以讓你做到事半功倍，可以說是四兩撥千斤那。
MeeGo的主題系統(tǒng)可以說是萬能的，它即提供對整體主題的改變，也允許只對整體主題進(jìn)行局部改變。對程序員來說，根據(jù)自己的風(fēng)格只對基本顏色、字體以及背景等作出一點(diǎn)改變也是有可能的。此外，就算沒有復(fù)雜的代碼，也可以對主題作出最精細(xì)的編輯，從而使它煥然一新。
下一節(jié)“個性化指南概要”將介紹個性化的好處，以及主題的常用顏色搭配等基本元素。
個性化視覺效果是徹底改變移動設(shè)備使用效果的利器！！！
這一章將主要介紹怎樣通過用戶界面來
顏色
MeeGo允許人們對顏色進(jìn)行自定義。MeeGo保留了一些基本顏色作為其主題顏色，使人們在對顏色進(jìn)行自定義時給予大體的方向指南。
在這里我們建議大家多使用中型顏色作為個性化的主體顏色，并在適當(dāng)?shù)牡胤绞褂脗€性化較強(qiáng)的顏色來突出自身的亮點(diǎn)。
和打印出來的宣傳畫等東西不一樣，在我們個性化MeeGo的用戶界面時除了要考慮顏色的數(shù)量之外，還要考慮顏色的使用次數(shù)。鮮明的顏色最好用于在要突出顯示一個控件和界面的時候，例如一個已經(jīng)被選擇了的按鈕，或者是消息框等。
更多關(guān)于顏色的介紹請參考“界面?zhèn)€性化基礎(chǔ)”。
字體
在MeeGo中變換字體和調(diào)整字體的大小是非常簡單的。更多內(nèi)容請參考“字體”章節(jié)。
圖標(biāo)
圖標(biāo)在MeeGo有著重要的作用。圖標(biāo)一般用于在有限的屏幕中向用戶提供附加的信息。例如在移動設(shè)備中用于啟動一個程序的程序圖標(biāo)。
更多內(nèi)容請參考“圖標(biāo)”章節(jié)。
Logo
Logo一般是人們記住一個程序或軟件的最重要的元素。對于MeeGo來說，其Logo一般出現(xiàn)于當(dāng)屏幕處于開關(guān)機(jī)的狀態(tài)時，和屏幕鎖定和回到主頁時。對于硬件廠商來說，其Logo可以貼在其出產(chǎn)的硬件上。
照片和圖像
照片和圖像有時候可以讓人們對你個性化的MeeGo系統(tǒng)留以深刻印象。如果一個圖像對你的個性化非常有代表性的話，你可以考慮把它作為主背景。更多情況下，主背景可以由與你個性化相關(guān)的圖形或你的個性化的基本顏色組成的圖像組成。更多內(nèi)容請參考“程序背景”章節(jié)。
有的個性化有其自己的主題模式，例如一個貫穿整個個性化主題的曲線。用戶界面是由一套按鈕，開關(guān)，進(jìn)程條以及其他元素組成的。個性化的界面應(yīng)盡量友好、柔和(例如下圖)。界面既可以做的非常簡單，也可以包含很多元素，但是一定要多而不亂。要實(shí)現(xiàn)這一點(diǎn)需要更多努力和對關(guān)于界面?zhèn)€性化的更多了解。
更多內(nèi)容請參考“高級界面?zhèn)€性化”。
界面?zhèn)€性化基礎(chǔ)
顏色
MeeGo的基礎(chǔ)主題主要包括三種顏色。
所有的控件（例如按鈕，列表，開關(guān)等）通常具有：
1.普通狀態(tài)（在基礎(chǔ)主題中為淺灰色）
2.被按下的狀態(tài)（深灰色，呈現(xiàn)為被按下的狀態(tài)）
3.被選擇的狀態(tài)（通常用于切換按鈕和多選菜單，作用為指示出被選擇的項(xiàng)）
主題中圖形的顏色在不同的控件中是不同的，主題中文本的顏色為通用的。
怎樣個性化
MeeGo中控件的圖形界面為SVG矢量圖形圖像，被儲存在svg文件夾中，設(shè)計人員可以使用Inkscape或Illustrator CS4和以上版本進(jìn)行編輯。其中顏色的規(guī)則必須被復(fù)制到所有的圖形組中。
文本顏色的顏色規(guī)則是通用的，只可在constants.ini文件中進(jìn)行修改。
其他
圖形顏色和文本顏色需要遵循相同的規(guī)則。例如，默認(rèn)的按鈕顏色為黑色，則文本顏色的color_foreground需要更改為白色。所以文本顏色的翻轉(zhuǎn)顏色為黑色。所以按下、所選狀態(tài)的圖形需要對黑色文本有足夠的對比度。要注意同樣要調(diào)整背景和對話框的顏色風(fēng)格，確保文本具有良好的可讀性。
顏色規(guī)則是允許有特例的，他們可以在特定控件的CSS文件中被修改。
按鈕圖形
文本顏色：COLOR_FOREGROUND (黑色)
狀態(tài)：還沒有被點(diǎn)擊過的按鈕的顏色狀態(tài)
按鈕圖形
文本顏色：COLOR_FOREGROUND (黑色)
狀態(tài)：還沒有被點(diǎn)擊過的按鈕的顏色狀態(tài)
按鈕圖形
文本顏色：COLOR_FOREGROUND (黑色)
狀態(tài)：當(dāng)按鈕被選擇時的顏色狀態(tài)。
字體
字體和大小是可以自定義的。
怎樣個性化
文件中使用的字體可以在constants.ini文檔中進(jìn)行更改。可更改的內(nèi)容包括字體名字和大小。字體必須只有被安裝后才能被使用。
其他
文本的大小可以不變，但是在使用一些新的字體的時候要注意該字體的大小是否合適。
圖標(biāo)
移動設(shè)備上的任何圖標(biāo)都可以被個性化。
怎樣個性化
MeeGo中的圖標(biāo)文件均為SVG矢量文件，被存儲在圖標(biāo)文件夾中。因?yàn)樗鼈兪鞘噶繄D像，所以圖標(biāo)可以被任意改變大小來適應(yīng)相應(yīng)的布局。圖標(biāo)的名稱代表了其相應(yīng)的應(yīng)用程序，例如icon-m-messaging-smiley-wink被用于和信息有關(guān)的應(yīng)用程序，icon-m-common-phone則用于和電話有關(guān)的應(yīng)用程序中。
其他
要注意背景會影響到圖標(biāo)的顯示效果。如果應(yīng)用程序的命令區(qū)域被換成了白色，則現(xiàn)有的白色圖標(biāo)不可見，而且要改變?yōu)樯畹念伾?/p>
應(yīng)用程序的背景
應(yīng)用程序的背景可以是一張圖片，也可以只是背景顏色。主頁和鎖屏的背景是不同的。
怎樣個性化
應(yīng)用程序的背景被存儲在圖像（Image）文件夾中，被叫做duiapplicationpage-background.png.
其他
應(yīng)用程序的背景在設(shè)計時要注意和該應(yīng)用程序的用戶界面相符合。要注意對話框也有背景。
被選擇的狀態(tài)
個性化主題的一個簡單的方法就是更換其不同狀態(tài)下的顏色。被選擇的狀態(tài)的顏色在用戶界面上的很多地方都可以看到，例如按鈕，開關(guān)，列表，消息框以及其他的相互元素中。
怎樣個性化
1.備份svg文件夾
2.用photoshop等圖像編輯軟件打開svg文件夾中的svg文件，例如meegotouch-button.svg
3.進(jìn)行個性化（要注意不要改變組名稱，例如meegotouch-button-background-selected，因?yàn)檫@些名稱是被應(yīng)用軟件讀取的關(guān)鍵）
4.保存圖像文件為svg文件
5.進(jìn)行測試
6.在svg文件夾中對所有的狀態(tài)圖標(biāo)進(jìn)行修改，即重復(fù)步驟2-4
其他
記住同時還要更新constants.ini文件中的文本顏色。（如果新的主題顯示的不完美，則會自動變回基礎(chǔ)主題的外觀）
按鈕狀態(tài)的變化
個性化按鈕的變化是改變按鈕的外觀和使用感覺的一個好方法。
按鈕的變化可以包括：
1.3D效果的外觀
2.光的效果和光的方向
3.外觀、紋理的感覺
怎樣個性化
個性化的步驟和改變高亮顏色的步驟相同。應(yīng)用于按鈕，開關(guān)以及其他元素的所有狀態(tài)必須使用相同的規(guī)則。
其他
文本和背景顏色需要被進(jìn)行相應(yīng)的調(diào)整。
it知識庫：MeeGo的UI個性化指南，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
