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

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

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

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

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

解決方案、設(shè)計(jì)、好設(shè)計(jì)

設(shè)計(jì)這個詞通常會有兩種用法，一種是將其作為行為的結(jié)果來論，它是中性的，不論好和壞，這些物品上的“設(shè)計(jì)”都能指向設(shè)計(jì)師的思考和操作，也就是說，我們接觸到的所有物品都含有“設(shè)計(jì)”，它們是設(shè)計(jì)師和制作者思考和操作的結(jié)果，正因?yàn)椴徽摵脡亩际窃O(shè)計(jì)，我們會有“這個設(shè)計(jì)好”和“這個設(shè)計(jì)差”的評價(jià)。

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

我們不會去談?wù)撨@些一般化的絕大多數(shù)物品的設(shè)計(jì)，它們是不值得品讀的。

所以，設(shè)計(jì)這個詞的另外一種用法，它指的是那些我們能夠用來談?wù)摵推纷x的屬性，因?yàn)檫@種屬性，它不再是一個中性的誰都具有的屬性。那么我們不再稱那些一般化的絕大多數(shù)的物品為設(shè)計(jì)時(shí)，稱它們什么呢？稱其為“解決方案”。

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

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

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

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

從一個設(shè)計(jì)轉(zhuǎn)變到一個好設(shè)計(jì)，有很多路徑，調(diào)校（Tuning）是其中之一。

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

Apple UI 設(shè)計(jì)中的 Tuning

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

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

Mac OS X 的 Dock 及圖標(biāo)放大效果

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

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

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

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

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

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

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

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

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

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

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

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

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

Mac OS X 的 Genie 效果

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

 

 

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

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

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

Cover Flow 和 iOS 上的 Safari 標(biāo)簽視圖

 

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

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

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

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

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

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

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

“Rubber band”橡皮筋效果

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

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

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

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

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

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

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

界面設(shè)計(jì)在觸摸屏?xí)r代的革命

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

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

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

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

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

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

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

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

我們與機(jī)器、與設(shè)備、與信息、與技術(shù)、與更抽象的東西，與它們的交互的內(nèi)容遠(yuǎn)遠(yuǎn)超出了圖像，不只是對象在變，交互行為本身，以及交互的主體——用戶——都在以一樣程度發(fā)生著變革?；诠δ苄枨蟮慕鉀Q方案已無法讓人感到滿意，消費(fèi)者渴望的是設(shè)計(jì)，要想讓設(shè)計(jì)能為消費(fèi)者帶來共振，設(shè)計(jì)師除了要將解決方案朝設(shè)計(jì)方向推進(jìn)，亦要不停地審視設(shè)計(jì)并對其作出調(diào)校。