一個好的第一印像對於每一段關係來說是十分重要的。人們總是在追尋信任及真誠，並且期待可以透過後續的相處去讓他們的第一印像變得更好。這事兒套在品牌和產品設計上也是一樣的，設計就是扮演著這麼重要的角色：去建立與使用者的關係以及維繫品牌的承諾。
用戶期待他們的移動通訊服務是有價值、高性能的且易於使用的，然而，因為在設計中的種種限制，常常不能滿足使用者對於手機服務的所有要求，你們可能會小看了這件事的重要性，這些與用戶體驗相關的設計對使用者來說是不可以被忽視的，事實上，用戶使用體驗的設計應該被列為手機設計中的十分關鍵的一環。
在這篇文章中，我們將討論與設計有關的七條守則，透過這些守則，可以幫助你在性能與外形設計上符合使用者和企業的需要。我們團隊曾經在不同的平台上設計多元移動通訊產品的App，而此七條守則是建立在那些過去的經驗上。
原文：Seven Guidelines For Designing High-Performance Mobile User Experiences
翻譯、編輯: Ennis Chen@DamnDigital
移動通訊產品的性能表現
人們在不同時間、不同的地點透過他們的通訊產品去提高生產力，並且讓生活變得更加舒適、有趣，像是在等公交車的時候、走在人行道上的時候、尋找在哪個月台搭車的時候。在多元的使用環境中，移動通訊的App設計必須得聚焦在一個核心功能上，而這個核心功能的速度要快以及是令人信賴的。
但這與事實正好相反，我們發現很多移動產品的設計週期總是以高美感為第一訴求，設計出很多令人驚嘆”這真是太好看了！”的產品。當然，那些令人驚豔的視覺設計也總是會在第一次的接觸中快速抓住消費者的眼球，但是長久的使用過程絕對和產品的品質息息相關，而這些也都與App的表現是切割不開的。如果一個App看起來很棒，但卻不太好用，這會將損害你們的信譽，使用者其實很快會發現你們的App很緩慢或是就像壞了一般，如此的情況不只是會讓人不堪使用、更會破壞你們的品牌。使用者期待的是一個高速且反應靈敏的App，如果你的App不是如此，它的評價就會變很低，然後會去使用的人將變得越來越少。
從視覺上來說，Twitter的App(圖左)似乎沒有Cookmate(料理小幫手)(圖右)來的酷炫好看，
但在App Store中，Twitter的App評價相對是好很多的。
App的性能讓你的品牌與眾不同
每一項產品的使用經驗都影響著用戶對你的品牌觀感。使用者總是會去尋找最好的工具來使他們的生活變得更美好。為了吸引更多的用戶群，越來越多的App被設計出來，你得想點法子讓你的App與眾不同，像是做一些別人沒有做過的App，或是同樣的東西比別人做的更好。 性能的表現是關鍵要素，這直接的讓你的品牌和別人的區隔出來。如果要更進一步，就好好突破你們在性能技術上的挑戰，讓使用過程變得更順暢，這絕對會讓你們產品的銷售有一定的突破，而且其他的競爭者也很難模仿。
Flickr iPhone App就是一個很好的例子，Flickr在一般互連網中的兩大目標是：幫助人們去使用他們的照片，以及透過新的方式去管理相片及視頻。你知道嗎？ Flickr App完全實現了這兩大目標，因此也讓他們的品牌承諾更加完整。
Flickr在實現品牌承諾上表現的很好
因此，當你要規劃設計一套App時，你最好要好好分析一下市場，並且試著去問問自己以下這兩個問題：
（1）這App和其他的競爭者有什麼區別？ （2）要如何讓這套App表現的比競爭者更好？
然後，好好努力在你們最重要的三個目標之上。
一個關鍵的設計過程
任何一種產品的製造設計模式都需要受到重視，一些經典的設計和工程的準則總是會被世人津津樂道著。像是汽車的設計會影響在運作時的空氣動力學，一座無論如何美麗的橋也是得讓讓車與人能在上頭走過。移動通訊的應用程序設計也是一樣的，App的設計影響著它的功能、內容、互動性和逼真感，這也等於是影響了整體的表現。
我們在不少產品開發團隊中都發現，其實產品最終的性能更多地取決於開發人員，如果開發者不能很好地考慮性能與功能表現方面的因素，而把這一部分完全交由設計師來完成，已經為時過晚。不過為了要創造更多的可能性，開發中的一些細節在創意發想時中就必須要被考慮進去的。運用以下七條守則，去思考與移動通訊介面設計相關的因素（請見下一章節），你將會了解要使用戶達到高性能的體驗不只是在做編碼活而已，開發端的努力是一個重要的關鍵！
在荷蘭鹿特丹的伊拉斯瑪斯橋。 （圖：Wikipedia）
是什麼在影響移動通訊介面的表現？
關於性能的表現是建立在以下幾個功能上：開機時間、頁面loading的狀態、切換頁面動畫的流暢度、誤差和等待時間。下圖說明了這些功能的因素：”App”（與他的圖像表現、互動、內容、功能與編碼）在“移動”設備上的運行具有有著特定的技術（CPU，屏幕大小等）和平台（ Android，iOS等）。在不同的案例中，App以一些平台（LTE、3G、2G）和網絡連接至後端，（下圖）上面兩因素是被設計與開發團隊影響著，而下面兩個因素則是需要考慮一些裝置上的限制。
影響性能的因素
每個對於以上這些要素的決定都會影響性能的表現。這是一種相互影響的狀態，不管像是增強（如進階的視覺效果）或限制（如網絡覆蓋差）皆有可能會影響他的效率。舉例來說，為了要從後端加載一些進階的圖像內容，你就得冒著緩慢網速的風險，這些相互影響後的結果都會減弱程序的性能表現。
七條守則
在過去幾年中，我們看到了移動平台的巨大改變。新的傳播介面開始不斷的出現，屏幕和處理器進化得和桌上型電腦一樣先進，而輸入機制也有了重大的改變。
在這些日新月異的科技改革所產生的限制中，設計師需要不斷的嘗試去創造更尖端、更令人耳目一新和更高性能的產品，這些不僅僅是去減少圖片大小的問題而已。不同層次的設計決策和設計過程將會產生重大的影響。讓我們來看看在不同的設計層面，已被證明是有用的七項工具，指引你實現高性能的移動用戶體驗。
1. 定義使用介面的品牌特性
在每位使用者在使用App時，要能讓他們感受出品牌的故事且增加認同、忠誠度以及滿意度。我們需要去辨認App中的哪些元素和品牌形像有關的，像是功能、視覺效果、措辭、字體和動畫。我們的設計團隊在不同的團隊裡面做不同的產品，這使得我們可以用以一些簡單的使用介面元素做出更多元的變化。去界定我們App的核心要件可以讓用戶使用率增高、防止別人模仿，更可以優化設計與製程。
我們建議去界定使用介面的元素(如上列之功能、視覺效果等)，如此便可以創造出有自己獨特風格的核心要件，在概念成形階段， 可以依照以下的一些規則去定義那些元素：
- 使App有差異化（例如：選擇不同的照片瀏覽路徑）
- 關鍵功能的展現（例如：登出店舖時的接口）
- 設置特定的設計樣式（例如： 把一些重點截圖放在頭部背景之上）
微軟為Window Phone 7設計的介面體現了字體、排版與綜合佈局的完美整合，
創造出一種屬於他自己的設計DNA。
核心的識別標誌要十分顯眼的，使用者會不斷的看見這些識別標示，而這些標示也會被運用到不同的產品介面裡。如果讓設計和製程依循著一系列的識別元素，則可以倍數提高品牌的識別度。
2. 關注產品組合
一個公司若想要很快的發表他的產品、或想去發展產品組合（如：不同的產品在同一平台、同一產品在不同的平台或是同樣的產品在同一平台上）抑或是面對時間與資源的種種限制時，是十分難判斷到底應該先關注哪一部分。我們認為設計和製程應該關注在產品的組合上，產品組合才是最重要的事。一個產品順序的矩陣可以給我們很大的幫助，去了解哪項產品的設計應該最優先處理。
不同的產品順序的矩陣之例（以不同產品在不同的平台、不同的客戶數量與競爭者的分類來決定設計的順序）
我們得去關注最重要的部分，如此可以讓整體的努力表現投注在投資報酬率最高的區塊。假設你預期的顧客都在使用Android手機，而你的競爭者也對準了這群用戶，那麼去付出努力在設計更優雅和高效的Android App就會比去分心去設計其他使用平台上的App更為有價值。
3. 了解核心使用者的使用情節
我們的團隊過去曾面對很多不同項目的發布，在最初的要去完成一些產品要求的時程裡，多半耗時長、抓不到重點以且幾乎很難去實現。事實上，當公司準備要做某一樣產品時，常常會忽略使用者需要我們解決的需求通常是非常特定的（他們的需求不是如此不著邊際）。
舉例來說，如果你去購物（先不管那些應酬與尋找靈感等等的事兒）通常是要買某樣產品，不論是在一個小城市、倫敦的牛津街（奢侈品聚集地）或是在互連網上，都是在找尋你想要的。當然如果能讓整體的購物體驗有趣些當然更好，但最重要的事兒還是得買到你想要的東西。在設計購物的App上也是一樣的（不論是買遊戲、音樂或是優惠卷），不論你所設計的其他功能是否可以讓整體使用體驗更豐富，但一定得讓使用者可以很快的找到想買的東西以及購買，
下面的插圖顯示了在一家商店購買信息頁的兩種設計，左圖是比較進化後的版本，像是有送禮的功能、還有一些相關產品以及銷售店家的評價。而右圖則是側重於購買的功能上。如果使用右圖的設計可以優化公司想傳達的概念，團隊不會被設計一些樣式給轉移注意力。只有把基礎的核心功能做好，再加上那些特色樣式才會有意義，只要那些特色樣式別阻礙了核心使用者的使用情節。
兩種不同的購買信息頁面
在產品在定義的過程中，為了要專注在開發設計產品上，我們需要去了解那些核心使用者的使用情節。
4. 優化使用流程和元素
使用者不喜歡等待。 （Google把” 我們以千分之一秒來計算搜索時間”作為處理使用者體驗中的第二大信條）。去優化使用頻幕、流程以及元素可以讓使用者的操作速度更加快速，也減少了他們在使用過程中去想”這簡直在浪費我時間”。
A. 讓App使用者感覺速度加快
設計者不可能總是控制App的表現，有可能是因為網絡速度慢；或是使用者本身的裝置在後台運行其他的任務；某些任務會需要更多的運算力。如果使用者最終感覺他們不是在讓費時間，那麼他們可能會對App有個更穩定的印象，其實有些設計可以傳達這個訊息，就算是真的有些使用上的延遲。
第一步是去找出哪些是造成延遲的關鍵（如獲取後端數據、執行大量運算等）。第二步是去放一些額外的步驟說明當正在延遲時，讓使用者認為這些延遲是必要的（也可以設計一些loading的動畫、或是顯示一些重要的小竅門等等的資訊）。
下面這組圖片是要展示在搜索內容時可能的步驟：
使用者在此會經歷以下的四個步驟：
1. 點擊搜索按鈕
2. 看到loading動畫
3. 看到一部分只有文字和圖片預留位置的表列（這是可以被儲存到App裡頭的）
4. 看到真正的圖片縮圖
試想使用者直接從第一步驟跳至第四步驟，他們一定會感覺等待了很久。
（請見下圖）另外一個例子是當App開始準備loading時，你如果先展示了和你App設計有關的圖片，這會讓使用者覺得此App特別快。然而，如果在第一個畫面加入了一個簡單的進度通知訊息，也有可能讓使用者認為速度正在加快。這也可以避免使用者認為這好像根本還沒開始要loading。
iPhone 上Facebook App的loading畫面
B. 優化使用介面的元素
每一個UI的元素都會影響App的表現，且每一項優化都會反應到整體的表現上，所以每個元素都應該被仔細考量後使用。一些設計的關鍵請看：
- 頻幕上的元素 在頻幕上UI元素的數量和样式皆會影響在頻幕上的表現。舉例來說，一些多媒體（音訊、視頻和地圖）的影響會大於那些單一的元素（靜止的圖像等）。
- 元素的特點 一個元素的特點，像是它的清晰度或圖像的大小都會影響繪圖運算時間。例如，在Android上，每個可以使用的規格（JPG，PNG）都會被解碼成點陣圖(bitmap)格式，所以每一個被優化過的圖像可以減少一些大小。你能減少色彩濃度或降低解析度嗎？
- 繪圖技術 UI元素在App上的繪圖方式會影響loading的時間，舉例來說，當整個頻募得背景圖正在loading時，會和一個放在更上層的巨大且不透明的圖一起處理嗎？你能不能為了整體的上傳的速度把整個背景切割成小的圖片？
5. 去定義UI縮小的規則
去建構一個最生動的App設計像是在許多有障礙的地方進行導航，你必須要持續地平衡所有的功能、美學、實用性以及各種表現。有些平台要求UI有比它者更多的折衷空間，不論平台有多少限制，對於品牌最關鍵的識別仍然要保留下來。
以下是我們建立的UI的縮小規則，這些規則可以透過相對重要的UI元素去幫忙你的設計，某些元素對於你的品牌識別來說是非常重要的，有些元素則是你移除了他也不會造成太大的影響，請見下列幾項不同的類別：
- 重要的：這部份是指品牌的核心UI識別（參見守則一），舉例來說，一個App的頭部。
- 可替代的：此項相對於上一項是較為不重要的，但對於高端的解決方案來說是有利的，會降低App在表現上的負擔。像是以不透明的元素替換掉透明的元素。
- 可選擇的：這些元素可以被移除，並且仍然保持一定的App表現。像是減少搜尋選單的項目數量，從原本的25項，減少至10項。
1. 重要的（頭部）2. 可替代的（使用不透明色塊而不是透明的）3. 可選擇的（減少選單的長度）
6. 使用性能分析表格
當要生產一個很棒的產品時，清楚的溝通管道在團隊中是非常重要的。我們遇到很多情況是行銷人、設計師以及開發者對產品有著不同的期待，因為App的表現是被不同的要求所影響著，那些要求像是為了符合一些守則、對App的性能的期許等，而這些要求本身也會產身一些限制。那麼如何去解決呢？我們在此想要介紹性能分析表格， 這個表格可以幫助你們去測量、檢視以及去設定每個產品現狀的目標。性能分析表格可以有效幫助不同的產品現狀、團隊期待及關注層面進行溝通，我們以下列一些元素來說明此表：
- 核心使用者的使用情況：確保此表格和使用者的使用經驗是連結在一起的
- 競爭者的定位：和重要的競爭對手比較你的產品定位
- 現狀分析：展示目前產品的運行狀況
- 目標：設定App的表現目標
- 現狀：指出App目前所處的狀態與目標的差距
性能分析表格的例子
很多工具都可以幫助你去測量你的App表現，你可以主觀的來測量，藉由人工的紀錄時間以及一些任務，或是客觀的用一些工具，像是在Android SDK上以TraceView來評測（如果你是在開發一些原始的App的話）。
7. 如果要當第一，就以UI工程技術來決勝負
設計和科技總是密不可分。要在使用者經驗上有很好的表現是需要專業技術的支持，這不只需要從前端到後端的知識以及對於設計目標的深厚了解。
對於版面樣式的配置、圖片以及動畫等等的運用，在所有需要注意的事情之上，我們有兩點想分享給你們：
- 聰明的加載機制 聰明的加載機制，像是延遲圖片載入，如果遇到圖片，他會先跳過，讓網頁上其他的內容優先載入，當其他的網頁物件載入完成後，再換圖片進行載入（這樣就不會因為圖片的關係而讓網頁卡在圖片讀取中），可以使讀者的閱讀經驗更加順暢！
- 背景加載 這是另一個廣為人之的例子。性能的表現仍然還是要看其背景圖是一張大的圖片或很多小部分，抑或是一個純粹的運算。最好的解決方法還是得依照不同的狀況而定。
在很多情況裡，一個責任常常是需要營銷團隊、設計團隊以及開發團隊一起來擔的，我們注意到UI的表現常常會在這些分工中被忽略，每個團隊都有他們自己的目標，所以一些需要共同擔起的責任，像是UI的表現，大家就會忘記它的存在。我們以設計團隊中前端的編碼專家說明了這件事，這讓我們專注在優化UI的實踐和表現，優化後的使用者經驗會更加流暢！
結論
我們已在上述的七條守則中以不同的角度介紹了和App使用表現的相關建議。每一項設計的考量都會影響App的表現，而這些使用表現應該在設計過程被認為是最重要的影響因素。然而不幸的，設計團隊們常常是在搞壞了使用過程之後，才認知到這件事情的重要性。
我們已經成功地為一些相應的產品介紹這些守則，這些是可以幫助去改進你們的產品性能，也可以幫助你們團隊增加一些消費者使用經驗的意識。到此，我們也可以試著去轉換最初對於App的要求：從”這必須要看起來超棒！”到”這必須要看起來超棒、感覺起來超棒、使用起來也超棒！”
來源：http://www.damndigital.com/archives/27138
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy