擁抱手勢驅動的界面設計 | 網際網路數據資訊網-199IT | 中文網際網路...

2021-01-07 網際網路數據資訊網

作為一名移動產品的視覺或用戶體驗設計師,你也許覺得Apple發布iPhone仿若昨日。iPhone無疑為最個人、最私密的設備開啟了一個全新以觸控螢幕為中心的交互時代,是當之無愧的遊戲規則創建者。

如今,孩子們在這樣一個被觸控螢幕包圍的環境下長大似乎是一件自然而然的事情。家長們驚奇地發現他們的孩子正在以難以置信的速度認識、理解平板電腦和智慧型手機如何工作。這種現象表明了觸摸及手勢交互方式有著極大的潛力為移動體驗帶來便捷和更多趣味。

挑戰Bars和Buttons

Apple的用戶界面設計指南(Human Interface Guidelines)和App程序審核委員會(Apple’s App Review Board)對行動應用程式質量有著非常大的影響。它們幫助了非常多的設計師和開發者理解核心的移動用戶界面元素和交互模式。舉例來說,如何使用UITabBar和UINavigationBar控制項要數Apple最基礎最著名的設計指導了,我們都在實際設計中遵循過類似的設計指南。

事實上,如果你設計的第一個iPhone應用如果沒有使用任何頂部或底部的bar元素,請截圖並與我取得聯繫,我可以請你喝酒並且開心地宣布你比你存在的時代要超前的多。

我對於頂部和底部的bar的最大的意見是他們幾乎佔掉了屏幕的20%左右的面積(對iphone5以前的手機來說)。在如此小的「畫布」上做設計,我們應該用盡每一個可能的像素來聚焦在內容表達上,因為畢竟最終,內容才是真正重要的部分。

在這個充滿了革新的行業裡,移動設計師們需要更多的時間來探索如何設計更加有創意和更原創的界面。即使Apple對「出格思考」的App持著令人沮喪的排斥態度,類似Clear和Rise這樣的充滿實驗性質的UI和UX應用設計成功上架並獲得好評則為原創帶來了一些光明。也許它們的界面看起來非常的極端,並且聚焦在概念超前的用戶或者探索者身上,它們還是為大家展現了手勢驅動的界面設計的無限創新潛力。下圖就是兩個基於下拉操作的界面設計。

手勢驅動的界面的巨大能量

兩年多以來,我一直在探索哪些手勢操作為移動應用的用戶體驗帶來價值。對我來說最為重要的判斷標準是交互必須能夠直觀地被感受到。這也正是為什麼像Loren Brichter的「下拉刷新」(ISUX文章:有趣的下拉刷新)在第一時間內可以成為行業標準。Brichter在iPhone版Tweetie裡的下拉刷新設計,為基於列表內容呈現的應用創造了一種手勢操作而拋棄了原來的刷新按鈕,直觀便捷地解決了刷新的需求。

去除UI帶來的幹擾

一個開始設計手勢驅動界面的好方法就是將你的主要屏幕只用來作為核心內容的呈現區。不用覺得有義務要得把重要的導航元素在主屏幕上一直呈現。相反地,考慮導航自己的位置和空間。這裡我們可以考慮一個虛擬的2D或者3D的新維度,可以將導航放置在主體下方、之後、後面、前面、頂部或者隱藏在頭部。這時,拖動或者輕撫的手勢操作就是一個喚起這些UI元素的非常好的方式了。當然,在App中你可以自由的定義和設計這些交互方式。

下圖是Facebook和Gmail的iOS應用界面,各自的方式實現「側滑」菜單(譯者:這種形式最早是由Path iOS版引起流行的,目前可以在眾多導航複雜的應用類App中看到)。這種UI概念非常容易被理解和應用,用戶在整個視圖中左右滑動來顯露和隱藏左側的導航元素。這不僅使App看起來更加以內容為中心,同時可以使用戶在兩到三步的觸摸操作中任意進入應用的各項功能。很多擁有複雜導航層級的App遠遠不如此種形式方便和快捷!

除了用戶界面的導航,你的App可能也同時需要支持一些上下文情境中的交互操作。比如,在所有的內容中同時加上兩到三個同樣的操作按鈕就往往會造成界面的幹擾(譯者:在很多feeds列表中我們常看到每條feed下都有評論、轉發、點讚的按鈕)。當然按鈕們非常的有用並且好用,但手勢在內容的交互上更加直觀和有趣這點則非常有潛力。所以在重要的交互上使用類似輕觸、雙擊、點按等簡單手勢時不要猶豫。Instagram則使用簡單的雙擊來執行對內容的一項重要操作——標記對一條內容的「喜歡」和「不喜歡」。 未來我如果看到其他App將這個快捷方式整合進自己的應用時也不會感到驚訝。

合適的交互界面

當在設計一個有創意的移動產品時,預測用戶行為是比較困難的。當我們在為Belgium的Public Radio項目做設計時,我的團隊在為音樂可視化和實時新聞之間的視覺平衡爭論不已。因為每個用戶使用App的上下文場景不同,所以很難抉擇一個適用更廣的完美UI。於是最後我們決定整合進一個簡單的拖拽手勢來讓用自己決定如何顯示兩者之間的平衡,如下圖所示,用戶可以自己決定當前的情境下更想關注在哪個內容上面,音樂或者是新聞。而不是被動接受一個由設計者為大多數情景妥協而做的設計。

考慮時間、維度和動畫的因素

當用戶點擊一個元素是會觸發什麼反饋?如何用可視化的方式將這種反饋表達出來?一個特定的UI元素以多快的速度呈現到視圖上?是不是5秒中之後就自動消失在屏幕上了?

這種基於觸控螢幕的手勢驅動的設備趨勢戲劇化地改變了我們設計交互的方式。原來我們更多的思考如何在電腦屏幕或者網頁上呈現,現在我們則需要更多的考慮時間、維度和動畫。你可能會發現,用靜態的線框圖和屏幕截圖向同事和用戶展示和調整互動設計是很不容易的,因為往往難以全面地看到、理解和感受到點擊、按住、拖拽或者輕撫後會發生什麼。

像Pop和Invision這樣的原型工具也許可以幫助建構一個有生命的線框圖原型。他們對於用來測試應用的流程和精確定位在哪個地方用戶可能會被卡主非常有用。除了簡單的前進和後退,你的應用往往會有非常多的導航元素,所以就需要儘可能快的檢查和定位到界面錯誤或潛在會讓用戶迷惑的地方。當然我們不會希望這些錯誤被開發者指出來,對吧!

如果想要變得更加有創意和實驗性,可以先和你的客戶溝通並向他們解釋傳統的線框圖並不是最佳的用戶體驗設計交付物。並向他們展示可交互原型的價值,鼓勵他們在研發過程中使用它。也許會增加項目時間和預算,但是相信如果客戶們想要獲得更多,這些增加都是可以接受的。我常常同時為我的客戶提供應用界面的概念視頻,因為他們雖然清楚各種交互的細節,但是往往也需要想他們內部的利益相關者展示一些更加性感的成果。

學習曲線

當在設計基於手勢的交互時,每次都要注意當你移除一些界面幹擾時,學習曲線都會上升。當沒有視覺提示時,用戶也會迷惑並且不知要如何與應用進行互動。一點簡單的注釋是可以接受的,好讓用戶應該知道從哪開始。很多App會在第一次打開的時候呈現攻略或者教程,但我同意Max Rudberg的觀點——教程只需要解釋最為重要的交互——不要一次性解釋所有東西,因為如果既複雜又冗長,用戶就會跳過它。

但是,為什麼不挑戰自己,漸漸在應用的使用過程中引入有創意的UI引導呢!這種引導模式常被稱為漸進式發現,它只顯示給用戶與當前活動有關信息。如下圖所示,舉例來說,YouTube的Capture應用只在用戶第一次打開相機的時候會告訴用戶旋轉設備來取得一個橫向角度。

為用戶界面增加視覺指引並不是唯一的選擇。在Sparrow應用中,搜索條會先從上方出現,幾秒鐘之後縮回去,像是一個微妙的形式再說「我在等待被拉下來」。

討論到此,開始行動吧

iPhone曾為我們帶來了交互式溝通的革命,僅僅五年過後,觸控螢幕幕設備就已經無所不在了,而互動設計師們也正在重新定義人們與數字內容的使用方式。

我們需要了解和探索基於觸摸和手勢的用戶界面的潛力,並且開始更多的考慮時間、維度和動畫。通過一些創新的應用我們可以看到,手勢是一個可以讓App更加以內容為中心、原創和有趣的好方法,即使許多基於手勢的交互乍看之下可能過於的實驗性而不是非常直觀。

如果要對適用於更多主流移動平臺的手勢應用機會有個較為完整的了解,可以查閱Like Wroblewski的觸摸手勢參考概述,希望在看完這篇文章之後能夠激發你探索基於手勢的人機互動模式,並且開始你的移動界面設計探險。不要害怕走彎路,在交互式原型的幫助下,你可以重複嘗試來獲得最佳的體驗。所以,我們討論到此,馬上開始行動吧!

本文由 騰訊ISU編譯

相關焦點

  • 語音交互的前世今生 | 網際網路數據資訊網-199IT | 中文網際網路數據...
    比如說我們用的「QWERTY」鍵盤,之所以會流傳開來是因為這種非人的設計可以降低打字速度,避免打字機的自杆鍵在快速輸入時容易碰撞。現在已經很少有這樣的設計了,機器適應人類,提高人的效率的理念得到發展,我們喜歡的是自然和人性化的交互方式。在計算機領域,從命令行界面進入到圖形用戶界面是一大突破,圖形界面的學習成本較低。隨後發展到目前的主流操作方式觸控,使用手指在屏幕上滑動點按。
  • 2020 年值得關注的十大技術趨勢 | 網際網路數據資訊網-199IT | 中文...
    所以說,雲原生並不指代某個開源項目或者某種技術,它是一套指導軟體與基礎設施架構設計的思想。這種思想,以一言以蔽之,就是「以應用為中心」。正是因為以應用為中心,雲原生技術體系才會無限強調讓基礎設施能更好的配合應用,以更高效的方式為應用「輸送」基礎設施能力,而不是反其道而行之。
  • Mention:9個意見領袖調查工具 | 網際網路數據資訊網-199IT | 中文...
    199IT原創編譯        和意見領袖合作是為了獲得更大的利益,精明的專業人士在保證工作質量的前提下依靠強大的工具幫助營銷人員節省時間。
  • .| 網際網路數據資訊網-199IT | 中文網際網路數據研究資訊中心-199IT
  • CheetahLab:2017年度中國app報告 | 網際網路數據資訊網-199IT |...
    又或者是,小鎮青年已經成為了移動網際網路世界的主流?2017年過去了,你是否懷念它?在這一年,改變不聲不響地發生著。獵豹全球智庫從數據出發,帶你俯瞰移動網際網路行業大震蕩。2017年各分類概況:新零售浪潮對物流領域的影響也相當明顯,獵豹大數據顯示貨運物流app的活躍滲透率2017年增長了66%。獵豹大數據顯示,短視頻app2017年的活躍滲透率增長了近兩倍,而這一年,短視頻app的日均在線使用時長也成功超越了視頻app。行動支付、網際網路金融、銀行app在2017年也都有不同程度的增長。
  • | 網際網路數據資訊網-199IT | 中文網際網路...
    本文將全面回顧幾年以來的電商大促(包括618和雙十一),通過數據的挖掘和分析,來試圖回答以下問題:1.站在產業角度,618和雙十一為代表的電商大促究竟有何意義;2.從天貓和京東競爭維度看,今年618市場格局又有何變化?文 | 老鐵本文所涉及數據均以官方以及企業所正式公布為準。
  • ...同比增長11% | 網際網路數據資訊網-199IT | 中文網際網路數據研究...
  • | 網際網路數據資訊網-199IT | 中文網際網路數據...
    2018年發表於《自然》雜誌上的一項新研究更新了2010年的數據。研究人員發現,60000美元至75000美元的年收入足以使一個人獲得情緒上的幸福感。但是,只有在年收入達到95000美元時,他們才會真正地對生活感到滿意。
  • 工業網際網路找準方向擁抱「烏卡時代」
    作為總產值佔全球製造業約三分之一的「中國製造」,正加速擁抱工業網際網路,邁向「中國智造」。但在這樣一個瞬息萬變的烏卡時代,「中國智造」又如何找準方向,直面挑戰?未來的「中國智造」會是什麼樣的圖景?中車四方信息系統運營主管工程師王川說,中車四方利用動車組運行實時數據,融合列車製造數據、維修數據、自然環境數據等,應用大數據挖掘技術和人工智慧算法,開發出動車組關鍵部件故障預測模型,能對故障進行預測、預警,提供維護建議。中車四方是青島融合大數據、人工智慧等工業網際網路技術賦能傳統製造業的典型案例之一。
  • | 網際網路數據資訊網-199...
    這是否會發生,取決於有否足夠多的人仍然相信一個觀念:通過網絡合作來實現更大的公共利益——正是這種理念在一開始驅動了維基百科的發展。但是,做出改變的嘗試是很重要的,因為維基百科關係到很多人,遠不止那些沒時間讀完其工作指南的編輯和學生。我們當中使用維基百科所提供的信息的人數空前,無論是直接訪問該網站還是通過其他網上服務來閱讀。
  • 2014 年穀歌搜索排行榜 | 網際網路數據資訊網-199IT | 中文網際網路...
  • 如何全面解析數據並創造數據故事 | 網際網路數據資訊網-199IT |...
    設計 「路線圖」5. 簡要的總結三、數據類型和合適的圖表1. 文本 [Wordclouds 文字雲]2. 混合 [Facet Grids 面網格]3. 數字 [Line Charts/Bar Charts 折線圖/條形圖]4.
  • 【獨家】對比評測:小米399元網際網路音箱與199元口袋音箱
    :)扯遠了,小米網際網路音箱「自己會上網」這個點,還真真讓筆者當場怦然心動啊。然後,不經意間看看小米網站,小米自己的音箱竟然已經有8款,69-399元都有,辣麼,399元的網際網路音箱跟之前199元的口袋音箱,有哪些不同,流媒體網為您奉上從外觀到音效到使用的全面對比體驗報告。
  • 中文網際網路中「討論」的消亡
    在這個層面上也能更宏觀也更直觀地理解為什麼我們日常使用的中文社交媒體是現在這個樣子。網際網路剛剛開始走進千家萬戶的那段時期,許多人幻想「數位化理想國」的到來是可以理解的。我們需要考慮這個事實:中文網際網路中並不是完全不存在優秀的討論,像機核網這樣的平臺還是存在,只是這些討論存在於比較小眾的網際網路島嶼裡。機核網中,以玩家身份聚集起來的用戶其實不只是站在玩家和受眾的角度,而是充滿能動性地站在開發者、創作者和運營者的角度去展開討論。這樣的傳統鼓勵用戶把思辨過程呈現出來,這在中文網際網路中已經算是稀有品質。
  • 網際網路數據中心和政策驅動給UPS電源帶來增量空間
    網際網路數據中心和政策驅動給UPS電源帶來增量空間。UPS電源作為信息化建設基礎設施的重要組成部分,近幾年其新增市場空間主要來自於數據中心的建設。同時,中國科技部在此情形下注資UPS電源行業,支持產業發展,繼續加強發展戰略性新興產業。
  • 聯東推出招商合伙人擁抱網際網路 去庫存是內因
    聯東擁抱網際網路,圖啥?  聯東擁抱網際網路 去庫存是內因  全國建百園一直是聯東的目標,到目前為止,聯東已經在全國26座城市建成54個園區。「百園」心願已完成過半,但海量園區同時也帶來了高庫存的壓力。以目前聯東二百餘招商人員的配置,單個園區最多能分到四、五個招商經理配額。去庫存,可以看做是聯東想法設法擁抱「網際網路+」的內因之一。
  • 三節課:2016年中國網際網路從業者生存現狀解讀 | 網際網路數據資訊網...
    根據問卷裡的所有回答,我們整理出了一份《2016中國網際網路從業者生存現狀報告》(下載連結見文末)。和其他同類型的行業報告相比,這份報告最大的特點在於,文中所有的數據都來自於網際網路一線從業者自身的感知和反饋。
  • 中文網際網路中「討論」的消亡-虎嗅網
    在這個層面上也能更宏觀也更直觀地理解為什麼我們日常使用的中文社交媒體是現在這個樣子。網際網路剛剛開始走進千家萬戶的那段時期,許多人幻想「數位化理想國」的到來是可以理解的。我們需要考慮這個事實:中文網際網路中並不是完全不存在優秀的討論,像機核網這樣的平臺還是存在,只是這些討論存在於比較小眾的網際網路島嶼裡。機核網中,以玩家身份聚集起來的用戶其實不只是站在玩家和受眾的角度,而是充滿能動性地站在開發者、創作者和運營者的角度去展開討論。這樣的傳統鼓勵用戶把思辨過程呈現出來,這在中文網際網路中已經算是稀有品質。
  • 寵物AB面:愛與陪伴的代價 | 網際網路數據資訊網-199IT | 中文網際網路...
  • MarketingCharts:2015年Google搜索排名 | 網際網路數據資訊網-199IT...
    199IT原創編譯199IT.com原創編譯自:MarketingCharts 非授權請勿轉載