在新家一點(diǎn)點(diǎn)安頓了下來(lái)，不過(guò)心里還是缺乏踏實(shí)的方向感；貓貓們也都有些瞻前顧后草木皆兵的樣子，有待繼續(xù)習(xí)慣；希望大家都好好的。話說(shuō)眼前的這篇候選文章貌似已然有同行做過(guò)譯文，不過(guò)正像 “關(guān)于BeForWeb”中所說(shuō)的，我只挑那些我喜歡的 、對(duì)我自己有學(xué)習(xí)和收藏價(jià)值的內(nèi)容來(lái)做譯文，其他方面的因素和我沒(méi)有半毛錢的關(guān)系。不多說(shuō)，直接進(jìn)入正題。

在人際關(guān)系中，良好的第一印象是非常重要的，人們?cè)敢庠诒舜松砩蠈で笮湃闻c誠(chéng)實(shí)，并期望在接下來(lái)的經(jīng)歷中重現(xiàn)和增強(qiáng)這些好感。同樣的道理也體現(xiàn)在移動(dòng)應(yīng)用或互聯(lián)網(wǎng)產(chǎn)品中。在打造良好的品牌信譽(yù)及其與終端用戶之間持久信任關(guān)系的過(guò)程中，“設(shè)計(jì)”扮演著極其重要的角色。

在用戶的期望中，移動(dòng)應(yīng)用應(yīng)該是準(zhǔn)確、友好和高效的。然而，移動(dòng)設(shè)備自身的局限性確實(shí)為產(chǎn)品的設(shè)計(jì)帶來(lái)了不少挑戰(zhàn)。要打造值得信賴的移動(dòng)應(yīng)用用戶體驗(yàn)，產(chǎn)品在性能方面的表現(xiàn)是極其重要的關(guān)鍵因素。

本文中，我們將對(duì)移動(dòng)應(yīng)用的設(shè)計(jì)與性能表現(xiàn)之間的關(guān)系進(jìn)行討論，并了解七個(gè)相關(guān)的設(shè)計(jì)準(zhǔn)則。這些準(zhǔn)則都是我們(英文原文作者)團(tuán)隊(duì)在各類移動(dòng)應(yīng)用實(shí)際項(xiàng)目中逐漸總結(jié)歸納出來(lái)的 ；希望它們同樣可以幫助大家在落產(chǎn)品實(shí)需求的同時(shí)，從性能的角度更加合理的規(guī)劃設(shè)計(jì)方案。

移動(dòng)應(yīng)用的性能表現(xiàn)

人們需要通過(guò)移動(dòng)應(yīng)用在某種場(chǎng)景中完成一定的需求目標(biāo)，例如提升效率、舒適度，或是單純的找找樂(lè)子?！肮πА笔且苿?dòng)應(yīng)用的一個(gè)核心因素，它們必須夠快夠穩(wěn)定，才能在各種充滿變數(shù)的使用場(chǎng)景中有效的提供功能與價(jià)值。

然而，在現(xiàn)實(shí)中我們時(shí)常發(fā)現(xiàn)，對(duì)于很多移動(dòng)應(yīng)用來(lái)說(shuō)，設(shè)計(jì)和開(kāi)發(fā)周期卻始于對(duì)視覺(jué)外觀的強(qiáng)烈訴求：“ 它看上去必須很棒！” 誠(chéng)然，出色的視覺(jué)風(fēng)格可以通過(guò)優(yōu)秀的第一印象來(lái)吸引用戶，但是要想讓一款應(yīng)用得到用戶長(zhǎng)久的青睞，每個(gè)方面的質(zhì)量和表現(xiàn)都含糊不得，尤其是在性能方面。中看不中用的產(chǎn)品只會(huì)破壞它自己的信譽(yù)，用戶很快就會(huì)察覺(jué)其緩慢的運(yùn)行速度，甚至?xí)驗(yàn)殡y以忍受的加載時(shí)間或頻繁的崩潰而認(rèn)為這款應(yīng)用根本無(wú)法使用；這對(duì)產(chǎn)品的可用性和品牌感知都是極大的損害。在用戶的期望中，一款應(yīng)用必須首先具有快速的響應(yīng)性，否則，最直接的后果就是在App Store中得到差評(píng)，安裝率少的可憐。

下圖是Twitter與Cookmate兩款應(yīng)用的界面對(duì)比；拋開(kāi)用戶基礎(chǔ)方面的因素，即使擁有炫目的視覺(jué)效果， Cookmate的用戶打分和評(píng)價(jià)也無(wú)法超越界面簡(jiǎn)潔樸素的Twitter客戶端。

性能表現(xiàn)與品牌差異

產(chǎn)品的每個(gè)方面都會(huì)影響品牌感知。通常情況下，用戶的要求很簡(jiǎn)單，他們只想找到最合適的工具，來(lái)幫助他們切實(shí)改善生活中的某些方面。要使自己的產(chǎn)品在繽紛的市場(chǎng)中脫穎而出，樹(shù)立起品牌，并真正的吸引用戶，你的應(yīng)用必須在某些方面強(qiáng)于對(duì)手，或是擁有其他應(yīng)用所不具備的特色。作為移動(dòng)用戶體驗(yàn)中的重要元素，優(yōu)異的性能表現(xiàn)會(huì)直接幫助你的應(yīng)用在品牌層面超越其他同類產(chǎn)品。進(jìn)一步說(shuō)，如果你能攻克某些技術(shù)挑戰(zhàn)， 使相關(guān)的特色功能可以流暢穩(wěn)定的運(yùn)行，那么這絕對(duì)會(huì)成為你的產(chǎn)品中難以被復(fù)制的獨(dú)特賣點(diǎn)。

關(guān)于這一點(diǎn)，F(xiàn)lickr的iPhone應(yīng)用是個(gè)不錯(cuò)的例子。Flickr曾經(jīng)在他的主站中宣稱，他們的應(yīng)用有兩大目標(biāo)：一方面幫助用戶展示他們照片，另外還會(huì)提供全新的組織照片與視頻的方式。他們的應(yīng)用確實(shí)很好的做到了這兩點(diǎn)，有效的提升了品牌信譽(yù)度。

所以，在規(guī)劃你的應(yīng)用產(chǎn)品時(shí)，有必要首先對(duì)市場(chǎng)進(jìn)行分析，并問(wèn)自己兩個(gè)問(wèn)題：

• 我們的應(yīng)用與競(jìng)爭(zhēng)對(duì)手相比有哪些不同？
• 我們可以在哪些方面做的比競(jìng)爭(zhēng)對(duì)手更好？

明確了這些方向性的問(wèn)題之后，再將注意力放在產(chǎn)品的設(shè)計(jì)與開(kāi)發(fā)上。

性能表現(xiàn)與設(shè)計(jì)

無(wú)論打造怎樣的產(chǎn)品，正確的方式方法都是至關(guān)重要的，這也是人們制定設(shè)計(jì)與工程準(zhǔn)則的初衷。一款汽車的設(shè)計(jì)會(huì)影響到它的空氣動(dòng)力表現(xiàn)；一座橋梁，除了要有漂亮的外觀，對(duì)風(fēng)力及交通負(fù)載的承受能力也是在設(shè)計(jì)過(guò)程中必須考慮的核心因素。同樣的道理也體現(xiàn)在移動(dòng)應(yīng)用的設(shè)計(jì)當(dāng)中。對(duì)設(shè)計(jì)方案的選擇會(huì)影響到應(yīng)用的各個(gè)方面，包括內(nèi)容呈現(xiàn)、交互性、視覺(jué)外觀，以及最重要的一點(diǎn)——性能表現(xiàn)。

我們可以發(fā)現(xiàn)，很多產(chǎn)品團(tuán)隊(duì)會(huì)將性能表現(xiàn)方面的責(zé)任丟給技術(shù)開(kāi)發(fā)人員；這種傳統(tǒng)觀念所造成的最直接的結(jié)果，就是很多涉及到性能方面的潛在問(wèn)題只有在設(shè)計(jì)流程的尾聲、開(kāi)發(fā)環(huán)節(jié)的初期才會(huì)暴露出來(lái)。實(shí)際上，技術(shù)開(kāi)發(fā)方面的相關(guān)角色應(yīng)該在產(chǎn)品創(chuàng)意初期就適度的介入到項(xiàng)目中來(lái)，保持對(duì)設(shè)計(jì)方案的技術(shù)可行性評(píng)審。

接下來(lái)要提到的一些與用戶界面性能表現(xiàn)相關(guān)的要素，以及本文后半部分將要介紹到的七個(gè)設(shè)計(jì)準(zhǔn)則，會(huì)幫助大家一點(diǎn)點(diǎn)認(rèn)識(shí)到，移動(dòng)應(yīng)用的性能表現(xiàn)絕不僅是技術(shù)人員需要考慮的問(wèn)題，它與設(shè)計(jì)之間關(guān)聯(lián)也是相當(dāng)密切的。

移動(dòng)應(yīng)用用戶界面中的性能要素

用戶對(duì)移動(dòng)應(yīng)用的性能表現(xiàn)的感知來(lái)自多方面，包括啟動(dòng)速度、界面加載時(shí)間、動(dòng)畫效果的流暢程度、對(duì)交互行為的響應(yīng)時(shí)間、出錯(cuò)狀況等。下面的示意圖向我們展現(xiàn)了這樣一些要素：應(yīng)用(包括視覺(jué)圖像、交互方式、內(nèi)容、功能、代碼算法等)在一定的硬件條件下(CPU、屏幕尺寸等)運(yùn)行在某個(gè)系統(tǒng)平臺(tái)(iOS或Android) 的移動(dòng)設(shè)備中。對(duì)于很多應(yīng)用來(lái)說(shuō)，它們還需要通過(guò)網(wǎng)絡(luò)(LTE、3G、2G)與服務(wù)器端進(jìn)行后臺(tái)連接。圖中上面 兩塊紅色區(qū)域所代表的，是一款移動(dòng)應(yīng)用產(chǎn)品中最容易受到設(shè)計(jì)與開(kāi)發(fā)決策影響的部分。下面兩塊灰色區(qū)域，屬于產(chǎn)品設(shè)計(jì)過(guò)程中需要考慮的牽制性因素。

對(duì)于圖中所示的每項(xiàng)因素的決策，都會(huì)影響到最終產(chǎn)品的性能表現(xiàn)。任何形式的組合、增強(qiáng)(例如高級(jí)的 視覺(jué)效果)或限制(例如糟糕的網(wǎng)絡(luò)連接狀況)都會(huì)增加產(chǎn)品復(fù)雜度，降低性能，破壞用戶體驗(yàn)。舉例來(lái)說(shuō)，如果為了增強(qiáng)視覺(jué)效果，應(yīng)用必須在緩慢的網(wǎng)速情況下，連接后臺(tái)服務(wù)器以獲取更多的資源文件——這就是一種勢(shì)必會(huì)降低產(chǎn)品性能的條件組合。

七個(gè)設(shè)計(jì)準(zhǔn)則

在過(guò)去的幾年中，移動(dòng)領(lǐng)域出現(xiàn)了很多變化。一些新的UI設(shè)計(jì)風(fēng)格開(kāi)始涌現(xiàn)，設(shè)備屏幕尺寸及處理器性能規(guī)格都在逐漸向桌面設(shè)備靠攏，輸入方式也發(fā)生了革命性的改變。

在這種情況下，設(shè)計(jì)師們需要一直努力去嘗試更加先銳的、特色鮮明、性能卓越的設(shè)計(jì)方案。我們所說(shuō)的設(shè)計(jì)與性能的關(guān)系，并非單純的指降低圖片尺寸一類；在設(shè)計(jì)流程的不同階段和不同層面中的各種決策，都會(huì)對(duì)產(chǎn)品的性能和功效造成影響。下面，就讓我們一起來(lái)了解一些可以在實(shí)戰(zhàn)中有效幫助我們打造高性能移動(dòng)用戶體驗(yàn)的設(shè)計(jì)準(zhǔn)則。

1.定義用戶界面的品牌特色

移動(dòng)應(yīng)用中的每一個(gè)可以與用戶產(chǎn)生互動(dòng)的地方，無(wú)論是單一的交互元素，還是功能模塊整體，都應(yīng)該有助于提升產(chǎn)品的品牌認(rèn)知度、用戶忠誠(chéng)度及滿意度；設(shè)計(jì)人員應(yīng)該有能力識(shí)別出它們當(dāng)中最關(guān)鍵的那些，例如特色功能、視覺(jué)風(fēng)格、文案、字體或動(dòng)畫效果等。我們的團(tuán)隊(duì)經(jīng)手過(guò)很多不同的產(chǎn)品，雖然從整體角度講，它們具有各自的品牌風(fēng)格，但這些設(shè)計(jì)方案大多是由同一套基礎(chǔ)UI元素衍生發(fā)展出來(lái)的。我們可以將基礎(chǔ)UI元素組合成為界面模塊，而組件化、可復(fù)用的核心界面模塊，則可以進(jìn)一步構(gòu)成整個(gè)用戶界面。

所以，經(jīng)由對(duì)這些UI元素的風(fēng)格設(shè)定，我們就可以逐步為界面整體打造出能夠體現(xiàn)品牌風(fēng)格的獨(dú)有特質(zhì)。在概念階段，試著將那些在以下幾個(gè)方面發(fā)揮關(guān)鍵作用的UI元素識(shí)別出來(lái)：

• 有助于提升產(chǎn)品差異化競(jìng)爭(zhēng)力的功能(例如Path中的照片檢視等)。
• 產(chǎn)品核心功能(例如在線購(gòu)物類應(yīng)用中的結(jié)帳功能)。
• 模式化的設(shè)計(jì)語(yǔ)言。Windows Phone 7的Metro UI是一個(gè)典型的例子：具有強(qiáng)烈風(fēng)格的字體、布局和交互等方面的模式，構(gòu)成了其獨(dú)特的設(shè)計(jì)基因。

這些能夠體現(xiàn)品牌特色的核心要素，本身要具有很強(qiáng)的響應(yīng)性。它們會(huì)被用戶不斷的看到、用到，而且會(huì)在產(chǎn)品不同的功能界面中被復(fù)用；它們的性能將直接決定一款應(yīng)用的整體表現(xiàn)。將設(shè)計(jì)與開(kāi)發(fā)的注意力放在這些關(guān)鍵要素上，將會(huì)是一件事半功倍的事情。

2.判定產(chǎn)品優(yōu)先級(jí)

對(duì)“功效”一詞的理解可以上升到整個(gè)產(chǎn)品研發(fā)周期及市場(chǎng)的層面上。很多時(shí)候，公司會(huì)希望快速上線一款新產(chǎn)品，或是開(kāi)發(fā)一個(gè)產(chǎn)品系列(例如基于一個(gè)平臺(tái)的多款同類產(chǎn)品，或面向不同平臺(tái)的單一產(chǎn)品)，亦或是出于時(shí)間和資源的限制，必須從多個(gè)產(chǎn)品中選擇一款來(lái)優(yōu)先完成。在這類情況下，設(shè)計(jì)與優(yōu)化的工作力量就必須集中在那些最重要的產(chǎn)品上。優(yōu)先級(jí)矩陣可以有效的幫助我們理清頭緒。

上圖所示的抉擇因素包括系統(tǒng)平臺(tái)、當(dāng)前用戶量、預(yù)期用戶量、競(jìng)爭(zhēng)對(duì)手情況；當(dāng)然，我們還可以從其他更適合自己項(xiàng)目的角度來(lái)進(jìn)行權(quán)衡。如果產(chǎn)品受眾多數(shù)是Android用戶，而且你的競(jìng)爭(zhēng)對(duì)手也在盯緊他們，那么與其將精力分?jǐn)傇诟鱾€(gè)平臺(tái)當(dāng)中，倒不如集中資源打造一款簡(jiǎn)潔高效的Android應(yīng)用并盡快投入市場(chǎng)。

3.認(rèn)清用戶需求

我們團(tuán)隊(duì)經(jīng)歷過(guò)的很多項(xiàng)目，在剛剛啟動(dòng)時(shí)都面臨著一些相似的問(wèn)題：功能需求列表過(guò)于冗長(zhǎng)，焦點(diǎn)不明確，難以在項(xiàng)目截止時(shí)間之前搞定…客戶或需求方通常會(huì)對(duì)產(chǎn)品功能進(jìn)行天馬行空般的想象，卻往往忽視了用戶的真正需求。

舉例說(shuō)，無(wú)論你是在一個(gè)小城鎮(zhèn)，還是牛津大街，或是在互聯(lián)網(wǎng)中，血拼的本質(zhì)目的，都是尋找合適的商品并進(jìn)行購(gòu)買。良好的用戶體驗(yàn)可以為購(gòu)物過(guò)程帶來(lái)更多的樂(lè)趣，但絕不能破壞這件事的核心目標(biāo)。用戶希望通過(guò)購(gòu)物類的應(yīng)用來(lái)快速的找到某種商品，并順利完成購(gòu)買；他們甚至?xí)鲆暷切┯糜谠鰪?qiáng)體驗(yàn)和樂(lè)趣的額外功能。

下圖展示了一款購(gòu)物應(yīng)用的商品詳情頁(yè)面的兩種設(shè)計(jì)方案。左邊的原型中包含了一些“高級(jí)”購(gòu)物功能，例如贈(zèng)禮、相關(guān)商品和用戶評(píng)價(jià)；而右側(cè)的原型簡(jiǎn)化了很多：去掉了贈(zèng)禮功能；只顯示該商品的整體打分情況，如果用戶需要，可以點(diǎn)擊鏈接查看全部點(diǎn)評(píng)；省出的空間用以顯示商品介紹的全文，用戶無(wú)需進(jìn)一步點(diǎn)擊就可以完整瀏覽。

顯然，右側(cè)的方案可以讓團(tuán)隊(duì)將設(shè)計(jì)與開(kāi)發(fā)的注意力放在核心功能上；從產(chǎn)品的角度，這也是最符合用戶的直接需求、最具性能功效的方案。那些“錦上添花”性質(zhì)的內(nèi)容和功能，即使真的有必要存在，也應(yīng)該是在我們對(duì)產(chǎn)品核心功能做了最充分的優(yōu)化和最合理的設(shè)計(jì)之后，才陸續(xù)登場(chǎng)，并且不能影響核心功能的可用性及性能表現(xiàn)。

4.優(yōu)化用戶界面流程和元素

用戶不喜歡等待。在Google的用戶體驗(yàn)十大內(nèi)在原則中，時(shí)間方面的因素緊隨“用戶需求”排在第二位。對(duì)應(yīng)用的每一個(gè)界面流程及其構(gòu)成元素的優(yōu)化，都可以不同程度的降低加載及響應(yīng)時(shí)間。

A.增強(qiáng)可感知性

在很多情況下，設(shè)計(jì)師和開(kāi)發(fā)者確實(shí)無(wú)法控制產(chǎn)品性能：網(wǎng)速也許會(huì)很慢，系統(tǒng)后臺(tái)也許正運(yùn)行著多任務(wù)，某個(gè)功能也許需要大量系統(tǒng)資源來(lái)支持運(yùn)算等等。無(wú)論怎樣，在延遲發(fā)生的時(shí)候，我們至少應(yīng)該讓用戶感知到應(yīng)用仍處于運(yùn)行狀態(tài)。即使在無(wú)法預(yù)料的壞狀況中，合理的設(shè)計(jì)方案也可以起到良好溝通作用。

第一步是要識(shí)別出哪些功能流程有可能造成延遲，例如那些需要獲取后臺(tái)數(shù)據(jù)或是執(zhí)行大量運(yùn)算的運(yùn)行過(guò)程。接下來(lái)，在這些關(guān)鍵流程中添加必要的狀態(tài)反饋標(biāo)識(shí)，例如loading動(dòng)畫效果，或是一些文案小提示。

下圖演示一個(gè)比較典型的內(nèi)容搜索流程：

用戶在這個(gè)流程中經(jīng)歷了四個(gè)步驟：

1. 點(diǎn)擊搜索按鈕。
2. 看到loading動(dòng)畫提示。
3. 看到了搜索結(jié)果中的文字內(nèi)容；這時(shí)圖片還在加載。
4. 看到全部圖文內(nèi)容。

顯而易見(jiàn)，比起從第一屏開(kāi)始經(jīng)歷一段等待時(shí)間然后突兀的直接進(jìn)入第四屏，將流程分為幾個(gè)短暫的步驟并給予狀態(tài)反饋的用戶體驗(yàn)要好的多。即使中間耗費(fèi)了同樣的時(shí)間，分步的設(shè)計(jì)方案也可以使應(yīng)用的性能在感覺(jué)上更加流暢高效。

另外一個(gè)典型的情景是應(yīng)用剛剛啟動(dòng)的時(shí)候。首先顯示一張適合該應(yīng)用風(fēng)格和布局的圖片，會(huì)降低用戶對(duì)加載時(shí)間的感知；同時(shí)配合loading動(dòng)畫提示一起使用的話，效果會(huì)更好。

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ī)格特性：拿圖片文件來(lái)說(shuō)，分辨率或色深會(huì)對(duì)渲染時(shí)間造成影響。在Android中，任何可繪制資源(jpg、png)都會(huì)被解碼為位圖格式。所以，每一張?jiān)诜直媛驶蛏罘矫娼?jīng)過(guò)優(yōu)化處理的圖片都可以節(jié)省出幾KB的樣子。
• 元素的輸出方式：這方面可以針對(duì)具體情況做不同的處理，例如對(duì)于需要一整張圖片作為背景的應(yīng)用來(lái)說(shuō)，如果主要內(nèi)容部分有自己的非半透明背景樣式，那么大背景圖片就沒(méi)有必要全部輸出了。

5.定義界面元素的權(quán)重規(guī)則

精心打造設(shè)計(jì)方案的過(guò)程，就好像在一片充滿障礙物的陸地上進(jìn)行探索；我們必須時(shí)刻對(duì)功能、外觀、可用性、性能表現(xiàn)等方面的因素進(jìn)行權(quán)衡和取舍。對(duì)于某些系統(tǒng)平臺(tái)來(lái)說(shuō)，設(shè)計(jì)師要做更多的妥協(xié)。然而，無(wú)論系統(tǒng)方面具有怎樣的限制，產(chǎn)品都必須保持自身的品牌特色。

我們可以通過(guò)一定的方法來(lái)判斷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)題欄的半透明效果。
• 非必要的：這類元素通常用來(lái)增強(qiáng)用戶體驗(yàn)，在必要的時(shí)候可以簡(jiǎn)化或移除。例如將搜索結(jié)果條目的數(shù)量由25個(gè)減為10個(gè)。

6.使用信息面板

團(tuán)隊(duì)之間的信息溝通，對(duì)于打造成功的產(chǎn)品來(lái)說(shuō)是必不可少的。我們經(jīng)歷過(guò)的很多項(xiàng)目中，設(shè)計(jì)、開(kāi)發(fā)、市場(chǎng)等部門的相關(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)測(cè)，并設(shè)定下一階段的目標(biāo)；一目了然的呈現(xiàn)方式更加便于團(tuán)隊(duì)之間對(duì)產(chǎn)品狀態(tài)、功能預(yù)期和設(shè)計(jì)開(kāi)發(fā)重點(diǎn)等方面的信息進(jìn)行及時(shí)的交流。

我們通常在信息面板中標(biāo)識(shí)以下幾個(gè)方面的因素：

• 核心功能需求：列出用戶在使用產(chǎn)品時(shí)將要經(jīng)歷到的核心功能。
• 基準(zhǔn)評(píng)分：列出重點(diǎn)競(jìng)爭(zhēng)對(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ì)方案通過(guò)相應(yīng)的技術(shù)方法實(shí)現(xiàn)出來(lái)，也不是一件易事。除了忠實(shí)的還原設(shè)計(jì)方案之外，要使代碼同時(shí)可以帶來(lái)高效的性能表現(xiàn)，通常需要專家級(jí)別的技術(shù)能力，尤其對(duì)于移動(dòng)應(yīng)用產(chǎn)品來(lái)說(shuō)，需要相關(guān)人員擁有豐富的前后臺(tái)開(kāi)發(fā)經(jīng)驗(yàn)，同時(shí)對(duì)視覺(jué)及交互設(shè)計(jì)等方面具有深刻的理解。

布局、圖像、動(dòng)畫的輸出和實(shí)現(xiàn)方式都會(huì)牽扯到功效方面的問(wèn)題；在選擇實(shí)現(xiàn)方案時(shí)，最好從一些具體的方面進(jìn)行考慮，例如：

• 智能化的內(nèi)容加載：可以在合適的地方使用例如lazy loading這樣的方式，首先加載當(dāng)前可視部分的內(nèi)容，并通過(guò)用戶的瀏覽行為觸發(fā)其他內(nèi)容的加載。這種方式可以很有效的提升界面功效，使體驗(yàn)更加流暢。
• 背景圖形的加載：背景的實(shí)現(xiàn)方式對(duì)界面性能的影響也是很關(guān)鍵的；通常情況下，背景圖形可以通過(guò)整張大圖、小圖重復(fù)平鋪或純樣式代碼等方式實(shí)現(xiàn)。對(duì)于不同類型的界面，需要采用最合適的實(shí)現(xiàn)方式。

某些項(xiàng)目中，設(shè)計(jì)和開(kāi)發(fā)等相關(guān)部門對(duì)于一款產(chǎn)品的責(zé)任是分離的；這種情況下，最終產(chǎn)品的用戶界面在外觀及性能等方面的表現(xiàn)必然也是缺乏統(tǒng)一性的。因?yàn)槊總€(gè)團(tuán)隊(duì)都有他們各自的目標(biāo)，所以在那些必須通力配合的地方，例如用戶界面性能優(yōu)化等方面，執(zhí)行力量往往無(wú)法集中。對(duì)于這樣的情況，我們的一種解決辦法是，將前端開(kāi)發(fā)方面的職能角色并入設(shè)計(jì)團(tuán)隊(duì)，這可以讓涉及到界面還原和前端效能等方面的開(kāi)發(fā)工作更加符合用戶體驗(yàn)設(shè)計(jì)的工作思路。

總結(jié)

通過(guò)本文，我們可以了解到，每個(gè)層面的設(shè)計(jì)工作都會(huì)對(duì)產(chǎn)品的性能表現(xiàn)造成不同程度的影響。所以在設(shè)計(jì)流程中，功效方面的因素是始終需要被考慮到的。否則，在隨后的相關(guān)流程中，性能方面的潛在問(wèn)題會(huì)越來(lái)越多的暴露出來(lái)。

對(duì)于這七個(gè)設(shè)計(jì)準(zhǔn)則，我們已經(jīng)成功的在很多產(chǎn)品的設(shè)計(jì)過(guò)程中中加以貫徹，并切實(shí)提升了產(chǎn)品在性能體驗(yàn)方面的表現(xiàn)，使它們看上去、用起來(lái)都很棒！

本站原創(chuàng)編譯文章。如需轉(zhuǎn)載，請(qǐng)注明：本文來(lái)自Be For Web

英文原文:

http://www.smashingmagazine.com/2011/07/18/seven-g…

譯者信息:?C7210?– Web設(shè)計(jì)與前端玩家，現(xiàn)就職于大眾點(diǎn)評(píng)網(wǎng)產(chǎn)品部用戶體驗(yàn)設(shè)計(jì)組(UED)