[閒聊] 詳解為什麼iOS是最順暢的系統(下)
ps.本文轉錄自it之家的it圈子 非新聞
轉錄者註:時常看到手機板有各種吵為甚麼iOS比較順的問題,卻沒有人能提出證據性的解釋,希望透過這篇文章能讓大家來瞭解這兩大作業系統中,iOS的優勢在哪裡,並讓大家更
能體會使用者體驗的重要性。
本文為下文
https://quan.ithome.com/0/655/094.htm
https://quan.ithome.com/0/655/841.htm
部分詞語修改為台灣用語
--
本文帖將繼續介紹另外兩個顯著影響系統流暢度的因素:
‧互動方式:全螢幕設計移除了手機正面的實體按鍵,手勢操作真的比按鈕好嗎?
‧符合直覺:手機系統的順暢不僅體現在動畫上,還體現在邏輯中。
本文旨在探討"何謂順暢"這個開放式問題。我(原作)以iOS為例子,純粹因為iOS在"順暢"這方面做的比較完善,方便我(原作)進行展示、說明。安卓OS擁有許多iOS缺少的功能,比如應用分身、小窗模式、全局返回等等,但安卓OS的順暢度參差不齊也是事實,我得結合多個系統的
特點才能把事情說清楚,這會讓本文顯得混亂。
廢話不多說,開始正文。我(原作)在這兒提前感謝各位讀者耐心等GIF圖加載
--
Part Two:別讓"動畫"成了"延遲"
一個很簡單的事實:我們使用手來完成一生中大部分的任務。自人類700萬年前從黑
猩猩中分離出來至今,我們使用過的工具不勝枚舉,但我們的手並沒有太大變化:通
過精密的肌肉運動,僅僅十個手指可以實現近乎無限的操作。
https://i.imgur.com/R6kjWwe.png
隨著人類科技的發展,我們使用的工具愈加先進,但也愈加抽象。樸素的工具,如錘子、榔頭、剪刀,它們沒有任何按鈕,使用前無需學習,能達到看到就會用的程度;複雜的工具,如手機、電腦,它們使用按鈕來操作,用戶如果不認得漢字或字母,想愉快地使用就很難了。
▼也許每個人都會用"剪刀",但不是每個人都會用"剪切"
https://s1.ax1x.com/2020/06/07/tRQImD.gif
歷史證明,受歡迎的設計都是簡潔易用的。13年前,實體按鍵是手機不可分割的一部分,鍵盤區域有時會比螢幕還大。使用者透過十字方向鍵控制選框,進而和系統、App進行
互動。我們靈巧的雙手被塑膠按鍵限制在了狹小的空間內,效率低下。
▼ 經典機型:諾基亞N95
https://s1.ax1x.com/2020/06/07/tRQo0e.gif
2007年,首代iPhone用一整塊觸控螢幕取代了實體鍵盤,造就了現代智慧手機的雛形。
喬布斯將"按鍵手機"革新為"觸控手機",目的很明確:虛擬按鈕能隨App的切換而改變,且使用者可以直接與按鈕互動。這好比射擊遊戲中,滑鼠玩家會比手柄玩家操作更加精準:使用手指操縱工具的人類,當然適合用手指互動內容。
▼ 經典機型:iPhone 3GS
https://i.imgur.com/YI6Sn2i.png
值得注意的是,儘管智慧型手機系統使用多點觸控、擬物、過渡動畫等一系列細節讓使用手機更加自然,但手機系統的運作始終遵守四個步驟,這裡以"打開手電筒"為例:
1.使用者大腦 :環境太暗,需要打開手機的手電筒;
2.使用者手指 :對準"手電筒"按鈕按下去;
3.過渡動畫 :模擬手電筒開啟的過程;
4.觸發功能 :開啟後置閃光燈。
https://i.imgur.com/urtXbca.png
上篇文章中,我們將勻速直線運動的動畫成為" 線性動畫";同樣,因為以上四個步驟是單向、直線排列的,我們稱這種操作邏輯為"線性互動"。使用者按下按鈕,系統執行這個按鈕對應的功能,如同打字般一一對應。過渡動畫在這類互動邏輯中是多餘的,一些使用者甚至會把動畫效果關閉,以取得更快的反應速度。
▼ 左:動畫開啟;右:動畫關閉
https://s1.ax1x.com/2020/06/07/tRQfl6.gif
一般來說,過渡動畫持續時間較短,且啟動App需要一段載入時間,大部分使用者都接受在"操作"與"功能"間加入"動畫"來銜接。這能使手機系統更加流暢。不過,正如打字時會按錯鍵,用戶執行功能時也難免有失誤。舉個例子,我本想打開IT之家,但不小心點擊了雲音樂,這該怎麼辦?按照"線性互動"的流程:
▼不小心點擊"雲音樂" → 等待動畫結束 →點擊Home鍵→ 等待動畫結束 →點擊"IT之家
" → 等待動畫結束 →程式開啟
https://s1.ax1x.com/2020/06/07/tRQyTJ.gif
此時,起到銜接作用的動畫反而造成了操作間的延遲,使用者的流暢體驗被破壞。
為了解決這個問題,我們不妨想想使用樸素工具,如剪刀我們的操作邏輯是怎樣的:
1.使用者大腦 :沿著引導線裁紙;
2.使用者手指 :將剪刀對準線條;
3.過渡動畫 :一邊剪紙,一邊修正方向,使✂終在線條上;
4.觸發功能 :窗花。
https://s1.ax1x.com/2020/06/07/tRQWSx.gif
以上邏輯與"線性互動"有個重要區別:系統會實時對"動作"給予回應,使用者並非"思考"完畢再實施"動作",而是一邊"思考"一邊修正"動作"。換句話說,"動畫"不僅起到過渡的作用,還留給使用者"思考"與"動作"的時間。我稱這種操作邏輯為"非線性互動"。
▼ 鑑別某個系統的"過渡動畫"是否是多餘的,只要把動畫關掉,然後看看手機的使用是
否受影響即可。iPhone 開與不開動畫,完全是兩種手機。
https://s1.ax1x.com/2020/06/07/tRQ2f1.gif
想把"智慧型手機"設計成"剪刀"✂ 僅靠點按這類只有"點—不點"兩種狀態的動作是
很難實現的;如果剪刀✂ 有"開—關"兩種狀態,那一刀下去手指多半會斷。我們需要
用"手勢"替換"按鈕",通過檢查手勢中的各種訊息去揣測用戶的意圖,最終觸發某個功能
此時,"動畫"並非填補"操作"與"功能"的裝飾,而是實時反應使用者手勢的訊號。MIUI 12發布後,大家津津樂道的"可打斷動畫",就是其中一種特性。
https://s1.ax1x.com/2020/06/07/tRQsw4.gif
需要指出的是,這並非"動畫"被打斷了,而是手機系統即使在動畫之中,也會實時反應使用者的觸控動作。讀者可以試一試,下面這些動作,您的手機是否能做到:
▼ 開啟App 時,你可以同時啟動多工介面,App視窗會移動到手指位置
https://s1.ax1x.com/2020/06/07/tRQrmF.gif
▼ 開啟App 時,你不用等App 完全打開,就能進行互動
https://s1.ax1x.com/2020/06/07/tRQ0yT.gif
▼ 關閉App 時,你不用等App 圖標歸位,就能滑動桌面
https://s1.ax1x.com/2020/06/07/tRQNYn.gif
大家喜歡把iOS的這些細節描述成"精緻的動畫",實際上,這是蘋果改良人機互動邏輯後,產生的附帶品罷了。如同✂,你控制工具時手指的速度、力度都會影響最終呈現的效
果;如果觸控螢幕僅僅記錄下手指的位置,那我完全可以把"螢幕"當作扁平化的"鍵盤"。iOS (沒砍3D Touch前)會記錄每一次觸控的位置、速率、速度、力度等訊息,並分析這些訊息來判斷使用者意圖。
https://i.imgur.com/W6eCIk0.png
▼以移動"畫中畫"為例,系統需要通過手勢判斷使用者想把"畫中畫"放在哪裡。
如果僅僅記錄手指的位置,那系統只能用"就近吸附"的方式定位浮動視窗
https://s1.ax1x.com/2020/06/07/tRQck9.gif
▼ iOS記錄了手勢的速度(矢量),即便小窗沒有移動到角落,系統也能知道,使用者是想把視窗向角落移動
https://s1.ax1x.com/2020/06/07/tRQgYR.gif
如果各位的手機支持"小窗模式",不妨開啟小窗拖動看看,你的快速滑動和慢速滑動是否有分別。說實話,某些系統用不同位置上滑來觸發"返回" "主畫面" "多工"這三種動作
,或者用螢幕邊緣側滑來觸發"返回",這不是非線性的手勢操作,只不過是把原本用"點擊"就能觸發的按鈕,改成用"滑動"觸發罷了。我相信喜歡"點按返回"而不是"側滑返回"的Android 使用者不在少數。
▼ "全局側滑返回"會遮住App 正常的側邊選單,互動上存在矛盾
https://i.imgur.com/EkXKxoV.png
▼ 雖然和iOS 一樣都是上滑返回主畫面,但如果交互邏輯仍是線性的,"手勢"和"按鈕"
並沒有區別
https://i.imgur.com/qHrcYPM.jpg
這裡,我想表揚下MIUI12。除了可打斷的動畫外,MIUI12 的"超級壁紙"將"非線性動畫"引入到"主畫面-鎖定畫面-關閉螢幕"這iOS 也尚未考慮到的部分中來。
▼ "關閉螢幕-鎖定畫面"可以像踢球一樣來回滾動
https://s1.ax1x.com/2020/06/07/tRQdS0.gif
--
Part Three:符合直覺-使用者所想,系統所示
最後一部分,可能和系統中"會動的部分"無關,僅僅是一些細節。也許你沒有注意到,人類都擁有"預知未來"的能力。走路時,我們會避開前方的障礙物;打雷時,我們會提前尋找避雨的地方;而使用手機時,我們根據現實生活中培養起來的直覺,來預測系統的下一步動作。
▼細看下面的動畫,你會覺得很靠北
https://s1.ax1x.com/2020/06/07/tRQJoj.gif
首先是系統和第三方App 的一致性。
在文章中舉的例子多為主畫面相關的操作,比如打開App、關閉App;實際上,使用者在使用手機時,停留在主畫面時間相比使用App的時間,可以說是極少了。縱使你的桌面做
得再好,如果App裡的動畫仍是生硬的,那使用者反而會因為系統與程式間強烈的反差而難受。淘寶、京東這類購物App,因為展示商品與廣告推銷需要,常把界面打扮的花里胡哨。在iOS平台,就算開發者脫離蘋果的設計語言放飛自我,動畫效果和iOS仍是一致的。
▼ 大部分列表都有彈性
https://s1.ax1x.com/2020/06/07/tRQBOU.gif
▼ App 中返回上一頁的操作是非線性的
https://s1.ax1x.com/2020/06/07/tRQtFs.gif
其次是頁面移動的方向具有空間連續性。
比如,被我滑動到右邊的頁面,應該從右邊回來,而不是上面或下面。不然,就算動畫是順暢的,使用者也無法感知到系統的連貫性。
▼左:頁面向上浮現,但卻向右退出;右:頁面從右邊出現,並返回右邊
https://s1.ax1x.com/2020/06/07/tRQGwQ.gif
最後是系統UI 設計在不同界面的一致性。
▼因為手機螢幕使用了較大的圓角,使用者會傾向認為,App視窗也是同樣大小的圓角矩形https://qimg.ithome.com/image/2020/06/07/6372716232544344149901760.png
▼因為系統使用了觸控條來指示上滑返回主畫面,使用者會傾向認為,其他可以互動的元素也應該有此觸控條
https://qimg.ithome.com/image/2020/06/07/6372716232675103561401822.png
— 寫在最後—
我(原作)用了兩個文章的篇幅,介紹了衡量手機系統順暢性的三個方面:動畫設計,互動方式,以及符合直覺的細節。
所謂順暢,首先要滿足我們的眼球,至少不能在視覺上給使用留下卡頓、撕裂的印象;之後要符合人類使用工具的習慣,始終回應來自使用者的動作作,盡量減少延遲;最後要迎合我們腦中的邏輯,讓使用者能通過前一步預判後一步。滿足這三點,手機系統就能在外觀、運作與內核三方面獲得順暢性。
最近發布的MIUI12,因為一些設計與iOS雷同,在數碼圈造成了爭議。要我(原作)說,除去把通知中心和操控中心分別放到左上角和右上角這點照抄了iOS,MIUI12的其他部分與iOS是良性趨同,是值得肯定的。趨同設計在數碼圈裡很常見,比如Yoga Book與Surface Book的鉸鏈,兩者都想把筆電向書本靠攏,於是都在鉸鏈部分採用了類似書脊的結構。
https://qimg.ithome.com/image/2020/06/07/6372716232813676298861142.png
在全螢幕時代,"手勢"取代"按鈕"是大趨勢。基於物理現象的動畫也好、非線性的互動方式也好、統一的系統UI設計也好,這些東西沒有專利可言。的確,因為蘋果註冊了列表回彈的專利,所以大部分安卓OS只能用一圈波紋來表示列表的盡頭。但小米、華為、索尼等廠商,它們想出了不同於iOS的方式,在系統級程式中實現了列表回彈,這足以說明一兩個專利並不會讓其他系統全軍覆沒。缺的是廠商的技術實力,或者對系統順暢性的重視程度。
MIUI12的"米柚光錐動效架構"是一個良好的開端,它的存在說明安卓OS是可以繞過谷歌進行底層動畫改動的。大家應該鼓勵各個廠商積極跟進行業裡先進的設計方案,客觀評判不同品牌的優劣,取長補短,而不是A壓倒B。
--
轉錄者心得:
iOS能讓整體系統看起來那麼順的原因,還有一個重要因素是:嚴格的設計語言。
每個APP遵循良好的設計語言,在整體系統來看的話,無論是系統程式還是第三方軟體,都會看起來很一體,這樣就不會發生明明在桌面或是系統程式很順暢,但卻進去APP又是另一種體驗。
有些人可能會說,我都沒有感覺,可能只是你沒感覺到,又或者是現在系統可能更精進了但Android設計語言大量採用線性動畫這件事情卻是事實不變的
其實非線性動畫,很早就有出現過,包括大家所說的WP動態磚也是。
HTC也是其中之一
https://www.youtube.com/watch?v=fYnIz4wAjTE
以及進入主畫面旋轉ease in的效果
只可惜這東西再也不復見了
很高興看到越來越多廠商重視使用者體驗這一塊,希望Google也能將這種非線性動畫體驗當作設計標竿,現今Android對設計語言也越來越重視了,像是介面元素位置不能亂改之類的。
--
一天老婆跟我說她無聊,想讓我帶她找點刺激的事做做。我說,要不我們去吃霸王餐怎麼樣?老婆開心的說好啊好啊。於是點完菜,我們找了一個靠門的位置坐下,趁她去洗手間的時候,我偷偷把帳結了。她回來後開始吃飯,吃得差不多了,我悄聲問她,準備好沒有。老婆激動的點點頭,然後我就拉著她跑了出來,一路上,老婆笑得好開心。
其實老婆也付了一遍。老闆想:每天都能碰到這樣浪漫的人就好了。
--
推
推 就算是pixel 在交互操作的部分仍然差距明顯
推 Android的設計還是太工程師性格 導致就算用的是
旗艦產品 用起來卻比不上iPhone 這邊小米倒是模範
再推一個,動畫真的很重要XDDD
可惜廣告...
以前的HTC Sense一度可望與iOS抗衡 可惜後繼無力
厲害!!
Android OS本體還好,各廠將其改變或新增一些功能
導致。
你在中文表達能力上出了什麼問題嗎 這什麼文法
符合直覺就很好笑了,到處跑的返回鍵和不能全局適
用的返回手勢符合直覺?裡面提到側邊選單,但在有
了返回手勢,根本不該設計側邊選單,否則怎麼叫操
作邏輯一致?
我想他要表達的是Android廠商設計全局返回健跟側邊選單手是打到的問題 因為像我自己在用iOS 真的比較少APP會設計側邊滑出選單的功能 如果有通常都是在APP主 畫面 但我也不否全局返回很好用 MIUI的甚至可以切換APP 這點我覺得是原作者多慮了 因為救我體驗來說 之前完朋友MIUI跟EMUI都沒有遇到這兩個手勢衝突問題
而且把手勢優於按鈕視為ios的優點也挺好笑的,SE2
的Home鍵根本不是手勢,而安卓10任何廠商都有手勢
了。更別替蘋果的返回很多時候還是得靠按鈕,安卓
則有全局手勢。
推,拜託Google趕快把底層動畫好好整頓一下,不然一
輩子旗艦都輸
EMUI 10.1跟iOS的流暢度有一戰之力
可惜說到華為98%的人直接END XD
確實,我覺得安卓側邊選單也已經很少了,真的遇到
就走L型手勢拉出來,但相信以後側邊選單會逐漸消失
就連google本來是側邊選單推行者 現在也在ios的app
上漸漸砍掉這東西了
小米是偷得很徹底,說模範似乎…
的確抄了很多東西 但說老實話 非線性動畫這也不是ios搶先開發出來的 WP7早就用了 還記 得iPhone的滑動解鎖嗎?在ios6以前都是線型動畫 所以看起來很生硬
https://youtu.be/8hpvh0InDhs
一直都認為動畫用不用心很重要,蘋果在這種細節是真
的蠻講究的,icon有沒有置中等等都可看出細膩程度
蘋果系統真的好猛 居然動畫還沒結束就能先操作
難怪會讓人感覺很順,因為你手指怎麼動他就怎麼跑
安卓就沒辦法 你一次手勢只能做一件事
樓上這點安卓10系統可以app內動畫完成前點擊
ios只有在打開動畫支援這點 這下面討論已有提到
安卓10嗎 我還是9嗚嗚
IOS符合直覺?返回這個最常用的功能就超不符合直覺
了
MIUI進步真多
Pixel也可以做到在動畫過程中做出別的操作,可以去
設定把動畫速度調成10x試試看,不然預設動畫太快
安卓10返回手勢一致性已經超越蘋果
我覺得ios6的動畫也蠻舒服的XD
推
糟糕,像我這種討厭轉場動畫的人看來要被放棄了
同上
推
數碼圈—>這用語好像哪裡怪怪的
用科技圈應該會比數碼圈好
安卓第三方app一致性真的輸慘
但系統層面的東西 我實測氧OS幾乎都ok
動畫速度調快不代表動畫順暢
原po是轉錄啊,中國就是說數碼圈
全域 不是全局
ios使用者哪懂這麼多 不都一群盤子 用line fb而已
同類型的產品想贏過別人就靠細節,沒什麼盤不盤的
S20賣三萬四萬 還一堆問題 那個才叫盤ㄅ
個人認為,再怎麼講究轉場動畫還是會有人不認同
因為每個人所謂的畫面順暢標準,本就都不一樣
所以這篇個人認為,就是Apple的傳教文章,End
然後這篇講究順暢,但把一些跟動畫順暢根本無關的
東西也拿上來講...那叫偷渡
用原生APP還是會遇到BUG啦,不用IOS離完美還有段距
離
樓上,世上沒有"完美"這件事
專業探討文推
推
推
這篇講的 就是指使用者感官上覺得的順暢啊
不然828p 30fps的螢幕 硬體來看怎麼可能會順
但是軟體卻補足了硬體的缺點 這難道不值得其他OS重
視?
但使用者感官不是所有人都一樣,蘋果只是有套邏輯
讓你去認同...這就是傳教文啊 XDD 信者恆信
認同他們的做法與理念,要入教才容易的概念
但我還是能跟你講,覺得iOS不順的人還是大有人在
因為總是能找到它"不順"的地方去說嘴
蘋果本身沒有拿這個出來傳教ㄅ
我說的不是蘋果本身啊 我是說這整篇文章 XD
不過這篇整理的東西有條有絮,就文章內容來看
是應該給推啦,有用心
樓上o大你是不是不知道關於ui設計的背後是多少設計
師學者研發經費在支撐使用者感知及動畫傳達之間的
關聯...一堆論文科學研究支撐的東西你一句話說成是
蘋果的信仰實在很...
商業上來看,能讓越多人滿意的產品就是成功,我不
覺得Apple產品是最好看的,但算是很能被大眾接受的
UI真的很重要 即使內容寫得在好 使用者不會使用
就是廢物
這就是UX的價值~
試問,我為什麼要去知道背後的支撐論文為何?
我還是那一句啊~ 不是每個人都覺得蘋果這種設計
最順暢,遵從自己的心最重要吧
世上本就沒有完美的作品,自己覺得好就好
沒必要為了什麼統計說誰最順就強迫自己去喜歡吧
以內容看這系列整理得很詳細,這種好文章可以多點
但以理念看我只能尊重,但我不入這信仰 XD
簡單分享幾個 Android Material design 的 gif
87
[心得] 六年卓粉跳蘋果兩週使用文長心得先說使用經歷 1. iPhone 4 2. iPhone 5S 3. Samsung S7 Edge 4. HTC U12+75
[心得] 兩個月iOS使用心得從上一篇入門果粉到現在使用已經過了兩個月 問問自己真的會需要iPhone嗎 這次先來說說優點吧,系統和各種程式的運作真的非常順暢 在雙系統我同時有使用的程式中,沒有程式在Android上跑得比iOS順暢 你可以說Android最佳化很困難要配合太多種不一樣的硬體規格...61
[閒聊] MIUI 12更新內容 體驗越來越好的系統內容照片出處 小米稱MIUI 12這套包含動畫引擎、渲染引擎、插畫引擎的技術架構為「米柚光錐動效架構59
[心得] XZ3換iPhone 11兩個月心得兩個月前曾在本版發問換機相關疑問 感謝版上前輩協助做出選擇 本文純進行跨越系統心得分享,內容為親身體驗分享無任何貶低或吹捧,提供任何從安卓(特別sony)換ios系統使用者參考 目前使用iPhone 11 128G近兩月,日常用途為重度上網(JPTT FB IG等)中度手遊(決勝時刻)輕度拍照(景物 人像 美食),首次使用蘋果產品 首先分享iOS 帶來「我喜歡」的改變58
[討論] android與ios手勢操作差別第一次手機板發文 最近看到很多果粉時常拿android 9 以前的虛擬三鍵和現在的蘋果做比較 但其實從android 10 開始,就有手勢操作了 所以就來小小的科普一下好了 android的手勢操作剛開始還被戲稱抄襲ios2X
[心得] Iphone和Android手機的差距在哪裡呢?很簡單 軟硬結合的差距 還有系統功能整合的差距 系統動畫軟硬結合 A16內建硬件抗鋸齒去運行靈動島 Android用根本不適合的硬體去強行模仿漸層毛玻璃 導致來的就是三星 Slag或者是小米動畫的莫名卡頓和發熱15
[討論] Android右側滑動返回手勢更好用?兩大平台返回互如果經常在智慧手機相關論壇泡夠久的話,就應該知道兩個平台對待返回這件事的方式不太 一樣。很多人都喜歡 Android 的萬用返回手勢,配合曲面螢幕手感更好。但這真的是完美 的互動方式嗎?這部影片以此為題點出了幾個問題,像是內側滑動返回的消失和過場動畫的 偷懶、還有和既有的操作元件起衝突,例如側滑選單、滑動以翻頁、回覆等,以及部分 App12
Re: [心得] 14年ios用戶轉android先不論消費者的體驗靈敏度差異,實際影響拍照錄影體驗的因素其實不少。 舉凡入手的安卓手機等級(價格區隔,旗艦、高階、中階、入門)、使用者的需求、 使用者安裝第三方APP的數量等。 而iPhone主要都是對應著Android的旗艦機,同年度安卓旗艦機的相機滑順度 與iPhone的差異應該只是在轉換場景時的動畫體驗感設計的不同。
37
[問題] 中華電信疑似擅自更改合約15
Re: [心得] 笑死!三星摺疊機保內還收檢測費15
[討論] 4月安兔兔跑分排名沒有三星?20
Re: [情報] M4(4+6)Geekbench6跑分洩漏4
[問題] 同一地點 遠傳跟亞太訊號會不一樣?5
[問題] 遠傳親子66方案4
[問題] 如果三星wallet的悠遊卡忘記備份是不是4
Re: [問題] Vivo X90pro網路有問題Volte一直閃X
Re: [討論]華為 4G CPE 33
[問題] USB-C to 3.5mm 小尾巴是不是很容易故障X
[心得] 再也不想去實體門市辦任何事情1
[情報] Google Pixel 8 綠屏問題及其奇怪的解決16
[閒聊] 充電器統一規格前 是什麼樣的世界?