編者按：Touch Bar 是2016款 MacBook Pro 鍵盤上方的一條 Retina 顯示屏，同時也是與主屏內容交互的輸入設備，需要為Touch Bar 做適配的同學，來看這篇蘋果官方的人機交互指南。
就目前而言，Touch Bar 能實現對系統或應用功能快速訪問。 其右側的 Touch ID 支持指紋登錄并能在 App Store 和 Apple Pay 上完成支付。
舉例來說：當用戶在編輯文檔時，Touch Bar 可以對字體和字號進行調節；當用戶查看地圖時，Touch Bar 能一鍵查找附近的加油站、住宿和餐館。
默認狀態下，Touch Bar 右側的 "控件條"（Control Strip）中包含系統操作控件，如喚起Siri、調整主屏幕的亮度及音量等，之前是通過物理按鍵進行這些操作的。中間的 "應用區"（App region）用來操作應用的特定功能。"系統鍵"（System button）會根據當前狀態切換為相應的按鍵。
Touch Bar 允許做調整。用戶可以從 "控件條" 中移除功能，甚至將其完全隱藏。在隱藏狀態下，僅顯示 "應用區" 。用戶也可以隱藏 "應用區"，只顯示 "控件條" 。有些應用也允許用戶在 "應用區" 添加或刪除功能。
一、Touch Bar 設計原則
在設計 Touch Bar 應用界面時，請遵循以下原則：
設計情景化體驗
Touch Bar 內容需與主屏內容相關。在應用中區分不同的場景，并根據應用的實際使用情況，切換不同層級的功能。
看作鍵盤和觸控板的延伸，而非顯示器
盡管在技術層面上 Touch Bar 就是屏幕，但它是當作輸入設備使用的，用戶可以通過 Touch Bar 使用某個功能，但他們的焦點應該處于主屏幕之上。任何過分吸引用戶注意力或者會影響主屏幕上首頁任務的信息，如警告窗口、信息、滾動內容、靜態內容等，都不應該在Touch Bar上展示。
視覺效果盡量與實體鍵盤一致
Touch Bar 中的控件在大小和顏色方面應盡可能與實體鍵盤外觀保持一致。
不允許有專屬控件
并非所有設備都有 Touch Bar，用戶有可能禁用一個應用配置在 Touch bar 上的控件。應始終提供能在鍵盤或觸控板上執行任務的方式。
控件能立即生效
提供更快捷的操作，否則用戶需要用更多步驟來完成諸如點擊控件或從菜單中選取項目這樣的任務。具體可查看?Controls?。
立即響應用戶操作
即便應用在工作中或主屏幕正更新內容，Touch Bar中的任何已啟用的控件也應能立即響應用戶的操作。
盡可能在 Touch Bar 中完成操作
用戶不應該切換到鍵盤或觸控板來完成操作，除非這項操作所要求的界面控件復雜度超出了Touch Bar的支持范圍。
避免執行常見的快捷鍵操作
一般來說，Touch Bar 不提供包含查找、全選、取消選擇、復制、剪切、粘貼、撤消、重做、新建、保存、關閉、打印和退出等操作，也不應該重復提供已有的鍵位導航，如向上翻頁和向下翻頁。
一致并準確地反映狀態
如果控件同時處于 Touch Bar 和主屏幕之上，兩處應呈現相同的狀態。例如，如果一個按鈕在主屏幕上是禁用狀態，那么它在 Touch Bar中也應為禁用狀態。
避免將交互行為鏡像顯示到主屏
例如，如果用戶在 Touch Bar 中點擊了控件并顯示了其選項列表，這些選項不應在主屏幕上顯示。
二、 交互
2.1 輔助功能
macOS 提供了大量的輔助功能來幫助失明、失聰以及其他殘疾群體。與標準界面元素一樣，Touch Bar中的控件也可以輕松訪問。
為控件提供替代文本標簽：文本標簽并不會顯示在觸控欄上，但是它們能讓 VoiceOver 語音描述控件，讓視力障礙用戶的調用和導航操作更輕松。
為自定義控件添加文本標簽：VoiceOver 可以借用這些標簽，語音描述自定義屏幕上的控件。
2.2 用戶自定義
Touch Bar 上的應用控件全部允許用戶添加、刪除或重新排列，以滿足其各自的工作方式。你無法預期用戶會如何使用你的應用。為重要和常用的功能提供默認值，但允許用戶自主調整以滿足自己需要。
2.3 全屏和沉浸式應用
全屏模式的應用提供了無干擾工作環境。在全屏模式下，工具欄和其他控件通常是隱藏的，只有在用戶調用它們時才顯示，比如將指針移動到屏幕頂部。為了讓用戶聚焦內容，一些應用也會在主屏幕上隱藏控件，例如，用戶用 QuickTime 播放電影或以幻燈片的方式查看照片時。通過在 Touch Bar 中顯示控件，用戶可以直接訪問常用功能，而無需移動指針或查看疊加在其內容上的控件。
提供相關和常用的控件：當控件在主屏幕上隱藏時，Touch bar可能只包含可見控件，所以這些控件應該對用戶在主屏幕看到的內容有用和相關。
2.4 手勢操作
用戶通過使用以下手勢來與Touch Bar交互：
點擊：激活控件，例如按鈕。選擇對象，例如表情符號，顏色或分段控件。
長按：激活控件下一層級操作，比如按鈕。例如當郵件處于激活狀態時點擊“標記”按鈕可以增加標記，觸摸并按住標記按鈕會展開操作浮層，讓你選擇標記的顏色。長按標記按鈕會展開操作浮層，讓你選擇標記的顏色。
水平滑動（平移）：可以移動對象，比如將滑塊從一側移動到另一側。可以快速瀏覽內容，比如通過滾軸查看日期或照片。
多點觸控：雖然Touch Bar可以響應多個手指的觸控，例如捏合手勢，但多點觸控手勢可能會造成麻煩，應該謹慎使用。
三、視覺設計
3.1 避免動效
Touch Bar 是鍵盤的延伸，用戶對鍵盤中出現動效沒有預期。 此外，過度或不必要的動效會分散用戶注意力。
3.2 顏色
mac OS 定義了一系列系統顏色，可以動態地匹配標準界面控件的配色方案，如按鈕和標簽。以下系統顏色是Touch Bar的理想選擇：
- 控件顏色
- 標簽顏色
- 二級標簽顏色
- 三級標簽顏色
- ?四級標簽顏色
系統顏色會基于環境光和鍵盤背光的亮度等因素，自動地響應系統白點變化。
要了解在應用程序中使用系統顏色。
優先使用標準控件和系統圖標：標準控件和系統圖標的用色已很好的適用于 Touch Bar 。有關可用系統圖標的列表。
簡化色彩：一般來說，Touch Bar 的外觀應與實體鍵盤類似。單色效果更好。如果必須使用多種顏色，請確保美觀，且主要在臨時狀態下使用。不要使用太多或不恰當的顏色。
用顏色凸顯信息：顏色可以讓重要控件更顯眼。默認控件使用藍色，不可逆操作控件使用紅色。
選擇與應用相符的有限色板，巧妙地使用顏色是一個傳達品牌的好辦法。
提供寬色域的設計稿：Touch Bar 支持 P3 顏色空間，可以產生比 sRGB 更豐富，更飽和的顏色。 使用顯示 P3 顏色配置文件，每像素16位（每通道），并以 .png 格式導出設計稿。
3.3 布局
除了 Touch ID，Touch Bar 大小為 2170x60px 。Touch Bar 采用的高分辨率Renita 屏 ，換算為對應的pt值為 1085x30pt 。
3.3.1 Touch Bar 區域
在其標準配置中，Touch Bar 包含三個主要區域，每個區域的間隔是32px。
設計時假設默認控件條可見。?雖然用戶可以重新配置控件條，減小它的大小，并完全禁用它，但你的應用程序不應該依賴這個控制條。
3.3.2 放置應用控件
在Touch Bar 中，系統提供了幾個選項來分隔應用控件：
合乎邏輯、直觀地擺放控件：?應用程序區域的左側適用于通用控件。 例如，當Notes 處于激活態時，無論是在瀏覽筆記、編輯筆記還是在瀏覽附件，都會在 Touch Bar 的最左側顯示用于添加注釋的 “撰寫” 按鈕。 否則，最好中間位置放置主要控件，左側放置二級選項。
構建靈活的布局：?應用程序區域的寬度會根據控件條的配置而有所不同，所以在有可用空間的時候，考慮用滑塊、滑動條這些控件延展操作區域。
盡量保持一致的間距：Touch Bar 中的控件間距盡可能相等，除非有讓內容變清晰或歸類相關控件的需要，才改變間距。
用靈活的間距和分組輔助對齊：控件之間靈活的間距將左側控件推向Touch Bar左側，將右側控件推向Touch Bar 右側。分組讓你可以一次放置多個控件。通過標記控件或者控件組，你可以使其作為主要控件區在Touch Bar 居中。
不要自動改變控件位置：隨意改變控件位置，用戶會感到受挫和困惑。用戶可以手動自定義控件位置，但你的應用應避免無緣無故改變位置的情況。
不要從右至左放置控件：反置控件可能會導致 Touch Bar 自定義功能出現問題，并且系統已經反置了某些控件，例如分段控件和滑塊。
3.3.3 常見布局
由于存在多種配置選項和控件大小設置，對于不同的應用，Touch Bar 中的布局樣式可以多種多樣，但是盡可能的使用常見的布局樣式。
流體布局：此布局包含大小一致的控件，如按鈕。
單主控件布局：Touch Bar 的中心包含單個大型控件，例如候選列表（在文本輸入期間提供自動完成建議）。 其他控件（如按鈕和分段控件）位于左側。
雙主控件布局：?Touch Bar 的中心包含兩個一致大小的控件。 其他控件位于左側。
三主控件布局：Touch Bar 的中心包含三個一致大小的控件。 其他控件位于左側。
3.4 字體
Touch Bar 使用 macOS 系統字體：San Francisco （英文） & 蘋方（中文）。此字體針對易讀性、清晰度和一致性進行了優化。 它也匹配實體鍵盤的字體。 標準 Touch Bar 控件（如按鈕和分段控件）自動使用此字體。 要了解如何在應用中應用系統字體，請參閱?NSFont?。
四、圖標
4.1 圖標尺寸和分辨率
Touch Bar 上的圖片資源全部采用 @2x 切圖。在 @2x 的圖片中，1pt 等同于 2px。比如，36X36px 的圖標會轉化為 18X18pt 。在圖片名稱后面加上 @2x，然后把它們置入到 Xcode 文件中的 @2x 目錄下。
4.2 自定義圖標
如果系統默認圖標無法滿足應用內多個任務與狀態，可以繪制你的專屬圖標。
設計高識別度的圖標：圖標應該與主屏幕上的應用匹配，但需要符合Touch Bar的樣式風格。
讓圖標更簡潔：太多細節會讓圖標語義不清，降低可讀性。高擬物的圖形需要簡化保留最基本的元素。好的圖標是通過外形輪廓表意的，只會有少量內部細節。消除鋸齒以確保圖標輪廓清晰。不要使用投影或用陰影與高光的方式讓圖標凸顯出來。
讓圖標更一致：無論使用自定義圖標還是與系統圖標混合使用，所有的圖標都需要通過一致的尺寸，細節，透視和描邊保持相同的視覺感受。
參考系統圖標設計：設計自定義圖標時請參考系統圖標，盡量遵循相似的表現形式。
為圖標準備模板資源：圖標模板是一個背景透明并有alpha通道的黑色圖像。當圖標顯示在Touch Bar時，系統自動轉化圖標并為其應用適當的顏色。
測試圖標：為了非常準確的判斷圖標的表現，需要結合場景預覽所有圖標，確保模板資源在被系統轉化后符合預期。
4.2.1 尺寸
雖然圖標可以撐滿 Touch Bar 的高度，但圖標的高度通常不超過 44px （圓形圖標36px）。
保持圖標視覺居中：?裁剪設計稿以匹配圖標寬度，必要時增加內邊距以確保圖標在控件上顯示時視覺居中。
傾斜圖標盡量采用45度角：在系統圖標里，傾斜元素常常會呈現45度角，例如：全屏和退出全屏的箭頭圖標；返回、向下、前進、向上的人字形圖標；靜音圖標的斜線；編輯圖標中的鉛筆；瀏覽器圖標中的指南針指針。查看系統提供的圖標作為參考。
4.2.2 顏色和填充
Touch Bar 上的圖標應看上去與實體鍵盤按鍵的字形相似。如果使用了模板和系統顏色，圖標會自動產生這種效果。
不要用顏色區分開關狀態：系統會改變背景樣式表明開關狀態。
盡量用100%不透明的圖標：倘若為了兼顧可讀性，可用不透明度70%的作為輔助。僅當需要提升可讀性和平衡度的時候，使用中間色調。
4.2.3 描邊
為了匹配實體鍵盤的風格，圖標盡量用 2px 的描邊。如果需要讓圖標占據更多視覺重量，可以嘗試 3px 。
4.2.4 轉角
為了匹配系統圖標的風格，直角圖標使用 2px 的描邊，圓角圖標使用 1px 半徑3px 的描邊，填充形狀的圓角使用 4px 半徑。
4.2.5 模板
使用 Photoshop 和 Sketch 模板設計合適尺寸的 Touch Bar 圖標。
4.3 系統提供的圖標
系統提供了充足的代表常規任務和內容類型的圖標，可用于應用的控件上。
盡量使用系統圖標，因為它們更常見：由于系統圖標是模板資源，它們能自動地填色，基于環境光和鍵盤背光的亮度響應系統白點變化，并對用戶的交互行為自動作出反應。
不要重新定義系統圖標：為確保體驗的一致性，請按照圖標的原本意圖使用圖標。比如，不要把“移動文件”圖標應用于下載操作，要用原本的下載圖標。
僅使用為Touch Bar 設計的系統圖標：其他類型的系統圖標，比如工具欄，不是為了用于Touch Bar上而設計的。
備注：
一些系統圖標會在自右向左的文本場景下自動轉換方向，比如前進與后退。（像波斯語、阿拉伯語、希伯來語這些語言的書寫和閱讀習慣都是從右向左，所以排版也要求是從右向左）
五、控件
系統為 Touch Bar 的 “應用區” 內置了多種標準控件。盡可能地使用這些控件，以達到最佳的體驗一致性。
5.1 按鈕
點按按鈕以觸發應用程序的對應事件。按鈕可包含圖標和標題。
圖標優于標題：爭取設計出足夠清晰明了的圖標，不要依賴于文本的輔助。
使用簡短的標題：太長的標題會使 Touch Ba r顯得過于擁擠。
使用美觀的邊框顏色：默認邊框采取了和實體按鍵相似的外觀設計。如果確實需要自定義的話，推薦使用深色的邊框顏色。
5.2 切換鍵
切換鍵是按鈕的一種，用于 “開啟” 和 “關閉” 兩種狀態之間的切換。
使用背景表現當前狀態：在關閉狀態下，系統會自動改變按鈕的背景樣式，所以不需要使用顏色、文本或另外的圖標來表現當前狀態。
使用切換鍵取代單選框和復選框：如果你需要用戶在兩個狀態當中進行選擇的話，使用切換鍵。
5.3 候選列表
輸入文本時，候選列表提供自動文本建議。用戶可以通過點擊，將文本建議輸入到主屏幕中激活的文本框或文本區域內。用戶可以選擇展開或者收起候選列表。展開的候選列表將會替代區域內的其他控件。
5.4 字符選擇器
點擊字符選擇器時，會打開一個包含一系列特殊字符的彈出視窗，如 emoji 。用戶可以通過點擊，將其輸入至主屏幕中激活的文本框或文本區域中。
5.5 拾色器
點擊拾色器時，會打開一個包含了顏色選擇控件的彈出視窗。拾色器可通過配置，展示為選取顏色、邊框或文本顏色的圖標。無論是哪種圖標，所有拾色器打開后顯示的均為同一視窗。
帶意圖使用圖標：當拾取邊框顏色時，使用邊框顏色選取圖標。當拾取文本顏色時，使用文本顏色選取圖標。其他拾色場景下，使用顏色選取圖標。
5.6 標簽
標簽展示只讀文本，通常是為了描述一個控件而設。
避免使用標簽：雖然 Touch Bar 可以展示標簽，但是最好不要使用，因為用戶并不能與標簽進行交互。我們更應該專注于為控件設計更加有趣的圖標。如果你必須使用標簽，使之盡可能的簡短。
為復雜圖標說明時，標題優于標簽：如果一個控件的圖標本身并不是足夠清晰名了，可考慮增加一個簡短的標題以提供其使用語境。
5.7 彈窗
在折疊狀態下，彈出視窗在 Touch Bar 中表現為一個單獨的按鈕。
展開時，彈出視窗將生成一個包含一組暫駐控件的模塊，覆蓋掉應用區域中的其他控件。在這個模塊的覆蓋下，用戶必須進行選擇操作，或者也可以通過點擊退出鍵收起當前菜單，使得彈出視窗回到折疊態。
通過點擊以展開彈出視窗。彈出視窗也可以按需響應長按動作。支持長按動作的彈出視窗需要包含左箭頭符號。
通過長按觸發的彈出視窗，可以使用和普通彈出視窗一樣又或者是完全不同的蒙層。在長按觸發的蒙層中，用戶通過滑動手指到達想要的選項，松開以完成選擇并關閉彈出視窗。
有節制使用彈窗：單一點擊應能觸發 Touch Bar 中的大多數控件。
避免嵌套彈窗：一般來說，盡量避免在 Touch Bar 中進行一級以上的導航。
給簡單的彈窗保留長按動作：長按動作主要是為了展示一組包含簡單選項的蒙層而保留，例如分段控件，這樣用戶便可以從中進行選擇。
折疊狀態的彈窗表明選中項：彈出視窗在展開時包含了一組選項，在折疊狀態下則應該示意當前選中項。
提供明確的退出路徑：確保用戶知道如何收起一個彈出視窗，并回到之前的一組控件。
5.8 滑動條
滑動條可以讓用戶通過左右滑動，在如一組時間或者照片等內容中進行概覽?；瑒訔l可以是固定的，可以是能自由移動的，也可以是高度定制化的——但是需要保留和Touch Bar相稱的外觀。
5.8.1 固定滑動條
固定滑動條為一組組織好的內容提供流暢而連續的交互，如Safari的標簽頁切換。用戶在使用滑動條左右滑動時，手指底下的項目高亮展示。取決于滑動條的配置，用戶可以通過滑動或抬起手指完成選擇。如果內容超出了固定滑動條的顯示區域，當手指滑動到控件的邊緣的時候，滑動條會自動滑出并顯示剩余的選項。在固定滑動條里，用戶的手指直接移動的是選項，并非內容。
5.8.2 自由滑動條
自由滑動條在一個可自由滑動的列表中展示內容，例如“日歷”應用中的一組日期，用戶左右滑便可使直接查看內容。取決于滑動條的配置，如果一個選項處在某個特定的位置，如滑動條的中央，那么這個選項則被選中；或者滑動條本身是固定的，需要用戶手動點擊選擇。
使用符合預期和具有組織邏輯的值。在自由滑動條中，如果可滑動列表是固定的話，則很多數值可能是被隱藏起來的。像是一組按照字母表順序排列的國家列表一樣，如果用戶在使用的時候能推測出這些數值是什么最好不過，這樣用戶便能快速地在列表中移動。
避免展示數字過大的列表。在Touch Bar中瀏覽長列表非常乏味。如果你有一組數值很大的列表，考慮在主屏幕而非Touch Bar上展示，這樣的話鍵盤或者觸控板均可用作導航。
5.9 分段控件
分段控件是由包含了兩個或以上線性關系的部件所組成，每個部件的作用就像是按鈕——通常會配置為切換鍵。在這個控件中，所有部件等寬。像按鈕一樣，分段控件可以包含文本和圖標。
限制部件的數量以提升可用性。更寬的部件更容易點擊。
圖標優于標題。爭取設計出足夠清晰明了的圖標，不要依賴于文本的輔助。
保持分段控件中的內容尺寸的一致性。因為各個部件寬度相等，如果每個部件中內容填充不一的話，會顯得不夠美觀。
使用簡短的標題。太長的標題會使Touch Bar顯得過于擁擠。
深色的邊框顏色變化優于淺色。默認邊框采取了和實體按鍵相似的外觀設計。如果確實需要自定義的話，推薦使用深色的邊框顏色。
5.10 分享服務選擇
分享服務選擇為用戶提供了一種便捷的分享方式，用戶可以分享文本、圖像和應用程序、社交媒體賬號中的其他內容，又或是其他服務。通過點擊分享服務選擇器，觸發包含分享按鈕的彈出視窗。
僅在有可分享的內容時激活分享服務選擇器。如果用戶沒有選擇任何文本、圖像或者其他可分享內容，應該停用分享服務選擇器。
5.11 滑塊
滑塊由一個水平軌道和一個名為拇指鍵的控件所組成，你可以在其最大值和最小值之間滑動，例如調節屏幕的亮度或視頻的播放進度。在滑塊的數值改變時，拇指鍵和最小值之間的軌道將會被填充以顏色。
自定義滑塊的樣式以適應你的應用，增添趣味。考慮讓滑軌的顏色和你應用的配色相互搭配。
提供左右兩邊的圖標以說明最大值和最小值所代表的含義。舉個例子，調整圖像大小的滑塊可在左邊配置一個小圖圖標，而在右邊配置一個大圖圖標。
設計模版免費下載：鏈接: https://pan.baidu.com?密碼: tyxa
強烈推薦騰訊ISUX 設計師寫的一篇分析：《熱門好文！從IOS 10設計指南變化看設計的新趨勢》
往期回顧：
- 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （一）》
- 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （二）》
- 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （三）》
- 《中文版來了！UI設計師必讀的IOS 10人機界面設計指南 （四）》
歡迎關注作者的微信公眾號：「用戶設計」
【優設網 原創文章 投稿郵箱：yuan@uisdc.com】
================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量180萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
AI輔助海報設計101例
已累計誕生 737 位幸運星
發表評論
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓