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)整字體類型和大小的控件。 當(dāng)用戶查看地圖時(shí)，Touch Bar可一鍵快速查找位置附近的加油站、住宿和餐館。 Touch Bar右側(cè)的Touch ID傳感器支持指紋登錄計(jì)算機(jī)及App Store和Apple Pay的購(gòu)買支付功能。

 

有兩個(gè)主要控件區(qū)的布局。 Touch Bar的中心包含兩個(gè)一致大小的控件。 其他控件位于左側(cè)。

有三個(gè)主要控件區(qū)的布局。 Touch Bar的中心包含三個(gè)一致大小的控件。 其他控件位于左側(cè)。

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ù)念伾?

測(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）。

保持圖標(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)容類型的圖標(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)。其他類型的系統(tǒng)圖標(biāo)，比如工具欄，不是為了用于Touch Bar上而設(shè)計(jì)的。

鏈接：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)題。

圖標(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)之間的切換。

使用背景來(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)的其他控件。

4.4 字符選擇器（Character Pickers）

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

4.5 拾色器（Color Pickers）

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

帶意圖地使用圖標(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ú)的按鈕。

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

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

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

有節(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相稱的外觀。

固定滑動(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)容。

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)擊選擇。

使用符合預(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)航。

4.9 分段控件（Segmented Controls）

分段控件是由包含了兩個(gè)或以上線性關(guān)系的部件所組成，每個(gè)部件的作用就像是按鈕——通常會(huì)配置為切換鍵。在這個(gè)控件中，所有部件等寬。像按鈕一樣，分段控件可以包含文本和圖標(biāo)。

限制部件的數(shù)量以提升可用性。更寬的部件更容易點(diǎn)擊。

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

保持分段控件中的內(nèi)容尺寸的一致性。因?yàn)楦鱾€(gè)部件寬度相等，如果每個(gè)部件中內(nèi)容填充不一的話，會(huì)顯得不夠美觀。

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

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

4.10 分享服務(wù)選擇器（Sharing Service Pickers ）

分享服務(wù)選擇器為用戶提供了一種便捷的分享方式，用戶可以分享文本、圖像和應(yīng)用程序、社交媒體賬號(hào)中的其他內(nèi)容，又或是其他服務(wù)。通過(guò)點(diǎn)擊分享服務(wù)選擇器，觸發(fā)包含分享按鈕的彈出視窗。

僅在有可分享的內(nèi)容時(shí)激活分享服務(wù)選擇器。如果用戶沒(méi)有選擇任何文本、圖像或者其他可分享內(nèi)容，應(yīng)該停用分享服務(wù)選擇器。

4.11 滑塊（Sliders ）

滑塊由一個(gè)水平軌道和一個(gè)名為拇指鍵的控件所組成，你可以在其最大值和最小值之間滑動(dòng)，例如調(diào)節(jié)屏幕的亮度或視頻的播放進(jìn)度。在滑塊的數(shù)值改變時(shí)，拇指鍵和最小值之間的軌道將會(huì)被填充以顏色。

自定義滑塊的樣式以適應(yīng)你的應(yīng)用，增添趣味?？紤]讓滑軌的顏色和你應(yīng)用的配色相互搭配。

提供左右兩邊的圖標(biāo)以說(shuō)明最大值和最小值所代表的含義。舉個(gè)例子，調(diào)整圖像大小的滑塊可在左邊配置一個(gè)小圖圖標(biāo)，而在右邊配置一個(gè)大圖圖標(biāo)。