<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • QQ Mac版 Touch Bar功能設(shè)計

          2017-2-6    濤濤

          如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

          蘋果在近期推出了新款Macbook Pro,以Touch Bar取代了原有的功能鍵。相信每個Mac產(chǎn)品團隊都在思考,該如何利用它給用戶帶來更好的使用體驗。在此分享一下QQ Mac版團隊的一點思考。

           

          Touch Bar是什么

           

          pic1

          想利用好Touch Bar,先要明白它是什么。通過蘋果官方的介紹,可以了解到,蘋果對Touch Bar的定義是“用來與主屏幕內(nèi)容交互的具有動態(tài)界面的輸入設(shè)備”。所以我們要明白它的兩個主要特性:

          1、是鍵盤的延伸:Touch Bar雖然是一塊屏幕,但是他并不作為顯示設(shè)備,而是輸入設(shè)備。它的設(shè)計初衷是希望用戶能快速定位功能、調(diào)整參數(shù),用戶使用時的注意力應(yīng)盡量在屏幕上,低頭看Touchbar反而會降低使用效率。

          2、隨焦點而變:Touch Bar上顯示的功能會隨著屏幕焦點的變化而變化,使得拓展性大大加強。因為與屏幕焦點直接關(guān)聯(lián),Touch Bar不光能隨著應(yīng)用的改變而變化功能,在同一個應(yīng)用的不同頁面,也可以有不同的功能,其狀態(tài)、反饋均與屏幕保持一致。

           

          設(shè)計原則

           

          蘋果對Touch Bar的設(shè)計給出了完整的設(shè)計規(guī)范,這里不再贅述。(ISUX已有翻譯,點擊查看

          在初步體驗過后,我們發(fā)現(xiàn)Touch Bar使一些使用場景變得更有效率也更有趣,但是功能項隨著應(yīng)用和頁面頻繁變動,也導致學習成本非常高,不熟練的時候經(jīng)常需要低頭看。因此我們認為想要提升使用效率,降低學習和記憶成本,達到“抬頭操作”的目的的話,還需注意以下幾點:

          1、固定鍵位:在一個應(yīng)用中,有些功能可能在多個頁面出現(xiàn),這些功能的按鍵應(yīng)盡量處于同樣的位置,并與屏幕中的位置和順序保持一致,上降低學習成本,培養(yǎng)手感。

          2、屏幕反饋:通過Touch Bar操作功能時,屏幕應(yīng)實時給出明確的狀態(tài)變化和提示,使得用戶無需低頭看Touch Bar,直接抬頭完成操作。由于Touch Bar只能橫向滑動,屏幕狀態(tài)或提示盡量也采用橫向布局,保持操作與反饋的認知一致性。

          3、保證點擊:對于鍵盤來說,最基礎(chǔ)的交互方式就是點擊,因此Touch Bar上的功能都應(yīng)該支持最基本的點擊相應(yīng)事件。對于有些復(fù)雜的編輯或選取功能,可以考慮在按鈕支持點擊的基礎(chǔ)上,支持長按、滑動等手勢進行快速操作,這樣既能與用戶已有的使用習慣保持一致,同時兼顧操作的快捷性。

          4、流程完整:Touch Bar上發(fā)起的功能,最好能在Touch Bar上結(jié)束。因為如果后續(xù)操作需要通過鍵盤、觸控板或鼠標完成,會帶來手的頻繁位移,效率并沒有提升。

           

          功能選取

           

          Touch Bar雖然可以變化,但是畢竟空間有限,不可能將所有功能都放上去。而且它雖然擴展性很強,但是不能后臺響應(yīng),使用場景比快捷鍵要受到限制。

          對于QQ Mac版,哪些功能適合放到Touch Bar上呢?經(jīng)過幾輪腦暴,結(jié)合實際使用場景和Touch Bar規(guī)范,我們認為有3個方向:

          1、特色的高頻功能調(diào)起:比如QQ用戶最常用的提取消息、搜索,是在任何界面都會使用的功能,非常適合固定在Touch Bar上,方便使用。

          2、觸控板、快捷鍵支持的不夠好的功能:從使用場景來看,Touch Bar在鼠標效率低或沒有鼠標的場景下更能發(fā)揮價值。快捷鍵鍵位有限,Touchpad手勢有限,自定義的話容易與系統(tǒng)或其他應(yīng)用沖突,因此往往只能用于最常用的功能。對于其他的次高頻功能,可以考慮通過Touch Bar來承載,提升使用效率。

          3、通過獨有交互簡化操作步驟:Touch Bar不光使得屏幕上的功能有了一個對應(yīng)的按鍵,還賦予了這個按鍵長按、滑動等手勢。這就好比在觸屏上增加了3D Touch的功能,交互的維度得到提升,這就使得原本需要多步操作的功能有了一步完成的可能。比如QQ發(fā)送語音消息。

           

          方案設(shè)計

           

          我們選取了幾個典型場景來進行Touch Bar的功能設(shè)計。

           

          1.通用場景

          通用場景是指主面板無焦點的場景,比如剛登陸時。在該場景下,Touch Bar上承載提取消息按鈕、搜索按鈕、模式切換按鈕。

          1481123927_43_w1021_h765

          提取消息按鈕

          提取消息是QQ用戶在任何界面都會使用的全局功能。以往快捷鍵(cmd+control+Z)只能支持用戶按照時間順序查看未讀消息。加入Touch Bar后,用戶可以通過長按快速定位至想要的未讀消息,效率更高。該功能鍵會常駐在Touch Bar的第一個鍵位,出現(xiàn)在任何界面,便于用戶養(yǎng)成習慣。

          1481128842_41_w1195_h849

          gif2

          搜索按鈕

          用戶使用QQ時,經(jīng)常會有通過搜索找到某個人,并發(fā)起會話的場景,因此搜索功能也是最常用的全局功能之一。該功能的快捷鍵(cmd+F)剛支持不久,用戶熟悉度較低。將其固定至Touch Bar后,點擊搜索按鈕可將光標直接定位至搜索框。該功能也會常駐在Touch Bar的第二個鍵位,出現(xiàn)在任何界面。

          pic43

          模式切換按鈕

          極簡模式是5.0新加入的特色功能,現(xiàn)有快捷鍵(cmd+E)用戶熟悉度較低。有了Touch Bar后,會使功能曝光增強,無鼠標場景下的切換效率提升。該功能與會話并不是強相關(guān),因此該按鈕將只出現(xiàn)在通用場景下。

          pic4

          2.AIO輸入

          用戶聊天時,焦點處于輸入?yún)^(qū),Touch Bar出現(xiàn)輔助輸入工具。

          pic5

          表情按鈕

          聊天時,表情是最常用的功能之一。因此在聊天場景下,我們選取了表情功能放在Touch Bar上。點擊按鈕可調(diào)出表情分組和常用表情,與提取消息類似,長按可調(diào)出常用表情列表,滑動松手即可發(fā)送。

          pic6

          pic7

          語音消息按鈕

          現(xiàn)在發(fā)送語音消息時,需要先進入語音模式,然后按住空格開始收音。加入Touch Bar后,點擊仍然相應(yīng)原有的進入語音模式操作,但是長按可以直接開始收音,松手即發(fā)送,橫劃可撤銷,簡化了操作步驟,也還原了移動端發(fā)送語音消息的體驗。

          pic8

          3.圖片查看器

          圖片查看器是個典型的二級頁面。在查看器中,由于觸控板主要用于雙指縮放,旋轉(zhuǎn)圖片只能通過鼠標;自適應(yīng)和1:1顯示的快捷鍵(Touchpad雙擊或cmd+0)用戶使用度較低。這兩個次高頻功能加入Touch Bar后,使用戶更容易快捷操作。另外用戶無需進入相冊即可快速切換圖片。

          pic9

          寫在最后

           

          Touch Bar是蘋果對鍵盤交互的一次克制的嘗試,它終于讓觸摸交互出現(xiàn)在了Mac OS上,帶來了更多交互的想象空間。相信Touch Bar仍有潛力等待人們挖掘,帶來更好的使用體驗。

          藍藍設(shè)計m.sdgs6788.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

          日歷

          鏈接

          個人資料

          藍藍設(shè)計的小編 http://m.sdgs6788.com

          存檔

          综合人妻久久一区二区精品| 亚洲精品国产综合久久一线| 久久99国产综合精品| 精品久久久久中文字幕日本| 99久久99久久精品国产片| 欧美激情精品久久久久久久九九九| 日本亚洲色大成网站WWW久久 | 欧美激情精品久久久久久久九九九| 亚洲国产成人久久综合碰| 亚洲国产精品无码久久久蜜芽 | 久久99热这里只有精品66| 欧洲精品久久久av无码电影| 久久激情五月丁香伊人| 亚洲狠狠婷婷综合久久久久 | 久久综合九色综合精品| 中文精品久久久久人妻| 精品久久一区二区| 一本一本久久a久久综合精品蜜桃| 久久国产精品久久久| 国色天香久久久久久久小说| 精品久久久久久久久久中文字幕| 色欲综合久久中文字幕网| 一本大道久久东京热无码AV| 久久亚洲精品视频| 九九久久自然熟的香蕉图片| 狠狠色丁香婷婷久久综合| 久久久久国色AV免费观看| 999久久久免费精品国产| 蜜臀av性久久久久蜜臀aⅴ麻豆 | 亚洲精品无码久久久久sm| 久久亚洲视频| 久久国产精品免费一区| 72种姿势欧美久久久久大黄蕉| 午夜不卡久久精品无码免费| 久久精品国产欧美日韩| 久久久艹| 久久免费视频一区| 亚洲国产成人乱码精品女人久久久不卡 | 亚洲综合伊人久久大杳蕉| 久久久久亚洲AV无码专区首JN| 亚洲国产成人精品91久久久 |