2011/07/22

設計高效能行動裝置使用體驗的七大方法

本篇文章節錄&翻譯自Smashingmagazine.com


定義介面的品牌特徵 / Define UI Brand Signatures



努力找出哪些元素最能凸顯品牌的身份!
這些元素可能是功能、視覺(效果)、用詞、字體或動畫。

定義出"核心構成區塊"才能鼓勵元素的重複使用,減少"重新創造一個輪子"。
然後才能不斷精煉出一組設計,並實做出一組有共同含義的元素。

定義出整體使用者介面核心區塊中元素,創造介面獨特個性

概念階段可以先做:
  • 差異化這個App(如何作得跟Path裡面的相片檢視功能不同?)
  • 描述出關鍵功能(像是線上商店的結帳功能)
  • 為設計語言的模式給個定論(可能是個標題)
Windows Phone 7's Metro UI 就是個用標題、字體、版面及互動方式建立出獨特設計DNA的例子

核心的特色元素必須是最具互動性的,因為使用者在使用過程中經過不同的功能操作都會在使用者視線中不斷出現!聚焦在這些關鍵元素的設計及實作上,不論如何的精進這些東西最終效果一定會以倍數程度回饋,正所謂「半功倍」!




產品線上聚焦 / Focus the Portfolio of Products

不論要快速上市,開發整個產品線(一個平台上有多個產品、同樣產品在多個平台上或兩者都是)、時間/資源有限都得要畫出區隔,忍痛割捨!

設計及其精鍊的功夫必須花在最重要的產品上。優先對照表可以幫我們排出順序:

對照目前使用者數及估計使用者數,雖然競爭者眾,但仍可聚焦切入


定義出核心使用者的故事 / Identify the Core User Stories

舉例:有個購物的目標就是找到商品然後買下它。不管是在小城市、倫敦大街或是往路上,就是要把商品找到,然後買下來。我們可以讓購物的過程更有趣、更舒適,但核心目標永遠都是尋找然後購買!這點應該永遠永遠不會變。

如果是個購物軟體,買遊戲/音樂或折價券都一樣道理,使用者就是想要迅速的找到並買到商品,無論過程中的哪幾個小功能是否讓整個經驗更豐富、更多變化。

同樣是購買軟體的介面,左邊多了當禮物送給別人的按鈕、相關產品、及Review列表。
右邊則只有App介紹及Review總值。你覺得哪個比較聚焦?
右邊的介面專注在購買上,強化整個購物平台故事中的"購物"元素。專注的同時也可以人員不受其他設計或細微功能的干擾。一旦不干擾核心故事的鋪陳跟敘述了,其他功能才能逐步加入。



最佳化介面流程及元素 / Optimize UI Flows and Elements
使用者不喜歡等。

盡量最佳化每個畫面、流程、介面元素來減少等待時間,不要給使用者有浪費時間的感覺!


A. 讓使用者感覺的效能加速


設計師無法隨時都控制效能。網路可能很慢、機器可能後端在執行某些工作或是大量計算。
如果使用者幾乎感覺不到在浪費時間,這個app就可以有個穩固的好印象!
設計師可以協助降低效能的落差給人的不快。

第一步驟就是找出會出現延遲的流程,像是讀取後端資料、進行大量運算等。
第二步驟就是盡量導引使用者渡過這些延遲,像是加上一些載入過場動畫、顯示一些有用小技巧等等。

像這個顯示內容搜尋的過程:

大致四個步驟:
按下搜尋
過場動畫
顯示文字的值及佔位圖片(預設圖片)
讓實際的預覽圖片出現

這樣可以讓使用者認知到這是一個逐步的進展,而不是延遲。

B. 對每個獨立的介面元素最佳化


每個元素都會有影響!一點一滴的改善最後對整體效能的改善影響也很大的!
怎麼找呢?

螢幕上的元素:
不同數量或類型的元素都會影響螢幕的效能,過多動態元素載入一定跟簡單的固定圖片載入速度不同。

元素的特性:
解析度、像素多寡都會影響載入時能否被系統最佳化後顯示。

繪圖技巧:
需要整個螢幕重繪嗎?還是只要更新螢幕小區域上的元件呢?後端可以把檔案拆解成最小區塊後再上傳嗎?




定義出介面調整的規則 / Define UI Scaling Rules

弄出一個吸引人的設計就像是在一個充滿限制的疆域中探險。它得不斷在功能、美感、使用性及效能之外取得平衡!有些平台就是要求介面高於其他,但不論如何,品牌的特徵依然得凸顯出來!

訂出每個介面元素的重要性以其該元素對整個品牌身份的貢獻度,以下有幾個方法:

1.重要的:
重要的就是核心介面特徵,像是app的標題。

2.可替的:
可替代的元素不需要太要求,可能是個很棒的解法但對效能影響不大。像是用不透明的元素取代透明的元素。

3.選項:
有些元素可以更豐富使用體驗,但拿掉的話可維持一定的效能。舉例像是一個搜尋結果列表原本顯示25項改為只有10項。





調出效能儀表板(?) / Use a Performance Dashboard

團隊中不同的人對產品效能的期望都不同(行銷、設計或開發者),最終在各方拉扯之下都得達到一個大家都同意的結果。這時候就要靠效能儀表板來觀察了!儀表板紀錄的項目有以下幾個:

核心使用者故事(Core user stories):
用來確認儀表板有真實傳達使用者經驗

對照組(Benchmark):
與競爭者的app作比較

目前測量結果(Current Measurement):
顯示目前產品開發狀態下的效能

目標(Goal):
設定一個app最終的效能目標

影響達到目標的狀況(Status):
指出哪些app的狀況會影響達到最終的目標


表中數字代表秒數,在3G連線情況下

可以自己手動量,寫程式的話當然就靠traceview直接跑結果。









2011/07/18

資訊界跟國外差距是幾年呢

如果說國外設計領域領先國內20年,是因為他們會花大量時間在做事前分析,找到為什麼這麼做、有哪些方法可以做、要怎麼做,最後才是產出。那資訊界跟國外差距是幾年呢?

2011/07/01

less is more

最近我在對ExpiredPrj進行bug修正時,對加入IMG到畫面上的像框裡的功能一直不是很滿意。
不管是選擇檔案、或是直接拍照,有時後圖就是太小,有時候圖卻太大!真的很困擾!
後來研究了一下Bitmap的旋轉跟縮放功能後,參考的範例是做好了這兩種功能,直覺我就想把兩個SeekBar都擺到畫面裡去。
結果好不容易設計過的畫面竟變得無法一目瞭然,還得用ScrollView去包所有的component!
天人交戰之下,我發現縮放功能其實是可以拿掉的,為什麼呢?
user選圖後還要讓user去縮放,實在是不夠聰明!
應該只要留下旋轉的SeekBar,而圖片的縮放應該由程式自行處理,畢竟圖片框的大小也是開發者去設定的!
捨棄一個縮放的SeekBar,節省空間!讓沒有介面的程式做掉!
也許又會有人說這樣的工具不夠自由,Well~至少這邊有專業考量,請予以尊重!不爽不要用!哈~