UI設(shè)計(jì)基礎(chǔ)的內(nèi)容占據(jù)了Apple Watch 人機(jī)交互指南文檔中40%的篇幅，它不僅詳細(xì)解釋了UI設(shè)計(jì)的規(guī)則，還仔細(xì)講述了這么設(shè)計(jì)的原因所在，你可以從這些稍顯拗口的文字中看到Apple Watch的另一個(gè)側(cè)面：嚴(yán)謹(jǐn)。這些深思熟慮的細(xì)節(jié)（哪怕你不喜歡），和那些野生的“智能手表”有著巨大的差別。

5、Modal Sheets

Modal Sheets 的優(yōu)缺點(diǎn)都很明顯。它讓用戶可以無(wú)干擾地完成任務(wù)、獲取信息或者繼續(xù)在Force Touch菜單中做選擇。為了實(shí)現(xiàn)這一點(diǎn)，Modal Sheets會(huì)暫時(shí)阻止用戶同APP的其他部分進(jìn)行交互。

在設(shè)計(jì)的時(shí)候，你最好能將APP的模式體驗(yàn)盡可能最小化，一般而言，在以下情況下可考慮創(chuàng)建模式內(nèi)容：

?當(dāng)吸引用戶的注意力成為至關(guān)重要的事情
?當(dāng)為了避免用戶數(shù)據(jù)處于模棱兩可的狀態(tài)，而需要完成一個(gè)獨(dú)立的任務(wù)，或者需要明確地放棄某個(gè)任務(wù)的時(shí)候

模式界面包含單個(gè)屏幕界面，或者包含多個(gè)分頁(yè)屏幕界面。兩種界面唯一的區(qū)別是后者在分頁(yè)底部有小圓點(diǎn)指示。

在模式界面的左上方的位置留給關(guān)閉按鈕。當(dāng)用戶點(diǎn)擊點(diǎn)擊左上角這個(gè)按鈕（或者在做邊緣互動(dòng)操作的時(shí)候），系統(tǒng)會(huì)關(guān)閉模式界面而不會(huì)進(jìn)行更多的操作。 關(guān)閉按鈕是系統(tǒng)強(qiáng)制顯示的，不會(huì)被隱藏，但是你可以改變顯示的內(nèi)容（比如close改成cancel）。這也意外著你無(wú)需再往下方的內(nèi)容主體中再單獨(dú)添加 關(guān)閉按鈕，尤其是當(dāng)左上方的按鈕顯示的是“關(guān)閉”或者“取消”的時(shí)候。左上方按鈕通常是白色的。

如果所涉及任務(wù)需要確認(rèn)或者接受，那么可以在模式界面的內(nèi)容主體中添加“接受”或者“確認(rèn)”按鈕。除了執(zhí)行適當(dāng)?shù)牟僮髦?，點(diǎn)擊了這些按鈕之后還會(huì)解除當(dāng)前的模式界面。

盡量確保任務(wù)界面簡(jiǎn)單直接。避免從一個(gè)模式界面跳轉(zhuǎn)到第二個(gè)模式界面。

6、布局

布局指南

限制界面中并排控件的數(shù)目。當(dāng)使用并排按鈕的時(shí)候，請(qǐng)使用icon而非文本按鈕。并排放置的按鈕數(shù)量不能超過(guò)3個(gè)，界面中包含項(xiàng)目過(guò)多會(huì)讓用戶因目標(biāo)過(guò)小而不便操作。

充分運(yùn)用屏幕空間。由于Apple Watch的邊框已經(jīng)對(duì)主體內(nèi)容的邊緣進(jìn)行了填充，所以設(shè)計(jì)的時(shí)候無(wú)需再包含屏幕邊緣和內(nèi)容之間的空白。注意這些多余的邊緣也不會(huì)在模擬器中顯示。

APP的項(xiàng)目間會(huì)使用相對(duì)位置。由于APP會(huì)在不同尺寸的Apple Watch上顯示相同的界面，相對(duì)位置會(huì)讓它們根據(jù)不同的屏幕而擴(kuò)展填充多余的空間。

布局會(huì)優(yōu)先使用左對(duì)齊。你的界面中的元素排布方式是從上到下，從左到右來(lái)布局的。界面元素采用左對(duì)齊，可以確保有足夠的空間來(lái)擴(kuò)展和展示內(nèi)容。

確保文本按鈕占據(jù)全部寬度。使用文本按鈕的時(shí)候，應(yīng)該確保按鈕占據(jù)全部寬度，這樣能使得按鈕標(biāo)簽始終可見。

使用上下文菜單來(lái)展示二級(jí)操作。使用上下文菜單來(lái)展示使用頻率不高的操作，而不是在界面中直接添加按鈕。

屏幕尺寸

無(wú)論屏幕尺寸如何，Apple Watch應(yīng)當(dāng)展示相同的內(nèi)容。在設(shè)計(jì)屏幕布局的時(shí)候，務(wù)必讓各項(xiàng)目能自然擴(kuò)展收縮，填補(bǔ)可用空間。

根據(jù)不同尺寸的屏幕提供圖片素材。如果內(nèi)容在兩個(gè)尺寸的屏幕上展示效果都很好，那么可以使用相同的圖片素材，否則需要為不同尺寸屏幕提供不同的圖片素材。

7、色彩與排版

色彩

色彩可以為你的APP的提供視覺的連續(xù)性和品牌化設(shè)計(jì)。

使用黑色作為APP的背景色。黑色背景可以讓界面和設(shè)備邊緣無(wú)縫融合，讓用戶產(chǎn)生設(shè)備沒(méi)有屏幕邊緣的錯(cuò)覺。盡量避免在界面中使用明亮的背景色。

使用APP的主色調(diào)來(lái)彰顯品牌和身份。每個(gè)APP都有主色調(diào)，系統(tǒng)會(huì)將主色調(diào)應(yīng)用到屏幕左上角的標(biāo)題字符和通知界面中，突出APP的名稱和其他關(guān)鍵信息，你應(yīng)該以類似的方式來(lái)進(jìn)行APP的品牌設(shè)計(jì)。

使用高對(duì)比度色彩的文本。高對(duì)比度色彩會(huì)使得文字更加易讀。

避免使用色彩來(lái)展示交互性?？梢栽贏PP的品牌設(shè)計(jì)上酌情上色，但是不要單獨(dú)使用色彩來(lái)指示用戶與按鈕以及其他控件來(lái)交互。

務(wù)必考慮到色盲用戶。大部分色盲用戶是紅綠色盲，所以請(qǐng)測(cè)試一下你的APP，確保紅綠色不是其中區(qū)分不同狀態(tài)和值的唯一配色方案。（一些圖片編輯軟件中會(huì)包含色盲校對(duì)工具）

使用色彩來(lái)交流，不過(guò)不要始終用你習(xí)慣的方式。每個(gè)人對(duì)于色彩的認(rèn)知不盡相同，而且很多文化對(duì)色彩賦予的意義也不一樣。所以，你需要花費(fèi)一點(diǎn)時(shí)間來(lái)研究APP配色如何能讓其他的國(guó)家和文化接受。盡可能確保你的APP中的色彩傳遞合適的信息。

排版設(shè)計(jì)

首先，文字要清晰易讀。如果用戶不能清晰地閱讀APP中的文本，字體再漂亮也是白搭。

為了提高Apple Watch的文本易讀性，Apple專門為此設(shè)計(jì)了名為“舊金山”的系統(tǒng)字體。在較大的屏幕上，字體間隙被輕微壓縮，如此緊密排列以占用較少的水平空間。 但是在較小平面上，松散的字母排列會(huì)更加易讀。當(dāng)字體變小的時(shí)候，標(biāo)點(diǎn)符號(hào)會(huì)按照一定比例放大。任何時(shí)候?qū)ξ谋敬笮∵M(jìn)行調(diào)整，Apple Watch都會(huì)為了保持文本的清晰度和易讀性而進(jìn)行動(dòng)態(tài)調(diào)整。

所以，APP應(yīng)該始終使用動(dòng)態(tài)類型（Dynamic Type）。當(dāng)你使用動(dòng)態(tài)類型的時(shí)候，你可以做到以下幾點(diǎn)：
?讓APP中的字母的字符間距和行距自動(dòng)調(diào)整
?讓不同語(yǔ)義文本可以被指定不同的文本類型，比如主體、注腳或者標(biāo)題。
?讓文本可以隨著不同的文本設(shè)置而響應(yīng)式地調(diào)整（包括無(wú)障礙文本的大?。?/p>

注意:如果你使用了自定義字體，仍可以根據(jù)字體的系統(tǒng)設(shè)置縮放文本樣式。當(dāng)用戶更改設(shè)置時(shí)，你的APP適當(dāng)?shù)剡M(jìn)行響應(yīng)式調(diào)整。

如果你使用內(nèi)置的文本類型，那么你將直接獲得動(dòng)態(tài)類型（Dynamic Type）支持。如果你使用自定義字體，那么你需要對(duì)其進(jìn)行調(diào)整以采用這種特性。學(xué)習(xí)如何使用文本類型，并確保在用戶更改文本大小設(shè)置時(shí)，你的APP能得 到了通知，請(qǐng)參看 Text Programming Guide for iOS中Text Styles一節(jié)。

盡可能使用內(nèi)置的文本類型。內(nèi)置的文本類型自動(dòng)支持動(dòng)態(tài)類型（Dynamic Type），并且內(nèi)置文本類型可以更好地在Apple Watch上展示。

盡量在APP中使用單一字體類型。出于品牌化設(shè)計(jì)的需求，APP中可以使用附加字體，但盡量少用。混合使用多種字體會(huì)讓APP看起來(lái)支離破碎和草率。根據(jù)語(yǔ)義用法，比如主體和標(biāo)題，可以使用UIFont文本樣式API來(lái)定義不同的文本區(qū)域。

當(dāng)手動(dòng)設(shè)定系統(tǒng)字體大小的時(shí)候，磅值決定了正確尺寸。為文本選San Francisco 文本字體的時(shí)候，字體大小為19點(diǎn)，或者略小一點(diǎn)。為文本選擇San Francisco Display文本字體的時(shí)候，字體大概是20點(diǎn)，或者更大一點(diǎn)。

8、動(dòng)效

精細(xì)漂亮的動(dòng)效遍布Apple Watch的每個(gè)角落，并為用戶引入充滿活力的用戶體驗(yàn)。恰如其分的動(dòng)效能帶來(lái)如下效果：

?表明狀態(tài)并提供反饋
?以更加視覺化的方式幫用戶了解操作的結(jié)果

使用一系列靜態(tài)圖片創(chuàng)造渲染動(dòng)效。你可以在Apple Watch 的APP中儲(chǔ)存錄制好的動(dòng)畫(Canned Animations)，這樣可以向用戶快速展示。錄制好的動(dòng)畫可以讓你交付更為流暢的高幀動(dòng)畫。你可以從WatchKit擴(kuò)展中動(dòng)態(tài)地創(chuàng)建動(dòng)畫，再將其 轉(zhuǎn)移到Apple Watch，在回放之前添加一定的延遲就好了。

僅有圖片和分組對(duì)象(Group Objects)可以使用回放控件。大部分界面對(duì)象是以無(wú)限循環(huán)的方式來(lái)展示動(dòng)態(tài)圖像序列的。要終止動(dòng)畫，或從動(dòng)畫中回放一組特定的幀，你必須使用圖片或者分組對(duì)象。

9、品牌化設(shè)計(jì)

成功的品牌化設(shè)計(jì)所涉及的內(nèi)容，遠(yuǎn)不止于在APP中添加品牌素材。最好的APP將現(xiàn)有素材和獨(dú)特的外觀與感覺結(jié)合在一起，為用戶提供了一個(gè)令人愉悅而難忘的體驗(yàn)。

品牌化你的APP有多種途徑，其中包括icon、配色、自定義按鈕、自定義字體以及所使用的版權(quán)內(nèi)容等。在你設(shè)計(jì)APP的圖形元素時(shí)，務(wù)必記得讓每 個(gè)自定義元素都要看起來(lái)很好，并其本身的功能也一樣運(yùn)行良好，最重要的是，每個(gè)元素看起來(lái)也應(yīng)當(dāng)和APP中的其他元素一直，不管它是否是定制的。

以優(yōu)雅不違和的方式整合品牌素材。用戶使用你的APP來(lái)完成任務(wù)或者娛樂(lè)，但他們不想被強(qiáng)迫觀看廣告。為了獲得最佳的用戶體驗(yàn)，你可能需要通過(guò)色彩、精心選擇的字體或者意像來(lái)潛移默化地提高用戶對(duì)品牌的辨識(shí)度。

抵制在APP或Glance中展示Logo的誘惑。Apple Watch上的空間非常寶貴，每次展示logo都會(huì)占用內(nèi)容的空間，并且在APP中展示Logo的目的與在網(wǎng)頁(yè)中展示Logo有所不同：很多時(shí)候，用戶會(huì) 進(jìn)入某個(gè)的網(wǎng)頁(yè)并不會(huì)意識(shí)到它的所有者，但用戶在打開APP之前通常會(huì)查看APP icon，并且明白它屬于誰(shuí)。

結(jié)語(yǔ)

看完UI設(shè)計(jì)基礎(chǔ)之后，你需要開始了解Apple Watch 人機(jī)交互指南的第二個(gè)部分 UI元素設(shè)計(jì)的細(xì)節(jié)了。

原文來(lái)自：優(yōu)設(shè)

譯文地址：Developer.apple.com

優(yōu)設(shè)網(wǎng)譯者：@陳子木

APPLE WATCH人機(jī)交互指南系列文章

apple watch 人機(jī)交互指南UI設(shè)計(jì)基礎(chǔ)(1)

APPLE WATCH人機(jī)交互指南之UI設(shè)計(jì)基礎(chǔ)(2)

APPLE WATCH人機(jī)交互指南之圖標(biāo)與圖片設(shè)計(jì)

Apple Watch界面設(shè)計(jì)規(guī)范 – 模態(tài)表單

APPLE WATCH人機(jī)交互指南之UI元素設(shè)計(jì)