28
Google Glass Developers - Design - Wei-Tsung Su ( 蘇蘇蘇 ) [email protected] 09/09/2014 (Ver. 1.0) Ubiquitous Computing and Ambient Networking Laboratory 1

Google Glass - Unit01: Design

Embed Size (px)

DESCRIPTION

Google Glass Design

Citation preview

Page 1: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 1

Google Glass Developers- Design -

Wei-Tsung Su ( 蘇維宗 )[email protected]

09/09/2014 (Ver. 1.0)

Page 2: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 2

About Me

Assistant Professor, Dept. of CSIE, Aletheia University, Taiwan

Project Management Professional

Someone who is interesting in writing technical articles except papers?!

Page 3: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 3

Change LogDate Ver. Authors Description

09/10/2014 1.0 Wei-Tsung Su Google Developers – Glass Developers - Design

Page 4: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 4

Google GlassGoogle Glass 目前還只是一個實驗的計畫

目前 Google 還在透過 Explorer Program 致力於修正使用者介面 (UI) 與使用者體驗 (UX)

嗯 ! 我覺得我們還是做手錶就好

了 !( 設計旁白 )

Page 5: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 5

系統規格 (Explorer Edition 2.0)• 相機

– 照片: 5 百萬畫素– 影片: 720p

• 聲音– 骨傳導技術 ( 魔音傳腦 ?)

• 連線– IEEE 802.11b/g– Bluetooth

• 儲存– 1GB RAM– 16 GB Flash (12 GB 可用 )

• Battery– 570mAh

那麼哪裡買的到 Glass?

https://www.google.com/glass/start/

準備美金 1,650 元 ( 含稅 ) 就可以成為 Glass Explorer

Page 6: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 6

使用者介面 – Timeline

Home PastPresent / FutureSetting

... ... ...

• Timeline 為 Glass 主要控制介面,其中 Card 為主要元件–卡片 (Card) 人生 ?–系統內建• Home Card• Setting Cards

Page 7: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 7

使用者介面 – Timeline – Card

• Static Card– 顯示靜態資訊的卡片– 很少 ( 甚至不會 ) 更新– 通常用做資訊通知

• Live Card– 顯示即時資訊的卡片– 根據環境動態更新– 可存取感測器資料

靜態訊息 根據羅盤動態改變內容

Page 8: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 8

使用者介面 – Immersion

• 脫離 Timeline 的全客製化使用者介面

Page 9: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 9

使用者介面 – Menu

• Card 和 Immersion 都可以利用 Menu 來進行其他動作

Page 10: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 10

使用者介面 – Home Card

• 特性– 位於 Timeline 的中心–喚醒 Glass 時會出現–提供系統層語音與觸控命令

• 語音命令– 「 ok glass 」

Page 11: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 11

Glassware 設計原則• Google Glass App 稱作 Glassware

– Google 很重視 Google Glass 的使用者介面 (UI) 和使用者體驗 (UX) ,所以要求 Glassware 符合特定的設計樣式 (design pattern)

• Glassware 的設計原則– 為 Glass 重設計– 需要時才出現– 提供相關資訊– 避免干擾雜訊– 以使用者為本

– 資料來源: https://developers.google.com/glass/design/principles

Page 12: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 12

Glassware 設計原則 – 為 Glass 重設計

建議:不要想用 Glassware 去取代智慧型行動裝置上的 App ,而是讓兩個裝置能夠互補。

Page 13: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 13

Glassware 設計原則 – 需要時才出現

Glass 的設計原則是當你需要時它才出現;當你不需要時它會滾蛋。 

Page 14: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 14

Glassware 設計原則 – 提供相關資訊

在對的地點、對的時間提供對的資訊給使用者。

Page 15: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 15

Glassware 設計原則 – 避免干擾雜訊

不要太頻繁地在不對的時間傳送資訊 ( 最好都不要 ) 。

Page 16: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 16

Glassware 設計原則 – 以使用者為本

使用圖像、口語、或自然的手勢來設計人機介面。

Page 17: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 17

「 ok glass 」語音命令設計原則• 聚焦在動作 (action) ,而非下命令。例如,

– take a picture – start camera

• 降低動作的反應時間。例如,– listen toair supply– listen to musicselect air supplyplay

• 是否口語化 (colloguial) 且容易說。例如,– tale a picture– take a photography

• 是否可以應用在不同的 Glassware 上。例如,– listen toair supply– listen to air supply

• 資料來源: https://developers.google.com/glass/design/patterns

Page 18: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 18

設計樣式 – Periodic notifications

Page 19: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 19

設計樣式 – Ongoing task

Page 20: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 20

設計樣式 – Immersion

Page 21: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 21

視覺設計 – Card Regions

Page 22: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 22

視覺設計 – Main layout

Page 23: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 23

視覺設計 – Full bleed with text

Page 24: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 24

視覺設計 – Author and content

Page 25: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 25

視覺設計 – Left image or column

Page 26: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 26

視覺設計 – List

Page 27: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 27

結論• 沒有 code? 沒有,這一集只講設計 (design) 。• 請期待下集 !

Page 28: Google Glass - Unit01: Design

Ubiquitous Computing and Ambient Networking Laboratory 28

Q & A