2017-2-4 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
導(dǎo)語：日前蘋果發(fā)布會(huì)上，最大的亮點(diǎn)之一當(dāng)屬替代一欄功能鍵的Touch bar。本文包括有5個(gè)小節(jié)，詳細(xì)介紹了Touch bar設(shè)計(jì)原則、新特性和基本元素 ，一起來學(xué)習(xí)。
Touch Bar是位于新一代MacBook Pro鍵盤上方的一條 Retina 顯示屏，同時(shí)也是與主屏幕內(nèi)容交互提供動(dòng)態(tài)操作界面的輸入設(shè)備?；诋?dāng)前語境，Touch Bar的這些控件能對(duì)系統(tǒng)或應(yīng)用的功能進(jì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)買支付功能。
默認(rèn)情況下，位于Touch Bar右側(cè)的可擴(kuò)展控件條（Control Strip）中包含了系統(tǒng)級(jí)操作的控件，如喚起Siri、調(diào)整主屏幕的亮度及音量等。而在此之前，用戶是通過物理按鍵進(jìn)行大多數(shù)的此類操作。你可以在位于控件條左側(cè)的應(yīng)用程序區(qū)域中，寫入特定的應(yīng)用控件。Esc（退出鍵）或其他系統(tǒng)按鍵會(huì)根據(jù)當(dāng)前情況出現(xiàn)在應(yīng)用區(qū)域的左側(cè)。
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。
在設(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看作鍵盤和觸控板的延伸，而非顯示器。盡管在技術(shù)層面上Touch Bar就是屏幕，但它是被視作輸入設(shè)備使用的，而非輔助顯示器。用戶可能會(huì)通過Touch Bar來定位或使用某個(gè)功能，但他們的焦點(diǎn)應(yīng)該處于主屏幕之上。任何過分吸引用戶注意力或者會(huì)影響主屏幕上首頁任務(wù)的信息，如警告窗口、信息、滾動(dòng)內(nèi)容、靜態(tài)內(nèi)容等，都不應(yīng)該在Touch Bar上展示。
視覺效果盡量與實(shí)體鍵盤一致。Touch Bar中的控件在大小和顏色方面應(yīng)盡可能與實(shí)體鍵盤外觀保持一致。
不要單獨(dú)地在Touch Bar中顯示某項(xiàng)功能。并非所有設(shè)備都有Touch Bar，用戶也有可能選擇禁用一個(gè)應(yīng)用程序配置在Touch bar上的控件。應(yīng)該始終提供能在鍵盤或觸控板上執(zhí)行任務(wù)的方式。
控件應(yīng)能立即生效。提供更快捷的操作，否則用戶需要用更多步驟來完成諸如點(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)該切換到鍵盤或觸控板來完成任務(wù)，除非這項(xiàng)任務(wù)所要求的界面控件的復(fù)雜度超出了Touch Bar的支持范圍。
避免使用Touch Bar執(zhí)行常見的快捷鍵任務(wù)。一般來說，Touch Bar不提供包含查找、全選、取消選擇、復(fù)制、剪切、粘貼、撤消、重做、新建、保存、關(guān)閉、打印和退出等操作，也不應(yīng)該重復(fù)提供已有的鍵位導(dǎo)航，如向上翻頁和向下翻頁。
一致并準(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)在主屏幕上顯示。
macOS提供了大量的輔助功能來幫助失明、失聰以及其他殘疾群體。與標(biāo)準(zhǔn)界面元素一樣，Touch Bar中的控件也可以輕松訪問。
為控件提供替代文本標(biāo)簽。文本標(biāo)簽并不會(huì)顯示在觸控欄上，但是它們能讓VoiceOver語音描述控件，讓視力障礙用戶的調(diào)用和導(dǎo)航操作更輕松。
為自定義控件添加文本標(biāo)簽。VoiceOver可以借用這些標(biāo)簽，語音描述自定義屏幕上的控件。相關(guān)指引，請(qǐng)參閱Customization。
Touch Bar上的應(yīng)用控件都允許用戶添加、刪除或重新排列，以滿足其各自的工作方式。
通常來說，允許用戶自定義。你無法預(yù)期用戶會(huì)如何使用你的應(yīng)用。為重要和常用的功能提供默認(rèn)值，但允許用戶自主調(diào)整以滿足自己需要。
全屏模式的應(yīng)用提供了無干擾工作環(huán)境。在全屏模式下，工具欄和其他控件通常是隱藏的，只有在用戶調(diào)用它們時(shí)才顯示，比如將指針移動(dòng)到屏幕頂部。為了讓用戶聚焦內(nèi)容，一些應(yīng)用也會(huì)在主屏幕上隱藏控件，例如，用戶用QuickTime播放電影或以幻燈片的方式查看照片時(shí)。通過在Touch bar中顯示控件，用戶可以直接訪問常用功能，而無需移動(dòng)指針或查看疊加在其內(nèi)容上的控件。
提供相關(guān)和常用的控件。當(dāng)控件在主屏幕上隱藏時(shí)，Touch bar可能只包含可見控件，所以這些控件應(yīng)該對(duì)用戶在主屏幕看到的內(nèi)容有用和相關(guān)。
用戶通過使用以下手勢(shì)來與Touch Bar交互：
點(diǎn)擊。激活控件，例如按鈕。選擇對(duì)象，例如表情符號(hào)，顏色或分段控件。
長(zhǎng)按。激活控件下一層級(jí)操作，比如按鈕。例如當(dāng)郵件處于激活狀態(tài)時(shí)點(diǎn)擊“標(biāo)記”按鈕可以增加標(biāo)記，觸摸并按住標(biāo)記按鈕會(huì)展開操作浮層，讓你選擇標(biāo)記的顏色。長(zhǎng)按標(biāo)記按鈕會(huì)展開操作浮層，讓你選擇標(biāo)記的顏色。
水平滑動(dòng)（平移）。可以移動(dòng)對(duì)象，比如將滑塊從一側(cè)移動(dòng)到另一側(cè)。可以快速瀏覽內(nèi)容，比如通過滾軸查看日期或照片。
多點(diǎn)觸控。雖然Touch Bar可以響應(yīng)多個(gè)手指的觸控，例如捏合手勢(shì)，但多點(diǎn)觸控手勢(shì)可能會(huì)造成麻煩，應(yīng)該謹(jǐn)慎使用。
避免動(dòng)畫。 Touch Bar是鍵盤的延伸，用戶對(duì)鍵盤中出現(xiàn)動(dòng)畫沒有預(yù)期。 此外，過度或不必要的動(dòng)畫讓用戶分心。
mac OS定義了一系列系統(tǒng)顏色，可以動(dòng)態(tài)地匹配標(biāo)準(zhǔn)界面控件的配色方案，如按鈕和標(biāo)簽。以下系統(tǒng)顏色是Touch Bar的理想選擇：
系統(tǒng)顏色會(huì)基于環(huá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.
少而精地使用顏色。一般來說，Touch Bar的外觀應(yīng)與實(shí)體鍵盤類似。 單色效果更好。如果必須使用多種顏色，請(qǐng)確保美觀，且主要在臨時(shí)狀態(tài)下使用。不要使用太多或不恰當(dāng)?shù)念伾?
用顏色凸顯信息。顏色可以讓重要控件更顯眼。默認(rèn)控件使用藍(lán)色，不可逆操作控件使用紅色。
選擇與應(yīng)用相符的有限色板。巧妙地使用顏色是一個(gè)傳達(dá)品牌的好辦法。
提供寬色域的設(shè)計(jì)稿。 Touch Bar支持P3顏色空間，可以產(chǎn)生比sRGB更豐富，更飽和的顏色。 使用顯示P3顏色配置文件，每像素16位（每通道），并以.png格式導(dǎo)出設(shè)計(jì)稿。
除開Touch ID傳感器，Touch Bar大小為2170x60px。Touch Bar采用的高分辨率Renita屏 ，換算為對(duì)應(yīng)的pt值為1085x30pt。
在其標(biāo)準(zhǔn)配置中，Touch Bar包含三個(gè)主要區(qū)域，每個(gè)區(qū)域的間隔是32px。
設(shè)計(jì)時(shí)假設(shè)默認(rèn)控件條可見。 雖然用戶可以重新配置控件條，減小它的大小，并完全禁用它，但你的應(yīng)用程序不應(yīng)該依賴這個(gè)控制條。
在Touch Bar中，系統(tǒng)提供了幾個(gè)選項(xiàng)來分隔app控件：
合乎邏輯、直觀地?cái)[放控件。 應(yīng)用程序區(qū)域的左側(cè)適用于通用控件。 例如，當(dāng)Notes處于激活態(tài)時(shí)，無論是在瀏覽筆記、編輯筆記還是在瀏覽附件，都會(huì)在Touch Bar的最左側(cè)顯示用于添加注釋的“撰寫”按鈕。 否則，最好中間位置放置主要控件，左側(cè)放置二級(jí)選項(xiàng)。
構(gòu)建靈活的布局。 應(yīng)用程序區(qū)域的寬度會(huì)根據(jù)控件條的配置而有所不同，所以在有可用空間的時(shí)候，考慮用滑塊、滑動(dòng)條這些控件延展操作區(qū)域。
盡量保持一致的間距。 Touch Bar中的控件間距盡可能相等，除非有讓內(nèi)容變清晰或歸類相關(guān)控件的需要，才改變間距。
用靈活的間距和分組輔助對(duì)齊。 控件之間靈活的間距將左側(cè)控件推向Touch Bar左側(cè)，將右側(cè)控件推向Touch Bar右側(cè)。分組讓你可以一次放置多個(gè)控件。通過標(biāo)記控件或者控件組，你可以使其作為主要控件區(qū)在Touch Bar居中。
不要自動(dòng)改變控件位置。 隨意改變控件位置，用戶會(huì)感到受挫和困惑。 用戶可以手動(dòng)自定義控件位置，但你的應(yīng)用應(yīng)避免無緣無故改變位置的情況。
不要反過來從右至左地放置控件。反置控件可能會(huì)導(dǎo)致Touch Bar自定義功能出現(xiàn)問題，并且系統(tǒng)已經(jīng)反置了某些控件，例如分段控件和滑塊。
由于存在多種配置選項(xiàng)和控件大小設(shè)置，對(duì)于不同的app，Touch Bar中的布局樣式可以多種多樣，但是盡可能的使用常見的布局樣式。
流體布局。 此布局包含大小一致的控件，如按鈕。
有一個(gè)主要控件區(qū)的布局。 Touch Bar的中心包含單個(gè)大型控件，例如候選列表（在文本輸入期間提供自動(dòng)完成建議）。 其他控件（如按鈕和分段控件）位于左側(cè)。
有兩個(gè)主要控件區(qū)的布局。 Touch Bar的中心包含兩個(gè)一致大小的控件。 其他控件位于左側(cè)。
有三個(gè)主要控件區(qū)的布局。 Touch Bar的中心包含三個(gè)一致大小的控件。 其他控件位于左側(cè)。
Touch Bar使用的是macOS中的系統(tǒng)字體——San Francisco。 此字體針對(duì)易讀性、清晰度和一致性進(jìn)行了優(yōu)化。 它也匹配實(shí)體鍵盤的字體。 標(biāo)準(zhǔn)Touch Bar控件（如按鈕和分段控件）自動(dòng)使用此字體。 要了解如何在應(yīng)用中應(yīng)用系統(tǒng)字體，請(qǐng)參閱NSFont的參考文檔。
Touch Bar上的圖片資源全部采用@2x切圖。在@2x的圖片中，1pt等同于2px。比如，36X36px的圖標(biāo)會(huì)轉(zhuǎn)化為18X18pt。在圖片名稱后面加上@2x，然后把它們置入到Xcode文件中的@2x目錄下。
如果系統(tǒng)默認(rèn)圖標(biāo)無法滿足應(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)語義不清，降低可讀性。高擬物的圖形需要簡(jiǎn)化保留最基本的元素。好的圖標(biāo)是通過外形輪廓表意的，只會(huì)有少量?jī)?nèi)部細(xì)節(jié)。消除鋸齒以確保圖標(biāo)輪廓清晰。不要使用投影或用陰影與高光的方式讓圖標(biāo)凸顯出來。
讓圖標(biāo)更一致。無論使用自定義圖標(biāo)還是與系統(tǒng)圖標(biāo)混合使用，所有的圖標(biāo)都需要通過一致的尺寸，細(xì)節(jié)，透視和描邊保持相同的視覺感受。
參考系統(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ù)期。
雖然圖標(biāo)可以撐滿Touch Bar的高度，但圖標(biāo)的高度通常不超過44px（圓形圖標(biāo)36px）。
保持圖標(biāo)視覺居中。裁剪設(shè)計(jì)稿以匹配圖標(biāo)寬度，必要時(shí)增加內(nèi)邊距以確保圖標(biāo)在控件上顯示時(shí)視覺居中。
傾斜圖標(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)作為參考。
Touch Bar上的圖標(biāo)應(yīng)看上去與實(shí)體鍵盤按鍵的字形相似。如果使用了模板和系統(tǒng)顏色，圖標(biāo)會(huì)自動(dòng)產(chǎn)生這種效果。
不要用顏色區(qū)分開關(guān)狀態(tài)。系統(tǒng)會(huì)改變背景樣式表明開關(guān)狀態(tài)。
盡量用100%不透明的圖標(biāo)。倘若為了兼顧可讀性，可用不透明度70%的作為輔助。僅當(dāng)需要提升可讀性和平衡度的時(shí)候，使用中間色調(diào)。
相關(guān)的指引，可查看 Color。
為了匹配實(shí)體鍵盤的風(fēng)格，圖標(biāo)盡量用2px的描邊。如果需要讓圖標(biāo)占據(jù)更多視覺重量，可以嘗試3px。
為了匹配系統(tǒng)圖標(biāo)的風(fēng)格，直角圖標(biāo)使用2px的描邊，圓角圖標(biāo)使用1px半徑3px的描邊，填充形狀的圓角使用4px半徑。
使用Photoshop和Sketch模板設(shè)計(jì)合適尺寸的Touch Bar圖標(biāo)。下載圖標(biāo)模版Download Icon Templates。
系統(tǒng)提供了充足的代表常規(guī)任務(wù)和內(nèi)容類型的圖標(biāo)，可用于應(yīng)用的控件上。
盡量使用系統(tǒng)圖標(biāo)，因?yàn)樗鼈兏Ｒ姟?/strong>由于系統(tǒng)圖標(biāo)是模板資源，它們能自動(dòng)地填色，基于環(huá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)。
僅使用為Touch Bar而設(shè)計(jì)的系統(tǒng)圖標(biāo)。其他類型的系統(tǒng)圖標(biāo)，比如工具欄，不是為了用于Touch Bar上而設(shè)計(jì)的。
備注：
一些系統(tǒng)圖標(biāo)會(huì)在自右向左的文本場(chǎng)景下自動(dòng)轉(zhuǎn)換方向，比如前進(jìn)與后退。（譯者注：像波斯語、阿拉伯語、希伯來語這些語言的書寫和閱讀習(xí)慣都是從右向左，所以排版也要求是從右向左）
系統(tǒng)為Touch Bar的應(yīng)用區(qū)域內(nèi)置了多種標(biāo)準(zhǔn)控件。盡可能地使用這些控件，以達(dá)到最佳的體驗(yàn)一致性。
點(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顯得過于擁擠。
使用美觀的邊框顏色。默認(rèn)邊框采取了和實(shí)體按鍵相似的外觀設(shè)計(jì)。如果確實(shí)需要自定義的話，推薦使用深色的邊框顏色。
切換鍵是按鈕的一種，用于“開啟”和“關(guān)閉”兩種狀態(tài)之間的切換。
使用背景來表現(xiàn)當(dāng)前狀態(tài)。在關(guān)閉狀態(tài)下，系統(tǒng)會(huì)自動(dòng)改變按鈕的背景樣式，所以不需要使用顏色、文本或另外的圖標(biāo)來表現(xiàn)當(dāng)前狀態(tài)。
使用切換鍵取代單選框和復(fù)選框。如果你需要用戶在兩個(gè)狀態(tài)當(dāng)中進(jìn)行選擇的話，使用切換鍵。
輸入文本時(shí)，候選列表提供自動(dòng)文本建議。用戶可以通過點(diǎn)擊，將文本建議輸入到主屏幕中激活的文本框或文本區(qū)域內(nèi)。用戶可以選擇展開或者收起候選列表。展開的候選列表將會(huì)替代區(qū)域內(nèi)的其他控件。
點(diǎn)擊字符選擇器時(shí)，會(huì)打開一個(gè)包含一系列特殊字符的彈出視窗，如emoji。用戶可以通過點(diǎn)擊，將其輸入至主屏幕中激活的文本框或文本區(qū)域中。
點(diǎn)擊拾色器時(shí)，會(huì)打開一個(gè)包含了顏色選擇控件的彈出視窗。拾色器可通過配置，展示為選取顏色、邊框或文本顏色的圖標(biāo)。無論是哪種圖標(biāo)，所有拾色器打開后顯示的均為同一視窗。
帶意圖地使用圖標(biāo)。當(dāng)拾取邊框顏色時(shí)，使用邊框顏色選取圖標(biāo)。當(dāng)拾取文本顏色時(shí)，使用文本顏色選取圖標(biāo)。其他拾色場(chǎng)景下，使用顏色選取圖標(biāo)。
標(biāo)簽展示只讀文本，通常是為了描述一個(gè)控件而設(shè)。
一般來說，避免使用標(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)題以提供其使用語境。
在折疊狀態(tài)下，彈出視窗在Touch Bar中表現(xiàn)為一個(gè)單獨(dú)的按鈕。
展開時(shí)，彈出視窗將生成一個(gè)包含一組暫駐控件的模塊，覆蓋掉應(yīng)用區(qū)域中的其他控件。在這個(gè)模塊的覆蓋下，用戶必須進(jìn)行選擇操作，或者也可以通過點(diǎn)擊退出鍵收起當(dāng)前菜單，使得彈出視窗回到折疊態(tài)。
通過點(diǎn)擊以展開彈出視窗。彈出視窗也可以按需響應(yīng)長(zhǎng)按動(dòng)作。支持長(zhǎng)按動(dòng)作的彈出視窗需要包含左箭頭符號(hào)。
通過長(zhǎng)按觸發(fā)的彈出視窗，可以使用和普通彈出視窗一樣又或者是完全不同的蒙層。在長(zhǎng)按觸發(fā)的蒙層中，用戶通過滑動(dòng)手指到達(dá)想要的選項(xiàng)，松開以完成選擇并關(guān)閉彈出視窗。
有節(jié)制地使用彈出視窗。單一點(diǎn)擊應(yīng)能觸發(fā)Touch Bar中的大多數(shù)控件。
避免嵌套的彈出視窗。一般來說，盡量避免在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)。彈出視窗在展開時(shí)包含了一組選項(xiàng)，在折疊狀態(tài)下則應(yīng)該示意當(dāng)前選中項(xiàng)。
提供明確的退出路徑。確保用戶知道如何收起一個(gè)彈出視窗，并回到之前的一組控件。
滑動(dòng)條可以讓用戶通過左右滑動(dòng)，在如一組時(shí)間或者照片等內(nèi)容中進(jìn)行概覽?；瑒?dòng)條可以是固定的，可以是能自由移動(dòng)的，也可以是高度定制化的——但是需要保留和Touch Bar相稱的外觀。
固定滑動(dòng)條為一組組織好的內(nèi)容提供流暢而連續(xù)的交互，如Safari的標(biāo)簽頁切換。用戶在使用滑動(dòng)條左右滑動(dòng)時(shí)，手指底下的項(xiàng)目高亮展示。取決于滑動(dòng)條的配置，用戶可以通過滑動(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)容。
自由滑動(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ù)值可能是被隱藏起來的。像是一組按照字母表順序排列的國(guó)家列表一樣，如果用戶在使用的時(shí)候能推測(cè)出這些數(shù)值是什么最好不過，這樣用戶便能快速地在列表中移動(dòng)。
避免展示數(shù)字過大的列表。在Touch Bar中瀏覽長(zhǎng)列表非常乏味。如果你有一組數(shù)值很大的列表，考慮在主屏幕而非Touch Bar上展示，這樣的話鍵盤或者觸控板均可用作導(dǎo)航。
分段控件是由包含了兩個(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顯得過于擁擠。
深色的邊框顏色變化優(yōu)于淺色。默認(rèn)邊框采取了和實(shí)體按鍵相似的外觀設(shè)計(jì)。如果確實(shí)需要自定義的話，推薦使用深色的邊框顏色。
分享服務(wù)選擇器為用戶提供了一種便捷的分享方式，用戶可以分享文本、圖像和應(yīng)用程序、社交媒體賬號(hào)中的其他內(nèi)容，又或是其他服務(wù)。通過點(diǎn)擊分享服務(wù)選擇器，觸發(fā)包含分享按鈕的彈出視窗。
僅在有可分享的內(nèi)容時(shí)激活分享服務(wù)選擇器。如果用戶沒有選擇任何文本、圖像或者其他可分享內(nèi)容，應(yīng)該停用分享服務(wù)選擇器。
滑塊由一個(gè)水平軌道和一個(gè)名為拇指鍵的控件所組成，你可以在其最大值和最小值之間滑動(dòng)，例如調(diào)節(jié)屏幕的亮度或視頻的播放進(jìn)度。在滑塊的數(shù)值改變時(shí)，拇指鍵和最小值之間的軌道將會(huì)被填充以顏色。
自定義滑塊的樣式以適應(yīng)你的應(yīng)用，增添趣味?？紤]讓滑軌的顏色和你應(yīng)用的配色相互搭配。
提供左右兩邊的圖標(biāo)以說明最大值和最小值所代表的含義。舉個(gè)例子，調(diào)整圖像大小的滑塊可在左邊配置一個(gè)小圖圖標(biāo)，而在右邊配置一個(gè)大圖圖標(biāo)。
原文訪問地址：macOS Human Interface Guidelines：About the Touch Bar
翻譯版PDF下載：點(diǎn)擊下載
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com