iPhone X 的全面屏的設計讓十年來“無論在哪都能帶你回家”的 Home 鍵退役，代之以在屏幕底部顯示的一個指示條。與 Home 鍵類似，無論何時，從底部邊緣即指示條區(qū)域向上輕掃即可返回主屏幕，用手勢操作替代了物理的按壓；同時源自指示條區(qū)域的手勢操作還能實現(xiàn)兩項常用操作，一個進入多任務應用切換界面，通過從指示條區(qū)域向上輕掃并停頓一下來實現(xiàn)，在指示條區(qū)域沿底部左右輕掃則能完成應用的快速切換。

Apple 在其 Youtube 頻道上發(fā)布了一個 iPhone X 操作指引視頻，可以看到這三個功能的手勢操作，但這個指引視頻里的操作看起來有點教科書化，比如在應用的快速切換操作中，沿著指示條左右輕掃這個動作看上去過于規(guī)矩，而不像在 iPhone X 上市前流出的一個視頻中的操作那樣吸引人。這個上市前流出視頻中的操作略顯浮夸，用單手來完成應用的快速切換，而且手指的活動路勁是弧線的，不像官方指引中是直線滑動，所以能夠看到更多的場景變換的動畫過程，每個應用的界面有放大和縮小的過程，而且似乎可以感受到，只要手指向上移動并停頓，就可以光滑連續(xù)地過渡到多任務應用的切換畫面。

實際上，上述的三個操作，返回主屏幕、進入多任務應用切換界面和應用間快速切換，可以看作是同一起點的三條分支，起始有一條共同的路段，然后可以光滑連續(xù)地過渡到三個分支，這是 iPhone X 上屏幕手勢操作與物理按壓的 Home 鍵操作在認知和操作習慣上最顯著的區(qū)別，物理按壓的 Home 鍵不同的操作是隔離的，而屏幕手勢的操作不具有物理上的隔離，而是靠交互設計背后的閾值來作劃分的，通過不同表現(xiàn)的參數(shù)組合比如觸摸的距離、時間和強度等，來喚醒不同的功能，而對這些參數(shù)或閾值的確定將是決定交互設計是否優(yōu)秀的關鍵。

上圖是 iPhone X 上返回主屏幕操作的過程圖，界面的變換過程主要有三支動態(tài)路徑疊加綜合完成：第一是壁紙的動態(tài)變換過程；第二是主屏幕從模糊到清晰；第三是前景的動態(tài)變換過程，分為兩個階段，第一階段則是當前應用界面從大到小的變化，而且這個變化并不是線性的，縮小的運動軌跡和速度不是線性的，縮略圖的變化也非線性的，然后縮略圖淡出，而此應用對應的圖標漸入直至完全替代，然后非線性過渡到最終狀態(tài)。上圖演示中的應用圖標位于主屏幕最左上角的，主屏幕上不同位置有不同的變換路徑和效果。

iOS 用戶界面中的豐富的動態(tài)變換過程到處都是，從 2007 年的第一代 iPhone 開始，經過了 10 年的發(fā)展變得更大龐大和全面。有部分人可能會認為這些動態(tài)效果影響了效率，通過在 iOS 設置中“輔助功能”項下“減弱動態(tài)效果”一欄來選擇關閉，但是它們是 Apple 用戶界面設計中非常重要的一部分內容，對于大多數(shù)人來說，并不會去主動辨認這些零點幾秒之內的動畫，但是能夠意識到因這些動態(tài)變換效果帶來的體驗，順暢、豐富、自然。

解決方案、設計、好設計

設計這個詞通常會有兩種用法，一種是將其作為行為的結果來論，它是中性的，不論好和壞，這些物品上的“設計”都能指向設計師的思考和操作，也就是說，我們接觸到的所有物品都含有“設計”，它們是設計師和制作者思考和操作的結果，正因為不論好壞都是設計，我們會有“這個設計好”和“這個設計差”的評價。

現(xiàn)實中，能被我們用“這個設計好”來稱贊和“這個設計差”來鄙視的東西并不多，我們身邊絕大多數(shù)的物品都是一般化的東西，讓我們無法提起精神來談論它們的設計。不可否認這些絕大多數(shù)的物品都是經過設計的，也有設計師的思考和選擇，這些設計都是安全的，不能鄙視它，否則就是煞有介事了，如果你帶著“設計”這個問號逼近它們，它們會躲到一邊。

我們不會去談論這些一般化的絕大多數(shù)物品的設計，它們是不值得品讀的。

所以，設計這個詞的另外一種用法，它指的是那些我們能夠用來談論和品讀的屬性，因為這種屬性，它不再是一個中性的誰都具有的屬性。那么我們不再稱那些一般化的絕大多數(shù)的物品為設計時，稱它們什么呢？稱其為“解決方案”。

如果站在設計師的視角來看，更能體會出“解決方案”和“設計”的區(qū)別，因為設計師的工作總是在面臨一次次的挑戰(zhàn)，就是如何讓“解決方案”變成“設計”，他也就更容易區(qū)別出某個東西是可以稱作為“設計”，還是僅僅是另外一種“解決方案”而已。

當面對一個問題，無論是工程師還是設計師，往往很快就有一些想法，以及一些解決方案，不僅是工程師和設計師，即使是科學家或其他任何專業(yè)人員，面對一個問題從來不會是說：“好，讓我們從最原始的原理開始。”解決方案往往可以來得很快，當要讓這些解決方案成為完美的答案，對于設計師來說，就像讓解決方案成為設計，需要為其付出努力，不斷地進行推敲和迭代。

對設計師來說，給出多少數(shù)量的解決方案從來不是什么問題，給出多少數(shù)量的看似不錯又有點特點的解決方案也從來不是什么問題，但是要讓這些解決方案變成一個設計并非易事。設計師的工作通常是兩部分，一是創(chuàng)新的解決方案，二是經過詳盡分析比較達到最終唯一的選擇，它具有不言自明的說服力。要讓解決方案變成設計，需要在這兩部分的具體工作中去追求，這兩部分的工作是相互交織的，創(chuàng)新自然重要，但是通過對一堆解決方案的比較和辨析，去取得最終具有說服力的最終唯一選擇，決定著解決方案是否能夠轉變?yōu)樵O計的關鍵。通過比較和辨析去取得最終唯一選擇，是一個“Say No”的過程，而且要讓每一個“說不”具有足夠的理由，這樣才能讓最終的選擇具有說服力。

從解決方案到設計要有一個質的跨越，而從一個設計到一個好設計，之間的轉化可能沒有一個質變的過程，但是它就像畫龍點睛，或者給一個物品蒙罩一層光韻一樣，有一個藝術般的轉變，或許從物理上來說是不值一提的轉化，但是對人的感知來說，就有一個靈氣盡顯的提升。

從一個設計轉變到一個好設計，有很多路徑，調校（Tuning）是其中之一。

調校的特點在于它并非是機械化地來微調一些參數(shù)值，它并非是一個完全理性的過程，它雖然依賴于一些參數(shù)，但是設計師的主觀判斷和取舍仍占據(jù)重要的地位，而公式和參數(shù)等，只是作為設計師的一個工具。

Apple UI 設計中的 Tuning

從早期的 Lisa 和 Macintosh 的圖形化用戶界面開始，Apple 帶領了幾次人機交互界面設計的革命，從 Mac 上的鼠標和圖形界面，到多點觸摸屏和手指直接觸摸操作，革命并非只是來自于技術的革新和設備的發(fā)明，影響了整個產業(yè)，而是軟硬件的結合帶來的新的交互方式，而且設計的如此出色和自然，直接影響到每一位具體的用戶，給他帶來了愉悅，而且還改變了他的認知。

像 iPhone X 中自然順暢的手勢操作，并非突然出現(xiàn)，包括那些不會注意到但又能體驗到的細節(jié)設計，也是經過了很長的時間一步步發(fā)展而來的。

Mac OS X 的 Dock 及圖標放大效果

2000 年 Apple 在 San Francisco 的 Macworld 上發(fā)布了 Mac OS X，消費者版的 Mac OS X 要到第二年才上市，Macworld 2000 上發(fā)生可一些有趣的事情，尤其是我們現(xiàn)在回過頭去看這個當年的發(fā)布會視頻（優(yōu)酷鏈接）：回歸 Apple 的 Steve Jobs 宣布出任正式 CEO 而不再是實習，Keynote 使用的字體是手寫體，Phil Schiller 演示 Quake 3 時死機，“It’s pretty awesome when it works”這句話就是來自這一刻（鏈接視頻是 Steve Jobs 發(fā)布會演示失敗場景的集合）。

當 Steve Jobs 開始介紹 OS X 的用戶界面即 Aqua 時，先以 1984 年的原始 Macintosh 的圖形用戶界面以及跟隨者 Windows 作了一下鋪墊，但接著介紹 Aqua 時卻是從水晶效果的按鈕開始，Steve Jobs 在臺上認真又自豪地講怎樣從最原始的元素開始，用整個月來設計按鈕該是怎樣，滾動條和滑條該是如何，但是臺下的反應卻是寥寥的笑聲，似乎是“就這？”。Ars Technica 上有 Aqua 的介紹，它可以看作是 Steve Jobs 回歸后 Apple 的用戶界面設計發(fā)展的起始點。

在 Phil Schiller 演示失敗后，Steve Jobs 展示了 Mac OS X 上最酷的兩項設計，Dock 和 Genie（OS X 界面設計的特征就是 Aqua、Dock 和 Genie 這三項）。Dock 就是屏幕底部可以放置應用、文件、網(wǎng)頁和視頻等圖標并且能夠動態(tài)適應的快捷欄，放入圖標越多 Dock 就向兩邊擴張，而且引入了 Magnification 放大效果，當鼠標滑過圖標，圖標就有一個動態(tài)流暢的放大效果。而 Genie 則是窗口的動態(tài)變換效果，當窗口縮小到 Dock 或者從 Dock 欄放大，有一個非常有意思（Apple 稱其為“funky”）的動畫效果，在發(fā)布會上 Steve Jobs 不厭其煩的展示，在前面介紹 OS X 的鎖定到相應窗口的對話框時也有窗口的動態(tài)效果設計。這兩項以及其他一些 OS X 用戶界面設計的特征在現(xiàn)在的 Mac OS 上仍然保留著，OS X 的 Dock 和 Genie 等這些動態(tài)界面設計來自同一個設計師。

在 Walter Isaacson 寫的《Steve Jobs》書中（第 28 章）寫到，Steve Jobs 收到一位年輕人的 Email 要應聘圖形界面設計師（1998 年），應聘者很緊張，所以面試不成功，這位沮喪的設計師坐在大廳等 Steve Jobs 出來，問他是否可以看一下他的一些創(chuàng)意和設計，用 Adobe Director 作的 Demo，就是在屏幕下方一個可動態(tài)適應的 Dock 欄，而且有一個隨著鼠標移動的放大效果，Steve Jobs 當場就雇傭他了，這位設計師就是 Bas Ording，不只是設計了很多 Mac OS 的富有特色的交互設計，還包括促成 iPhone 誕生的列表滾動和回彈效果，以及很多 iOS 上的出色交互設計。由此也可以看到 Dock 圖標放大這個設計從誕生到仍在使用的今天已經有 20 年了。

對于需要在 Dock 欄放置多個圖標的用戶，以及考慮到十多年前的屏幕大小和顯示精度，Dock 欄的放大效果是非常有效的一個視覺增強功能。對于像放大效果這樣的交互設計，并非單純源自于功能的需求，它也不像技術革新那樣具有重大意義，或許人們會稱之為增強了審美效果，用現(xiàn)在的語言來說是帶來了豐富的體驗，隨著時代的發(fā)展，它的重要性將被越來越多的人認識到。

“隨著鼠標的移動圖標動態(tài)地變化”這只是一個 Idea，或者是一個創(chuàng)新的解決方案，還不能成為設計，要成為設計，就得考慮它具體是怎樣變化。鼠標移到哪個圖標，這個圖標就按設定值放大，然后兩邊的圖標以小一級的放大倍數(shù)來放大，離鼠標位置越遠放大的倍數(shù)越??？

但問題是如果按上面描述的方式來實現(xiàn)這個放大的效果，它將是非常機械的，線性的或者是接近線性的，而 Apple 的交互設計，從 Mac OS X 到現(xiàn)在的 iPhone X 最大的特征就是反線性，一個機械的動態(tài)效果將會是適得其反的。Bas Ording 在這個設計中引入了幾個參數(shù)和函數(shù)，為了達到更加連續(xù)和順暢的動態(tài)效果。

首先是在鼠標兩側遞減的放大倍數(shù)是連續(xù)的，而不是一級一級的，如果你把鼠標放在某一圖標的中間，那么左側和右側的圖標放大倍數(shù)是一樣的，如果鼠標是放在圖標某一側而非中心的位置，那么在這個圖標兩側，里鼠標越近的圖標放大倍數(shù)越大。然后引入兩個可變動的參數(shù)，即最大放大的倍數(shù)是靠放大后的高度（H）來決定，放大影響的范圍是靠鼠標兩側的寬度（W）來決定。

在這個設計（專利 US7434177 所示）中，圖標的設計是寬度可以不等，即有寬窄之分，所以圖標的寬度和位置靠兩邊離鼠標的距離 d1 和 d2 來確定。當原始高度 h 和放大后的高度 H，以及影響范圍的寬度 W 確認之后，那么放大后的在寬度上的增量 S 就可以確認，本設計使用的函數(shù)：S=((H−h)÷2)÷sine(π×(h÷2)÷(W×2))，兩段各增加 S，也就是放大后的寬度是 2W+2S，S 與高度增長量（H−h）成線性正比關系，但是與影響寬度 W 是非線性的正比關系，而是引入了一個正弦函數(shù)，以原始高度 h 和影響寬度 W 指比形成的正弦函數(shù)，帶來了一個非線性增大的結果，原始高度 h 越大，S 就相對越小，因為原始圖標夠大需要的放大倍數(shù)不需要太大。

同樣放大后的圖標兩側距離鼠標的距離的增加量也是通過正弦函數(shù)來與得到結果：d1′=S×sine(π÷2×d1÷W) 和 d2′=S×sine(π÷2×d2÷W)，d1′ 和 d2′ 在上圖（引用自 US7434177 專利圖）標示有誤，通過公式來看 d1′ 和 d2′ 是增量，即放大后圖標兩側離鼠標的距離為 d1+d1′ 和 d2+d2’，d1′ 和 d2′ 指來自于對一側寬度總增量 S 的分配，通過以放大前的與鼠標距離 d1（或 d2） 與影響寬度 W 的比值作為正弦函數(shù)的因子，正弦函數(shù)值的范圍就是從 0 到 1，離鼠標越近，也就是 d1（或 d2）值越小，正弦函數(shù)的特征就是因子數(shù)值越小變化率越大（在 0 到 π/2 之間），也就是離鼠標越近，增大的倍數(shù)越大。

最終增大的比例因子為：1+(d2′−d1′)÷(d2−d1)。

所以這一設計的要點有兩項，一是以圖標離開鼠標的距離來確定放大倍數(shù)，也就是鼠標作任何大小的移動，Dock 欄都有變動，如果鼠標在某一個圖標內移動不影響旁邊圖標的大小，這個設計就一下子變得死板了；第二個是通過正弦函數(shù)來實現(xiàn)非線性的變化。

如上所示，通過參數(shù)和公式來完善設計，并非通過嘗試來獲得一個滿意的結果，可以稱之為“Tuning”（調校）。如前所述，Tuning 并非是完全客觀和理性的，像這里使用到的參數(shù)和公式，并不是必然如此，而是設計師作出的選擇，這種效果也可以用其他的參數(shù)和公式來實現(xiàn)，只不過在這個設計上 Apple 使用了設定參數(shù)的比值來作為正弦函數(shù)的因子來達到非線性的變換效果。

Mac OS X 的 Genie 效果

這就是 Steve Jobs 在 Macworld 2000 演示得樂此不彼的 Genie 動畫效果，窗口縮小的默認效果是 Genie Effect ，另外還有一個 Scale Effect 供選擇，Scale 效果就是單純的縮小和放大，具有更高的執(zhí)行效率，而 Genie 效果在縮小和放大之間有窗口有變形，而且變形的速度也是非線性的，動態(tài)的變換過程需要一些時間，而且連續(xù)的變形會讓人感覺顯得更慢?，F(xiàn)在的 Mac OS 仍提供這兩個選項，很多人喜歡 Genie 效果，也有很多人不喜歡。

 

 

上圖是 Genie 效果中窗口輪廓的變化過程，來自專利文檔 US7362331。這個設計的一個特點就是變形后窗口的外輪廓，當從 QR 為上邊的四邊形窗口變形移動到 S’T’ 為上邊的四邊形窗口（或圖標）時，窗口的左右輪廓由直線變成了曲線，而這兩條曲線在這為正弦曲線（當然它可以是其他曲線），來自函數(shù) y=A sin(x) ，x 為圖面垂直方向的距離，正弦曲線的范圍定在 −π/2 和 +π/2 之間，y 為圖面水平方向的距離，A 為振幅，從零到 SS’ 和 TT’ 的一半。所以當窗口當前位置確定，以及目標位置確定，左右兩條曲線就能確定，窗口就沿著曲線向下縮小和移動。

這個設計的另一個特別之處，就是窗口在縮小變化過程中以怎樣的速度進行了，它需要是非線性的，如果是勻速地向下移動和變化，那么就會顯得很機械，非線性的運動就是在開始和結束的時候是緩慢的，而中間過程是快速的。如此前一圖所示，窗口在數(shù)值方向上移動的距離是 SQ 線段，如何實現(xiàn)非線性的變化，這個設計引入了一個余弦函數(shù)。首先當移動變換的整體時間 T 確定后，可以將 T 劃分為幾等份，比如 8 等份，用 8 等份來等份分割一個半圓，在每一個分割點向下作垂線來分割直徑，得到的分割距離就是從小到大再到小，用此分割線段比來劃分 SQ 線段，就可以得到非線性的窗口移動變換過程。

同樣，在這可以使用其他的函數(shù)或方法來實現(xiàn)非線性的變動，而上述方法聰明、簡單、直觀，雖然使用到了參數(shù)和公式，但參數(shù)和公式在這里不是原理和依據(jù)，而是一個解決問題的工具，而挑選恰好的參數(shù)和公式這種工具，就是設計中的 Tuning。

Cover Flow 和 iOS 上的 Safari 標簽視圖

 

Cover Flow 指的就是用唱片封面組成的一串可動態(tài)移動的序列，最早在 iTunes 7.0 上應用，但是它的原始設計并非來自 Apple 自己。Cover Flow 最早的想法來自藝術家 Andrew Coulter Enright，而他的靈感卻是來自于 Apple 的視頻會議通話軟件 iChat AV，即中間畫面正視，兩側畫面則為側視（平行四邊形）。一位獨立的 Mac 開發(fā)者 Jonathan del Strother 將 Enright 的想法應用，然后 2006 年被 Apple 收購。除了 iTunes，Apple 還將 Cover Flow 應用到了 iPhone、iPod 以及 Mac OS 的 Finder 上，而后到 iTunes 11 以及 iOS 7 上 Cover Flow 就被去除了。

Cover Flow 被 Apple 收購后，在一些設計的細節(jié)上作了調整，如透視的角度，讓顯示更美觀自然。

在 iOS 7 上 Cover Flow 被唱片墻（Album Wall，平鋪的封面）給替代，而新的 Safari 的標簽視圖卻有類似的設計應用，每個標簽頁變形堆疊在一起，形成了三維動態(tài)的視角效果，而且能夠在有限的空間內直觀地顯示更多的信息。

在瀏覽器的標簽頁中使用這種方式的設計，最早出現(xiàn)在 2012 年 Google 的 Chrome Beta 版上，運行在當時的 Ice Cream Sandwich 版本的 Android 上（可以觀看這個視頻）。當時 Chrome Beta 的標簽欄堆疊原始狀態(tài)并非有立體透視效果的，標簽頁整整齊齊的平貼疊加在一起，然后不同的標簽頁在豎直方向上一個個位置回退，可以看出不同的標簽，直到向下滑動標簽頁，達到頂部（或底部）出現(xiàn)阻尼效果時，標簽頁向內傾斜，加上陰影的處理，形成立體透視的效果，此刻與后來的 Safari 標簽視圖相似。

那么 Safari 的標簽視圖有怎樣的不同？通過在打開多個標簽頁的標簽視圖中上下滑動操作，會發(fā)現(xiàn)變換動畫都是非線性的，不像 Chrome Beta 那樣簡單直接。Safari 的標簽視圖中每個標簽的透視略有不同，越靠近屏幕下方透視角度越大，即看到標簽頁上內容越多（即看得越深），越靠近屏幕上面透視角度越小，越接近平視狀，但越遠離我們，并且還能與手機的姿態(tài)形成動態(tài)的三維關系，比如手機平放能看到的深度就淺，手機豎放能看到的標簽就深，模擬對一個立體物的視知覺。

滑動 Safari 的標簽視圖看上去有點像踩水車，除了滑動外，單獨的一個標簽頁在這組標簽頁序列里的位置可以重新排布，只要拖拽住標簽頁移動就行，標簽頁的拖拽移動也有動態(tài)的變換效果。

Safari 的標簽視圖模擬了 Rolodex（Apple 用了很多次的類比參照物），沿著具有一個滾動軸心的圓筒上排布。上圖來自專利 US9804745，圖左示意了標簽頁手動排布的動畫，F(xiàn)IG. 2A 示意的是將標簽頁向下手動挪一個位置，即將 112 移到 110 的位置，而 110 相應的從底部看不見的區(qū)域繞到 112 后，即用戶在操作 206 這個動作時，原先位置的標簽頁 110 同時在完成 204 和 208 兩個動作。FIG. 2B 示意的是將標簽頁向上手動挪一個位置，而 FIG. 2C 和 FIG. 2D 則是示意在 Safari 的標簽視圖上滑動的動畫效果。

“Rubber band”橡皮筋效果

“Rubber band”（橡皮筋效果）指的是在 iOS 上對一個列表比如聯(lián)系人或頁面內容比如網(wǎng)頁等作滾動操作時，無論是快速還是慢速，達到列表末尾的時候并非立刻停止，畫面仍在滾動，但是滾動的阻尼加強，在停止?jié)L動后，畫面回彈回到結束狀態(tài)，就像一根橡皮筋一樣具有彈性效果。

“Rubber band” 的設計也是來自于 Bas Ording，盡管看上去只是一個小小的設計，如果與 iOS 操作系統(tǒng)背后的巨大工程相比顯得微不足道，但正是這個小小的設計，促成了 iPhone 的誕生，也為新一代的人機交互界面設計開辟了起點。關于“Rubber band”和 iPhone 的誕生在《Affordance（可供性）和設計》這一篇文章提到過，而今年出的《The One Device: The Secret History of the iPhone》一書講解的更詳細，簡短說，當 Steve Jobs 看到 Bas Ording 設計處的慣性滾動、Rubber band 以及其他一些東西的 Demo，震驚并立馬認為可以通過這些來做一臺手機。

如 Cult of Mac 這篇文章所述，Bas Ording 設計原始的滾動列表時并沒有增加回彈效果，達到頂部或底部就停止了，但是這樣看起來就像是這個程序奔潰了，每次看到都覺得不適但一時不知道怎樣解決，后來在頂部和底部增加一段空白，但是如果空白部分就頂在頂部或墊在底部不動，仍然解決不了問題，空白部分需要動起來但是也沒有效果，后來他讓空白部分的移動速度小于手指操作速度，就出現(xiàn)了彈性效果，然后他就想它需要在彈回來，就是 Rubber band。

但是要正真設計到位，Bas Ording 花了幾個月的時間，原理雖然簡單，但是要做出恰當?shù)男Ч?，合適的數(shù)學公式，讓其自然順暢就需要不斷的調試。

上圖來自關于 iOS 中 Rubber band 的專利 US7469381，涵蓋的范圍除了列表滾動至兩段有回彈效果，還包括文檔平移到邊緣有回彈效果，文檔縮小到最小有回彈效果，文檔放大到最大有回彈效果，文檔扭轉（但未達可扭轉要求）有回彈效果。上圖所示的為列表滾動時出現(xiàn)的回彈效果。

如圖，當列表滾動到頂端邊緣時，如果仍然有滾動的趨勢，速度未達到零，在列表的頂端顯示空白部分，有阻尼效果進行滾動，如沒有在這一方向上的輸入后，回彈到列表的頂端邊緣。按照此份專利描述，列表滾動的速度是根據(jù)取樣檢測到的觸點的速度來確認，而當用戶中斷接觸后，滾動速度按照中斷前的加速度和速度來確認，按照公式 Vf = Vo + α Δt 來確認，Vf 是中斷后的速度，Vo 是中斷時的速度，α 為中斷時的加速度（為負值），Δt 為時間間隔，Vf 隨著時間增加在減小，當達到某個設定好的閾值后，Vf 就直接為零。當滾動達到列表頂端時，速度降為原先速度的幾分之一或者平方根，以有阻尼效果的速度完成在列表頂端增加的空白部分的移動，然后再完成回彈。

以上只是籠統(tǒng)的介紹，要達到滿意的效果，就需要對公式和參數(shù)進行不停的嘗試和驗證，也就是 Tuning。

界面設計在觸摸屏時代的革命

在 2007 年 iPhone 發(fā)布后，[ i D 公 社 ] 發(fā)過一篇文章《iPhone 的那些讓人印象深刻的細節(jié)設計》，其中將動態(tài)的轉換界面放在第一條，當時那篇文章指的場景動畫就如下圖所示：

上圖來自于專利 US D597101，這是第一代 iPhone 時一個 App 打開，以及從一個 App 界面回到主屏幕的變換過程，這個變換過程從 iOS 1 開始一直持續(xù)到 iOS 6。App 打開時窗口從屏幕中心開始，從小到大的動畫然后呈現(xiàn)在用戶面前，當窗口開始作從小到大變化時，主屏幕的圖標也在作相應的擴散，當然這個擴散是非線性的，從 App 界面回主屏幕是這個動態(tài)變換過程的逆向。這是十年前讓我印象深刻的一個細節(jié)設計，而現(xiàn)在再來看這個設計，就已經覺得過于機械化了。
 

這是 iOS 7 進入主屏幕的界面動態(tài)變換過程（來自專利 US D790569），與此前 iOS 1 到 iOS 6 進入主屏幕單純是圖標的移動不同，iOS 7 上是圖標分級的縮小，從屏幕的 Z 軸方向進行的動態(tài)效果，配合 iOS 7 其他一些視差效果的設計，界面的立體動態(tài)感更強，也符合 iOS 7 在 Z 軸方向上界面的層級邏輯。

Force Touch 在主屏幕圖標上使用時的界面動態(tài)變換過程（來自專利 US D775649），與深壓操作的邏輯能夠協(xié)調起來，加上 Taptic Engine 提供的反饋，綜合的體驗效果讓設計變得自然不過了。

我們這里說的很多設計，它們并非來自于功能的技術需要，甚至看起來是遠離功能的一些“表面”設計，可以想象 Macworld 2000 當 Steve Jobs 在臺上自豪地展示 Aqua 按鈕以及各種控制元素時，臺下肯定不少人會茫然，在很多人看來，OS X 界面設計中的 Dock 圖標放大和窗口最小化的 Genie 效果只是一些“表面”和“花哨”的東西。

但是我們能夠看到，從計算機的圖形界面時代到觸摸屏界面時代，發(fā)生了巨大的變遷。一人們潛移默化的接受了界面設計的重要性，如果現(xiàn)在去使用一臺觸摸屏設備，如果它的交互界面設計中沒有任何動畫，完全為了執(zhí)行效率考慮，我想沒有多少人愿意使用，因為觸摸屏讓人們直接操作內容，而不是通過鼠標等來遙控，直覺和體驗與效率直接相關。而我們上面提到的一些動態(tài)界面設計，對用戶來說，他并不會意識到辨別出，但是他能夠體會到。當用戶有了經驗和品味，也將促進設計不斷向前探索。

另一方面，因為科技和生活的變革，界面設計自身發(fā)生了的巨大的變革，比較一下這 10 年來的 iOS 的設計，或比較一下 iPhone X 和第一代的 iPhone，可以發(fā)現(xiàn)界面設計的深度如同屏幕組件一樣，在一層層的增加，每一層比如 Force Touch 就會帶來新的因子和新的閾值范圍，也就帶來了新的復雜性，但是仍然需要設計出簡單且符合直覺的設計。

滑動解鎖是當年被認為 iPhone 用戶界面直覺設計的一個典范，兒童看到它也知道怎么操作，而且這個設計也有 Tuning 在里面，比如滑動到哪個數(shù)值的距離能解鎖，否則回彈等等，但是在現(xiàn)在看來，無論從技術、從用戶的安全需要、從操作的便利性，還是設計的美感，它早已落伍，而且落伍速度遠超過 Apple 訴三星的官司。

我們與機器、與設備、與信息、與技術、與更抽象的東西，與它們的交互的內容遠遠超出了圖像，不只是對象在變，交互行為本身，以及交互的主體——用戶——都在以一樣程度發(fā)生著變革。基于功能需求的解決方案已無法讓人感到滿意，消費者渴望的是設計，要想讓設計能為消費者帶來共振，設計師除了要將解決方案朝設計方向推進，亦要不停地審視設計并對其作出調校。