全面屏?xí)r代的移動端交互發(fā)展趨勢
隨著技術(shù)的推進,交互的形式也在不斷地適應(yīng)中發(fā)生變化,本文作者詳細敘述了全面屏?xí)r代的交互發(fā)展趨勢。未來,隨著技術(shù)不斷地發(fā)展與進步,又會有何種新的交互形式脫穎而出呢?
安卓和iOS系統(tǒng)從2007年開始發(fā)展至今,在十幾年的發(fā)展過程中,由于基于不同的編碼方式,不同的底層邏輯從而在交互方式上也從一開始就有很多不一致甚至是差異非常大的區(qū)別,這也是有些蘋果或安卓手機機主在換到對方手機陣營后有些不能適應(yīng)的原因。
一、過往鴻溝
1. 物理按鍵區(qū)別
兩個系統(tǒng)所寄生的硬件的外設(shè)之一-物理按鍵,也從一開始就存在著非常大的差異性。iOS系統(tǒng)一直是采用僅有的一個“Home”物理按鍵,而安卓系統(tǒng)要求手機配置3個不同的物理按鍵:「返回」、「HOME」、「任務(wù)列表」。這三個按鍵是安卓交互的一部分,安卓平臺上的應(yīng)用程序交互基于三大按鍵。
這三個鍵一般都在底部,方便手指點擊,也就是說這三個按鍵應(yīng)該是最常用的操作。
但是由于很多用戶比較青睞 iPhone 的單獨 home鍵設(shè)計,所以很多廠商會在硬件上隱藏掉三大按鍵或僅僅像 iPhone 一樣保留 home鍵。然后在屏幕上增加常駐半透明的三個虛擬鍵。
虛擬按鍵
安卓系統(tǒng)上的虛擬鍵可以有效保證安卓系統(tǒng)應(yīng)用的可用性,但同時也侵占了比較大的顯示空間,導(dǎo)致在顯示應(yīng)用內(nèi)容時,系統(tǒng)虛擬鍵的存在讓整體展示和交互顯得臃腫,違背了”Less is more”的設(shè)計原則。
但物理按鍵有物理按鍵的優(yōu)勢,物理按鍵因為不需要展示空間,可以有效防止誤操作,比如在iOS系統(tǒng)下,通知欄本來占據(jù)的位置是較少操作的狀態(tài)欄和標題欄,但用戶在點擊狀態(tài)欄返回頂部或點擊靠近頂部內(nèi)容時,如“<”箭頭返回上一頁時,可能會遇到正好系統(tǒng)有推送消息從而產(chǎn)生誤點擊導(dǎo)致切換到推送消息的App的問題。
推送的點擊行為區(qū)域和操作區(qū)域重合導(dǎo)致誤操作
這個問題在用戶通知消息較多時還是非常干擾的,而且iOS始終沒有針對此問題給出很好的解決方案。
2. 返回機制不同
在 iOS 里面,程序是借助右上角的返回鍵和右劃手勢以頁面為單位進行切換,iOS的返回控制的是頁面。
iOS返回機制
而 Android的返回邏輯是按照時間順序來判斷的,返回按鈕控制的是動作,例如呼出鍵盤也算一個動作,如用戶呼出鍵盤后點擊返回按鈕,則交互效果是返回上一個動作:收起鍵盤。
安卓返回機制
這種差異是由兩個系統(tǒng)不同的編碼方式形成的,也是至今為止仍然存在的一種交互反饋差異。
3. iOS獨特的交互方式
右滑返回上一頁:這個功能還是非常方便的,因為右滑手勢的費力度非常低,原理可以參考費茲定律。
iOS側(cè)邊右滑手勢
微信在繼承這個手勢的基礎(chǔ)上,還進一步拓展了這個手勢的應(yīng)用范圍,如公眾號文章的浮窗操作。
微信邊緣手勢新增功能
雙擊狀態(tài)欄返回頁面頂部:這是iOS獨占的交互功能,可能是因為安卓的系統(tǒng)原因限制,基于安卓的很多UI都無法實現(xiàn)或復(fù)刻iOS的這個功能,但因為這個交互可發(fā)現(xiàn)性極低,我遇到過很多多年的iOS用戶并不知道這個功能,因而也就從沒有使用過,所以我認為這個功能的可發(fā)現(xiàn)性有待提高和優(yōu)化。
雙擊狀態(tài)欄返回頁首
安卓上類似的替代功能是雙擊列表項當前TAB,但對于沒有TAB導(dǎo)航的列表頁就無能為力了。比如微信朋友圈,因為是層級導(dǎo)航而非TAB導(dǎo)航,為了方便信息流頁面快速返回頂部,微信在朋友圈里針對安卓定義了雙擊標題欄快速返回頁面頂部的快捷方式,也算是對安卓用戶使用體驗的補償和優(yōu)化。
安卓版微信朋友圈點擊標題欄快速返回頁首
搖一搖撤銷文字輸入等其他獨特交互方式:這些另類的iOS獨占的交互方式因為可發(fā)現(xiàn)性低、使用不是很方便并沒有形成很好的用戶使用習(xí)慣,因此一直以來也沒有受到設(shè)計者特別的重視。
4. iOS列表項進入編輯態(tài)以左滑為主,安卓列表項進入編輯態(tài)以長按呼出為主
這是iOS和安卓不同的設(shè)計規(guī)范和使用習(xí)慣決定的,但現(xiàn)在兩者之間的界限也在慢慢模糊。因為用戶對于兩者之間的區(qū)別已經(jīng)所謂的設(shè)計規(guī)范并不了解,也沒有動力去了解,用戶只是基于自己的心理模型去推斷可能的操作方式,而跨iOS和安卓系統(tǒng)用戶的增加以及安卓不同的定制UI之間不同的交互方式也讓用戶很難形成統(tǒng)一的穩(wěn)定的操作體驗,反而最終系統(tǒng)UI設(shè)計者都需要向一個既定的標準去設(shè)計,否則用戶更佳無所適從,那就是趨向于向iOS標準看齊。
5. 對話機制
iOS和安卓的通知框優(yōu)先級從高到低都有Alert(iOS)和Dialog(安卓)Toast(安卓)和HUD(iOS),但安卓還有介于toast和alert之間的snack bar和Banner通知框,這兩種對話機制也是非模態(tài)的,但優(yōu)先級和重要程度要高于Toast,但我們在實際項目中并沒有這兩種對話機制太多的使用場景,或者可以用其他形式替代的,我們就用其他通用形式替代了,畢竟Meterial Design設(shè)計標準只是一種建議,而非規(guī)范。
二、硬件系統(tǒng)交互漸趨統(tǒng)一
隨著硬件技術(shù)的不斷發(fā)展以及全面屏已經(jīng)越來越普及的情況下,安卓的某些交互行為急需重新定義,手機少了之前的導(dǎo)航鍵,屏幕操作可用性、易用性就成了全面屏手機一個新的問題,iOS針對全面屏交出了一份滿意的答卷,此后很多的手機廠商在解決自己全面屏交互問題時都借鑒了蘋果的手勢操作。
1. 側(cè)邊欄返回手勢統(tǒng)一
如iOS最常用的邊緣手勢,在全面屏出現(xiàn)之后,在保留邊緣左側(cè)劃入實現(xiàn)“返回”功能外,為了不和“Home”虛擬鍵沖突,把系統(tǒng)設(shè)置功能由原來的下邊緣上劃替換為右側(cè)上邊緣下劃。這樣蘋果就完全放棄了物理按鍵,轉(zhuǎn)而全面進入“全屏幕操作”時代。
2018年是全面屏手機的爆發(fā)年,隨著國內(nèi)外手機廠商的快速跟進全面屏設(shè)計,各廠商也在定制安卓系統(tǒng)的UI和交互上針對全面屏對操作方式進行了優(yōu)化,很多硬件生產(chǎn)廠商在UI設(shè)計上趨向于用邊緣手勢替代虛擬按鍵這一過渡性的設(shè)計,全面向蘋果操作方式看齊,如邊緣左滑、右滑返回,下邊緣上劃跳出,這些手勢操作的加入,極大的方便了全面屏用戶的操作。
iOS的屏幕邊緣右滑返回是在iOS很早期的版本中就已出現(xiàn)的交互操作方式,安卓系統(tǒng)的各種定制版本直到全面屏出現(xiàn)后才認識到這種交互方式的前瞻性,用不是很常用的基于界面邊緣的滑動動作來進行最重要最常用到的返回操作,有其顯著優(yōu)異于標題欄返回導(dǎo)航按鈕的優(yōu)勢,因為滑動操作和點擊操作區(qū)別明顯,且與界面元素完全無關(guān),最大程度上避免了各種誤操作。
iOS系統(tǒng)的左邊緣右滑返回
iOS系統(tǒng)只允許左邊緣右滑返回,而不提供右邊緣左滑返回,這種設(shè)定犧牲了大屏手機的右手單手持機者的一定的便利性,但更加能夠真實映射現(xiàn)實世界,更符合用戶的心理模型和心理預(yù)期,在用華為和小米從右側(cè)邊緣左滑返回時,雖然增加了便利性,但對于用戶建立的心理模型有一定的消極解構(gòu)作用。
右邊緣左滑返回不符合用戶心理模型
2. 上劃實現(xiàn)跳出功能的統(tǒng)一
iOS在全面屏上的跳出當前應(yīng)用是通過靠近界面底部的橫條上劃來實現(xiàn)的,對于安卓定制系統(tǒng)UI來說,有些廠商跟進了這個設(shè)計,有些則更進一步,在學(xué)習(xí)側(cè)邊欄右滑交互的基礎(chǔ)上,用下邊緣上劃來實現(xiàn)這個動作。包括MIUI,華為的EMUI都是這么設(shè)計,個人認為這種設(shè)計方式比iOS的交互設(shè)計更加合理,避免了界面下部邊緣橫條對界面呈現(xiàn)元素的干擾,相信未來這兩種交互方式還會進一步統(tǒng)一。
上劃實現(xiàn)跳出
3. 多手指手勢(multi-finger gesture)和3D Touch操作被弱化的趨勢趨向統(tǒng)一
基于電容屏支持多點觸控的硬件能力,iOS和安卓都曾經(jīng)定義過很多多手指手勢,但最后能夠被用戶記住和經(jīng)常使用的卻寥寥無幾,學(xué)習(xí)成本太高的多手指手勢操作的使用場景必然會逐漸被簡單易用的單手指點擊替代,如iOS編輯界面的旋轉(zhuǎn)功能,除了地圖和圖片的夾捏(Pinch)手勢等極少數(shù)已經(jīng)養(yǎng)成了用戶使用習(xí)慣且契合用戶心理模型的多手指手勢外,多手指手勢操作已被iOS和安卓最大程度上減少使用頻次。
iOS旋轉(zhuǎn)也使用單手指操作
3D Touch,作為曾被蘋果公司寄予厚望的新一代多點觸控技術(shù),實際上因為其可發(fā)現(xiàn)性低、易與按壓動作混淆以及適用場景少等原因根本沒有在交互上引起任何變革,最后完全變?yōu)橐粋€雞肋的交互方式,如果還是沒有找到適合其特點的場景,最終應(yīng)該難逃被放棄的命運。這些交互行為因為iOS和安卓系統(tǒng)的屏幕共性和用戶心理模型等原因正在統(tǒng)一趨向于衰落,隨之而起的是更加適合全面屏的交互方式。
4. 生物身份認證技術(shù)趨向統(tǒng)一
蘋果公司率先開啟了指紋身份認證時代,并最終形成了統(tǒng)一的行業(yè)標準,但指紋身份認證方式依賴于單獨的傳感器,蘋果公司創(chuàng)意性的把指紋認證和Home鍵結(jié)合為指紋身份認證的大行其道排除了障礙。
但在全面屏?xí)r代來臨后,失去了Home鍵功能的單獨的指紋認證傳感器存在感和地位就比較尷尬了,對此有些手機廠商的解決方案是屏下指紋,有些廠商的解決方案是機身背部指紋,但在紅外線面部識別技術(shù)被蘋果公司應(yīng)用于全面屏后,指紋識別系統(tǒng)的傳感器也就難以避免其消亡的命運了,畢竟在可靠的,不增加用戶認知負擔的新一代生物身份識別技術(shù)面前,指紋認證真的過時了。
面部識別系統(tǒng)
5. 其他操作方式趨向統(tǒng)一
安卓系統(tǒng)在初期確實和iOS系統(tǒng)的優(yōu)秀的用戶體驗有一定的差距,我們以前形容蘋果系統(tǒng)的高易用性有個很好的段子,就是3歲的兒童可以在沒有大人指導(dǎo)的情況下,流暢地使用iOS操作系統(tǒng)。如iOS系統(tǒng)的長按App圖標切換到刪除模式,就比安卓系統(tǒng)的卸載應(yīng)用操作更符合用戶心理模型,使用體驗更好。
但安卓系統(tǒng)的優(yōu)勢在于其開放性和可定制性,各大手機廠商可以脫離其工程實現(xiàn)模型的局限性來大刀闊斧地對用戶體驗進行提升,所以在全面屏?xí)r代的今天,有些深度定制的UI體驗已經(jīng)逼近甚至超越了iOS操作系統(tǒng)的使用體驗。
其中有些改進,是iOS和安卓系統(tǒng)官方有意識地去進行改變而漸趨統(tǒng)一的,另外一些是各大安卓廠商的定制UI系統(tǒng)先行先試,然后安卓官方系統(tǒng)后續(xù)跟進進行改變而漸趨統(tǒng)一的。
另外安卓官方也就是母公司谷歌也有效仿iOS,意圖進行封閉型應(yīng)用生態(tài)的建設(shè),但一方面因為安卓系統(tǒng)開放的特性,另一方面因為各種政策和技術(shù)限制而失敗了。
所以總體來看,除了兩個系統(tǒng)從一開始就完全不同的底層技術(shù)架構(gòu)造成的難以彌合的深層次差異而外,兩者系統(tǒng),特別是安卓的各種定制系統(tǒng)和iOS之間的交互方式已經(jīng)非常接近了。
這對于安卓系統(tǒng)來說是一件好事,但對于iOS系統(tǒng)以及它所在的蘋果公司而言,對于用戶來說和安卓系統(tǒng)的體驗區(qū)別越來越模糊,外形因為全面屏也逐漸喪失其獨特性,長期來看,很難衡量其利弊,蘋果公司如果沒有劃時代意義的技術(shù)和交互方式突破(VR、AR、VR技術(shù)),未來發(fā)展可能不容樂觀。
三、應(yīng)用交互方式漸趨統(tǒng)一
目前針對iOS和安卓系統(tǒng)是否需要做不同的UI和交互區(qū)分,國內(nèi)和國外應(yīng)用發(fā)布廠商處理方式已經(jīng)有很大不同,如同當年在瀏覽器上瀏覽習(xí)慣一開始就出現(xiàn)了“打開新標簽瀏覽”(國內(nèi))和“線性瀏覽”(國外)一樣,國外App傾向于在有條件的情況下分別依照各自不同的規(guī)范設(shè)計,國內(nèi)大廠卻有把iOS端和安卓端應(yīng)用的展現(xiàn)和交互方式漸趨統(tǒng)一的趨勢,原因有以下幾個方面:
1. 節(jié)約設(shè)計成本
對于眾多開發(fā)同時面向iOS系統(tǒng)和安卓系統(tǒng)的中小型的公司來說,雖然安卓開發(fā)工程師和iOS開發(fā)工程師的人員配備不能少,但如果安卓和iOS遵循同一套設(shè)計規(guī)范,卻可以節(jié)省一半的設(shè)計資源,所以很多中小型的公司都是傾向于符合一套設(shè)計標準在兩個平臺上應(yīng)用,在某個平臺上稍作適配,即可實現(xiàn)節(jié)省快速上線的目標。
一套設(shè)計稿,版本同步
確實,如果需要在完全按照兩個系統(tǒng)進行不同的UI風(fēng)格&交互設(shè)計和犧牲一定的平臺差異性但節(jié)省大量成本之間做權(quán)衡的話,可能大部分中小型公司都會毫不猶豫地選擇后者。畢竟規(guī)范只是一種建議,不是一種強制標準,而且基本不會影響App在不同系統(tǒng)平臺發(fā)布。
2. 統(tǒng)一用戶體驗
在全面屏?xí)r代到來之前,如果產(chǎn)品設(shè)計人員打著“統(tǒng)一用戶體驗”的旗幟來對兩個系統(tǒng)的交互方式進行統(tǒng)一,必然會引來“設(shè)計原教旨主義者”的全面口誅筆伐,他們的理由也很簡單:本來就是不同屏幕,不同的UI,不同的硬件按鍵,怎么能統(tǒng)一呢?
現(xiàn)在不贊成統(tǒng)一交互形式的依據(jù)似乎越來越缺乏說服力,iOS和安卓硬件的屏幕外觀漸趨一致,UI漸趨一致,硬件按鍵?都不存在了好嗎?在這種發(fā)展潮流和趨勢下,如果還是強調(diào)兩者因系統(tǒng)不同而必須要有不同的交互方式,是不是反而落入了“以工程實現(xiàn)模型而非用戶心理模型決定產(chǎn)品外觀”的窠臼和誤區(qū)呢?(參見我的另一篇文章:交互設(shè)計:“認知模型”vs.“工程實現(xiàn)模型”)
因為在兩者的外觀基本一致、UI基本一致、交互方式基本一致的情況下,用戶對這兩個系統(tǒng)的心理模型也漸趨一致,不再有明顯的區(qū)別。
全面屏?xí)r代的屏幕外觀
我們可以來分析一下原來兩個系統(tǒng)比較迥異的一些設(shè)計規(guī)范,這些不同的設(shè)計規(guī)范有些是因為蘋果申請了手勢專利的原因,有些是因為工程實現(xiàn)模型的原因而從一開始就有所不同:
安卓系統(tǒng)傾向于使用頂部TAB:
安卓系統(tǒng)在最早的設(shè)計規(guī)范中鼓勵使用頂部TAB,其中有個比較重要的考慮就是防止虛擬按鍵與底部TAB發(fā)生誤觸,這樣的理由也即將不復(fù)存在,硬件系統(tǒng)交互方式的完全統(tǒng)一也逐漸消弭了兩個系統(tǒng)間不多的差異,在最新的Meterial Design規(guī)范中開始對使用底部TAB不做限制,但不鼓勵頂部TAB和底部TAB同時出現(xiàn),最終為應(yīng)用交互方式的完全統(tǒng)一鋪平了道路。
安卓傾向于頂部TAB
安卓系統(tǒng)傾向于使用漢堡包式導(dǎo)航:
漢堡包式導(dǎo)航,也叫抽屜式導(dǎo)航,不太清楚安卓系統(tǒng)最早建議使用這種導(dǎo)航方式的根本原因,但在全面屏?xí)r代之前,iOS多用底部TAB導(dǎo)航,安卓多用漢堡包式導(dǎo)航,確實是一個不成文的“慣例”,但仔細分析一下,這種區(qū)分根本沒有任何道理可循,畢竟決定使用哪種形式的導(dǎo)航方式的,不應(yīng)該是系統(tǒng)區(qū)別,而應(yīng)該是信息架構(gòu)和設(shè)計者對信息展示層級的考量和權(quán)衡。
漢堡包式導(dǎo)航
因為漢堡包式導(dǎo)航相比底部TAB式導(dǎo)航,天然具有節(jié)省空間的優(yōu)勢,但天然具有可發(fā)現(xiàn)性低的劣勢。在全面屏?xí)r代屏幕外觀一致、UI一致、系統(tǒng)交互一致的前提下,我們不可能強詞奪理說安卓系統(tǒng)還是需要更小的展示空間,更深的導(dǎo)航層級,這是沒有說服力的。
iOS左滑進入編輯態(tài),安卓長按進入編輯態(tài):
左滑進入編輯狀態(tài),比長按進入編輯狀態(tài)的費力度要低,可發(fā)現(xiàn)性要高,易用性也要好一些,長按自然有其適合使用的場景,但一個操作是否適合用長按激活,應(yīng)該是基于場景,而不是基于系統(tǒng),特別是在系統(tǒng)和App UI交互都趨同的前提下,這個差異也因為和上面同樣的原因必然會界限逐漸模糊并趨向一致。
安卓和iOS進入編輯態(tài)的方式不同
可喜的是,很多App開始打破這些限制并實施了在兩個系統(tǒng)上統(tǒng)一UI和交互的行動,以后這樣的趨勢會越來越明顯,越來越一致。
3. 可以更專注于內(nèi)容
如果一個同時面向兩個系統(tǒng)發(fā)布App的公司從一開始就明確區(qū)分兩個系統(tǒng)進行設(shè)計,并對每個系統(tǒng)的版本單獨進行迭代和更新,那在運行一段時間后,因為各自的界面差異、交互差異、內(nèi)容差異、開發(fā)差異、發(fā)布差異會導(dǎo)致兩個系統(tǒng)的App會變成完全兩個獨立的App,原來統(tǒng)一統(tǒng)籌的產(chǎn)品、設(shè)計、開發(fā)、測試可能會完全割裂為兩個相互獨立的群組。
區(qū)分兩個系統(tǒng)的設(shè)計不容易專注于內(nèi)容
在這樣的情況下,必然會影響公司對與App內(nèi)容的專注性,被迫要拿出很多精力應(yīng)付兩個版本之間的各種差異,所以基于這個目標,很多公司也刻意統(tǒng)一兩個系統(tǒng)下版本的一致性,盡量消弭兩者之間存在差異越來越多的風(fēng)險。
4. 跨平臺的思路
跨平臺的實現(xiàn)技術(shù)主要包括以下幾種:
Web 流:也被稱為 Hybrid 技術(shù),它基于 Web 相關(guān)技術(shù)來實現(xiàn)界面及功能
代碼轉(zhuǎn)換流:將某個語言轉(zhuǎn)成 Objective-C、Java 或 C#,然后使用不同平臺下的官方工具來開發(fā)
編譯流:將某個語言編譯為二進制文件,生成動態(tài)庫或打包成 apk/ipa/xap 文件
虛擬機流:通過將某個語言的虛擬機移植到不同平臺上來運行
而現(xiàn)在使用最多的是Hybrid的開發(fā)方式,即iOS和安卓系統(tǒng)原生頁面和H5頁面打包在一起的開發(fā)方式,需要跨系統(tǒng)的交互和展現(xiàn)一致性,因為H5頁面是超越系統(tǒng)屬性直接調(diào)用統(tǒng)一的頁面,為了保持原生頁面和H5頁面的UI、交互一致性,也需要原生頁面向跨平臺的統(tǒng)一UI、統(tǒng)一交互靠攏。
基于以上這些原因,全面屏?xí)r代App內(nèi)部UI和交互漸趨統(tǒng)一的潮流和傾向也就不可逆轉(zhuǎn)了。
所以全面屏?xí)r代移動端交互的最終發(fā)展趨勢是:
1. 系統(tǒng)之間的UI差異和交互差異越來越小。
2. App不再過多關(guān)注系統(tǒng)差異。
3. App在不同系統(tǒng)上的UI和交互漸趨統(tǒng)一。
4. iOS的iOS Interface Guidelines 和安卓的Material Design Guidelines會逐漸剝離系統(tǒng)屬性變成純粹UI和交互規(guī)范,使用哪種規(guī)范最終取決于設(shè)計者的信息架構(gòu)和展示目標。
以上就是全面屏?xí)r代的交互發(fā)展趨勢,當然硬件技術(shù)的發(fā)展日新月異,GUI界面的載體發(fā)展也日新月異,在折疊屏已經(jīng)逐漸出現(xiàn),VR、AR、MR設(shè)備也已經(jīng)露出曙光的近未來,交互形式可能又會因為GUI載體開發(fā)系統(tǒng)的不同而進入差異巨大的境況,但當塵埃落定,必然會有一種最符合用戶心理模型而非工程實現(xiàn)模型的交互形式脫穎而出,讓我們拭目以待吧。
未來設(shè)備的界面和交互方式
本文由 @德升 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
2. 返回機制不同
在 iOS 里面,程序是借助右上角的返回鍵
應(yīng)該是左上角吧 ??
對,謝謝指正