iPhone X 的全面屏的設(shè)計(jì)讓十年來(lái)“無(wú)論在哪都能帶你回家”的 Home 鍵退役，代之以在屏幕底部顯示的一個(gè)指示條。與 Home 鍵類(lèi)似，無(wú)論何時(shí)，從底部邊緣即指示條區(qū)域向上輕掃即可返回主屏幕，用手勢(shì)操作替代了物理的按壓；同時(shí)源自指示條區(qū)域的手勢(shì)操作還能實(shí)現(xiàn)兩項(xiàng)常用操作，一個(gè)進(jìn)入多任務(wù)應(yīng)用切換界面，通過(guò)從指示條區(qū)域向上輕掃并停頓一下來(lái)實(shí)現(xiàn)，在指示條區(qū)域沿底部左右輕掃則能完成應(yīng)用的快速切換。
Apple 在其 Youtube 頻道上發(fā)布了一個(gè) iPhone X 操作指引視頻，可以看到這三個(gè)功能的手勢(shì)操作，但這個(gè)指引視頻里的操作看起來(lái)有點(diǎn)教科書(shū)化，比如在應(yīng)用的快速切換操作中，沿著指示條左右輕掃這個(gè)動(dòng)作看上去過(guò)于規(guī)矩，而不像在 iPhone X 上市前流出的一個(gè)視頻中的操作那樣吸引人。這個(gè)上市前流出視頻中的操作略顯浮夸，用單手來(lái)完成應(yīng)用的快速切換，而且手指的活動(dòng)路勁是弧線的，不像官方指引中是直線滑動(dòng)，所以能夠看到更多的場(chǎng)景變換的動(dòng)畫(huà)過(guò)程，每個(gè)應(yīng)用的界面有放大和縮小的過(guò)程，而且似乎可以感受到，只要手指向上移動(dòng)并停頓，就可以光滑連續(xù)地過(guò)渡到多任務(wù)應(yīng)用的切換畫(huà)面。
實(shí)際上，上述的三個(gè)操作，返回主屏幕、進(jìn)入多任務(wù)應(yīng)用切換界面和應(yīng)用間快速切換，可以看作是同一起點(diǎn)的三條分支，起始有一條共同的路段，然后可以光滑連續(xù)地過(guò)渡到三個(gè)分支，這是 iPhone X 上屏幕手勢(shì)操作與物理按壓的 Home 鍵操作在認(rèn)知和操作習(xí)慣上最顯著的區(qū)別，物理按壓的 Home 鍵不同的操作是隔離的，而屏幕手勢(shì)的操作不具有物理上的隔離，而是靠交互設(shè)計(jì)背后的閾值來(lái)作劃分的，通過(guò)不同表現(xiàn)的參數(shù)組合比如觸摸的距離、時(shí)間和強(qiáng)度等，來(lái)喚醒不同的功能，而對(duì)這些參數(shù)或閾值的確定將是決定交互設(shè)計(jì)是否優(yōu)秀的關(guān)鍵。
上圖是 iPhone X 上返回主屏幕操作的過(guò)程圖，界面的變換過(guò)程主要有三支動(dòng)態(tài)路徑疊加綜合完成：第一是壁紙的動(dòng)態(tài)變換過(guò)程；第二是主屏幕從模糊到清晰；第三是前景的動(dòng)態(tài)變換過(guò)程，分為兩個(gè)階段，第一階段則是當(dāng)前應(yīng)用界面從大到小的變化，而且這個(gè)變化并不是線性的，縮小的運(yùn)動(dòng)軌跡和速度不是線性的，縮略圖的變化也非線性的，然后縮略圖淡出，而此應(yīng)用對(duì)應(yīng)的圖標(biāo)漸入直至完全替代，然后非線性過(guò)渡到最終狀態(tài)。上圖演示中的應(yīng)用圖標(biāo)位于主屏幕最左上角的，主屏幕上不同位置有不同的變換路徑和效果。
iOS 用戶(hù)界面中的豐富的動(dòng)態(tài)變換過(guò)程到處都是，從 2007 年的第一代 iPhone 開(kāi)始，經(jīng)過(guò)了 10 年的發(fā)展變得更大龐大和全面。有部分人可能會(huì)認(rèn)為這些動(dòng)態(tài)效果影響了效率，通過(guò)在 iOS 設(shè)置中“輔助功能”項(xiàng)下“減弱動(dòng)態(tài)效果”一欄來(lái)選擇關(guān)閉，但是它們是 Apple 用戶(hù)界面設(shè)計(jì)中非常重要的一部分內(nèi)容，對(duì)于大多數(shù)人來(lái)說(shuō)，并不會(huì)去主動(dòng)辨認(rèn)這些零點(diǎn)幾秒之內(nèi)的動(dòng)畫(huà)，但是能夠意識(shí)到因這些動(dòng)態(tài)變換效果帶來(lái)的體驗(yàn)，順暢、豐富、自然。
解決方案、設(shè)計(jì)、好設(shè)計(jì)
設(shè)計(jì)這個(gè)詞通常會(huì)有兩種用法，一種是將其作為行為的結(jié)果來(lái)論，它是中性的，不論好和壞，這些物品上的“設(shè)計(jì)”都能指向設(shè)計(jì)師的思考和操作，也就是說(shuō)，我們接觸到的所有物品都含有“設(shè)計(jì)”，它們是設(shè)計(jì)師和制作者思考和操作的結(jié)果，正因?yàn)椴徽摵脡亩际窃O(shè)計(jì)，我們會(huì)有“這個(gè)設(shè)計(jì)好”和“這個(gè)設(shè)計(jì)差”的評(píng)價(jià)。
現(xiàn)實(shí)中，能被我們用“這個(gè)設(shè)計(jì)好”來(lái)稱(chēng)贊和“這個(gè)設(shè)計(jì)差”來(lái)鄙視的東西并不多，我們身邊絕大多數(shù)的物品都是一般化的東西，讓我們無(wú)法提起精神來(lái)談?wù)撍鼈兊脑O(shè)計(jì)。不可否認(rèn)這些絕大多數(shù)的物品都是經(jīng)過(guò)設(shè)計(jì)的，也有設(shè)計(jì)師的思考和選擇，這些設(shè)計(jì)都是安全的，不能鄙視它，否則就是煞有介事了，如果你帶著“設(shè)計(jì)”這個(gè)問(wèn)號(hào)逼近它們，它們會(huì)躲到一邊。
我們不會(huì)去談?wù)撨@些一般化的絕大多數(shù)物品的設(shè)計(jì)，它們是不值得品讀的。
所以，設(shè)計(jì)這個(gè)詞的另外一種用法，它指的是那些我們能夠用來(lái)談?wù)摵推纷x的屬性，因?yàn)檫@種屬性，它不再是一個(gè)中性的誰(shuí)都具有的屬性。那么我們不再稱(chēng)那些一般化的絕大多數(shù)的物品為設(shè)計(jì)時(shí)，稱(chēng)它們什么呢？稱(chēng)其為“解決方案”。
如果站在設(shè)計(jì)師的視角來(lái)看，更能體會(huì)出“解決方案”和“設(shè)計(jì)”的區(qū)別，因?yàn)樵O(shè)計(jì)師的工作總是在面臨一次次的挑戰(zhàn)，就是如何讓“解決方案”變成“設(shè)計(jì)”，他也就更容易區(qū)別出某個(gè)東西是可以稱(chēng)作為“設(shè)計(jì)”，還是僅僅是另外一種“解決方案”而已。
當(dāng)面對(duì)一個(gè)問(wèn)題，無(wú)論是工程師還是設(shè)計(jì)師，往往很快就有一些想法，以及一些解決方案，不僅是工程師和設(shè)計(jì)師，即使是科學(xué)家或其他任何專(zhuān)業(yè)人員，面對(duì)一個(gè)問(wèn)題從來(lái)不會(huì)是說(shuō)：“好，讓我們從最原始的原理開(kāi)始。”解決方案往往可以來(lái)得很快，當(dāng)要讓這些解決方案成為完美的答案，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，就像讓解決方案成為設(shè)計(jì)，需要為其付出努力，不斷地進(jìn)行推敲和迭代。
對(duì)設(shè)計(jì)師來(lái)說(shuō)，給出多少數(shù)量的解決方案從來(lái)不是什么問(wèn)題，給出多少數(shù)量的看似不錯(cuò)又有點(diǎn)特點(diǎn)的解決方案也從來(lái)不是什么問(wèn)題，但是要讓這些解決方案變成一個(gè)設(shè)計(jì)并非易事。設(shè)計(jì)師的工作通常是兩部分，一是創(chuàng)新的解決方案，二是經(jīng)過(guò)詳盡分析比較達(dá)到最終唯一的選擇，它具有不言自明的說(shuō)服力。要讓解決方案變成設(shè)計(jì)，需要在這兩部分的具體工作中去追求，這兩部分的工作是相互交織的，創(chuàng)新自然重要，但是通過(guò)對(duì)一堆解決方案的比較和辨析，去取得最終具有說(shuō)服力的最終唯一選擇，決定著解決方案是否能夠轉(zhuǎn)變?yōu)樵O(shè)計(jì)的關(guān)鍵。通過(guò)比較和辨析去取得最終唯一選擇，是一個(gè)“Say No”的過(guò)程，而且要讓每一個(gè)“說(shuō)不”具有足夠的理由，這樣才能讓最終的選擇具有說(shuō)服力。
從解決方案到設(shè)計(jì)要有一個(gè)質(zhì)的跨越，而從一個(gè)設(shè)計(jì)到一個(gè)好設(shè)計(jì)，之間的轉(zhuǎn)化可能沒(méi)有一個(gè)質(zhì)變的過(guò)程，但是它就像畫(huà)龍點(diǎn)睛，或者給一個(gè)物品蒙罩一層光韻一樣，有一個(gè)藝術(shù)般的轉(zhuǎn)變，或許從物理上來(lái)說(shuō)是不值一提的轉(zhuǎn)化，但是對(duì)人的感知來(lái)說(shuō)，就有一個(gè)靈氣盡顯的提升。
從一個(gè)設(shè)計(jì)轉(zhuǎn)變到一個(gè)好設(shè)計(jì)，有很多路徑，調(diào)校（Tuning）是其中之一。
調(diào)校的特點(diǎn)在于它并非是機(jī)械化地來(lái)微調(diào)一些參數(shù)值，它并非是一個(gè)完全理性的過(guò)程，它雖然依賴(lài)于一些參數(shù)，但是設(shè)計(jì)師的主觀判斷和取舍仍占據(jù)重要的地位，而公式和參數(shù)等，只是作為設(shè)計(jì)師的一個(gè)工具。
Apple UI 設(shè)計(jì)中的 Tuning
從早期的 Lisa 和 Macintosh 的圖形化用戶(hù)界面開(kāi)始，Apple 帶領(lǐng)了幾次人機(jī)交互界面設(shè)計(jì)的革命，從 Mac 上的鼠標(biāo)和圖形界面，到多點(diǎn)觸摸屏和手指直接觸摸操作，革命并非只是來(lái)自于技術(shù)的革新和設(shè)備的發(fā)明，影響了整個(gè)產(chǎn)業(yè)，而是軟硬件的結(jié)合帶來(lái)的新的交互方式，而且設(shè)計(jì)的如此出色和自然，直接影響到每一位具體的用戶(hù)，給他帶來(lái)了愉悅，而且還改變了他的認(rèn)知。
像 iPhone X 中自然順暢的手勢(shì)操作，并非突然出現(xiàn)，包括那些不會(huì)注意到但又能體驗(yàn)到的細(xì)節(jié)設(shè)計(jì)，也是經(jīng)過(guò)了很長(zhǎng)的時(shí)間一步步發(fā)展而來(lái)的。
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)在回過(guò)頭去看這個(gè)當(dāng)年的發(fā)布會(huì)視頻（優(yōu)酷鏈接）：回歸 Apple 的 Steve Jobs 宣布出任正式 CEO 而不再是實(shí)習(xí)，Keynote 使用的字體是手寫(xiě)體，Phil Schiller 演示 Quake 3 時(shí)死機(jī)，“It’s pretty awesome when it works”這句話就是來(lái)自這一刻（鏈接視頻是 Steve Jobs 發(fā)布會(huì)演示失敗場(chǎng)景的集合）。
當(dāng) Steve Jobs 開(kāi)始介紹 OS X 的用戶(hù)界面即 Aqua 時(shí)，先以 1984 年的原始 Macintosh 的圖形用戶(hù)界面以及跟隨者 Windows 作了一下鋪墊，但接著介紹 Aqua 時(shí)卻是從水晶效果的按鈕開(kāi)始，Steve Jobs 在臺(tái)上認(rèn)真又自豪地講怎樣從最原始的元素開(kāi)始，用整個(gè)月來(lái)設(shè)計(jì)按鈕該是怎樣，滾動(dòng)條和滑條該是如何，但是臺(tái)下的反應(yīng)卻是寥寥的笑聲，似乎是“就這？”。Ars Technica 上有 Aqua 的介紹，它可以看作是 Steve Jobs 回歸后 Apple 的用戶(hù)界面設(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)頁(yè)和視頻等圖標(biāo)并且能夠動(dòng)態(tài)適應(yīng)的快捷欄，放入圖標(biāo)越多 Dock 就向兩邊擴(kuò)張，而且引入了 Magnification 放大效果，當(dāng)鼠標(biāo)滑過(guò)圖標(biāo)，圖標(biāo)就有一個(gè)動(dòng)態(tài)流暢的放大效果。而 Genie 則是窗口的動(dòng)態(tài)變換效果，當(dāng)窗口縮小到 Dock 或者從 Dock 欄放大，有一個(gè)非常有意思（Apple 稱(chēng)其為“funky”）的動(dòng)畫(huà)效果，在發(fā)布會(huì)上 Steve Jobs 不厭其煩的展示，在前面介紹 OS X 的鎖定到相應(yīng)窗口的對(duì)話框時(shí)也有窗口的動(dòng)態(tài)效果設(shè)計(jì)。這兩項(xiàng)以及其他一些 OS X 用戶(hù)界面設(shè)計(jì)的特征在現(xiàn)在的 Mac OS 上仍然保留著，OS X 的 Dock 和 Genie 等這些動(dòng)態(tài)界面設(shè)計(jì)來(lái)自同一個(gè)設(shè)計(jì)師。
在 Walter Isaacson 寫(xiě)的《Steve Jobs》書(shū)中（第 28 章）寫(xiě)到，Steve Jobs 收到一位年輕人的 Email 要應(yīng)聘圖形界面設(shè)計(jì)師（1998 年），應(yīng)聘者很緊張，所以面試不成功，這位沮喪的設(shè)計(jì)師坐在大廳等 Steve Jobs 出來(lái)，問(wèn)他是否可以看一下他的一些創(chuàng)意和設(shè)計(jì)，用 Adobe Director 作的 Demo，就是在屏幕下方一個(gè)可動(dòng)態(tài)適應(yīng)的 Dock 欄，而且有一個(gè)隨著鼠標(biāo)移動(dòng)的放大效果，Steve Jobs 當(dāng)場(chǎng)就雇傭他了，這位設(shè)計(jì)師就是 Bas Ording，不只是設(shè)計(jì)了很多 Mac OS 的富有特色的交互設(shè)計(jì)，還包括促成 iPhone 誕生的列表滾動(dòng)和回彈效果，以及很多 iOS 上的出色交互設(shè)計(jì)。由此也可以看到 Dock 圖標(biāo)放大這個(gè)設(shè)計(jì)從誕生到仍在使用的今天已經(jīng)有 20 年了。
對(duì)于需要在 Dock 欄放置多個(gè)圖標(biāo)的用戶(hù)，以及考慮到十多年前的屏幕大小和顯示精度，Dock 欄的放大效果是非常有效的一個(gè)視覺(jué)增強(qiáng)功能。對(duì)于像放大效果這樣的交互設(shè)計(jì)，并非單純?cè)醋杂诠δ艿男枨?，它也不像技術(shù)革新那樣具有重大意義，或許人們會(huì)稱(chēng)之為增強(qiáng)了審美效果，用現(xiàn)在的語(yǔ)言來(lái)說(shuō)是帶來(lái)了豐富的體驗(yàn)，隨著時(shí)代的發(fā)展，它的重要性將被越來(lái)越多的人認(rèn)識(shí)到。
“隨著鼠標(biāo)的移動(dòng)圖標(biāo)動(dòng)態(tài)地變化”這只是一個(gè) Idea，或者是一個(gè)創(chuàng)新的解決方案，還不能成為設(shè)計(jì)，要成為設(shè)計(jì)，就得考慮它具體是怎樣變化。鼠標(biāo)移到哪個(gè)圖標(biāo)，這個(gè)圖標(biāo)就按設(shè)定值放大，然后兩邊的圖標(biāo)以小一級(jí)的放大倍數(shù)來(lái)放大，離鼠標(biāo)位置越遠(yuǎn)放大的倍數(shù)越??？
但問(wèn)題是如果按上面描述的方式來(lái)實(shí)現(xiàn)這個(gè)放大的效果，它將是非常機(jī)械的，線性的或者是接近線性的，而 Apple 的交互設(shè)計(jì)，從 Mac OS X 到現(xiàn)在的 iPhone X 最大的特征就是反線性，一個(gè)機(jī)械的動(dòng)態(tài)效果將會(huì)是適得其反的。Bas Ording 在這個(gè)設(shè)計(jì)中引入了幾個(gè)參數(shù)和函數(shù)，為了達(dá)到更加連續(xù)和順暢的動(dòng)態(tài)效果。
首先是在鼠標(biāo)兩側(cè)遞減的放大倍數(shù)是連續(xù)的，而不是一級(jí)一級(jí)的，如果你把鼠標(biāo)放在某一圖標(biāo)的中間，那么左側(cè)和右側(cè)的圖標(biāo)放大倍數(shù)是一樣的，如果鼠標(biāo)是放在圖標(biāo)某一側(cè)而非中心的位置，那么在這個(gè)圖標(biāo)兩側(cè)，里鼠標(biāo)越近的圖標(biāo)放大倍數(shù)越大。然后引入兩個(gè)可變動(dòng)的參數(shù)，即最大放大的倍數(shù)是靠放大后的高度（H）來(lái)決定，放大影響的范圍是靠鼠標(biāo)兩側(cè)的寬度（W）來(lái)決定。
在這個(gè)設(shè)計(jì)（專(zhuān)利 US7434177 所示）中，圖標(biāo)的設(shè)計(jì)是寬度可以不等，即有寬窄之分，所以圖標(biāo)的寬度和位置靠?jī)蛇呺x鼠標(biāo)的距離 d1 和 d2 來(lái)確定。當(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 與高度增長(zhǎng)量（H−h）成線性正比關(guān)系，但是與影響寬度 W 是非線性的正比關(guān)系，而是引入了一個(gè)正弦函數(shù)，以原始高度 h 和影響寬度 W 指比形成的正弦函數(shù)，帶來(lái)了一個(gè)非線性增大的結(jié)果，原始高度 h 越大，S 就相對(duì)越小，因?yàn)樵紙D標(biāo)夠大需要的放大倍數(shù)不需要太大。
同樣放大后的圖標(biāo)兩側(cè)距離鼠標(biāo)的距離的增加量也是通過(guò)正弦函數(shù)來(lái)與得到結(jié)果：d1′=S×sine(π÷2×d1÷W) 和 d2′=S×sine(π÷2×d2÷W)，d1′ 和 d2′ 在上圖（引用自 US7434177 專(zhuān)利圖）標(biāo)示有誤，通過(guò)公式來(lái)看 d1′ 和 d2′ 是增量，即放大后圖標(biāo)兩側(cè)離鼠標(biāo)的距離為 d1+d1′ 和 d2+d2’，d1′ 和 d2′ 指來(lái)自于對(duì)一側(cè)寬度總增量 S 的分配，通過(guò)以放大前的與鼠標(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)離開(kāi)鼠標(biāo)的距離來(lái)確定放大倍數(shù)，也就是鼠標(biāo)作任何大小的移動(dòng)，Dock 欄都有變動(dòng)，如果鼠標(biāo)在某一個(gè)圖標(biāo)內(nèi)移動(dòng)不影響旁邊圖標(biāo)的大小，這個(gè)設(shè)計(jì)就一下子變得死板了；第二個(gè)是通過(guò)正弦函數(shù)來(lái)實(shí)現(xiàn)非線性的變化。
如上所示，通過(guò)參數(shù)和公式來(lái)完善設(shè)計(jì)，并非通過(guò)嘗試來(lái)獲得一個(gè)滿意的結(jié)果，可以稱(chēng)之為“Tuning”（調(diào)校）。如前所述，Tuning 并非是完全客觀和理性的，像這里使用到的參數(shù)和公式，并不是必然如此，而是設(shè)計(jì)師作出的選擇，這種效果也可以用其他的參數(shù)和公式來(lái)實(shí)現(xiàn)，只不過(guò)在這個(gè)設(shè)計(jì)上 Apple 使用了設(shè)定參數(shù)的比值來(lái)作為正弦函數(shù)的因子來(lái)達(dá)到非線性的變換效果。
Mac OS X 的 Genie 效果
這就是 Steve Jobs 在 Macworld 2000 演示得樂(lè)此不彼的 Genie 動(dòng)畫(huà)效果，窗口縮小的默認(rèn)效果是 Genie Effect ，另外還有一個(gè) Scale Effect 供選擇，Scale 效果就是單純的縮小和放大，具有更高的執(zhí)行效率，而 Genie 效果在縮小和放大之間有窗口有變形，而且變形的速度也是非線性的，動(dòng)態(tài)的變換過(guò)程需要一些時(shí)間，而且連續(xù)的變形會(huì)讓人感覺(jué)顯得更慢。現(xiàn)在的 Mac OS 仍提供這兩個(gè)選項(xiàng)，很多人喜歡 Genie 效果，也有很多人不喜歡。
上圖是 Genie 效果中窗口輪廓的變化過(guò)程，來(lái)自專(zhuān)利文檔 US7362331。這個(gè)設(shè)計(jì)的一個(gè)特點(diǎn)就是變形后窗口的外輪廓，當(dāng)從 QR 為上邊的四邊形窗口變形移動(dòng)到 S’T’ 為上邊的四邊形窗口（或圖標(biāo)）時(shí)，窗口的左右輪廓由直線變成了曲線，而這兩條曲線在這為正弦曲線（當(dāng)然它可以是其他曲線），來(lái)自函數(shù) y=A sin(x) ，x 為圖面垂直方向的距離，正弦曲線的范圍定在 −π/2 和 +π/2 之間，y 為圖面水平方向的距離，A 為振幅，從零到 SS’ 和 TT’ 的一半。所以當(dāng)窗口當(dāng)前位置確定，以及目標(biāo)位置確定，左右兩條曲線就能確定，窗口就沿著曲線向下縮小和移動(dòng)。
這個(gè)設(shè)計(jì)的另一個(gè)特別之處，就是窗口在縮小變化過(guò)程中以怎樣的速度進(jìn)行了，它需要是非線性的，如果是勻速地向下移動(dòng)和變化，那么就會(huì)顯得很機(jī)械，非線性的運(yùn)動(dòng)就是在開(kāi)始和結(jié)束的時(shí)候是緩慢的，而中間過(guò)程是快速的。如此前一圖所示，窗口在數(shù)值方向上移動(dòng)的距離是 SQ 線段，如何實(shí)現(xiàn)非線性的變化，這個(gè)設(shè)計(jì)引入了一個(gè)余弦函數(shù)。首先當(dāng)移動(dòng)變換的整體時(shí)間 T 確定后，可以將 T 劃分為幾等份，比如 8 等份，用 8 等份來(lái)等份分割一個(gè)半圓，在每一個(gè)分割點(diǎn)向下作垂線來(lái)分割直徑，得到的分割距離就是從小到大再到小，用此分割線段比來(lái)劃分 SQ 線段，就可以得到非線性的窗口移動(dòng)變換過(guò)程。
同樣，在這可以使用其他的函數(shù)或方法來(lái)實(shí)現(xiàn)非線性的變動(dòng)，而上述方法聰明、簡(jiǎn)單、直觀，雖然使用到了參數(shù)和公式，但參數(shù)和公式在這里不是原理和依據(jù)，而是一個(gè)解決問(wèn)題的工具，而挑選恰好的參數(shù)和公式這種工具，就是設(shè)計(jì)中的 Tuning。
Cover Flow 和 iOS 上的 Safari 標(biāo)簽視圖
Cover Flow 指的就是用唱片封面組成的一串可動(dòng)態(tài)移動(dòng)的序列，最早在 iTunes 7.0 上應(yīng)用，但是它的原始設(shè)計(jì)并非來(lái)自 Apple 自己。Cover Flow 最早的想法來(lái)自藝術(shù)家 Andrew Coulter Enright，而他的靈感卻是來(lái)自于 Apple 的視頻會(huì)議通話軟件 iChat AV，即中間畫(huà)面正視，兩側(cè)畫(huà)面則為側(cè)視（平行四邊形）。一位獨(dú)立的 Mac 開(kāi)發(fā)者 Jonathan del Strother 將 Enright 的想法應(yīng)用，然后 2006 年被 Apple 收購(gòu)。除了 iTunes，Apple 還將 Cover Flow 應(yīng)用到了 iPhone、iPod 以及 Mac OS 的 Finder 上，而后到 iTunes 11 以及 iOS 7 上 Cover Flow 就被去除了。
Cover Flow 被 Apple 收購(gòu)后，在一些設(shè)計(jì)的細(xì)節(jié)上作了調(diào)整，如透視的角度，讓顯示更美觀自然。
在 iOS 7 上 Cover Flow 被唱片墻（Album Wall，平鋪的封面）給替代，而新的 Safari 的標(biāo)簽視圖卻有類(lèi)似的設(shè)計(jì)應(yīng)用，每個(gè)標(biāo)簽頁(yè)變形堆疊在一起，形成了三維動(dòng)態(tài)的視角效果，而且能夠在有限的空間內(nèi)直觀地顯示更多的信息。
在瀏覽器的標(biāo)簽頁(yè)中使用這種方式的設(shè)計(jì)，最早出現(xiàn)在 2012 年 Google 的 Chrome Beta 版上，運(yùn)行在當(dāng)時(shí)的 Ice Cream Sandwich 版本的 Android 上（可以觀看這個(gè)視頻）。當(dāng)時(shí) Chrome Beta 的標(biāo)簽欄堆疊原始狀態(tài)并非有立體透視效果的，標(biāo)簽頁(yè)整整齊齊的平貼疊加在一起，然后不同的標(biāo)簽頁(yè)在豎直方向上一個(gè)個(gè)位置回退，可以看出不同的標(biāo)簽，直到向下滑動(dòng)標(biāo)簽頁(yè)，達(dá)到頂部（或底部）出現(xiàn)阻尼效果時(shí)，標(biāo)簽頁(yè)向內(nèi)傾斜，加上陰影的處理，形成立體透視的效果，此刻與后來(lái)的 Safari 標(biāo)簽視圖相似。
那么 Safari 的標(biāo)簽視圖有怎樣的不同？通過(guò)在打開(kāi)多個(gè)標(biāo)簽頁(yè)的標(biāo)簽視圖中上下滑動(dòng)操作，會(huì)發(fā)現(xiàn)變換動(dòng)畫(huà)都是非線性的，不像 Chrome Beta 那樣簡(jiǎn)單直接。Safari 的標(biāo)簽視圖中每個(gè)標(biāo)簽的透視略有不同，越靠近屏幕下方透視角度越大，即看到標(biāo)簽頁(yè)上內(nèi)容越多（即看得越深），越靠近屏幕上面透視角度越小，越接近平視狀，但越遠(yuǎn)離我們，并且還能與手機(jī)的姿態(tài)形成動(dòng)態(tài)的三維關(guān)系，比如手機(jī)平放能看到的深度就淺，手機(jī)豎放能看到的標(biāo)簽就深，模擬對(duì)一個(gè)立體物的視知覺(jué)。
滑動(dòng) Safari 的標(biāo)簽視圖看上去有點(diǎn)像踩水車(chē)，除了滑動(dòng)外，單獨(dú)的一個(gè)標(biāo)簽頁(yè)在這組標(biāo)簽頁(yè)序列里的位置可以重新排布，只要拖拽住標(biāo)簽頁(yè)移動(dòng)就行，標(biāo)簽頁(yè)的拖拽移動(dòng)也有動(dòng)態(tài)的變換效果。
Safari 的標(biāo)簽視圖模擬了 Rolodex（Apple 用了很多次的類(lèi)比參照物），沿著具有一個(gè)滾動(dòng)軸心的圓筒上排布。上圖來(lái)自專(zhuān)利 US9804745，圖左示意了標(biāo)簽頁(yè)手動(dòng)排布的動(dòng)畫(huà)，F(xiàn)IG. 2A 示意的是將標(biāo)簽頁(yè)向下手動(dòng)挪一個(gè)位置，即將 112 移到 110 的位置，而 110 相應(yīng)的從底部看不見(jiàn)的區(qū)域繞到 112 后，即用戶(hù)在操作 206 這個(gè)動(dòng)作時(shí)，原先位置的標(biāo)簽頁(yè) 110 同時(shí)在完成 204 和 208 兩個(gè)動(dòng)作。FIG. 2B 示意的是將標(biāo)簽頁(yè)向上手動(dòng)挪一個(gè)位置，而 FIG. 2C 和 FIG. 2D 則是示意在 Safari 的標(biāo)簽視圖上滑動(dòng)的動(dòng)畫(huà)效果。
“Rubber band”橡皮筋效果
“Rubber band”（橡皮筋效果）指的是在 iOS 上對(duì)一個(gè)列表比如聯(lián)系人或頁(yè)面內(nèi)容比如網(wǎng)頁(yè)等作滾動(dòng)操作時(shí)，無(wú)論是快速還是慢速，達(dá)到列表末尾的時(shí)候并非立刻停止，畫(huà)面仍在滾動(dòng)，但是滾動(dòng)的阻尼加強(qiáng)，在停止?jié)L動(dòng)后，畫(huà)面回彈回到結(jié)束狀態(tài)，就像一根橡皮筋一樣具有彈性效果。
“Rubber band” 的設(shè)計(jì)也是來(lái)自于 Bas Ording，盡管看上去只是一個(gè)小小的設(shè)計(jì)，如果與 iOS 操作系統(tǒng)背后的巨大工程相比顯得微不足道，但正是這個(gè)小小的設(shè)計(jì)，促成了 iPhone 的誕生，也為新一代的人機(jī)交互界面設(shè)計(jì)開(kāi)辟了起點(diǎn)。關(guān)于“Rubber band”和 iPhone 的誕生在《Affordance（可供性）和設(shè)計(jì)》這一篇文章提到過(guò)，而今年出的《The One Device: The Secret History of the iPhone》一書(shū)講解的更詳細(xì)，簡(jiǎn)短說(shuō)，當(dāng) Steve Jobs 看到 Bas Ording 設(shè)計(jì)處的慣性滾動(dòng)、Rubber band 以及其他一些東西的 Demo，震驚并立馬認(rèn)為可以通過(guò)這些來(lái)做一臺(tái)手機(jī)。
如 Cult of Mac 這篇文章所述，Bas Ording 設(shè)計(jì)原始的滾動(dòng)列表時(shí)并沒(méi)有增加回彈效果，達(dá)到頂部或底部就停止了，但是這樣看起來(lái)就像是這個(gè)程序奔潰了，每次看到都覺(jué)得不適但一時(shí)不知道怎樣解決，后來(lái)在頂部和底部增加一段空白，但是如果空白部分就頂在頂部或墊在底部不動(dòng)，仍然解決不了問(wèn)題，空白部分需要?jiǎng)悠饋?lái)但是也沒(méi)有效果，后來(lái)他讓空白部分的移動(dòng)速度小于手指操作速度，就出現(xiàn)了彈性效果，然后他就想它需要在彈回來(lái)，就是 Rubber band。
但是要正真設(shè)計(jì)到位，Bas Ording 花了幾個(gè)月的時(shí)間，原理雖然簡(jiǎn)單，但是要做出恰當(dāng)?shù)男Ч线m的數(shù)學(xué)公式，讓其自然順暢就需要不斷的調(diào)試。
上圖來(lái)自關(guān)于 iOS 中 Rubber band 的專(zhuān)利 US7469381，涵蓋的范圍除了列表滾動(dòng)至兩段有回彈效果，還包括文檔平移到邊緣有回彈效果，文檔縮小到最小有回彈效果，文檔放大到最大有回彈效果，文檔扭轉(zhuǎn)（但未達(dá)可扭轉(zhuǎn)要求）有回彈效果。上圖所示的為列表滾動(dòng)時(shí)出現(xiàn)的回彈效果。
如圖，當(dāng)列表滾動(dòng)到頂端邊緣時(shí)，如果仍然有滾動(dòng)的趨勢(shì)，速度未達(dá)到零，在列表的頂端顯示空白部分，有阻尼效果進(jìn)行滾動(dòng)，如沒(méi)有在這一方向上的輸入后，回彈到列表的頂端邊緣。按照此份專(zhuān)利描述，列表滾動(dòng)的速度是根據(jù)取樣檢測(cè)到的觸點(diǎn)的速度來(lái)確認(rèn)，而當(dāng)用戶(hù)中斷接觸后，滾動(dòng)速度按照中斷前的加速度和速度來(lái)確認(rèn)，按照公式 Vf = Vo + α Δt 來(lái)確認(rèn)，Vf 是中斷后的速度，Vo 是中斷時(shí)的速度，α 為中斷時(shí)的加速度（為負(fù)值），Δt 為時(shí)間間隔，Vf 隨著時(shí)間增加在減小，當(dāng)達(dá)到某個(gè)設(shè)定好的閾值后，Vf 就直接為零。當(dāng)滾動(dòng)達(dá)到列表頂端時(shí)，速度降為原先速度的幾分之一或者平方根，以有阻尼效果的速度完成在列表頂端增加的空白部分的移動(dòng)，然后再完成回彈。
以上只是籠統(tǒng)的介紹，要達(dá)到滿意的效果，就需要對(duì)公式和參數(shù)進(jìn)行不停的嘗試和驗(yàn)證，也就是 Tuning。
界面設(shè)計(jì)在觸摸屏?xí)r代的革命
在 2007 年 iPhone 發(fā)布后，[ i D 公 社 ] 發(fā)過(guò)一篇文章《iPhone 的那些讓人印象深刻的細(xì)節(jié)設(shè)計(jì)》，其中將動(dòng)態(tài)的轉(zhuǎn)換界面放在第一條，當(dāng)時(shí)那篇文章指的場(chǎng)景動(dòng)畫(huà)就如下圖所示：
上圖來(lái)自于專(zhuān)利 US D597101，這是第一代 iPhone 時(shí)一個(gè) App 打開(kāi)，以及從一個(gè) App 界面回到主屏幕的變換過(guò)程，這個(gè)變換過(guò)程從 iOS 1 開(kāi)始一直持續(xù)到 iOS 6。App 打開(kāi)時(shí)窗口從屏幕中心開(kāi)始，從小到大的動(dòng)畫(huà)然后呈現(xiàn)在用戶(hù)面前，當(dāng)窗口開(kāi)始作從小到大變化時(shí)，主屏幕的圖標(biāo)也在作相應(yīng)的擴(kuò)散，當(dāng)然這個(gè)擴(kuò)散是非線性的，從 App 界面回主屏幕是這個(gè)動(dòng)態(tài)變換過(guò)程的逆向。這是十年前讓我印象深刻的一個(gè)細(xì)節(jié)設(shè)計(jì)，而現(xiàn)在再來(lái)看這個(gè)設(shè)計(jì)，就已經(jīng)覺(jué)得過(guò)于機(jī)械化了。
這是 iOS 7 進(jìn)入主屏幕的界面動(dòng)態(tài)變換過(guò)程（來(lái)自專(zhuān)利 US D790569），與此前 iOS 1 到 iOS 6 進(jìn)入主屏幕單純是圖標(biāo)的移動(dòng)不同，iOS 7 上是圖標(biāo)分級(jí)的縮小，從屏幕的 Z 軸方向進(jìn)行的動(dòng)態(tài)效果，配合 iOS 7 其他一些視差效果的設(shè)計(jì)，界面的立體動(dòng)態(tài)感更強(qiáng)，也符合 iOS 7 在 Z 軸方向上界面的層級(jí)邏輯。
Force Touch 在主屏幕圖標(biāo)上使用時(shí)的界面動(dòng)態(tài)變換過(guò)程（來(lái)自專(zhuān)利 US D775649），與深壓操作的邏輯能夠協(xié)調(diào)起來(lái)，加上 Taptic Engine 提供的反饋，綜合的體驗(yàn)效果讓設(shè)計(jì)變得自然不過(guò)了。
我們這里說(shuō)的很多設(shè)計(jì)，它們并非來(lái)自于功能的技術(shù)需要，甚至看起來(lái)是遠(yuǎn)離功能的一些“表面”設(shè)計(jì)，可以想象 Macworld 2000 當(dāng) Steve Jobs 在臺(tái)上自豪地展示 Aqua 按鈕以及各種控制元素時(shí)，臺(tái)下肯定不少人會(huì)茫然，在很多人看來(lái)，OS X 界面設(shè)計(jì)中的 Dock 圖標(biāo)放大和窗口最小化的 Genie 效果只是一些“表面”和“花哨”的東西。
但是我們能夠看到，從計(jì)算機(jī)的圖形界面時(shí)代到觸摸屏界面時(shí)代，發(fā)生了巨大的變遷。一人們潛移默化的接受了界面設(shè)計(jì)的重要性，如果現(xiàn)在去使用一臺(tái)觸摸屏設(shè)備，如果它的交互界面設(shè)計(jì)中沒(méi)有任何動(dòng)畫(huà)，完全為了執(zhí)行效率考慮，我想沒(méi)有多少人愿意使用，因?yàn)橛|摸屏讓人們直接操作內(nèi)容，而不是通過(guò)鼠標(biāo)等來(lái)遙控，直覺(jué)和體驗(yàn)與效率直接相關(guān)。而我們上面提到的一些動(dòng)態(tài)界面設(shè)計(jì)，對(duì)用戶(hù)來(lái)說(shuō)，他并不會(huì)意識(shí)到辨別出，但是他能夠體會(huì)到。當(dāng)用戶(hù)有了經(jīng)驗(yàn)和品味，也將促進(jìn)設(shè)計(jì)不斷向前探索。
另一方面，因?yàn)榭萍己蜕畹淖兏铮缑嬖O(shè)計(jì)自身發(fā)生了的巨大的變革，比較一下這 10 年來(lái)的 iOS 的設(shè)計(jì)，或比較一下 iPhone X 和第一代的 iPhone，可以發(fā)現(xiàn)界面設(shè)計(jì)的深度如同屏幕組件一樣，在一層層的增加，每一層比如 Force Touch 就會(huì)帶來(lái)新的因子和新的閾值范圍，也就帶來(lái)了新的復(fù)雜性，但是仍然需要設(shè)計(jì)出簡(jiǎn)單且符合直覺(jué)的設(shè)計(jì)。
滑動(dòng)解鎖是當(dāng)年被認(rèn)為 iPhone 用戶(hù)界面直覺(jué)設(shè)計(jì)的一個(gè)典范，兒童看到它也知道怎么操作，而且這個(gè)設(shè)計(jì)也有 Tuning 在里面，比如滑動(dòng)到哪個(gè)數(shù)值的距離能解鎖，否則回彈等等，但是在現(xiàn)在看來(lái)，無(wú)論從技術(shù)、從用戶(hù)的安全需要、從操作的便利性，還是設(shè)計(jì)的美感，它早已落伍，而且落伍速度遠(yuǎn)超過(guò) Apple 訴三星的官司。
我們與機(jī)器、與設(shè)備、與信息、與技術(shù)、與更抽象的東西，與它們的交互的內(nèi)容遠(yuǎn)遠(yuǎn)超出了圖像，不只是對(duì)象在變，交互行為本身，以及交互的主體——用戶(hù)——都在以一樣程度發(fā)生著變革?；诠δ苄枨蟮慕鉀Q方案已無(wú)法讓人感到滿意，消費(fèi)者渴望的是設(shè)計(jì)，要想讓設(shè)計(jì)能為消費(fèi)者帶來(lái)共振，設(shè)計(jì)師除了要將解決方案朝設(shè)計(jì)方向推進(jìn)，亦要不停地審視設(shè)計(jì)并對(duì)其作出調(diào)校。
