collect by Fanny Hsu at MSI

1. Android 4.0以上
設計規範

2. 設計原則1
Design Principles
讓我著迷
驚喜
一個漂亮的界面，一個精心準備的動畫，
或一個適時的聲音效果都是體驗的樂趣。
就像邊界提示的斜面效果。
真實的觸摸對象
直接操作比按鈕、選單的設計好。
它讓人們減少執行任務的認知負擔，同時
可以滿足情感需求。
個性化
人們喜歡增加個人的東西，它讓人們感覺
更親切、更有控制感。提供實用、美觀、
有趣的預設效果，並讓人們可以自己設定。
記住人們的習慣
可以學習人們的習慣，記住使用者的使用
行為，不要一遍一遍重複地問。

3. 設計原則2
Design Principles
簡化我的生活
簡潔地表達
使用簡單的句子，人們看到長的句子會
不自覺地跳過。
為我作決定，但我要有決定權
盡力去猜而不是詢問使用者，同時為了
預防你的猜測是錯誤的，必須提供後退
的功能。
圖片比文字更好理解
使用圖片可以獲得人們更多的注意力，
比文字更有效率。
只在我需要的時候顯示我需要
的內容
人們看到太多選擇會不知所措。把任務
和訊息打散成一個個小的、容易操作的
内容。隱藏不必要的操作選項。

4. 設計原則2
Design Principles
簡化我的生活
讓我知道我在哪
這讓使用者可以得到自信，每個畫面應
該要不一樣，提供回饋讓使用者知道每
個頁面的關係。
如果看起來一樣，操作方式應
該也一樣
避免那些看起來差不多、使用起來卻不
一樣的樣式，功能的分辨上可利用視覺
作更明顯的區隔。
不要丟失我的內容與設定
記住使用者花時間設定的東西，並保持
各個裝置的同步，可以使升級成為容易
的事情。
真的很重要時才打斷我
幫使用者擋住不必要的騷擾。除非是講
求時效的事情才可以打斷。

5. 設計原則3
Design Principles
讓我驚艷
給我一些通用的操作
使用者自己學會一些事情的時候會感覺
良好，並利用其他app已有的方式操作，
不斷地鼓勵
拆解複雜的步驟成為容易的小步驟，很
小的改變也要給出回饋。
不是我的錯
使用者在使用app的時候會期望它很智
慧，如果有問題要給清楚的除錯指引，
而不是技術細節。
幫我完成繁雜的工作
幫新手順利完成他們沒有想過自己會的
工作，會讓他們覺得自己是個專家。
例如相機濾鏡。
讓重要的操作更快
並不是每個功能都一樣重要，要決定哪
些才是最重要的功能。
例如相機按鈕和音樂播放器的暫停。
明顯的設計使用起來會更加靈敏。

6. Styles
版本差異
4.0
Ice Cream
Sandwich
雪糕三明治
4.1~3
Jelly Bean
雷根糖
4.4
KitKat
雀巢奇巧巧克力

7. 版本市佔率
Google 2014/1/13
59.1％
16.9％
1.3％
21.2％
0.1％
Kitkat
1.4％
整個android 4.0以上用戶比例已達77.4%
成為Android系列的主流

8. Android 4.0
為求平板規格統一
版本名稱 特點
Ice Cream
Sandwich4.0
1. Android Beam 交換分享技術（NFC）
2. People App聯絡人資料跟社教網路
同步
3. 全新Roboto字體
4. ios文件夾整理功能
5. Face Unlock人臉辨識解鎖
6. 主應用程式界面Tab化
7. 強化相片影片攝影功能
8. 相片整理界面優化
9. 文字輸入介面改良
10. 容量與機能資訊偵測顯示
11. 畫面開鎖新設計
12. Gmail收發介面微調
13. 硬體主鍵消失，以虛擬按鍵取代
14. Voicemail快慢播放
15. 多任務介面

9. 版本分布
google 2014/1/13
整個android 4.0以上用戶比例已達77.4%
成為Android系列的主流

11. Android 4.1
更多的平板最佳化
版本名稱 特點
Jelly Bean4.1 1. 提昇流暢度：像牛油般順滑
2. 邊界提醒時會發光
3. 可安裝widgets在桌面並自動調整
其大小
4. 鍵盤輸入預測下一個字
5. Google Now
6. 定時同步
7. Camera功能介面更新
8. 通知介面可以直接從上方展開、
可以左右swipe關閉通知、電話、
訊息的通知可以直接在通知介面
處理
9. Android Beam 數據傳輸
10. 離線語音紀錄
11. 螢幕解鎖時可直接打開相機功能
12. 支援多使用者、多頁面

12. Android 4.2
4.1-4.3皆為jelly bean
版本名稱 特點
Jelly Bean4.2 1. 多用戶使用同一裝置
2. 支援手勢輸入鍵盤
3. Daydream螢幕保護裝置功能
4. 支援多頁面解鎖和解鎖頁面上安裝桌面掛
件
5. 通知介面可以直接從上方展開，用兩手指
向下滑可以直達快速設定選單
6. 由右向左滑可以直達拍照頁面
7. 通話紀錄可以分成全部、未接、已接等紀
錄查看
8. 來電時頁面也顯示Google Now的捷徑
9. Miracast無線顯示分享功能:手機直接向
電視傳輸音訊和影片
10. 為盲人設計的語音輸出、手勢模式導航功
能
11. Google Now新增Gmail登入資訊作為資
料來源，或根據您的所在位置，提供個人
化搜尋結果
支援鍵盤手勢輸入

13. Android 4.3
4.3-4.4
這個版本比較沒什麼變化
版本名稱 特點
Jelly
Bean
1. 藍牙低功耗
2. 增加多紋理支援
3. 支援音量鍵拍照
4.3 4.4

14. Android 4.4
4.3-4.4
這個版本比較沒什麼變化
版本名稱 特點
kitkat 1. 大幅度改變介面：半透明
2. 全螢幕時遮蓋狀態欄和導航欄
3. 加入雲端功能
4. 硬體多工處理
5. 電視支援：裝置可以作為電視遙控器
6. 加入計步器功能
7. 通知欄的許多種類訊息可以展開直接處
理
8. 全新NFC支援電子交易等
9. 左右滑動的選單介面
10. 螢幕側錄功能支援
11. 系統內建系統狀態監控功能
12. 全部支援Roboto字體
4.3 4.4

15. 介面比一比
4.3 vs 4.4
4.3 4.4OLD

16. 介面比一比
4.3 vs 4.4
更銳利的透明卡
聽音樂時解鎖螢幕是全螢幕的背景圖
4.3 4.4

17. 介面比一比
4.3 vs 4.4
Google Now
變成search 也是 Launcher
幾乎都以半透明作UI設計
4.3 4.4

18. 介面比一比
4.3 vs 4.4
全新完成任務選擇設計
時間選擇介面也作了改變
鬧鐘功能
4.3 4.4
4.3 4.4

19. 下載介面可利用分類瀏覽in Kitkat
4.3 vs 4.4

20. 介面比一比
new in 4.4
全螢幕模式
以及內建的任務、系統狀態管理
可利用NFC功能進行支付
動作

21. UI overview
介面總覽4.4

22. 介面總覽
基本系統介面
Navigation bar
導航列
放置了設備、頁面之間的切換鍵
Status bar狀態列
顯示電量、系統資訊之位置。

23. 介面總覽
home/app切換
APP介面
瀏覽你所有安裝的APP
最近任務介面
使用者最近使用的app捷徑，
同時進行的所有任務。
Home介面
可自訂及收藏app的介面。

24. 介面總覽
基本app UI
動作列
導航指示包括，ICON、名稱、以及層級指示。通常系統鍵返回最上層，導航BACK鍵則是返回該應用程式的所屬上一層。
動作顯示「更多選項」、更新等功能。
最頂層次可以開啟drawer。

25. 介面總覽
動作列
動作列
動作列的主要目的：
* 突出重要的操作（如搜尋）。
* 支持一致的導航和APP圖標的切換。
* 通過把少用的操作收起到「更多動作」，以减少混亂。
*為你的APP提供一個專用的空間。
LOGO圖標
放置了APP的識別
返回
提供上一層的導航指示
視覺控制
切換相關的其他內容選
項
快捷操作鈕
搜尋、影片
更多操作
將較不重要的功能
放在這裡
2
1
1主功能列
2次功能按鈕列
3情境動作列
3

26. F頻繁
你的使用者是否在訪問這個介面的時候，十次中有七次會使用這個操作？
他們通常會連續使用幾次嗎？
每次使用都會繁複地增加額外操作嗎？
I重要
你希望大家都發現這個操作，因為它特別酷或有賣點嗎？
是否在某些情況下需要很容易就能操作？
T典型
在相似的app中是否把這個操作視為典型的第一層級操作？
在使用情境中，如果把它放在更多操作裡，使用者會感到驚訝嗎？
介面總覽
動作列-按鈕設計準則
Q : 哪些操作要放動作列？哪些要放在更多操作裡呢？

27. 介面總覽
通知欄
通知欄
通知欄內容會是一行訊息一行標
題（增加到第三行也是OK）。 點擊為呼叫、左右滑動是移除該訊息。
Stack from same app
多條訊息堆疊時會打開一個app的總覽畫面。
單條訊息則會打開一個指定畫面。
例如一封email或是未讀超過三封的email是不一
樣的。
訊息通常不會用顏色區分、所使用
的次要icon也會是黑白的。
Icon是使用者用來區分訊息來源的
一個重要提示。

28. 介面總覽
方向變換
注意面向變換
不論使用者如何改變方向，介面都應該有相同功能。
1保持畫面平衡（拉伸/壓縮，但功能必須保持相同的）
2堆疊、重新組織使之適應橫向使用（將畫面重新排版）
3加強/展開 顯示重要訊息
4顯示/隱藏

29. Patterns
介面模式

32. 介面模式
設計準則
避免設計下方tab不要設計「返回」名稱的按鈕不要在列表內設計向右箭頭
別模仿不同平台的圖標
圖標的設計不能照抄。
ios share android share

33. 介面模式
圖標設計
為全部螢幕做好準備
由於ANDROID裝置有各種螢幕大小，因此你需要為不同的螢幕分率提供適合的尺寸，才可以保證你的APP在任何上面都
漂漂亮亮。
ICON標題名稱為ROBOTO字型。 DPI（螢幕顯示密度單位），又
稱dots per inch (dpi)，指的是在
一呎(2.54公分)的螢幕真實尺寸
中所運用來顯示圖像的像素。
150％
Launcher圖標 48 x 48 dp
Action Bar Icons 32 x 32 dp
Small / Contextual Icons 16 x 16 dp
Notification Icons 24 x 24 dp
Google play上架圖標 512 x 512 dp
dp被定義為一個pixel(像素)在一個160
dpi上的範圍。因此從dp轉成pixel的公
式為px = dp * (dpi / 160)

34. Thank you
我只整理整體到純
粹UI架構的部份
有些黑色頁面的資料是直接複製於
李易修大大曾經整理過的PPT內容
喔~
此報告非商業用途，純粹工作分享，
謝謝