B.優(yōu)化UI元素
任何一個(gè)UI元素都會(huì)影響到產(chǎn)品整體的性能表現(xiàn),每個(gè)點(diǎn)滴之處的優(yōu)化工作都可以對(duì)性能的提升起到推動(dòng)作用?梢灾攸c(diǎn)關(guān)注以下幾個(gè)方面:
- 元素的類型:不同類型的UI元素對(duì)產(chǎn)品性能的影響程度也不同;優(yōu)化工作可以按照一定的優(yōu)先級(jí)進(jìn)行,例如可以集中資源首先處理那些音頻、視頻、地圖等類型的媒體文件。
- 元素的規(guī)格特性:拿圖片文件來說,分辨率或色深會(huì)對(duì)渲染時(shí)間造成影響。在Android中,任何可繪制資源(jpg、png)都會(huì)被解碼為位圖格式。所以,每一張?jiān)诜直媛驶蛏罘矫娼?jīng)過優(yōu)化處理的圖片都可以節(jié)省出幾KB的樣子。
- 元素的輸出方式:這方面可以針對(duì)具體情況做不同的處理,例如對(duì)于需要一整張圖片作為背景的應(yīng)用來說,如果主要內(nèi)容部分有自己的非半透明背景樣式,那么大背景圖片就沒有必要全部輸出了。
5.定義界面元素的權(quán)重規(guī)則
精心打造設(shè)計(jì)方案的過程,就好像在一片充滿障礙物的陸地上進(jìn)行探索;我們必須時(shí)刻對(duì)功能、外觀、可用性、性能表現(xiàn)等方面的因素進(jìn)行權(quán)衡和取舍。對(duì)于某些系統(tǒng)平臺(tái)來說,設(shè)計(jì)師要做更多的妥協(xié)。然而,無論系統(tǒng)方面具有怎樣的限制,產(chǎn)品都必須保持自身的品牌特色。
我們可以通過一定的方法來判斷UI元素之間的重要程度關(guān)系。有些元素對(duì)于品牌效應(yīng)的貢獻(xiàn)程度是很大的,而合理的移除那些相對(duì)次要的元素,也是提升產(chǎn)品性能的有效方式。我們的團(tuán)隊(duì)從這個(gè)角度對(duì)UI元素進(jìn)行了如下分類:
- 必不可少的:最能體現(xiàn)品牌特征的核心UI元素,例如包含了logo和產(chǎn)品名稱的標(biāo)題欄。
- 具有可替代性的:在相對(duì)高端的設(shè)計(jì)方案中,這類元素可以由性能負(fù)載相對(duì)較低的輸出方式代替。例如去掉標(biāo)題欄的半透明效果。
- 非必要的:這類元素通常用來增強(qiáng)用戶體驗(yàn),在必要的時(shí)候可以簡化或移除。例如將搜索結(jié)果條目的數(shù)量由25個(gè)減為10個(gè)。
6.使用信息面板
團(tuán)隊(duì)之間的信息溝通,對(duì)于打造成功的產(chǎn)品來說是必不可少的。我們經(jīng)歷過的很多項(xiàng)目中,設(shè)計(jì)、開發(fā)、市場等部門的相關(guān)人員對(duì)同一款產(chǎn)品的理解有著很大的不同。從不同職能角度出發(fā)的各種功能需求與資源限制都會(huì)影響到最終產(chǎn)品的性能表現(xiàn),所以保持信息溝通的順暢是很重要的。
信息面板是一種用于增強(qiáng)團(tuán)隊(duì)間交流溝通的解決方案。它可以幫助我們對(duì)產(chǎn)品當(dāng)前的狀態(tài)進(jìn)行度量和監(jiān)測,并設(shè)定下一階段的目標(biāo);一目了然的呈現(xiàn)方式更加便于團(tuán)隊(duì)之間對(duì)產(chǎn)品狀態(tài)、功能預(yù)期和設(shè)計(jì)開發(fā)重點(diǎn)等方面的信息進(jìn)行及時(shí)的交流。
我們通常在信息面板中標(biāo)識(shí)以下幾個(gè)方面的因素:
- 核心功能需求:列出用戶在使用產(chǎn)品時(shí)將要經(jīng)歷到的核心功能。
- 基準(zhǔn)評(píng)分:列出重點(diǎn)競爭對(duì)手的同類產(chǎn)品在這些核心功能方面的性能表現(xiàn)數(shù)據(jù)。
- 當(dāng)前完成度:列出自己的產(chǎn)品在當(dāng)前階段中在這些核心功能方面的性能表現(xiàn)數(shù)據(jù)。
- 目標(biāo):列出自己的產(chǎn)品在這些核心功能方面的目標(biāo)期望。
- 進(jìn)展?fàn)顟B(tài):標(biāo)明產(chǎn)品的當(dāng)前狀態(tài)是否已經(jīng)達(dá)到了目標(biāo)期望。
類似的方法和工具還有很多,包括Android SDK本身,或是TraceView等。
7.UI工程技術(shù)
將優(yōu)秀的設(shè)計(jì)方案通過相應(yīng)的技術(shù)方法實(shí)現(xiàn)出來,也不是一件易事。除了忠實(shí)的還原設(shè)計(jì)方案之外,要使代碼同時(shí)可以帶來高效的性能表現(xiàn),通常需要專家級(jí)別的技術(shù)能力,尤其對(duì)于移動(dòng)應(yīng)用產(chǎn)品來說,需要相關(guān)人員擁有豐富的前后臺(tái)開發(fā)經(jīng)驗(yàn),同時(shí)對(duì)視覺及交互設(shè)計(jì)等方面具有深刻的理解。
布局、圖像、動(dòng)畫的輸出和實(shí)現(xiàn)方式都會(huì)牽扯到功效方面的問題;在選擇實(shí)現(xiàn)方案時(shí),最好從一些具體的方面進(jìn)行考慮,例如:
- 智能化的內(nèi)容加載:可以在合適的地方使用例如lazy loading這樣的方式,首先加載當(dāng)前可視部分的內(nèi)容,并通過用戶的瀏覽行為觸發(fā)其他內(nèi)容的加載。這種方式可以很有效的提升界面功效,使體驗(yàn)更加流暢。
- 背景圖形的加載:背景的實(shí)現(xiàn)方式對(duì)界面性能的影響也是很關(guān)鍵的;通常情況下,背景圖形可以通過整張大圖、小圖重復(fù)平鋪或純樣式代碼等方式實(shí)現(xiàn)。對(duì)于不同類型的界面,需要采用最合適的實(shí)現(xiàn)方式。
某些項(xiàng)目中,設(shè)計(jì)和開發(fā)等相關(guān)部門對(duì)于一款產(chǎn)品的責(zé)任是分離的;這種情況下,最終產(chǎn)品的用戶界面在外觀及性能等方面的表現(xiàn)必然也是缺乏統(tǒng)一性的。因?yàn)槊總(gè)團(tuán)隊(duì)都有他們各自的目標(biāo),所以在那些必須通力配合的地方,例如用戶界面性能優(yōu)化等方面,執(zhí)行力量往往無法集中。對(duì)于這樣的情況,我們的一種解決辦法是,將前端開發(fā)方面的職能角色并入設(shè)計(jì)團(tuán)隊(duì),這可以讓涉及到界面還原和前端效能等方面的開發(fā)工作更加符合用戶體驗(yàn)設(shè)計(jì)的工作思路。
總結(jié)
通過本文,我們可以了解到,每個(gè)層面的設(shè)計(jì)工作都會(huì)對(duì)產(chǎn)品的性能表現(xiàn)造成不同程度的影響。所以在設(shè)計(jì)流程中,功效方面的因素是始終需要被考慮到的。否則,在隨后的相關(guān)流程中,性能方面的潛在問題會(huì)越來越多的暴露出來。
對(duì)于這七個(gè)設(shè)計(jì)準(zhǔn)則,我們已經(jīng)成功的在很多產(chǎn)品的設(shè)計(jì)過程中中加以貫徹,并切實(shí)提升了產(chǎn)品在性能體驗(yàn)方面的表現(xiàn),使它們看上去、用起來都很棒!
本文鏈接:http://www.95time.cn/design/doc/2012/8739.asp
出處:Be For Web
責(zé)任編輯:bluehearts
上一頁 怎樣打造高性能的移動(dòng)用戶體驗(yàn) [4] 下一頁
|