亚洲一区二区三区国产精品无码,久久精品国产亚洲7777

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門(mén)專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

譯文｜Touch bar 完全設(shè)計(jì)指南：設(shè)計(jì)原則、新特性和基本元素

騰訊ISUX

2016-11-09

0 評(píng)論 7525 瀏覽 18 收藏

33 分鐘

日前蘋(píng)果發(fā)布會(huì)上，最大的亮點(diǎn)之一當(dāng)屬替代一欄功能鍵的Touch bar。本文包括有5個(gè)小節(jié)，詳細(xì)介紹了Touch bar設(shè)計(jì)原則、新特性和基本元素

Touch bar 概述

Touch Bar是位于新一代MacBook Pro鍵盤(pán)上方的一條 Retina 顯示屏，同時(shí)也是與主屏幕內(nèi)容交互提供動(dòng)態(tài)操作界面的輸入設(shè)備?；诋?dāng)前語(yǔ)境，Touch Bar的這些控件能對(duì)系統(tǒng)或應(yīng)用的功能進(jìn)行快速訪問(wèn)。例如，當(dāng)用戶在編輯文檔時(shí)，Touch Bar可提供調(diào)整字體類(lèi)型和大小的控件。當(dāng)用戶查看地圖時(shí)，Touch Bar可一鍵快速查找位置附近的加油站、住宿和餐館。 Touch Bar右側(cè)的Touch ID傳感器支持指紋登錄計(jì)算機(jī)及App Store和Apple Pay的購(gòu)買(mǎi)支付功能。

Image title

默認(rèn)情況下，位于Touch Bar右側(cè)的可擴(kuò)展控件條（Control Strip）中包含了系統(tǒng)級(jí)操作的控件，如喚起Siri、調(diào)整主屏幕的亮度及音量等。而在此之前，用戶是通過(guò)物理按鍵進(jìn)行大多數(shù)的此類(lèi)操作。你可以在位于控件條左側(cè)的應(yīng)用程序區(qū)域中，寫(xiě)入特定的應(yīng)用控件。Esc（退出鍵）或其他系統(tǒng)按鍵會(huì)根據(jù)當(dāng)前情況出現(xiàn)在應(yīng)用區(qū)域的左側(cè)。

Image title

Touch Bar是可配置的。用戶可以從控件條中移除功能，甚至將其完全隱藏。在隱藏狀態(tài)下，僅顯示應(yīng)用控件。用戶也可以隱藏應(yīng)用程序區(qū)域，只顯示擴(kuò)展的控制條。有些應(yīng)用也允許用戶在應(yīng)用區(qū)域中添加或刪除操作。

若要在應(yīng)用中以代碼實(shí)現(xiàn)Touch Bar功能，請(qǐng)參閱 NSTouchBar的參考文檔。若想了解如何使用Xcode中的Interface Builder將Touch Bar控件添加到應(yīng)用程序，請(qǐng)參閱 Xcode Help。

為T(mén)ouch Bar設(shè)計(jì)

在設(shè)計(jì)Touch Bar應(yīng)用界面時(shí)，請(qǐng)遵循以下規(guī)范：

設(shè)計(jì)情景化體驗(yàn)。Touch Bar內(nèi)容需與主屏幕當(dāng)前內(nèi)容相關(guān)。在應(yīng)用程序中區(qū)分不同的場(chǎng)景，并根據(jù)應(yīng)用程序的實(shí)際使用情況，思考如何曝光不同層級(jí)的功能。

將Touch Bar看作鍵盤(pán)和觸控板的延伸，而非顯示器。盡管在技術(shù)層面上Touch Bar就是屏幕，但它是被視作輸入設(shè)備使用的，而非輔助顯示器。用戶可能會(huì)通過(guò)Touch Bar來(lái)定位或使用某個(gè)功能，但他們的焦點(diǎn)應(yīng)該處于主屏幕之上。任何過(guò)分吸引用戶注意力或者會(huì)影響主屏幕上首頁(yè)任務(wù)的信息，如警告窗口、信息、滾動(dòng)內(nèi)容、靜態(tài)內(nèi)容等，都不應(yīng)該在Touch Bar上展示。

視覺(jué)效果盡量與實(shí)體鍵盤(pán)一致。Touch Bar中的控件在大小和顏色方面應(yīng)盡可能與實(shí)體鍵盤(pán)外觀保持一致。

不要單獨(dú)地在Touch Bar中顯示某項(xiàng)功能。并非所有設(shè)備都有Touch Bar，用戶也有可能選擇禁用一個(gè)應(yīng)用程序配置在Touch bar上的控件。應(yīng)該始終提供能在鍵盤(pán)或觸控板上執(zhí)行任務(wù)的方式。

控件應(yīng)能立即生效。提供更快捷的操作，否則用戶需要用更多步驟來(lái)完成諸如點(diǎn)擊控件或從菜單選取項(xiàng)目這樣的任務(wù)。具體可查看Controls.

立即響應(yīng)用戶操作。即便應(yīng)用在工作中或主屏幕正更新內(nèi)容，Touch Bar中的任何已啟用的控件也應(yīng)能立即響應(yīng)用戶的操作。

盡可能讓在Touch Bar中啟動(dòng)的任務(wù)，在Touch Bar中完成。用戶不應(yīng)該切換到鍵盤(pán)或觸控板來(lái)完成任務(wù)，除非這項(xiàng)任務(wù)所要求的界面控件的復(fù)雜度超出了Touch Bar的支持范圍。

避免使用Touch Bar執(zhí)行常見(jiàn)的快捷鍵任務(wù)。一般來(lái)說(shuō)，Touch Bar不提供包含查找、全選、取消選擇、復(fù)制、剪切、粘貼、撤消、重做、新建、保存、關(guān)閉、打印和退出等操作，也不應(yīng)該重復(fù)提供已有的鍵位導(dǎo)航，如向上翻頁(yè)和向下翻頁(yè)。

一致并準(zhǔn)確地反映狀態(tài)。如果控件同時(shí)處于Touch Bar和主屏幕之上，兩處應(yīng)呈現(xiàn)相同的狀態(tài)。例如，如果一個(gè)按鈕在主屏幕上是禁用狀態(tài)，那么它在Touch Bar中也應(yīng)為禁用狀態(tài)。

避免將Touch Bar上的交互行為鏡像顯示到主屏幕上。例如，如果用戶在Touch Bar中點(diǎn)擊了按鈕并顯示了其選項(xiàng)列表，這些選項(xiàng)不應(yīng)在主屏幕上顯示。

1 交互

1.1 輔助功能

macOS提供了大量的輔助功能來(lái)幫助失明、失聰以及其他殘疾群體。與標(biāo)準(zhǔn)界面元素一樣，Touch Bar中的控件也可以輕松訪問(wèn)。

為控件提供替代文本標(biāo)簽。文本標(biāo)簽并不會(huì)顯示在觸控欄上，但是它們能讓VoiceOver語(yǔ)音描述控件，讓視力障礙用戶的調(diào)用和導(dǎo)航操作更輕松。

為自定義控件添加文本標(biāo)簽。VoiceOver可以借用這些標(biāo)簽，語(yǔ)音描述自定義屏幕上的控件。相關(guān)指引，請(qǐng)參閱Customization。

1.2 用戶自定義

Touch Bar上的應(yīng)用控件都允許用戶添加、刪除或重新排列，以滿足其各自的工作方式。

通常來(lái)說(shuō)，允許用戶自定義。你無(wú)法預(yù)期用戶會(huì)如何使用你的應(yīng)用。為重要和常用的功能提供默認(rèn)值，但允許用戶自主調(diào)整以滿足自己需要。

1.3 全屏和聚焦內(nèi)容的應(yīng)用

全屏模式的應(yīng)用提供了無(wú)干擾工作環(huán)境。在全屏模式下，工具欄和其他控件通常是隱藏的，只有在用戶調(diào)用它們時(shí)才顯示，比如將指針移動(dòng)到屏幕頂部。為了讓用戶聚焦內(nèi)容，一些應(yīng)用也會(huì)在主屏幕上隱藏控件，例如，用戶用QuickTime播放電影或以幻燈片的方式查看照片時(shí)。通過(guò)在Touch bar中顯示控件，用戶可以直接訪問(wèn)常用功能，而無(wú)需移動(dòng)指針或查看疊加在其內(nèi)容上的控件。

提供相關(guān)和常用的控件。當(dāng)控件在主屏幕上隱藏時(shí)，Touch bar可能只包含可見(jiàn)控件，所以這些控件應(yīng)該對(duì)用戶在主屏幕看到的內(nèi)容有用和相關(guān)。

1.4 手勢(shì)操作

用戶通過(guò)使用以下手勢(shì)來(lái)與Touch Bar交互：

點(diǎn)擊。激活控件，例如按鈕。選擇對(duì)象，例如表情符號(hào)，顏色或分段控件。

長(zhǎng)按。激活控件下一層級(jí)操作，比如按鈕。例如當(dāng)郵件處于激活狀態(tài)時(shí)點(diǎn)擊“標(biāo)記”按鈕可以增加標(biāo)記，觸摸并按住標(biāo)記按鈕會(huì)展開(kāi)操作浮層，讓你選擇標(biāo)記的顏色。長(zhǎng)按標(biāo)記按鈕會(huì)展開(kāi)操作浮層，讓你選擇標(biāo)記的顏色。

水平滑動(dòng)（平移）。可以移動(dòng)對(duì)象，比如將滑塊從一側(cè)移動(dòng)到另一側(cè)?？梢钥焖贋g覽內(nèi)容，比如通過(guò)滾軸查看日期或照片。

多點(diǎn)觸控。雖然Touch Bar可以響應(yīng)多個(gè)手指的觸控，例如捏合手勢(shì)，但多點(diǎn)觸控手勢(shì)可能會(huì)造成麻煩，應(yīng)該謹(jǐn)慎使用。

2 視覺(jué)設(shè)計(jì)

2.1 動(dòng)畫(huà)

避免動(dòng)畫(huà)。?Touch Bar是鍵盤(pán)的延伸，用戶對(duì)鍵盤(pán)中出現(xiàn)動(dòng)畫(huà)沒(méi)有預(yù)期。此外，過(guò)度或不必要的動(dòng)畫(huà)讓用戶分心。

2.2 顏色

mac OS定義了一系列系統(tǒng)顏色，可以動(dòng)態(tài)地匹配標(biāo)準(zhǔn)界面控件的配色方案，如按鈕和標(biāo)簽。以下系統(tǒng)顏色是Touch Bar的理想選擇：

控件顏色
標(biāo)簽顏色
二級(jí)標(biāo)簽顏色
三級(jí)標(biāo)簽顏色
四級(jí)標(biāo)簽顏色

系統(tǒng)顏色會(huì)基于環(huán)境光和鍵盤(pán)背光的亮度等因素，自動(dòng)地響應(yīng)系統(tǒng)白點(diǎn)變化。

要了解在應(yīng)用程序中使用系統(tǒng)顏色，請(qǐng)參閱NSColor的參考文檔。

優(yōu)先使用標(biāo)準(zhǔn)控件和系統(tǒng)圖標(biāo)。標(biāo)準(zhǔn)控件和系統(tǒng)圖標(biāo)的用色已很好的適用于Touch Bar。有關(guān)可用系統(tǒng)圖標(biāo)的列表，請(qǐng)參閱Icons.

少而精地使用顏色。一般來(lái)說(shuō)，Touch Bar的外觀應(yīng)與實(shí)體鍵盤(pán)類(lèi)似。單色效果更好。如果必須使用多種顏色，請(qǐng)確保美觀，且主要在臨時(shí)狀態(tài)下使用。不要使用太多或不恰當(dāng)?shù)念伾?/p>

用顏色凸顯信息。顏色可以讓重要控件更顯眼。默認(rèn)控件使用藍(lán)色，不可逆操作控件使用紅色。

選擇與應(yīng)用相符的有限色板。巧妙地使用顏色是一個(gè)傳達(dá)品牌的好辦法。

提供寬色域的設(shè)計(jì)稿。?Touch Bar支持P3顏色空間，可以產(chǎn)生比sRGB更豐富，更飽和的顏色。使用顯示P3顏色配置文件，每像素16位（每通道），并以.png格式導(dǎo)出設(shè)計(jì)稿。

2.3 布局

除開(kāi)Touch ID傳感器，Touch Bar大小為2170x60px。Touch Bar采用的高分辨率Renita屏，換算為對(duì)應(yīng)的pt值為1085x30pt。

Image title

2.3.1 Touch Bar區(qū)域

在其標(biāo)準(zhǔn)配置中，Touch Bar包含三個(gè)主要區(qū)域，每個(gè)區(qū)域的間隔是32px。

Image title

設(shè)計(jì)時(shí)假設(shè)默認(rèn)控件條可見(jiàn)。?雖然用戶可以重新配置控件條，減小它的大小，并完全禁用它，但你的應(yīng)用程序不應(yīng)該依賴這個(gè)控制條。

2.3.2 放置應(yīng)用控件

在Touch Bar中，系統(tǒng)提供了幾個(gè)選項(xiàng)來(lái)分隔app控件：

Image title

（１）合乎邏輯、直觀地?cái)[放控件

?應(yīng)用程序區(qū)域的左側(cè)適用于通用控件。例如，當(dāng)Notes處于激活態(tài)時(shí)，無(wú)論是在瀏覽筆記、編輯筆記還是在瀏覽附件，都會(huì)在Touch Bar的最左側(cè)顯示用于添加注釋的“撰寫(xiě)”按鈕。否則，最好中間位置放置主要控件，左側(cè)放置二級(jí)選項(xiàng)。

（２）構(gòu)建靈活的布局

應(yīng)用程序區(qū)域的寬度會(huì)根據(jù)控件條的配置而有所不同，所以在有可用空間的時(shí)候，考慮用滑塊、滑動(dòng)條這些控件延展操作區(qū)域。

（３）盡量保持一致的間距

Touch Bar中的控件間距盡可能相等，除非有讓內(nèi)容變清晰或歸類(lèi)相關(guān)控件的需要，才改變間距。

（４）用靈活的間距和分組輔助對(duì)齊

控件之間靈活的間距將左側(cè)控件推向Touch Bar左側(cè)，將右側(cè)控件推向Touch Bar右側(cè)。分組讓你可以一次放置多個(gè)控件。通過(guò)標(biāo)記控件或者控件組，你可以使其作為主要控件區(qū)在Touch Bar居中。

（５）不要自動(dòng)改變控件位置

隨意改變控件位置，用戶會(huì)感到受挫和困惑。用戶可以手動(dòng)自定義控件位置，但你的應(yīng)用應(yīng)避免無(wú)緣無(wú)故改變位置的情況。

（６）不要反過(guò)來(lái)從右至左地放置控件

反置控件可能會(huì)導(dǎo)致Touch Bar自定義功能出現(xiàn)問(wèn)題，并且系統(tǒng)已經(jīng)反置了某些控件，例如分段控件和滑塊。

2.3.3 常見(jiàn)布局

由于存在多種配置選項(xiàng)和控件大小設(shè)置，對(duì)于不同的app，Touch Bar中的布局樣式可以多種多樣，但是盡可能的使用常見(jiàn)的布局樣式。

（１）流體布局

此布局包含大小一致的控件，如按鈕。

Image title

（２）有一個(gè)主要控件區(qū)的布局

Touch Bar的中心包含單個(gè)大型控件，例如候選列表（在文本輸入期間提供自動(dòng)完成建議）。其他控件（如按鈕和分段控件）位于左側(cè)。

Image title

（３）有兩個(gè)主要控件區(qū)的布局

Touch Bar的中心包含兩個(gè)一致大小的控件。其他控件位于左側(cè)。

Image title

（４）有三個(gè)主要控件區(qū)的布局

Touch Bar的中心包含三個(gè)一致大小的控件。其他控件位于左側(cè)。

Image title

2.4 字體

Touch Bar使用的是macOS中的系統(tǒng)字體——San Francisco。此字體針對(duì)易讀性、清晰度和一致性進(jìn)行了優(yōu)化。它也匹配實(shí)體鍵盤(pán)的字體。標(biāo)準(zhǔn)Touch Bar控件（如按鈕和分段控件）自動(dòng)使用此字體。要了解如何在應(yīng)用中應(yīng)用系統(tǒng)字體，請(qǐng)參閱NSFont的參考文檔。

3 圖標(biāo)

3.1 圖形尺寸和分辨率

Touch Bar上的圖片資源全部采用@2x切圖。在@2x的圖片中，1pt等同于2px。比如，36X36px的圖標(biāo)會(huì)轉(zhuǎn)化為18X18pt。在圖片名稱后面加上@2x，然后把它們置入到Xcode文件中的@2x目錄下。

3.2 自定義圖標(biāo)

如果系統(tǒng)默認(rèn)圖標(biāo)無(wú)法滿足應(yīng)用內(nèi)多個(gè)任務(wù)與狀態(tài)，可以繪制你的專屬圖標(biāo)。

設(shè)計(jì)高識(shí)別度的圖標(biāo)。圖標(biāo)應(yīng)該與主屏幕上的應(yīng)用匹配，但需要符合Touch Bar的樣式風(fēng)格。
讓圖標(biāo)更簡(jiǎn)潔。太多細(xì)節(jié)會(huì)讓圖標(biāo)語(yǔ)義不清，降低可讀性。高擬物的圖形需要簡(jiǎn)化保留最基本的元素。好的圖標(biāo)是通過(guò)外形輪廓表意的，只會(huì)有少量?jī)?nèi)部細(xì)節(jié)。消除鋸齒以確保圖標(biāo)輪廓清晰。不要使用投影或用陰影與高光的方式讓圖標(biāo)凸顯出來(lái)。
讓圖標(biāo)更一致。無(wú)論使用自定義圖標(biāo)還是與系統(tǒng)圖標(biāo)混合使用，所有的圖標(biāo)都需要通過(guò)一致的尺寸，細(xì)節(jié)，透視和描邊保持相同的視覺(jué)感受。
參考系統(tǒng)圖標(biāo)設(shè)計(jì)。設(shè)計(jì)自定義圖標(biāo)時(shí)請(qǐng)參考系統(tǒng)圖標(biāo)，盡量遵循相似的表現(xiàn)形式。
為圖標(biāo)準(zhǔn)備模板資源。圖標(biāo)模板是一個(gè)背景透明并有alpha通道的黑色圖像。當(dāng)圖標(biāo)顯示在Touch Bar時(shí)，系統(tǒng)自動(dòng)轉(zhuǎn)化圖標(biāo)并為其應(yīng)用適當(dāng)?shù)念伾?/li>
測(cè)試圖標(biāo)。為了非常準(zhǔn)確的判斷圖標(biāo)的表現(xiàn)，需要結(jié)合場(chǎng)景預(yù)覽所有圖標(biāo)，確保模板資源在被系統(tǒng)轉(zhuǎn)化后符合預(yù)期。

3.2.1 尺寸

雖然圖標(biāo)可以撐滿Touch Bar的高度，但圖標(biāo)的高度通常不超過(guò)44px（圓形圖標(biāo)36px）。

Image title

保持圖標(biāo)視覺(jué)居中。裁剪設(shè)計(jì)稿以匹配圖標(biāo)寬度，必要時(shí)增加內(nèi)邊距以確保圖標(biāo)在控件上顯示時(shí)視覺(jué)居中。
傾斜圖標(biāo)盡量采用45度角。在系統(tǒng)圖標(biāo)里，傾斜元素常常會(huì)呈現(xiàn)45度角，例如：全屏和退出全屏的箭頭圖標(biāo)；返回、向下、前進(jìn)、向上的人字形圖標(biāo)；靜音圖標(biāo)的斜線；編輯圖標(biāo)中的鉛筆；瀏覽器圖標(biāo)中的指南針指針。查看系統(tǒng)提供的圖標(biāo)作為參考。

3.2.2 顏色和填充

Touch Bar上的圖標(biāo)應(yīng)看上去與實(shí)體鍵盤(pán)按鍵的字形相似。如果使用了模板和系統(tǒng)顏色，圖標(biāo)會(huì)自動(dòng)產(chǎn)生這種效果。

不要用顏色區(qū)分開(kāi)關(guān)狀態(tài)。系統(tǒng)會(huì)改變背景樣式表明開(kāi)關(guān)狀態(tài)。
盡量用100%不透明的圖標(biāo)。倘若為了兼顧可讀性，可用不透明度70%的作為輔助。僅當(dāng)需要提升可讀性和平衡度的時(shí)候，使用中間色調(diào)。

相關(guān)的指引，可查看 Color。

3.2.3 描邊

為了匹配實(shí)體鍵盤(pán)的風(fēng)格，圖標(biāo)盡量用2px的描邊。如果需要讓圖標(biāo)占據(jù)更多視覺(jué)重量，可以嘗試3px。

3.2.4 轉(zhuǎn)角

為了匹配系統(tǒng)圖標(biāo)的風(fēng)格，直角圖標(biāo)使用2px的描邊，圓角圖標(biāo)使用1px半徑3px的描邊，填充形狀的圓角使用4px半徑

3.2.5 模板

使用Photoshop和Sketch模板設(shè)計(jì)合適尺寸的Touch Bar圖標(biāo)。下載圖標(biāo)模版Download Icon Templates。

3.2.6 系統(tǒng)提供的圖標(biāo)

系統(tǒng)提供了充足的代表常規(guī)任務(wù)和內(nèi)容類(lèi)型的圖標(biāo)，可用于應(yīng)用的控件上。

盡量使用系統(tǒng)圖標(biāo)，因?yàn)樗鼈兏Ｒ?jiàn)。由于系統(tǒng)圖標(biāo)是模板資源，它們能自動(dòng)地填色，基于環(huán)境光和鍵盤(pán)背光的亮度響應(yīng)系統(tǒng)白點(diǎn)變化，并對(duì)用戶的交互行為自動(dòng)作出反應(yīng)。
不要重新定義系統(tǒng)圖標(biāo)。為確保體驗(yàn)的一致性，請(qǐng)按照?qǐng)D標(biāo)的原本意圖使用圖標(biāo)。比如，不要把“移動(dòng)文件”圖標(biāo)應(yīng)用于下載操作，要用原本的下載圖標(biāo)。
僅使用為T(mén)ouch Bar而設(shè)計(jì)的系統(tǒng)圖標(biāo)。其他類(lèi)型的系統(tǒng)圖標(biāo)，比如工具欄，不是為了用于Touch Bar上而設(shè)計(jì)的。

備注：一些系統(tǒng)圖標(biāo)會(huì)在自右向左的文本場(chǎng)景下自動(dòng)轉(zhuǎn)換方向，比如前進(jìn)與后退。（譯者注：像波斯語(yǔ)、阿拉伯語(yǔ)、希伯來(lái)語(yǔ)這些語(yǔ)言的書(shū)寫(xiě)和閱讀習(xí)慣都是從右向左，所以排版也要求是從右向左）

鏈接：Touch Bar上的圖標(biāo)

4?控件

系統(tǒng)為T(mén)ouch Bar的應(yīng)用區(qū)域內(nèi)置了多種標(biāo)準(zhǔn)控件。盡可能地使用這些控件，以達(dá)到最佳的體驗(yàn)一致性。

4.1 按鈕（Buttons）

點(diǎn)按按鈕以觸發(fā)應(yīng)用程序的對(duì)應(yīng)事件。按鈕可包含圖標(biāo)和標(biāo)題。

Image title

圖標(biāo)優(yōu)于標(biāo)題。爭(zhēng)取設(shè)計(jì)出足夠清晰明了的圖標(biāo)，不要依賴于文本的輔助。

使用簡(jiǎn)短的標(biāo)題。太長(zhǎng)的標(biāo)題會(huì)使Touch Bar顯得過(guò)于擁擠。

使用美觀的邊框顏色。默認(rèn)邊框采取了和實(shí)體按鍵相似的外觀設(shè)計(jì)。如果確實(shí)需要自定義的話，推薦使用深色的邊框顏色。

4.2 切換鍵（Toggles ）

切換鍵是按鈕的一種，用于“開(kāi)啟”和“關(guān)閉”兩種狀態(tài)之間的切換。

Image title

使用背景來(lái)表現(xiàn)當(dāng)前狀態(tài)。在關(guān)閉狀態(tài)下，系統(tǒng)會(huì)自動(dòng)改變按鈕的背景樣式，所以不需要使用顏色、文本或另外的圖標(biāo)來(lái)表現(xiàn)當(dāng)前狀態(tài)。

使用切換鍵取代單選框和復(fù)選框。如果你需要用戶在兩個(gè)狀態(tài)當(dāng)中進(jìn)行選擇的話，使用切換鍵。

4.3 候選列表（Candidate Lists）

輸入文本時(shí)，候選列表提供自動(dòng)文本建議。用戶可以通過(guò)點(diǎn)擊，將文本建議輸入到主屏幕中激活的文本框或文本區(qū)域內(nèi)。用戶可以選擇展開(kāi)或者收起候選列表。展開(kāi)的候選列表將會(huì)替代區(qū)域內(nèi)的其他控件。

Image title

4.4 字符選擇器（Character Pickers）

點(diǎn)擊字符選擇器時(shí)，會(huì)打開(kāi)一個(gè)包含一系列特殊字符的彈出視窗，如emoji。用戶可以通過(guò)點(diǎn)擊，將其輸入至主屏幕中激活的文本框或文本區(qū)域中。

Image title

4.5 拾色器（Color Pickers）

點(diǎn)擊拾色器時(shí)，會(huì)打開(kāi)一個(gè)包含了顏色選擇控件的彈出視窗。拾色器可通過(guò)配置，展示為選取顏色、邊框或文本顏色的圖標(biāo)。無(wú)論是哪種圖標(biāo)，所有拾色器打開(kāi)后顯示的均為同一視窗。

Image title

帶意圖地使用圖標(biāo)。當(dāng)拾取邊框顏色時(shí)，使用邊框顏色選取圖標(biāo)。當(dāng)拾取文本顏色時(shí)，使用文本顏色選取圖標(biāo)。其他拾色場(chǎng)景下，使用顏色選取圖標(biāo)。

4.6 標(biāo)簽（Labels）

標(biāo)簽展示只讀文本，通常是為了描述一個(gè)控件而設(shè)。

一般來(lái)說(shuō)，避免使用標(biāo)簽。雖然Touch Bar可以展示標(biāo)簽，但是最好不要使用，因?yàn)橛脩舨⒉荒芘c標(biāo)簽進(jìn)行交互。我們更應(yīng)該專注于為控件設(shè)計(jì)更加有趣的圖標(biāo)。如果你必須使用標(biāo)簽，使之盡可能的簡(jiǎn)短。

當(dāng)需要為復(fù)雜圖標(biāo)做文字補(bǔ)充時(shí)，標(biāo)題優(yōu)于標(biāo)簽。如果一個(gè)控件的圖標(biāo)本身并不是足夠清晰名了，可考慮增加一個(gè)簡(jiǎn)短的標(biāo)題以提供其使用語(yǔ)境。

4.7 彈出視窗（Popovers ）

在折疊狀態(tài)下，彈出視窗在Touch Bar中表現(xiàn)為一個(gè)單獨(dú)的按鈕。

Image title

展開(kāi)時(shí)，彈出視窗將生成一個(gè)包含一組暫駐控件的模塊，覆蓋掉應(yīng)用區(qū)域中的其他控件。在這個(gè)模塊的覆蓋下，用戶必須進(jìn)行選擇操作，或者也可以通過(guò)點(diǎn)擊退出鍵收起當(dāng)前菜單，使得彈出視窗回到折疊態(tài)。

Image title

通過(guò)點(diǎn)擊以展開(kāi)彈出視窗。彈出視窗也可以按需響應(yīng)長(zhǎng)按動(dòng)作。支持長(zhǎng)按動(dòng)作的彈出視窗需要包含左箭頭符號(hào)。

Image title

通過(guò)長(zhǎng)按觸發(fā)的彈出視窗，可以使用和普通彈出視窗一樣又或者是完全不同的蒙層。在長(zhǎng)按觸發(fā)的蒙層中，用戶通過(guò)滑動(dòng)手指到達(dá)想要的選項(xiàng)，松開(kāi)以完成選擇并關(guān)閉彈出視窗。

Image title

有節(jié)制地使用彈出視窗。單一點(diǎn)擊應(yīng)能觸發(fā)Touch Bar中的大多數(shù)控件。

避免嵌套的彈出視窗。一般來(lái)說(shuō)，盡量避免在Touch Bar中進(jìn)行一級(jí)以上的導(dǎo)航。

給簡(jiǎn)單的彈出視窗們保留長(zhǎng)按動(dòng)作。長(zhǎng)按動(dòng)作主要是為了展示一組包含簡(jiǎn)單選項(xiàng)的蒙層而保留，例如分段控件，這樣用戶便可以從中進(jìn)行選擇。

在折疊狀態(tài)的彈出視窗上表明選中項(xiàng)。彈出視窗在展開(kāi)時(shí)包含了一組選項(xiàng)，在折疊狀態(tài)下則應(yīng)該示意當(dāng)前選中項(xiàng)。

提供明確的退出路徑。確保用戶知道如何收起一個(gè)彈出視窗，并回到之前的一組控件。

4.8 滑動(dòng)條（scrubber）

滑動(dòng)條可以讓用戶通過(guò)左右滑動(dòng)，在如一組時(shí)間或者照片等內(nèi)容中進(jìn)行概覽?；瑒?dòng)條可以是固定的，可以是能自由移動(dòng)的，也可以是高度定制化的——但是需要保留和Touch Bar相稱的外觀。

4.8.1 固定滑動(dòng)條

固定滑動(dòng)條為一組組織好的內(nèi)容提供流暢而連續(xù)的交互，如Safari的標(biāo)簽頁(yè)切換。用戶在使用滑動(dòng)條左右滑動(dòng)時(shí)，手指底下的項(xiàng)目高亮展示。取決于滑動(dòng)條的配置，用戶可以通過(guò)滑動(dòng)或抬起手指完成選擇。如果內(nèi)容超出了固定滑動(dòng)條的顯示區(qū)域，當(dāng)手指滑動(dòng)到控件的邊緣的時(shí)候，滑動(dòng)條會(huì)自動(dòng)滑出并顯示剩余的選項(xiàng)。在固定滑動(dòng)條里，用戶的手指直接移動(dòng)的是選項(xiàng)，并非內(nèi)容。

Image title

4.8.2 自由滑動(dòng)條

自由滑動(dòng)條在一個(gè)可自由滑動(dòng)的列表中展示內(nèi)容，例如“日歷”應(yīng)用中的一組日期，用戶左右滑便可使直接查看內(nèi)容。取決于滑動(dòng)條的配置，如果一個(gè)選項(xiàng)處在某個(gè)特定的位置，如滑動(dòng)條的中央，那么這個(gè)選項(xiàng)則被選中；或者滑動(dòng)條本身是固定的，需要用戶手動(dòng)點(diǎn)擊選擇。

Image title

使用符合預(yù)期和具有組織邏輯的值。在自由滑動(dòng)條中，如果可滑動(dòng)列表是固定的話，則很多數(shù)值可能是被隱藏起來(lái)的。像是一組按照字母表順序排列的國(guó)家列表一樣，如果用戶在使用的時(shí)候能推測(cè)出這些數(shù)值是什么最好不過(guò)，這樣用戶便能快速地在列表中移動(dòng)。

避免展示數(shù)字過(guò)大的列表。在Touch Bar中瀏覽長(zhǎng)列表非常乏味。如果你有一組數(shù)值很大的列表，考慮在主屏幕而非Touch Bar上展示，這樣的話鍵盤(pán)或者觸控板均可用作導(dǎo)航。