如何為 Touch Bar 進行設計?

導讀:

2016 年 10 月 28 日凌晨 1 點,蘋果「hello again」新品發布會推出了新款 MacBook Pro,蘋果對筆記本電腦交互進行了一次全新探索,引入了全新硬體 Touch Bar「將硬體和軟體結合得渾然一體」,這條擁有視網膜屏的 OLED 條支持多點觸控,硬體的革新帶來了全新的交互方式。

蘋果2016新MacBook Pro官方介紹視頻(中文字幕) - 騰訊視頻 http://v.qq.com/x/page/t0340y170an.html

一、Touch Bar 是什麼?

蘋果官方將 Touch Bar 定義為「一個採用了視網膜屏的輸入設備,提供動態的界面控制項支持主屏幕上的內容交互」。這些控制項基於當下情境支持系統層面以及特定應用功能的快速訪問。n

除此之外,Touch Bar 上右邊的 Touch ID 感測器允許用戶通過指紋識別來登錄電腦並支持 App Store 以及 Apple Pay 的快捷支付。由此可見,Touch Bar 作為一個可定製的輸入設備承載了大量的快捷操作,可以極大地提高用戶的使用效率。n

二、Touch Bar 支持哪些功能?

Touch Bar 按照功能分為系統按鈕(不可隱藏)、應用區(可隱藏)以及控制項條(不可隱藏)三部分。n

  • 左邊的系統按鈕根據當下情境顯示退出按鈕或者其他系統按鈕;

  • 中間的應用區域可以展示特定應用的控制項;

  • 右邊的可伸縮控制項條可以實現包括喚起 siri、調整主屏幕亮度、改變音量等系統層面的操作,取代了之前鍵盤頂部的一排物理功能鍵。

此外,Touch Bar 是可配置的。用戶可以在控制項條上移除或者徹底隱藏某個功能項,用戶也可以隱藏應用區,只展示處於展開狀態的控制項條。一些應用也支持在應用區增加或移除功能項。n

三、如何為 Touch Bar 進行設計?

在為Touch Bar進行設計時需要遵循以下十條規則:n

1.設計符合情境的體驗。確保 Touch Bar 與主屏幕的當前內容相關。識別應用的不同上下文,基於應用如何使用思考如何展示不同層級的功能。n

2.使用 Touch Bar 作為鍵盤或者觸控板的拓展,而非一塊屏幕。儘管從技術上來說它是一塊屏幕,但是 Touch Bar 的功能是作為一個輸入設備,而非一個輔助屏。用戶可能會掃視 Touch Bar 來定位或者使用控制項,但是他們的主要焦點是主屏幕。Touch Bar 不應展示通知、消息、滾動內容、靜態內容或者其他吸引用戶注意力,或者讓他們從主屏幕上的工作分心的內容。n

3.努力與物理鍵盤的外觀相匹配。Touch Bar 中的控制項應該儘可能的與物理鍵盤鍵的尺寸和顏色保持一致。n

4.不要僅在 Touch Bar 上展示功能。並不是所有的設備都有 Touch Bar,而且人們也可能禁用 Touch Bar 上的應用控制項。要始終提供使用鍵盤或者觸控板完成任務的方法。n

5.提供會立見功效的控制項。為那些通過點擊控制項或者從菜單中選擇需要多步操作的任務提供快捷操作。n

6.對用戶的交互立即反饋。即使你的應用正在不停工作或者主屏幕正在更新內容,Touch Bar上任何一個啟用的控制項都應該對用戶的觸碰有所回應。n

7.如果可能,任務始於 Touch Bar,終於 Touch Bar。用戶不需要切換到鍵盤或者觸控板完成那個任務,除非這個任務需要更多的複雜界面控制項,超過了 Touch Bar 可以提供的數量。n

8.避免使用 Touch Bar 來完成那些用熟知的鍵盤快捷鍵就能完成的任務。一般來說,Touch Bar 不應該包含諸如查找、選擇全部、取消選擇、複製、剪切、粘貼、撤銷、重做、新建、保存、關閉、列印以及退出等的控制項。它也不應該重複包含基於鍵盤導航的控制項,例如向上翻頁和向下翻頁。n

9.一致、準確的反應狀態。如果一個控制項存在於 Touch Bar 和主屏幕,那麼兩個位置的控制項都應該展示相同的狀態。如果屏幕上的某個按鈕被禁用,在 Touch Bar 上的狀態也應如此。n

10.避免在主屏幕上鏡像 Touch Bar 的交互。如果用戶在 Touch Bar 上點擊按鈕後出現了一個選項列表,無需在主屏幕上將選項列表再次呈現。

參考來源:

developer.apple.com/lib
推薦閱讀:

如何做出有逼格的投影?
交互原型設計不知如何下手?你需要幾件稱手的「兵器」
當我們設計「發現頁」時,我們想讓用戶逛什麼?
設計 | 移動端下拉表單的最佳替代方案

TAG:MacBookPro | 交互设计 |