2017-2-6 資深UI設計者
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
蘋果在近期推出了新款Macbook Pro，以Touch Bar取代了原有的功能鍵。相信每個Mac產品團隊都在思考，該如何利用它給用戶帶來更好的使用體驗。在此分享一下QQ Mac版團隊的一點思考。
想利用好Touch Bar，先要明白它是什么。通過蘋果官方的介紹，可以了解到，蘋果對Touch Bar的定義是“用來與主屏幕內容交互的具有動態(tài)界面的輸入設備”。所以我們要明白它的兩個主要特性：
1、是鍵盤的延伸：Touch Bar雖然是一塊屏幕，但是他并不作為顯示設備，而是輸入設備。它的設計初衷是希望用戶能快速定位功能、調整參數，用戶使用時的注意力應盡量在屏幕上，低頭看Touchbar反而會降低使用效率。
2、隨焦點而變：Touch Bar上顯示的功能會隨著屏幕焦點的變化而變化，使得拓展性大大加強。因為與屏幕焦點直接關聯，Touch Bar不光能隨著應用的改變而變化功能，在同一個應用的不同頁面，也可以有不同的功能，其狀態(tài)、反饋均與屏幕保持一致。
蘋果對Touch Bar的設計給出了完整的設計規(guī)范，這里不再贅述。（ISUX已有翻譯，點擊查看）
在初步體驗過后，我們發(fā)現Touch Bar使一些使用場景變得更有效率也更有趣，但是功能項隨著應用和頁面頻繁變動，也導致學習成本非常高，不熟練的時候經常需要低頭看。因此我們認為想要提升使用效率，降低學習和記憶成本，達到“抬頭操作”的目的的話，還需注意以下幾點：
1、固定鍵位：在一個應用中，有些功能可能在多個頁面出現，這些功能的按鍵應盡量處于同樣的位置，并與屏幕中的位置和順序保持一致，上降低學習成本，培養(yǎng)手感。
2、屏幕反饋：通過Touch Bar操作功能時，屏幕應實時給出明確的狀態(tài)變化和提示，使得用戶無需低頭看Touch Bar，直接抬頭完成操作。由于Touch Bar只能橫向滑動，屏幕狀態(tài)或提示盡量也采用橫向布局，保持操作與反饋的認知一致性。
3、保證點擊：對于鍵盤來說，最基礎的交互方式就是點擊，因此Touch Bar上的功能都應該支持最基本的點擊相應事件。對于有些復雜的編輯或選取功能，可以考慮在按鈕支持點擊的基礎上，支持長按、滑動等手勢進行快速操作，這樣既能與用戶已有的使用習慣保持一致，同時兼顧操作的快捷性。
4、流程完整：Touch Bar上發(fā)起的功能，最好能在Touch Bar上結束。因為如果后續(xù)操作需要通過鍵盤、觸控板或鼠標完成，會帶來手的頻繁位移，效率并沒有提升。
Touch Bar雖然可以變化，但是畢竟空間有限，不可能將所有功能都放上去。而且它雖然擴展性很強，但是不能后臺響應，使用場景比快捷鍵要受到限制。
對于QQ Mac版，哪些功能適合放到Touch Bar上呢？經過幾輪腦暴，結合實際使用場景和Touch Bar規(guī)范，我們認為有3個方向：
1、特色的高頻功能調起：比如QQ用戶最常用的提取消息、搜索，是在任何界面都會使用的功能，非常適合固定在Touch Bar上，方便使用。
2、觸控板、快捷鍵支持的不夠好的功能：從使用場景來看，Touch Bar在鼠標效率低或沒有鼠標的場景下更能發(fā)揮價值?？旖萱I鍵位有限，Touchpad手勢有限，自定義的話容易與系統或其他應用沖突，因此往往只能用于最常用的功能。對于其他的次高頻功能，可以考慮通過Touch Bar來承載，提升使用效率。
3、通過獨有交互簡化操作步驟：Touch Bar不光使得屏幕上的功能有了一個對應的按鍵，還賦予了這個按鍵長按、滑動等手勢。這就好比在觸屏上增加了3D Touch的功能，交互的維度得到提升，這就使得原本需要多步操作的功能有了一步完成的可能。比如QQ發(fā)送語音消息。
我們選取了幾個典型場景來進行Touch Bar的功能設計。
通用場景是指主面板無焦點的場景，比如剛登陸時。在該場景下，Touch Bar上承載提取消息按鈕、搜索按鈕、模式切換按鈕。
提取消息按鈕
提取消息是QQ用戶在任何界面都會使用的全局功能。以往快捷鍵（cmd+control+Z）只能支持用戶按照時間順序查看未讀消息。加入Touch Bar后，用戶可以通過長按快速定位至想要的未讀消息，效率更高。該功能鍵會常駐在Touch Bar的第一個鍵位，出現在任何界面，便于用戶養(yǎng)成習慣。
搜索按鈕
用戶使用QQ時，經常會有通過搜索找到某個人，并發(fā)起會話的場景，因此搜索功能也是最常用的全局功能之一。該功能的快捷鍵（cmd+F）剛支持不久，用戶熟悉度較低。將其固定至Touch Bar后，點擊搜索按鈕可將光標直接定位至搜索框。該功能也會常駐在Touch Bar的第二個鍵位，出現在任何界面。
模式切換按鈕
極簡模式是5.0新加入的特色功能，現有快捷鍵（cmd+E）用戶熟悉度較低。有了Touch Bar后，會使功能曝光增強，無鼠標場景下的切換效率提升。該功能與會話并不是強相關，因此該按鈕將只出現在通用場景下。
用戶聊天時，焦點處于輸入區(qū)，Touch Bar出現輔助輸入工具。
表情按鈕
聊天時，表情是最常用的功能之一。因此在聊天場景下，我們選取了表情功能放在Touch Bar上。點擊按鈕可調出表情分組和常用表情，與提取消息類似，長按可調出常用表情列表，滑動松手即可發(fā)送。
語音消息按鈕
現在發(fā)送語音消息時，需要先進入語音模式，然后按住空格開始收音。加入Touch Bar后，點擊仍然相應原有的進入語音模式操作，但是長按可以直接開始收音，松手即發(fā)送，橫劃可撤銷，簡化了操作步驟，也還原了移動端發(fā)送語音消息的體驗。
圖片查看器是個典型的二級頁面。在查看器中，由于觸控板主要用于雙指縮放，旋轉圖片只能通過鼠標；自適應和1:1顯示的快捷鍵（Touchpad雙擊或cmd+0）用戶使用度較低。這兩個次高頻功能加入Touch Bar后，使用戶更容易快捷操作。另外用戶無需進入相冊即可快速切換圖片。
Touch Bar是蘋果對鍵盤交互的一次克制的嘗試，它終于讓觸摸交互出現在了Mac OS上，帶來了更多交互的想象空間。相信Touch Bar仍有潛力等待人們挖掘，帶來更好的使用體驗。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務