第28課

watch設(shè)計(jì)規(guī)范與技巧

兒時(shí)的夢想

Class

SKYFALL007大破天幕危機(jī)

oorr可以攝制高清視頻、拍攝高清圖片、錄制優(yōu)質(zhì)聲音、

用于視頻會(huì)議或者視頻聊天的電腦攝像頭、大容量

/BHaURffllUMKBEHalBinafllDcv

基本概念?MVnvcmB1M■KBIlbHBK3SB存儲(chǔ)設(shè)備,最后才被當(dāng)作顯示時(shí)間的手表。

*KIUK"SSXlMRFIRi卿Nh-SI

NOVEMBER9IHIMAX

Class

基本概念?

當(dāng)監(jiān)測到你前面有一個(gè)拐角時(shí)，智能手表會(huì)發(fā)射脈沖震動(dòng)。你離拐角越近，脈沖震動(dòng)便越頻繁。

在你即將拐彎之前，智能手表會(huì)向正確的拐彎方向如果你選擇了正確的拐彎方向，智能手表會(huì)發(fā)

發(fā)出強(qiáng)烈的“嗡嗡"聲。出一個(gè)積極鼓勵(lì)的信號(hào)

Class

基本概念?

假設(shè)你現(xiàn)在在公園里聽一場音樂會(huì)，然而你的一名家庭成員卻迷了路。

首先在iCloud賬戶家庭分組中找到他的名字。

點(diǎn)擊頭像，智能手表通過發(fā)射聲波脈沖來定位尋找他。當(dāng)你離他越近時(shí)，你的智能手表會(huì)發(fā)射出越多

的聲波脈沖。

“叼S?y

Class

基本概念?

Class

基本概念-

兩大陣營

Class

基本概念?AndroidwearApplewatch

Class

AndroidWear

MOTO360LGGWatchRSONYSmartWatch

Class

基本概念?AndroidWear

TicwatchHuaweiWatch

Class

基本概念?

Google在發(fā)布第一款A(yù)ndroidWear的時(shí)候就同步推出了設(shè)計(jì)規(guī)范，AndroidWear的設(shè)計(jì)規(guī)范

與MaterialDesign風(fēng)格上有很高的相似度，為了保證設(shè)計(jì)的一致性建議手機(jī)APP的設(shè)計(jì)風(fēng)格最

好采用MaterialDesign,這也是Google現(xiàn)在提倡的統(tǒng)一平臺(tái)和各個(gè)交互間的用戶體驗(yàn)。

Class

卡片流

基本概念?

口口口Lr

Class

支持手勢

基本概念?

長按點(diǎn)擊語音手掌

Class

基本概念?

5:00

1：00：03

15mins細(xì)

1.42miToHome

Recording..

PlaymusicofflineGetGPSsupportSeeweatherCheckcommutes

114

SFO-YYZ+

OCheckagain

Departs8:05pm

Terminal3

AirCanada612

TheGemCaf6/114bpm

GetremindersTrackflightsTrackfitnessStayconnected

Class

基本概念?

Class

基本概念?

Class

基本概念?

基本概念?

Class

■

基本概念?

■WATCHAWATCHSPORTAWATCHEDITION

年W空■■率It■?亮BX?色??空加包B??化名金?強(qiáng)、?金?&?盒?臾1X6*

?.■■的8X?，??.Cifl

n??.

Class

基本概念?

Class

基本概念?

10：09

基本概念

Class

基本概念-

ul規(guī)范

Class

基本概念?

為AppleWatch而設(shè)計(jì)

Class

基本概念-個(gè)人化：

AppleWatch是面向穿戴而設(shè)計(jì)的，

所以其UI需要與佩戴者自身相協(xié)調(diào)。

抬起手腕的動(dòng)作可以使AppleWatch

顯示當(dāng)前時(shí)間及通知信息。通過〃傳

心跳〃或〃傳畫〃-這些全新的溝通方

式是極具個(gè)人色彩的。

AppleWatch設(shè)計(jì)應(yīng)用的時(shí)候，時(shí)刻

留意這種個(gè)人化的關(guān)聯(lián)是非常重要的

Class

整體

基本概念?AppleWatch旨在使硬件與軟件的邊界

更加模糊。數(shù)碼表冠是經(jīng)過精心打造的實(shí)

體控件，幫助用戶在軟件當(dāng)中進(jìn)行精巧的

導(dǎo)航操作。

?TapticEngine

可以與提示信息或界面操作結(jié)合起來,

為用戶提供微妙的觸覺反饋。

?ForceTouch-一種可以由硬件感知

按壓力度的觸摸方式-為軟件的情境

化控制方式帶來了一個(gè)全新的維度。

Class

基本概念?輕量

AppleWatch應(yīng)用在設(shè)計(jì)上要注重快速、

輕量的交互流程，并充分利用屏幕顯示空

間及其位于手腕位置的這一重要特性。

Class

基本概念?

AppleWatch

必須配合用戶的iPhone才可以運(yùn)

行你的應(yīng)用

Class

Watch應(yīng)用支持兩種導(dǎo)航方式

基本概念?

層級(jí)式Stocks

ApfMinC.

107.57

這種方式與iOS的導(dǎo)航風(fēng)107.74

格相吻合，最適用于擁有層級(jí)

1Z56022

化信息結(jié)構(gòu)的應(yīng)用，

10C.70108.19

ACACC7

Hierarchical

Class

Watch應(yīng)用支持兩種導(dǎo)航方式

基本概念?

頁面式

?基于頁面的界面形式允許用戶

通過橫向輕掃的手勢在不同的

內(nèi)容頁之間進(jìn)行導(dǎo)航。

?這種模式最適用于那些數(shù)據(jù)模

型簡單、且不同頁面之間不存

在直接數(shù)據(jù)關(guān)聯(lián)的應(yīng)用。

Class

-V

基本概念OGO

oO

eO?

你不能將以上兩種導(dǎo)航方式組合起來使用。在設(shè)計(jì)階段,必須從兩者當(dāng)中選擇

一種最適于你的應(yīng)用內(nèi)容的方式，并以此為基礎(chǔ)進(jìn)行設(shè)計(jì)。

無論使用哪種導(dǎo)航方式，你的應(yīng)用都可以模態(tài)化的呈現(xiàn)內(nèi)容。模態(tài)化界面可以

使用戶不受干擾的完成任務(wù)或獲取信息，但是相應(yīng)的，他們將暫時(shí)無法與應(yīng)用

當(dāng)中的其他部分進(jìn)行互動(dòng).

Class

交互方式-手勢

基本概念.

你不能在應(yīng)用中添加任何定制化的手勢。

系統(tǒng)已經(jīng)代你制定了標(biāo)準(zhǔn)的手勢行為：

■通過縱向輕掃使當(dāng)前界面滾動(dòng)。

-通過橫向輕掃在基于頁面導(dǎo)航的界面之間前后查看。

-從屏幕左邊緣向右輕掃,可以返回父級(jí)界面。

?輕點(diǎn)選項(xiàng)控件或其他交互元素.

AppleWatch不支持多指手勢，例如捏合等。

Class

交互方式-手勢

基本概念?

按壓(ForceTouch)

?如此小屏只能容納為數(shù)不多的界面控

件,因此蘋果帶來了一種全新的交互方

式:按壓。

?正如可以感知到普通的輕點(diǎn),Watch

的Retina屏幕同樣可以靈敏的感知

到按壓。按壓用來喚出與當(dāng)前界面相

關(guān)的情境化菜單(如果有)。

?你可以在應(yīng)用中使用這種菜單來展ForceTouch

示與當(dāng)前內(nèi)容相關(guān)的各種操作選項(xiàng)。

Class

交互方式-手勢

基本概念?

數(shù)碼表冠(TheDigitalCrown)

可以精準(zhǔn)滾動(dòng)的實(shí)體控件,使瀏覽長頁面

等任務(wù)變得更加輕松，而且屏幕不會(huì)被手

指遮擋。

Class

基本概念?

Glance

Glance是AppleWatch當(dāng)中的一種

快捷視圖功能它能將應(yīng)用當(dāng)中的重要信

息提取出來，并以簡明的形式呈現(xiàn)。

AppleInc.

?基于里板AAPL

?不可滾動(dòng)107.74

?只讀66°+1.51(+1.42%)

Cupertino

?非強(qiáng)制Sunny

H：70L：46

?底部區(qū)域預(yù)留給點(diǎn)狀頁碼指示符IioIn1

Class

基本概念?

GlanceTemplates

Class

Invitation

Housewarming

Partyand...

HugoVerweij

基本概念?

WFwn

LongLookSaturday,Jan.17

3PM-4PM

Ournewplace!

?應(yīng)用內(nèi)容可以被頭部框所覆蓋，也可180Montgomery

以與其下邊緣相接SanFranciscoCA

?LongLook通知當(dāng)中最多可以顯示Accept

4個(gè)自定義按鈕

Maybe

?配置頭部框的顏色以對應(yīng)你的品牌Decline

Dismiss

Class

基本概念?

模態(tài)表單(ModalSheets)

?模態(tài)界面的左上角用來放置關(guān)閉按鈕

?如果任務(wù)當(dāng)中需要〃接受〃操作你還需

要在模態(tài)界面當(dāng)中添加接受按鈕

?保持模態(tài)任務(wù)的簡潔

Class

交互方式-手勢

基本概念.

模態(tài)表單(ModalSheets)

?模態(tài)界面的左上角用來放置關(guān)閉按鈕

?如果任務(wù)當(dāng)中需要”接受〃操作，你還需

要在模態(tài)界面當(dāng)中添加接受按鈕

?保持模態(tài)任務(wù)的簡潔

Class

布局

基本概念?

-并排放置的按鈕數(shù)量要控制好。

?充分利用左右兩個(gè)邊緣之間的全部空間。

?使用相對位置來布局界面元素。

Class

布局

基本概念?

?界面中的元素應(yīng)該按照自上而下、AnalogDigital

向右的順序排布。

?文字按鈕要使用全屏寬度

?通過情境菜單來呈現(xiàn)次級(jí)操作。

GraphHybrid

38mm42mm

基本概念?

340pi

應(yīng)用界面所呈現(xiàn)的內(nèi)容在不同規(guī)格的AppleWatch當(dāng)中應(yīng)該保持

一致。在設(shè)計(jì)布局時(shí)，要使界面元素可以自如的伸縮，以便充分利用

不同規(guī)格的屏幕空間，326ppi

Class

色彩

基本概念?<Today10：09

Pickupbirthday

使用黑色作為應(yīng)用的背景色。

?cakeforBetty

■使用應(yīng)用當(dāng)中的關(guān)鍵色來呈現(xiàn)品牌或8AM—9AM

狀態(tài)信息。

Teammeeting

?為文字內(nèi)容使用高對比度的顏色。9AM-10PM

?色彩來暗示按鈕或其他控件的交互性。I

?考慮到色彩障礙用戶。LunchwithRene

I12PM-1：15PM

Class

文字

基本概念

?Apple開發(fā)了一套無襯線字體，叫做Label10：09

SanFrancisco,為AppleWatch的Headline

易讀性做過專門處理，包含23種變化。

Subhead

中文為華文黑體

Body

?盡可能使用系統(tǒng)內(nèi)置字體Caption1

?盡可能在應(yīng)用全局使用同一種字體Caption2

Footnote

當(dāng)你手動(dòng)為系統(tǒng)字體指定字號(hào)時(shí)，點(diǎn)

?CustomFont

(point)的大小將決定著使用哪種字號(hào)ColoredLabel

SanFrancisco字體建議使用19點(diǎn)或更小字號(hào)。SanFrancisco的Display字體應(yīng)該用于20點(diǎn)或更大的字號(hào)

Class

動(dòng)畫效果

基本概念?

漂亮而精妙的動(dòng)效遍布于AppleWatch當(dāng)中,將更具吸引力和動(dòng)感

的體驗(yàn)帶給用戶。

?傳達(dá)狀態(tài)信息才是供反饋。

?以可視化的方式讓用戶看到操作結(jié)果。

Class

UI元素

基本概念?10：09

標(biāo)簽(Labels)Housewarming

partyI

3/9/1510：09AM

可以顯示任意數(shù)量的靜態(tài)文字。

?Evans,

?不支持用戶交互。We'vemovedinto

ourapartment...

?可以由程序來更新內(nèi)容。andithasaroof-

?可以包括多行文字。topdeck.Comeby

Class

UI元素

基本概念?WorldClock10：09

圖片(Images)LONDON

5：09PM

Today'

?確保圖片尺寸適用于不同規(guī)格的Apple+7HRS

Watch。不要為了適配不同的屏幕規(guī)格而NEWYORK

對圖片進(jìn)行拉伸或壓縮。要對應(yīng)著每種屏1：09PM

Today

幕規(guī)格提供尺寸最為精確的圖片素材。+3HRS

?所有的圖片資源都是@2x。不存在非

Retina屏幕的情況。

Class

UI元素

基本概念?Settings10：09

按鈕(Buttons)

?按鈕寬度要充滿全屏。?AirplaneMode

?保持按鈕高度一致。。

Bluetooth

?按鈕的圓角樣式可以將其與其他類型的界

面元素區(qū)分開來。標(biāo)準(zhǔn)的圓角半徑是像

6DoNotDisturb

Class

UI元素

基本概念?

列表(Tables)

列表會(huì)以單列的形式分行呈現(xiàn)數(shù)據(jù)。

?支持多行內(nèi)容展示

?可滾動(dòng)

?可以設(shè)置背景色或背景圖片

Class

UI元素

基本概念?

開關(guān)(Switches)

?用于指示一個(gè)元素的二元狀態(tài)。

?通常包含標(biāo)簽說明。

Class

UI元素

基本概念?<TextSize10：09

滑塊(Sliders)Appsthatsup-

portDynamic

Typewilladjust

?-由一條橫向滑軌及其左右兩側(cè)的圖標(biāo)toyourpreferred

按鈕組成。readingsizebe-

low

?通過自定義圖標(biāo)使滑塊的意義更明確。

如果不使用自定義圖標(biāo),系統(tǒng)將默認(rèn)使

用加減號(hào)作為按鈕。

?通常包含標(biāo)簽說明。

Class

UI元素

基本概念?

菜單(Menus)

在AppleWatch上使用按壓手勢可以喚

出與當(dāng)前界面相關(guān)的情景菜單。

?可以顯示一到四個(gè)操作按鈕。

?操作只作用于當(dāng)前屏幕。

?每個(gè)操作按鈕都要有圖標(biāo)和標(biāo)簽。

?使用是非強(qiáng)制性的。

Class

UI元素

基本概念?

圖標(biāo)

系統(tǒng)首屏的圖標(biāo)均是圓形。下表列出了不O口??

同的直徑規(guī)格及用途。設(shè)計(jì)為全出血的矩?????

形圖片，系統(tǒng)會(huì)臼動(dòng)添加圓形遮罩。?！颉觫?/p>

0(>>?

Class

基本概念?38mm42mm

MenuImageCanvasandContentSize

圖標(biāo)模板下載/watch

Class

基本概念.

素材AppleWatch(38mm)AppleWatch(42mm)

通知中心圖標(biāo)29pocels