藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

這個(gè)月晚些時(shí)候，眾望所歸的Apple Watch會(huì)帶來(lái)成千上萬(wàn)的手表應(yīng)用，沖擊應(yīng)用市場(chǎng)，吸引你的注意。由于屏幕尺寸更小，又始終戴在手腕上，交互方式也有所不同。要在Apple Watch上創(chuàng)造一個(gè)美觀、舒適的體驗(yàn)，需要新的設(shè)計(jì)方式。本文將帶你入門(mén)。

本文中，你將學(xué)習(xí)如何通過(guò)一些基礎(chǔ)理論和準(zhǔn)則，為Apple Watch設(shè)計(jì)應(yīng)用，借此初探可穿戴設(shè)備設(shè)計(jì)。

應(yīng)用結(jié)構(gòu)

Apple Watch應(yīng)用有3部分：WatchKit App、Glance界面和通知。每種都有不同的目的，面臨不同的設(shè)計(jì)挑戰(zhàn)。

WatchKit App

WatchKit App是查看應(yīng)用數(shù)據(jù)或與之交互的主要手段。它通常從手表主屏進(jìn)入，但也可以從Glance或通知進(jìn)入。

很重要的一點(diǎn)，要知道WatchKit App*只有兩種類型的導(dǎo)航——層級(jí)式和頁(yè)面式*。雖然iOS應(yīng)用可以編寫(xiě)出自定義導(dǎo)航，但WatchKit App限制很嚴(yán)格，目前并不支持。

層級(jí)式非常適合相對(duì)復(fù)雜的應(yīng)用，類似很多現(xiàn)存iPhone應(yīng)用，用戶在其中需要進(jìn)行一系列的選擇，然后到達(dá)結(jié)束界面。牢記Apple預(yù)期用戶在10秒內(nèi)突擊使用手表，所以別在手表上照搬現(xiàn)成應(yīng)用，應(yīng)該將它升華。

頁(yè)面式通過(guò)橫向滑動(dòng)，讓用戶在多個(gè)頁(yè)面間穿梭。如果各頁(yè)數(shù)據(jù)并不依賴其他頁(yè)面，這種導(dǎo)航方式更佳。

開(kāi)始設(shè)計(jì)時(shí)，想清楚什么數(shù)據(jù)對(duì)用戶最重要，相互關(guān)系如何，然后選擇最適于體現(xiàn)數(shù)據(jù)的導(dǎo)航結(jié)構(gòu)。

Glance

Glance是一系列可瀏覽的內(nèi)容，基于時(shí)間或環(huán)境，穿戴者從最喜歡的應(yīng)用中挑選而出。在Apple Watch上上滑可以觸發(fā)Glance，然后可以水平滑動(dòng)。Glance不是必須的，所以并非所有應(yīng)用都具有，或者需要。

Glance被限制在無(wú)法滾動(dòng)的一屏中，所以你得把最有用、最重要的信息展現(xiàn)在屏幕上，可以通過(guò)顏色、不同字號(hào)和圖片來(lái)在視覺(jué)上區(qū)別你的Glance。在Glance上點(diǎn)擊任何地方，會(huì)打開(kāi)手表應(yīng)用。所以要避免在其中包含按鈕、滑塊和菜單這樣的操作項(xiàng)。

最后，Glance基于一些模版。所以你的設(shè)計(jì)要選擇一種最能體現(xiàn)數(shù)據(jù)意義的形式。Apple提供了一系列模版，適用于上半屏和下半屏。

通知

Apple Watch應(yīng)用有兩種通知狀態(tài)，分別叫做short-look和long-look界面。用戶首次收到通知時(shí)，short-look通知會(huì)出現(xiàn)，持續(xù)較短一段時(shí)間。用戶可以降低手腕忽略通知，也可以抬起手腕或點(diǎn)擊short-look通知，進(jìn)入long-look查看詳細(xì)信息和功能。

由于手表始終戴在手腕上，你得對(duì)通知有所限制，只推送最有用的信息。如果你持續(xù)被不重要的消息打斷，那是很令人厭煩的。最好的通知會(huì)使用用戶的環(huán)境信息——比如位置、時(shí)間或活動(dòng)——來(lái)提供實(shí)時(shí)、相關(guān)的信息。

short-look界面包含應(yīng)用圖標(biāo)、應(yīng)用名稱和通知的標(biāo)題。由于標(biāo)題是你唯一能控制的東西，它需要為通知的內(nèi)容提供簡(jiǎn)短的提示。

所有應(yīng)用的long-look界面結(jié)構(gòu)都是一樣的。頂部顯示應(yīng)用圖標(biāo)和名稱（也可以自定義這一條的顏色），底部是忽略按鈕。中間是定制內(nèi)容，至多4個(gè)自定義操作按鈕。

交互方式

除了手機(jī)上那些我們熟悉的日常手勢(shì)——點(diǎn)擊和滑動(dòng)，Apple Watch提供了兩種新的交互方式：

滾輪

應(yīng)用可以通過(guò)滾輪來(lái)滾動(dòng)，不會(huì)像手指滑動(dòng)那樣擋住屏幕。滾輪尤其適用于長(zhǎng)頁(yè)面的滾動(dòng)。

按壓

Apple Watch的屏幕可以區(qū)分點(diǎn)擊和按壓。就像鼠標(biāo)的右鍵單擊一樣，按下可以顯示當(dāng)前界面的菜單，其中包含至多4項(xiàng)相關(guān)內(nèi)容。
雙指縮放這樣的多點(diǎn)觸控手勢(shì)在手表上是沒(méi)有的。

布局

Apple Watch有兩種尺寸——33mm和43mm。小屏幕尺寸是340×272像素，大屏幕是390×312像素。手表的一大特點(diǎn)是retina屏，就像iPhone那樣，你要提供兩倍分辨率大小的圖片。

你不必提供不同尺寸的圖片（雖然可以這么做），也不必設(shè)計(jì)兩套不同的布局。因?yàn)锳pple使用相對(duì)尺寸和距離，圖片和組件會(huì)縮放充滿可用空間。

設(shè)計(jì)應(yīng)用時(shí)，Apple建議用黑色背景來(lái)配合外框。相比淺色，深色與亮色的搭配更好。由于外框提供了額外的邊距，占滿可用空間、按滿屏寬度設(shè)計(jì)非常重要。

至于按鈕，Apple也建議滿屏寬。不過(guò)，如果你有并列按鈕，應(yīng)該用圖標(biāo)代替文字。一行中不建議包含3個(gè)及以上按鈕，因?yàn)槠聊惶?。同一屏中的按鈕應(yīng)該高度相同，以保持視覺(jué)一致性。

顏色

由于是在深色背景上設(shè)計(jì)，你得在應(yīng)用中使用明亮、高對(duì)比度的顏色。顏色也可以作為你應(yīng)用品牌的一部分。

每個(gè)應(yīng)用可以定義一個(gè)“主色”，它會(huì)顯示在狀態(tài)欄的標(biāo)題和通知的應(yīng)用名稱上。還可以自定義long-look通知的頂欄顏色。

動(dòng)畫(huà)

美觀、細(xì)致的動(dòng)畫(huà)可以提升用戶體驗(yàn)，使應(yīng)用更迷人、更具誘惑力，令人過(guò)目不忘。設(shè)計(jì)手表上的動(dòng)畫(huà)時(shí)，要確保它足夠迅速，而且確有其目的。如果動(dòng)畫(huà)阻滯了用戶獲取他們所需的信息，則會(huì)損害用戶體驗(yàn)。

在Apple Watch上創(chuàng)作動(dòng)畫(huà)時(shí)，你可不能給工程師一張GIF圖，然后讓他動(dòng)態(tài)實(shí)現(xiàn)。你得提供每一幀的獨(dú)立靜態(tài)圖片，來(lái)制作更快速和流暢的動(dòng)畫(huà)集成。最佳方式是將你的動(dòng)畫(huà)文件導(dǎo)入After Effects或Photoshop，提取出獨(dú)立的每一幀。

Context menu

Context menu至多顯示4個(gè)操作項(xiàng)，它表現(xiàn)為一個(gè)帶有標(biāo)簽的圓形圖片。點(diǎn)擊某個(gè)操作項(xiàng)或屏幕上的任意位置，菜單收起。設(shè)計(jì)Context menu時(shí)無(wú)需考慮顏色。就像iOS應(yīng)用的標(biāo)簽欄圖標(biāo)一樣，Context menu的圖標(biāo)是模版內(nèi)置圖片，顏色僅僅定義了圖標(biāo)的形狀。

對(duì)于Context menu，你得給每個(gè)圖標(biāo)提供兩種大小的圖片。在42mm的手表上，圖標(biāo)的線寬通常比38mm版多1像素。

字體

Apple開(kāi)發(fā)了一套無(wú)襯線字體，叫做San Francisco，為Apple Watch的易讀性做過(guò)專門(mén)處理，包含23種變化。雖然你也可以用自定義字體，Apple建議使用內(nèi)置文字樣式，因?yàn)樗鼈兪菍樾∑聊?span style="width:auto;height:auto;float:none;" id="8_nwp">設(shè)計(jì)的。

使用Apple系統(tǒng)字體的另一項(xiàng)好處，是標(biāo)簽過(guò)長(zhǎng)時(shí)文字會(huì)自動(dòng)縮放。隨著字號(hào)增大，字間距會(huì)減少。如果要指定字號(hào)，那么San Francisco字體建議使用19點(diǎn)或更小字號(hào)。San Francisco的Display字體應(yīng)該用于20點(diǎn)或更大的字號(hào)。

應(yīng)用圖標(biāo)

像iOS主屏圖標(biāo)一樣，Apple Watch也需要一個(gè)應(yīng)用圖標(biāo)。和iPhone不同，iPhone以方形顯示應(yīng)用圖標(biāo)和名稱，Apple Watch是圓的，不包含標(biāo)簽。這就使你的圖標(biāo)必須比iOS應(yīng)用圖標(biāo)更容易辨識(shí)和熟悉，同時(shí)表達(dá)出它的作用。

為這么小的屏幕設(shè)計(jì)應(yīng)用圖標(biāo)時(shí)，簡(jiǎn)潔為先。在炫目的應(yīng)用圖標(biāo)海洋中，圖標(biāo)是用戶打開(kāi)應(yīng)用前首先看到的東西，所以你得通過(guò)優(yōu)美的圖標(biāo)設(shè)計(jì)留下良好的第一印象。

設(shè)計(jì)不同尺寸的圖標(biāo)，來(lái)適配兩種手表尺寸和各個(gè)展現(xiàn)圖標(biāo)的界面。系統(tǒng)會(huì)自動(dòng)為圖標(biāo)加上圓形蒙版，所以圖標(biāo)應(yīng)該依據(jù)Apple提供的指南做成方形圖片。

可以下載這個(gè)好用的Apple Watch圖標(biāo)模版來(lái)生成圖標(biāo)。

基礎(chǔ)之外

Apple Watch為用戶提供了一種不唐突的數(shù)據(jù)獲取方式，這對(duì)他們至關(guān)重要。通過(guò)理解一款應(yīng)用的結(jié)構(gòu)、交互方式和最佳設(shè)計(jì)原則，我們可以在Apple Watch上打造更加美觀、討人喜愛(ài)的體驗(yàn)。

要深入學(xué)習(xí)入門(mén)，請(qǐng)看Apple Watch人機(jī)交互指南，并且下載Apple Watch設(shè)計(jì)資源，里面有一系列模型、參考、模版和字體。

關(guān)于討人喜愛(ài)的可穿戴設(shè)備體驗(yàn)設(shè)計(jì)，更多細(xì)節(jié)、竅門(mén)和資源請(qǐng)看為可穿戴設(shè)備而設(shè)計(jì)。這是一門(mén)免費(fèi)課程，讓你一步一步經(jīng)歷Apple Watch的應(yīng)用設(shè)計(jì)。