更換視覺效果的好處

個(gè)性化用戶體驗(yàn)上的視覺效果是一個(gè)可以讓一個(gè)移動(dòng)設(shè)備具有你的特色的有力手段。個(gè)性化UI的基本元素包括：顏色，字體，照片和格式等。有時(shí)候只要一個(gè)小小的改變就可以讓整個(gè)設(shè)備的使用方式有所變化。

使用不同的視覺外觀可以在一定程度上根據(jù)不同的用戶群體，年齡人口，地理位置和產(chǎn)品分類吸引一定人群。個(gè)性化UI可以使你從競(jìng)爭(zhēng)對(duì)手中脫穎而出，吸引你的用戶在不同的設(shè)備上使用你的程序，并增加對(duì)你程序的忠誠(chéng)度。個(gè)性化視覺效果可以讓你做到事半功倍，可以說(shuō)是四兩撥千斤那。

MeeGo的主題系統(tǒng)可以說(shuō)是萬(wàn)能的，它即提供對(duì)整體主題的改變，也允許只對(duì)整體主題進(jìn)行局部改變。對(duì)程序員來(lái)說(shuō)，根據(jù)自己的風(fēng)格只對(duì)基本顏色、字體以及背景等作出一點(diǎn)改變也是有可能的。此外，就算沒有復(fù)雜的代碼，也可以對(duì)主題作出最精細(xì)的編輯，從而使它煥然一新。

下一節(jié)“個(gè)性化指南概要”將介紹個(gè)性化的好處，以及主題的常用顏色搭配等基本元素。

個(gè)性化視覺效果是徹底改變移動(dòng)設(shè)備使用效果的利器！！！

　　這一章將主要介紹怎樣通過(guò)用戶界面來(lái)

　　個(gè)性化的主題顏色被應(yīng)用在應(yīng)用界面上

　　顏色

　　MeeGo允許人們對(duì)顏色進(jìn)行自定義。MeeGo保留了一些基本顏色作為其主題顏色，使人們?cè)趯?duì)顏色進(jìn)行自定義時(shí)給予大體的方向指南。
　　在這里我們建議大家多使用中型顏色作為個(gè)性化的主體顏色，并在適當(dāng)?shù)牡胤绞褂脗€(gè)性化較強(qiáng)的顏色來(lái)突出自身的亮點(diǎn)。

　　和打印出來(lái)的宣傳畫等東西不一樣，在我們個(gè)性化MeeGo的用戶界面時(shí)除了要考慮顏色的數(shù)量之外，還要考慮顏色的使用次數(shù)。鮮明的顏色最好用于在要突出顯示一個(gè)控件和界面的時(shí)候，例如一個(gè)已經(jīng)被選擇了的按鈕，或者是消息框等。

　　更多關(guān)于顏色的介紹請(qǐng)參考“界面?zhèn)€性化基礎(chǔ)”。

　　字體

　　在MeeGo中變換字體和調(diào)整字體的大小是非常簡(jiǎn)單的。更多內(nèi)容請(qǐng)參考“字體”章節(jié)。

　　圖標(biāo)

　　圖標(biāo)在MeeGo有著重要的作用。圖標(biāo)一般用于在有限的屏幕中向用戶提供附加的信息。例如在移動(dòng)設(shè)備中用于啟動(dòng)一個(gè)程序的程序圖標(biāo)。

　　更多內(nèi)容請(qǐng)參考“圖標(biāo)”章節(jié)。

　　Logo

　　Logo一般是人們記住一個(gè)程序或軟件的最重要的元素。對(duì)于MeeGo來(lái)說(shuō)，其Logo一般出現(xiàn)于當(dāng)屏幕處于開關(guān)機(jī)的狀態(tài)時(shí)，和屏幕鎖定和回到主頁(yè)時(shí)。對(duì)于硬件廠商來(lái)說(shuō)，其Logo可以貼在其出產(chǎn)的硬件上。

　　照片和圖像

　　照片和圖像有時(shí)候可以讓人們對(duì)你個(gè)性化的MeeGo系統(tǒng)留以深刻印象。如果一個(gè)圖像對(duì)你的個(gè)性化非常有代表性的話，你可以考慮把它作為主背景。更多情況下，主背景可以由與你個(gè)性化相關(guān)的圖形或你的個(gè)性化的基本顏色組成的圖像組成。更多內(nèi)容請(qǐng)參考“程序背景”章節(jié)。

　　有的個(gè)性化有其自己的主題模式，例如一個(gè)貫穿整個(gè)個(gè)性化主題的曲線。用戶界面是由一套按鈕，開關(guān)，進(jìn)程條以及其他元素組成的。個(gè)性化的界面應(yīng)盡量友好、柔和(例如下圖)。界面既可以做的非常簡(jiǎn)單，也可以包含很多元素，但是一定要多而不亂。要實(shí)現(xiàn)這一點(diǎn)需要更多努力和對(duì)關(guān)于界面?zhèn)€性化的更多了解。

　　更多內(nèi)容請(qǐng)參考“高級(jí)界面?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)）
　　主題中圖形的顏色在不同的控件中是不同的，主題中文本的顏色為通用的。
　　怎樣個(gè)性化

　　MeeGo中控件的圖形界面為SVG矢量圖形圖像，被儲(chǔ)存在svg文件夾中，設(shè)計(jì)人員可以使用Inkscape或Illustrator CS4和以上版本進(jìn)行編輯。其中顏色的規(guī)則必須被復(fù)制到所有的圖形組中。
　　文本顏色的顏色規(guī)則是通用的，只可在constants.ini文件中進(jìn)行修改。
　　其他
　　圖形顏色和文本顏色需要遵循相同的規(guī)則。例如，默認(rèn)的按鈕顏色為黑色，則文本顏色的color_foreground需要更改為白色。所以文本顏色的翻轉(zhuǎn)顏色為黑色。所以按下、所選狀態(tài)的圖形需要對(duì)黑色文本有足夠的對(duì)比度。要注意同樣要調(diào)整背景和對(duì)話框的顏色風(fēng)格，確保文本具有良好的可讀性。
　　顏色規(guī)則是允許有特例的，他們可以在特定控件的CSS文件中被修改。
　　按鈕圖形

　　文本顏色：COLOR_FOREGROUND (黑色)

　　狀態(tài)：還沒有被點(diǎn)擊過(guò)的按鈕的顏色狀態(tài)

　　按鈕圖形

　　文本顏色：COLOR_FOREGROUND (黑色)

　　狀態(tài)：還沒有被點(diǎn)擊過(guò)的按鈕的顏色狀態(tài)

　　按鈕圖形

　　文本顏色：COLOR_FOREGROUND (黑色)

　　狀態(tài)：當(dāng)按鈕被選擇時(shí)的顏色狀態(tài)。

　　字體
　　字體和大小是可以自定義的。
　　怎樣個(gè)性化
　　文件中使用的字體可以在constants.ini文檔中進(jìn)行更改。可更改的內(nèi)容包括字體名字和大小。字體必須只有被安裝后才能被使用。
　　其他
　　文本的大小可以不變，但是在使用一些新的字體的時(shí)候要注意該字體的大小是否合適。

　　圖標(biāo)
　　移動(dòng)設(shè)備上的任何圖標(biāo)都可以被個(gè)性化。
　　怎樣個(gè)性化

　　MeeGo中的圖標(biāo)文件均為SVG矢量文件，被存儲(chǔ)在圖標(biāo)文件夾中。因?yàn)樗鼈兪鞘噶繄D像，所以圖標(biāo)可以被任意改變大小來(lái)適應(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)用程序中。
　　其他
　　要注意背景會(huì)影響到圖標(biāo)的顯示效果。如果應(yīng)用程序的命令區(qū)域被換成了白色，則現(xiàn)有的白色圖標(biāo)不可見，而且要改變?yōu)樯畹念伾?/p>

　　應(yīng)用程序的背景
　　應(yīng)用程序的背景可以是一張圖片，也可以只是背景顏色。主頁(yè)和鎖屏的背景是不同的。
　　怎樣個(gè)性化
　　應(yīng)用程序的背景被存儲(chǔ)在圖像（Image）文件夾中，被叫做duiapplicationpage-background.png.

　　其他
　　應(yīng)用程序的背景在設(shè)計(jì)時(shí)要注意和該應(yīng)用程序的用戶界面相符合。要注意對(duì)話框也有背景。

　　被選擇的狀態(tài)
　　個(gè)性化主題的一個(gè)簡(jiǎn)單的方法就是更換其不同狀態(tài)下的顏色。被選擇的狀態(tài)的顏色在用戶界面上的很多地方都可以看到，例如按鈕，開關(guān)，列表，消息框以及其他的相互元素中。

　　怎樣個(gè)性化
　　1.備份svg文件夾
　　2.用photoshop等圖像編輯軟件打開svg文件夾中的svg文件，例如meegotouch-button.svg

　　3.進(jìn)行個(gè)性化（要注意不要改變組名稱，例如meegotouch-button-background-selected，因?yàn)檫@些名稱是被應(yīng)用軟件讀取的關(guān)鍵）
　　4.保存圖像文件為svg文件
　　5.進(jìn)行測(cè)試
　　6.在svg文件夾中對(duì)所有的狀態(tài)圖標(biāo)進(jìn)行修改，即重復(fù)步驟2-4

　　其他
　　記住同時(shí)還要更新constants.ini文件中的文本顏色。（如果新的主題顯示的不完美，則會(huì)自動(dòng)變回基礎(chǔ)主題的外觀）

　　按鈕狀態(tài)的變化
　　個(gè)性化按鈕的變化是改變按鈕的外觀和使用感覺的一個(gè)好方法。
　　按鈕的變化可以包括：
　　1.3D效果的外觀
　　2.光的效果和光的方向
　　3.外觀、紋理的感覺
　　怎樣個(gè)性化
　　個(gè)性化的步驟和改變高亮顏色的步驟相同。應(yīng)用于按鈕，開關(guān)以及其他元素的所有狀態(tài)必須使用相同的規(guī)則。
　　其他
　　文本和背景顏色需要被進(jìn)行相應(yīng)的調(diào)整。

it知識(shí)庫(kù)：MeeGo的UI個(gè)性化指南，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。