按鈕是靈感激發的UI Hack,但是現在我們有更好的選擇
Josh Clark 談論了關於觸控式螢幕等新型UI設計的未來。
如果你見過小孩玩iPad,你會感受到觸控式螢幕的強大。這會不會意味著將來我們使用觸控式螢幕而不是點選按鈕?我聯絡了Josh Clark (@globalmoxie), Global Moxie 的創始人和"Tapworthy"的作者,訪問了他對未來的觸控和電腦互動的見解,還有按鈕是否會面臨消亡。Clark認為基於觸控式螢幕的UI更加的直觀。他同時說,觸控只是剛剛開始——語音識別、面部表情、手勢開始出現,我們需要開始思考在這些場景中內容。
按鈕是不是就要終結了?
Josh Clark:我經常說按鈕就是hack,人們有時候把它理解錯了。我並不是消極,相反我認為按鈕是有靈感的hack,一個我們需要的東西。無論是在真實的世界還是在虛擬的世界,這是事實:在A處的開關能夠控制B處的燈光,這不是很直觀,是需要學習的技巧,並且需要在進入任何房間的時候重複地操作。開關需要人來操控,即是行動(開關)和結果(燈光)的中間層。開關就是hack,但它是非常聰明的hack,因為我們不可能在黑暗的房間爬上梯子去弄這個燈。介面中的按鈕就是類似的hack——桌面介面使用了30年的抽象的東西。游標、滑鼠、按鈕、Tab、選單…這些都是使用者和資訊交戶所需要的,填補了人機互動的某些不足之處。
然而,對於觸控式螢幕介面,設計師可以模擬一些直接對資訊和內容操作的動作,就像對實際的物體,可以觸控、伸展、拖拽和滑動。這些互動通過新的方式啟用使用者的大腦,因為觸控式螢幕介面不像傳統互動那樣需要中間層的UI操作習慣。我們可以直接觸控內容。這是避免事情複雜化的很好的方法。 這個結果更加的直觀,更加的自然和更加接近我們在現實世界中思考和行動的方式。沒有使用過電腦的使用者可以證明——如新手或初學者——使用iPad能夠很快地上手。實際上,他們能更好地使用這樣的互動,因為他們沒有被30多年的傳統桌面互動所毒害。跟著新手學吧,他們比我們更加擅長。 所以,是的,在某些場景,按鈕和其它一些傳統的互動元素已經不再需要。但是在某些場景,按鈕還是能夠發揮作用,特別是,在更加抽象的不易實際呈現的任務當中。鍵盤就是個很好的例子,就如“傳送到Twitter”的操作,沒有相似的實際元件。同樣重要的,按鈕被認為能夠很好地引起行動。在我們欣然迎接觸控式螢幕的時候,按鈕還保留它的一席之地。
基於觸控和手勢的介面會遇到些什麼問題?
Josh Clark:對於設計師和使用者都有問題。大體上,如果觸控式螢幕的元素看起來或表現得很像實際的物體,人們會嘗試像它是真的那樣使用它。如果介面看起來像一本書,人們會嘗試去翻頁。長久以來,設計師都把設計封裝得像一個實際的物體,但是在過去都是基於視覺層面的。在觸控式螢幕時代,使用者很難去使用那些設計,他們不知道這個介面是如何操作。所以設計師要仔細傳遞資訊。不要讓你的介面看起來像書,如果它在桌面也能使用,比如按鈕。(我指的是Contacts app for iPad.)
所以,你可以設計很直觀的介面,使它看起來或表現得像實際的物體就行。但這並不意味著任何事情要像真實世界的物體。Windows Phone和即將到來的Windows8 介面,使用很平面的設計。不像3D或手工的,但是它表現得像真實世界的物體。使用者很容易弄明白如何滑動和處理螢幕上的內容,可以很快上手。
另外一個問題——觸控式螢幕的挑戰——更多抽象的手勢:兩個手指滑動或者三個手指滑動,全掌收起等等。這樣的話,手勢對於觸控式螢幕,就像是鍵盤的快捷鍵,應用程式更像是在表演而不是僅僅在使用,就像樂器一樣。但是,我這裡說的是抽象的手勢;剛剛我不是說抽象的東西——如按鈕——不太理想嗎?嗯,是的,問題是,你不需要去理解介面的處理過程,和思考它如何生效。物理上的抽象(如手勢)和視覺上的抽象(如按鈕)相比較,區別在於物理上的抽象可以儲存在肌肉記憶裡。這種潛在意識的知識比視覺上的更快——這也是為什麼觸控式螢幕比視覺上的鍵盤更加的容易理解。所以,一旦你學習和吸收了這些物理動作——兩個手指的滑動能夠完成哪些事情——然後你可以很快就熟悉這個介面,就如通過按鍵來操控鋼琴一樣。 但是你如何進行使用者教育?刷卡、地圖按圖釘或者點圖片都是基於現實世界的一些動作。但是兩個手指滑動在現實世界中沒有類似的操作,兩個手勢代表什麼意思,這不是我們所能猜到的。手勢是無形的,所以這意味著需要進行使用者教育。
截圖是Apple的觸控式螢幕教程。
UI設計如何緩解這個使用者教育問題?
Josh Clark:設計師應該通過思考我們現實世界中的實際動作來實現這點:觀察視覺線索、演示、實踐。設計師經常依賴於使用者指導手冊(iPad App開啟的時候顯示很大的手勢圖表)或截圖。這兩種都不是那麼有效。
相反,設計師應該根據當前環境,展現給使用者如何使用和何時使用手勢。我們需要參考電子遊戲設計,因為遊戲在這方面處理的很好。在很多電子遊戲當中,玩家處於一個迷茫的世界,不知道目標是什麼,更不知道有哪些技能,在遇到障礙時應該如何應付。遊戲會跟隨使用者,追蹤玩家的遊戲過程,記錄遇到哪些問題,並在過程當中提供內建的指引,提示和演示。這就是更多的App和網站該做的事情。不要讓使用者自己偶然去發現無形的手勢快捷方式,而是在使用者需要的時候告訴他如何做。用動畫提示使用者使用對應的手勢,並留時間給使用者來模仿。演示和實踐——這就是使用者學習實際操作的形式,從檢視指導手冊到實際學習。
電腦互動是如何參與這個過程?
Josh Clark:很多新技術變得更加成熟和普及,對互動設計是充滿挑戰和機遇的時代。觸控式螢幕在幾年前誕生。語音識別才剛剛起步。電腦的臉部識別和手勢識別(如Kinect)隨之而來。所以,在這麼多的領域,計算機嘗試去理解人類的實際互動形式。
在過去,人們不得不學著像機器那樣表現和思考。在命令列中,我們用機器懂的語言而不是人類自己的語言。桌面圖形使用者介面邁出了一大步,使得視覺上更加的人性化,但是依然停留在機器如何去理解,而不是人類。當考慮到觸控式螢幕、語音識別、臉部表情、實際手勢,你有個非常廣泛的人類交流工具。如果電腦能讀懂這些微妙的表達,介面可以變得更加的人性化和更加的直觀。
目前觸控式螢幕在引領這個潮流,但是觸控式螢幕並不能適用於所有的場合。語音識別很明顯發揮著很大的作用,在行車、走路等任何你的眼睛需要用在別處時候。我們將會看到介面結合對應的場景應用這些不同的交流模式。但這意味著我們要開始努力思考如何使得這些內容能夠適應不同的場景。很多人在努力如何使得內容能夠適應更小的螢幕。對話的時候,機器如何發音?何時能夠被觸控?如何針對手勢和臉部表情進行響應?未來的路還很長。
Google的Heads-up-display Glasses是這個趨勢的一個標誌嗎?
Josh Clark:我確信各種新螢幕在將來的數字世界都有重要的角色。至於將來哪個是最火,我無法預測。如果五年前有人告訴我說將來會是玻璃螢幕、沒有按鈕,那我會認為他是胡說。我認為,軟體和場景和人類決定了如何和何時硬體技術發揮真正的作用。現在我看到的heads-up-display glasses似乎有些尷尬和不自然。如果你要移動你的頭來導航螢幕,似乎在要求你要像機器一樣。我認為未來的趨勢會是相反的方向——技術適應人類的表達方式,而不是人類適應技術。
原文:Buttons were an inspired UI hack, but now we've got better options,作者是JENN WEBB 譯文:按鈕是靈感激發的UI Hack,但是現在我們有更好的選擇,譯者是Vivien Chen
iTran樂譯
去iTran樂譯參加活動,讀好文章!
相關文章
- 我們是如何選擇框架的?框架
- element-ui的日期選擇框底部清空按鈕點選不關閉日期選擇框的實現辦法UI
- 是否應該在未選中行時禁用刪除按鈕,還是應該在點選按鈕時提示選擇資料?
- 沒有選擇PHP培訓這條路,是我現在後悔的PHP
- Linux 是更好的選擇(轉)Linux
- 我們選擇java的理由Java
- 自繪按鈕實現顏色選擇器
- Java選擇框和單選按鈕Java
- HTML 單選按鈕實現 (性別選擇)(解讀)HTML
- Android開發 如何使用選擇器(selector) 來實現點選按鈕變色Android
- vue中在父元件點選按鈕觸發子元件的事件Vue元件事件
- FairyGui--實現點選按鈕使UI欄開啟和收起AIGUI
- js實現的按鈕不用人為點選就觸發點選事件JS事件
- 在選擇資料庫的路上,我們遇到過哪些坑?(2)資料庫
- 在選擇資料庫的路上,我們遇到過哪些坑?(1)資料庫
- Dynamics 365 查詢型別的欄位,選擇介面要去掉新增按鈕,但是不能去掉新增許可權型別
- go的選擇UIGoUI
- 一個簡單的選單按鈕的實現 (轉)
- 11個最新最流行的幽靈按鈕
- 語音交友app開發,點選按鈕出現彈窗的實現方式APP
- ElementUI 不維護了?供我們選擇的 Vue 元件庫還有很多!UIVue元件
- 單選多選按鈕
- 為什麼我們選擇使用 React 而不是 Angular 構建新 UIReactAngularUI
- 為什麼 APISIX Ingress 是比 Traefik 更好的選擇?API
- 點選回車實現按鈕點選功能
- 8 年前我們如是做:開發任務分配的雙向選擇
- 瀏覽器歷史,判斷是點選了後退按鈕還是前進按鈕瀏覽器
- 我們現在沒有討論的但有必要討論的模式模式
- npm和yarn的區別,我們該如何選擇?NPMYarn
- 擼一款”靈動“的滑動按鈕
- js實現的按鈕響應點選回車事件JS事件
- 點選按鈕實現div的顯示和隱藏
- 使用element ui 元件的時候,如果使用兩個或多個按鈕在同一個單元格內,按鈕會豎著排列,但是不能夠對齊怎麼解決?UI元件
- Android 自定義控制元件 按鈕滾動選擇Android控制元件
- 獲取選中表單按鈕的值
- 窗體(文字框,按鈕,單選按鈕,標籤)
- 在公鏈專案早期,為什麼PoW是一個更好選擇?
- 巧用 CSS 的 :target 選擇器,打造沒有 JS 的 UI 效果CSSJSUI