— 寫在前面—

首先說聲抱歉,我不應該在標題裡使用"最"字。

本帖並不想吹蘋果iOS相比安卓有多好,而是使用iOS為例子,談一談對於手機系統而言,何謂流暢。為了直觀的展示iOS的動畫效果,本帖使用了不少動圖,加載需要時間,我在這兒提前感謝各位讀者的耐心等待🙏。

近幾年來,隨著國內手機品牌如華為、小米日漸成熟,開發者們設計系統不再一味追求功能強大,而開始在審美、交互以及過渡動畫上下功夫。得"益"於廠商們大力度地營銷,就算是不太關心數碼的吃瓜網友,對"非線性動畫" "高刷新率"等名詞也有所耳聞;但也正因為營銷,沒有深入了解過手機系統的用戶,甚至一些數碼博主,開始把"非線性動畫"和"流暢"劃等號,引發無數"罵戰"。

何謂流暢?這個概念就和"全面屏"一樣,我們可以感性地將"全面屏"定義為"好像手裡握著一塊玻璃",但很難給予一個量化的描述。我說蘋果iOS比華為EMUI流暢,如果單單是"憑感覺",那評論區免不了用戶們各執一詞的互噴,而廠商也無法從批評中學到任何東西。

本帖參考了WWDC2018 的相關演講,試圖從三個維度衡量手機系統的流暢度:

1.動畫設計:同為非線性,同為60幀,為什麼動畫的觀感有差異?

2.交互方式:全面屏時代,手勢操作和Home鍵/三大金剛鍵有何區別?

3.符合直覺:過分華麗的動畫使人眼花,如何兼顧觀感和用戶體驗?

Part One.⎡動畫設計:擬物,可不止圖標⎦

我們知道,在手機屏幕裡飛來飛去的App,並不是真的在手機裡運動,而是手機系統在短時間內展示多張不同的圖像,讓觀者產生"它在運動"的錯覺。連續播放的靜止畫面+肉眼的視覺殘像, "動畫"就產生了。

▼ 動圖,翻書動畫

undefined

在固定時間內,一段動畫展示的靜止畫面越多,它造成的肉眼錯覺就越強,對觀者而言就越流暢。我們把1秒內播放的畫面數量稱為"幀率",主流顯示器的60幀,即指"1秒內展示60個畫面"來構成動畫效果。那麼兩段幀率相同的動畫,它們帶給觀者的流暢感是相同的嗎?請看下面的例子。

▼ 動圖,兩個以不同速度運動的小球

儘管兩個小球的幀率相同,速度較慢的小球,其軌跡與動效都十分細膩;而速度較快的小球,則在運動時產生了割裂感,好像是一頓一頓地前進。這是為什麼?當我們記錄下小球經過的各個位置,背後的原因就顯現了。

速度快的小球,兩幀之間的變化太大,球的殘像甚至不重疊,對眼睛而言就像跳躍一樣;而速度慢的小球,兩幀之間的變化較小,對眼睛而言更加舒適。

手機動畫自然沒有小球來回運動這麼簡單,但想讓動畫流暢,原理是不變的:幀與幀之間的變化不能太大,否則同樣的幀率,你的動畫就會變卡。以主屏幕打開App的縮放動畫為例,各位覺得哪個更流暢?

▼ 動圖,兩種IT 之家的打開動畫 (轉錄者註:該動畫連結已失效)

•第一種動畫將App窗口變形成桌面圖標的大小,然後展開成完整的App窗口;

•第二種動畫維持App窗口的原始比例,逐漸從小窗變成大窗。

動畫一雖華麗但卡頓,動畫二雖普通但流暢,理由同上:直接從圖標大小展開成完整窗口,每幀之間的變化太大,有割裂感。從系統設計的角度出發,顯然動畫一是符合需求的(許多安卓OS用的就是它),畢竟App圖標是正方形且面積小,手機屏幕是長方形且面積大,畫面變形、大小劇變似乎是不可避免的問題。我們看看蘋果iOS是如何處理該動畫的:

第一步, App的圖標會變形成與iPhone屏幕長寬比相近的長方形。

值得注意的是,圖標的變形並不是簡單的拉伸,而是給原圖標添加"下巴"以調整長寬比。若是直接把圖標拉成長方形,則會變得很醜。

▼ 某UI 簡單粗暴地圖標拉伸

▼ 蘋果iOS 會給非純色的圖標加入匹配的"下巴"

第二步,因為App圖標已經變形,App界面能以原始長寬比逐漸顯示在圖標之上。

▼當App窗口完全顯示時,其面積已經充斥1/4屏幕了,因此之後的縮放不會因為變化率太大而產生割裂感為了讓App窗口盡量大些,蘋果還用一個遮罩隱藏了部分內容,使得窗口實際大小比看到的還大。

第三步, App窗口完全填充手機屏幕。除了App內容在慢慢放大外,遮擋窗口的遮罩也在不斷拉長,逐漸顯示出完整的App。一切,都是為了讓幀與幀間的變化不至於太大,最後造就細膩的動畫。

僅是如此,iOS的動畫只能算"精緻",還算不上"流暢"。我們來回顧下"非線性動畫"的概念。這裡使用高中物理課常用的"位置—時間"圖像,即xt圖,來直觀展示線性的"線"究竟指什麼:

• 1號是一條逐漸趨於水平的曲線,代表物體做減速運動,到達終點時速度剛好為零;

• 2號是一條折線,代表物體先做勻速直線運動,到達終點時速度突然歸零。

我們稱第1種運動是"非線性"的,因為它在"位置—時間"圖中並非直線,而是連續變化的曲線禍害無數學子的數學家萊布尼茨說過(雖然是錯誤的🙅‍♂️):

 大自然沒有跳躍。
Nature Does Not Make Jumps.

顯然,線性運動在現實情況下不可能實現,折線的彎折處實際上還是曲線,因為速度減到0,無論如何是一個漸變的過程但在代碼構成的電子設備中,線性運動是可以實現的,而且在安卓OS的動畫中廣泛存在。打開一個App,圖標以勻速直線運動放大,然後運動突然停止,十分生硬。

問題是,只要是曲線,我們都稱為"非線性"運動,但曲線的類型是無窮無盡的,合適的曲線造就完美的動畫,怪異的曲線還不如直線。

蘋果是如何設計非線性動畫的曲線的?iOS從擬物發跡,之後經歷了扁平化的洗禮,似乎與擬物漸行漸遠。但是,iOS的動畫卻從未離開過現實中的物體,所有動畫曲線都使用了"彈簧"這一物理模型作為參照,通過"彈力"讓手機系統變得流暢。

•彈簧的運動端是將要運動的物體;

•彈簧的固定端是物體運動的終點;

•整個彈簧系統處在水平面上;

通過調節彈簧的鬆緊程度、物體的質量以及系統中的阻力,我們能得到無數種運動曲線,但每一種都不違和:因為它們都遵守著同一條物理法則(胡克定律),且完全符合人類在現實生活中培養起來的物理直覺

▼設置阻力為極大,物體運動到終點即停止,不會來回彈;

▼設置阻力為極小,物體到達終點後會過衝,並處在震蕩之中;

這些個"彈簧"具體對應了蘋果iOS 的哪些動畫呢?(大量動圖預警⚠️)

首先是主屏幕與系統:

▼ 輕輕返回主屏幕

▼ 用力返回主屏幕

▼ 系統中幾乎所有可交互的元素都有彈性

得益於蘋果嚴苛而統一的設計語言,"彈簧"動畫也充斥著第三方App。所有iOS 的列表都自帶彈力,很直觀的反映了"列表已到頭"的訊息:

用心的開發者也會調用iOS 的動畫API,打磨App 的細節:

▼ 輕輕下拉菜單

▼ 用力下拉菜單

講到這兒,我相信各位對"流暢"有了更深的理解。幀率越高,系統就越流暢?並不,這要看你在每一幀畫面中填充了什麼內容;動畫越花,系統就越流暢?並不,這取決於你的運動軌跡是如何設計的。蘋果iOS的動畫看似複雜,其實僅僅遵循著現實生活中最簡單的原理:彈性。通過胡克定律,iOS將各種動效整合在一起,既融入了系統,也融入了第三方App開發的準則中,使用戶體驗連貫一致。這正應了蘋果首席設計師喬納森的那句話:

真正的簡約絕不是刪繁就簡,而是在紛繁中建立秩序。
True simplicity is derived from so much more than just the absence of clutter and ornamentation. It's about bringing order to complexity.

— 上篇總結—

本來想在一個帖子裡把"動畫設計" "交互方式"和"符合直覺"三個方面都講完,但沒想到一個部分就能講出這麼多內容。如果各位對這個主題有興趣的話,我將繼續寫好剩下兩個部分。再強調下,本帖只是以iOS為例,探討手機系統的流暢性可以如何衡量,不針對特定品牌也沒有任何貶低的意思。希望普通用戶和開發者都能從本帖中得到啟發!

— 寫在前面—

承蒙各位支持,本帖有了下篇。在上一帖(點此跳轉中,我介紹瞭如何設計動畫才能讓系統用起來"流暢"。本帖將繼續介紹另外兩個顯著影響系統流暢度的因素:

•交互方式:全面屏設計移除了手機正面的物理按鍵,手勢操作真的比按鈕好嗎?

•符合直覺:手機系統的流暢不僅體現在動畫上,還體現在邏輯中。

本帖旨在探討"何謂流暢"這個開放式問題。我以iOS為例子,純粹因為iOS在"流暢"這方面做的比較完善,方便我進行展示、說明。安卓OS擁有許多iOS缺少的功能,比如應用分身、小窗模式、全局返回等等,但安卓OS的流暢度參差不齊也是事實,我得結合多個系統的特點才能把事情說清楚,這會讓本帖顯得混亂。

廢話不多說,開始正文。我在這兒提前感謝各位讀者耐心等待動圖加載🧎‍♀️4G流量用戶需要點擊圖片後加載,WIFI用戶等待10秒鐘即可🧎‍♀️

Part Two.⎡交互方式:別讓"動畫"成了"延遲"⎦

一個很簡單的事實:我們使用手👋來完成一生中大部分的任務。自人類700萬年前從黑猩猩中分離出來至今,我們使用過的工具🔧不勝枚舉,但我們的手並沒有太大變化:通過精密的肌肉運動,僅僅十個手指可以實現近乎無限的操作。

隨著人類科技的發展,我們使用的工具愈加先進,但也愈加抽象樸素的工具,如錘子、榔頭、剪刀,它們沒有任何按鈕,使用前無需學習,能達到看到就會用的程度;複雜的工具,如手機、電腦,它們使用按鈕來操作,用戶如果不認得漢字或字母,想愉快地使用就很難了。

▼也許每個人都會用"剪刀",但不是每個人都會用"剪切"

歷史證明,受歡迎的設計都是簡潔易用的。13年前,實體按鍵是手機不可分割的一部分,鍵盤區域有時會比顯示屏幕還大。用戶通過十字方向鍵控制選框,進而和系統、 App進行交互。我們靈巧的雙手被塑料按鍵限制在了狹小的空間內,效率低下。

▼ 經典機型:諾基亞N95

2007年,首代iPhone用一整塊觸摸屏取代了實體鍵盤,造就了現代智能手機的雛形。喬布斯將"按鍵手機"革新為"觸屏手機",目的很明確:虛擬按鈕能隨App的切換而改變,且用戶可以直接與按鈕交互這好比射擊遊戲中,鼠標玩家會比手柄玩家操作更加精準:使用手指操縱工具的人類,當然適合用手指交互內容。

▼ 經典機型:iPhone 3GS

值得注意的是,儘管智能手機系統使用多點觸控、擬物、過渡動畫等一系列細節讓使用手機更加自然,但手機系統的運作始終遵循四個步驟,這里以"打開手電筒"為例:

1.用戶大腦 🧠:環境太暗,需要打開手機的手電筒;

2.用戶手指 👐:對準"手電筒"按鈕按下去;

3.過渡動畫 🌓:模擬手電筒開啟的過程;

4.觸發功能 🔦:開啟後置閃光燈。

上篇帖子中,我們將勻速直線運動的動畫成為" 線性動畫";同樣,因為以上四個步驟是單向、直線排列的,我們稱這種操作邏輯為"線性交互"用戶按下按鈕,系統執行這個按鈕對應的功能,如同打字般一一對應。過渡動畫在這類交互邏輯中是多餘的,一些用戶甚至會把動畫效果關閉,以取得更快的響應速度。

▼ 左:動畫開啟;右:動畫關閉

一般來說,過渡動畫持續時間較短,且啟動App需要一段加載時間,大部分用戶都接受在"操作"與"功能"間加入"動畫"來銜接這能使手機系統更加流暢。不過,正如打字時會按錯鍵,用戶觸發功能時也難免有失誤。舉個例子,我本想打開IT之家,但不小心點擊了雲音樂,這該怎麼辦?按照"線性交互"的流程:

▼不小心點擊"雲音樂" → 等待動畫結束 →點擊Home鍵→ 等待動畫結束 →點擊"IT之家" → 等待動畫結束 →應用開啟

此時,起到銜接作用的動畫反而造成了操作間的延遲,用戶的流暢體驗被破壞。為了解決這個問題,我們不妨想想使用樸素工具,如剪刀✂️時,我們的操作邏輯是怎樣的:

1.用戶大腦 🧠:沿著引導線裁紙;

2.用戶手指 👐:將剪刀對準線條;

3.過渡動畫 🌓:一邊剪紙,一邊修正方向,使✂️始終在線條上;

4.觸發功能 🔦:窗花。

以上邏輯與"線性交互"有個重要區別:系統會實時對"操作"給予反饋,用戶並非"思考"完畢再實施"操作",而是一邊"思考"一邊修正"操作"。換句話說,"動畫"不僅起到過渡的作用,還留給用戶"思考"與"操作"的時間。我稱這種操作邏輯為"非線性交互"。

▼ 鑑別某個系統的"過渡動畫"是否是多餘的,只要把動畫關掉,然後看看手機的使用是否受影響即可。iPhone 開與不開動畫,完全是兩種手機。

想把"智能手機"📱設計成"剪刀"✂️,僅靠點按這類只有"點—不點"兩種狀態的操作是很難實現的;如果剪刀✂️只有"開—關"兩種狀態,那一刀下去手指多半會斷。我們需要用"手勢"替換"按鈕",通過檢測手勢中的各種信息去揣測用戶的意圖,最終觸發某個功能。

此時,"動畫"並非填補"操作"與"功能"的裝飾,而是實時反饋用戶手勢的信號。MIUI 12發布後,大家津津樂道的"可打斷動畫",就是其中一種特性。

需要指出的是,這並非"動畫"被打斷了,而是手機系統即使在動畫之中,也會實時反饋用戶的觸控操作。讀者可以試一試,下面這些操作,您的手機是否能做到:

▼ 開啟App 時,你可以同時啟動多任務界面,App 窗口會移動到手指位置

▼ 開啟App 時,你不用等App 完全打開,就能進行交互

▼ 關閉App 時,你不用等App 圖標歸位,就能滑動桌面

大家喜歡把iOS的這些細節描述成"精緻的動畫",實際上,這是蘋果改良人機交互邏輯後,產生的附帶品罷了。如同✂️,你控制工具時手指的速度、力度都會影響最終呈現的效果;如果觸控屏僅僅記錄下手指的位置,那我完全可以把"屏幕"當作扁平化的"鍵盤"。iOS (沒砍3D Touch前)會記錄每一次觸控的位置、速率、速度、力度等信息,並分析這些信息來判斷用戶意圖。

▼以移動"畫中畫"為例,系統需要通過手勢判斷用戶想把"畫中畫"放在哪裡。如果僅僅記錄手指的位置,那系統只能用"就近吸附"的方式定位浮動窗口

▼ iOS記錄了手勢的速度(矢量),即便小窗沒有移動到角落,系統也能知道,用戶是想把窗口向角落移動

如果各位的手機支持"小窗模式",不妨開啟小窗拖動看看,你的快速滑動和慢速滑動是否有區別。說實話,某些系統用不同位置上滑來觸發"返回" "主屏幕" "多任務"這三種操作,或者用屏幕邊緣側滑來觸發"返回",這不是非線性的手勢操作,只不過是把原本用"點擊"就能觸發的按鈕,改成用"滑動"觸發罷了。我相信喜歡"點按返回"而不是"側滑返回"的安卓用戶不在少數。

▼ "全局側滑返回"會遮住App 正常的側邊菜單,交互上存在矛盾

▼ 雖然和iOS 一樣都是上滑返回主屏幕,但如果交互邏輯仍是線性的,"手勢"和"按鈕"並沒有區別

這裡,我想表揚下MIUI12。除了可打斷的動畫外,MIUI12 的"超級壁紙"將"非線性交互"引入到"主屏— 鎖屏— 息屏"這iOS 也尚未考慮到的部分中來。

▼ "息屏— 鎖屏"可以像踢球一樣來回滾動

Part Three.⎡符合直覺:用戶所想,系統所示⎦

最後一部分,可能和系統中"會動的部分"無關,僅僅是一些細節。也許你沒有註意到,人類都擁有"預知未來"的能力。走路時,我們會避開前方的障礙物;打雷時,我們會提前尋找避雨的地方;而使用手機時,我們根據現實生活中培養起來的直覺,來預測系統的下一步動作。

▼細看下面的動畫,你會覺得膈應

首先是系統和第三方App 的一致性。

我在帖子中舉的例子多為主屏幕相關的操作,比如打開App、關閉App;實際上,用戶在使用手機時,停留在主屏幕的時間相比使用App的時間,可以說是極少了。縱使你的桌面做得再好,如果App裡的動畫仍是生硬的,那用戶反而會因為系統與應用間強烈的反差而難受。淘寶、京東這類購物App,因為展示商品與廣告推銷需要,常把界面打扮的花里胡哨。在iOS平台,就算開發者脫離蘋果的設計語言放飛自我,動畫效果和iOS仍是一致的。

▼ 大部分列表都有彈性

▼ App 中返回上級頁面的操作是非線性的

其次是頁面移動的方向具有空間連續性。

比如,被我滑動到右邊的頁面,應該從右邊回來,而不是上面或下面。不然,就算動畫是流暢的,用戶也無法感知到系統的連貫性。

▼左:頁面向浮現,但卻向退出;右:頁面從邊出現,並返回

最後是系統UI 設計在不同界面的一致性。

▼因為手機屏幕使用了較大的圓角,用戶會傾向認為,App窗口也是同樣大小的圓角矩形

▼因為系統使用了觸控條來指示上滑返回主屏,用戶會傾向認為,其他可以交互的元素也應該有此觸控條

— 寫在最後—

我用了兩個帖子的篇幅,介紹了衡量手機系統流暢性的三個方面:動畫設計,交互方式,以及符合直覺的細節。

所謂流暢,首先要滿足我們的眼球,至少不能在視覺上給用戶留下卡頓、割裂的印象;之後要符合人類使用工具的習慣,始終響應來自用戶的操作,盡量減少延遲;最後要迎合我們腦中的邏輯,讓用戶能通過前一步預判後一步。滿足這三點,手機系統就能在外觀、運行與內核三方面獲得流暢性。

最近發布的MIUI12,因為一些設計與iOS雷同,在數碼圈造成了爭議。要我說,除去把通知中心和操控中心分別放到左上角和右上角這點照抄了iOS,MIUI12的其他部分與iOS是良性趨同,是值得肯定的。趨同設計在數碼圈裡很常見,比如Yoga Book與Surface Book的鉸鏈,兩者都想把筆記本電腦💻向書本📖靠攏,於是都在鉸鏈部分採用了類似書脊的結構。

在全面屏時代,"手勢"取代"按鈕"是大趨勢。基於物理現象的動畫也好、非線性的交互方式也好、統一的系統UI設計也好,這些東西沒有專利可言。的確,因為蘋果註冊了列表回彈的專利,所以大部分安卓OS只能用一圈波紋來指示列表的盡頭。但小米、華為、索尼等廠商,它們想出了不同於iOS的方式,在系統級應用中實現了列表回彈,這足以說明一兩個專利並不會讓其他系統全軍覆沒。缺的是廠商的技術實力,或者對系統流暢性的重視程度。

MIUI12的"米柚光錐動效架構"是一個良好的開端,它的存在說明安卓OS是可以繞過谷歌進行底層動畫改動的。大家應該鼓勵各個廠商積極跟進行業裡先進的設計方案客觀評判不同品牌的優劣,取長補短,而不是A壓倒B。

再次感謝各位的閱讀🙏我寫這些帖子純粹是分享經驗,我自己也樂於探究手機系統的細節。只要有人閱讀,我就有動力繼續寫下去。上一篇帖子收到了許多家友的打賞,我十分感動😹。各位稱讚也好,批評也好,只要能豐富各位在之家的體驗,這些帖子就值了。

本文轉自:

https://quan.ithome.com/0/655/094.htm
https://quan.ithome.com/0/655/841.htm


    asemia623 發表在 痞客邦 留言(0) 人氣()