Matrix 精選

  Matrix 是少數(shù)派的寫作社區(qū)，我們主張分享真實的產(chǎn)品體驗，有實用價值的經(jīng)驗與思考。我們會不定期挑選 Matrix 最優(yōu)質(zhì)的文章，展示來自用戶的最真實的體驗和觀點。

  文章代表作者個人觀點，少數(shù)派僅對標(biāo)題和排版略作修改。

  假如你想給 iPad 設(shè)計一個鼠標(biāo)的光標(biāo)，你會怎么做？

  沒問題，你也許會說，不就是給 iPad 加個鼠標(biāo)的光標(biāo)嗎，這沒什么難的。于是乎你提出了下圖中的設(shè)計，和桌面版的鼠標(biāo)一模一樣，即精確大家又熟悉，放在 iPad 上甚至還有一種跨平臺設(shè)計的溫暖。你感覺很滿意，就第一時間推給消費者了。

  這事情交給 Apple 來做是這樣的。我們要給 iPad 加上鼠標(biāo)的光標(biāo)。于是乎為了這事情 Apple 需要十幾個人的設(shè)計團(tuán)隊一兩年的時間，因為這是個需要投入才能做好的事情。 Apple 的開始是一樣的，沒有區(qū)別。我們先把鼠標(biāo)移植道 iPad 上，看看如何。

  怎么回事？雖然指針很精確，但是這里的體驗不好，指針指向的位置頭可能出現(xiàn)錯誤的判斷。比如上圖中指針的位置，比如用戶想點的其實是暫停音樂，而因為指針具有像素級的精確度，很可能在圖上的位置就識別成了上一首歌，這樣的話用戶會有自己犯錯的感覺，體驗就很糟糕。

  這種體驗上的割裂感是如何造成的呢？其實是因為精確度的感知不匹配。比如如上圖中的按鈕，是為了 iPad 的觸摸設(shè)計的，因此要考慮到手指的大小。這些按鈕的精確度并不高，用戶只需要在一定范圍內(nèi)點擊即可，鼠標(biāo)指針則不然，它是一個精確度極高的輸入設(shè)備。二者的結(jié)合就會造成一個問題，精確度不匹配。

  有什么解決辦法呢？ Apple 提出了「動態(tài)精確度」的概念，在這個思路下，iPad 上鼠標(biāo)指針的精確度會隨著界面元素的不同而隨時調(diào)整自己。達(dá)到輸入精確度與界面預(yù)期精確度相匹配的效果。比如在上圖中，iPad 的指針被替換成了一個 19 pt 的圓來幫助用戶完成精確度的過度。仔細(xì)觀察這個上面鼠標(biāo)指針的移動，你會發(fā)現(xiàn)鼠標(biāo)在進(jìn)入點選按鈕時降低了自己的精確度，轉(zhuǎn)化成按鈕本身的大小以達(dá)到和視覺精確度匹配的效果。

  而按鈕間的移動因為這個感知而取消了我上面例子中用戶不知道選到哪個按鈕的模糊空間。鼠標(biāo)的位置變成了有明確的兩個狀態(tài)，不是按鈕一就是按鈕二。而不會出現(xiàn)鼠標(biāo)指針放在中間，用戶有可能點錯的模糊狀態(tài)。用動態(tài)精確度的想法解決了鼠標(biāo)精確度的問題， Apple 的目光又回到了我們現(xiàn)在熟悉的鼠標(biāo)光標(biāo)上。這東西用起來像是這樣，我們很熟悉，好像沒什么問題。

  等等，沒什么問題嗎？這個設(shè)計可能是每個學(xué)設(shè)計的人都難以容忍的。設(shè)計好的圖標(biāo)被一個巨大的黑色物體遮住了一半，像用戶頭上中了一箭，實在無力吐槽。那怎么辦，多花一些功夫把鼠標(biāo)隱藏起來，只要點選的圖標(biāo)上面疊加一層半透明的圖案就可以了，圓滿。

  等等，好像又有問題了。雖然鼠標(biāo)光標(biāo)一直在屏幕的最上面，但是放在按鈕上好像有點不對勁。仔細(xì)觀察下圖，你會發(fā)現(xiàn)在圖標(biāo)上疊加鼠標(biāo)光標(biāo)的圖案，這一層疊加會導(dǎo)致對圖標(biāo)顏色的改變，這樣設(shè)計這些圖標(biāo)的人會不開心了，因為沒按照自己預(yù)期的顏色顯示。忽然的顏色改變也會導(dǎo)致界面一致性的破壞。

  怎么解決？設(shè)計一個新的過渡吧，每一次鼠標(biāo)光標(biāo)接近圖標(biāo)之后，鼠標(biāo)的圖層自動下移，退到圖標(biāo)的最下層。如上圖所示，光標(biāo)進(jìn)入圖標(biāo)區(qū)域會自動下移，離開區(qū)域后會自動恢復(fù)到最頂層。

  圖標(biāo)問題解決了，再來看看是不是圓滿了。唉？這個文字選擇它怎么不好用啊。下圖中是我們熟悉的文字光標(biāo)選擇用起來好像也沒什么問題。但是遷移到 iPad 上似乎總有點問題。

  是的，因為用手選擇的時候指針不精確，而鼠標(biāo)光標(biāo)選擇的時候異常精確。統(tǒng)一設(shè)備上兩種輸入方式的不同會給指向精確度造成割裂感。在下圖中，你會看到我們熟悉光標(biāo)的運行方式，它依靠中間點來判斷行的位置。此時我們在意的操作精確度是精確到行，而輸入精確度是精確到點。這種精確度的不同意會導(dǎo)致用戶只要稍有偏差，就選選中自己不想的那一行。

  如何避免用戶選擇錯誤而帶來的挫敗感？解決方案依舊是動態(tài)精確度。比如下圖的動畫中，新的設(shè)計會明確告知用戶當(dāng)前所選中的行，并靠近中間點時自動貼在上面，以徹底消除鼠標(biāo)位于兩行中間的模糊狀態(tài)。此時鼠標(biāo)精確度由點降低到行。

  記得文章開頭舉的那個日歷的例子嗎？在用戶拖拽時，創(chuàng)建日歷的區(qū)間其實是固定的，也就是每 15 分鐘一個區(qū)間。而鼠標(biāo)的精確度會給用戶能拖拽出更精確時間的錯覺，解決方法也是動態(tài)精確度，當(dāng)鼠標(biāo)光標(biāo)至此時每 15 分鐘的間隔會給出一個磁吸點，來明確告知用戶這里是有明確時間間隔的。

  動態(tài)分辨率說完了。我們接下來將目光再次回到這個小圓點上。大家看到的鼠標(biāo)光標(biāo)其實有兩個，頂部的控制光標(biāo)判斷實際光標(biāo)位置，底層的顯示光標(biāo)根據(jù)需求變換形狀來給用戶明確的功能感知。

  控制光標(biāo)的具體工作方式如下圖�？刂乒鈽�(biāo)負(fù)責(zé)檢查實際位置，而顯示光標(biāo)負(fù)責(zé)用戶感知。因為 iPad 的觸摸版相對 Mac 要小一些，有時用戶可能會遇到點按的瞬間手抖的情況，本來想點某一個按鈕卻因為控制光標(biāo)靠近按鈕邊緣而滑出去，導(dǎo)致點擊失敗。為了避免這里的挫敗感，用戶每次手指離開觸摸版時，控制光標(biāo)會如圖所示自動居中，確保用戶下次點擊光標(biāo)停留在預(yù)期的按鈕上。

  解決了顯示的問題。我們來看看 Apple 如何做好滑動位置的判斷的。比如下圖中，你想用觸控板滑動光標(biāo)來選擇左側(cè)的設(shè)置圖標(biāo)。這時候你做的可能是在觸摸版上向左滑動，但是結(jié)果有幾種可能，要么你一下滑過了光標(biāo)跑到尺子那里去了，要么是一次滑動差那么一點點距離光標(biāo)停在設(shè)置旁邊了。

  有沒有可能做的更好？ Apple 設(shè)計了一套磁吸位置預(yù)判來解決這個問題。還是那張圖，在 Apple 的眼中它是這樣的。當(dāng)鼠標(biāo)離開觸摸版的一瞬間，光標(biāo)會根據(jù)滑動距離和速度來判斷預(yù)期的最終位置。下圖中的最終與其位置便是這些同心圓的圓心，此時根據(jù)最終位置生成周邊一系列磁吸點。判斷磁吸點下方是否有可控制的按鈕。下圖中設(shè)置圖標(biāo)是最近的磁吸控制按鈕。因此用戶光標(biāo)會自動吸在上面。對于用戶來說，這種感知就覺得自己很厲害，每次都能選到想要的東西。

  說了許多光標(biāo)的邏輯，卻還沒說它的設(shè)計。在開始之前，你可以看下圖中的動畫感受一下。是的，我們所看到的平面按鈕實際上設(shè)計是具備深度的。比如點按時，你會發(fā)現(xiàn)你的點按動作是真實和按按鈕一樣，又一個下壓的動作。還記得我們之前討論的控制點嗎，為了讓用戶在光標(biāo)變成按鈕時仍對控制點有位置上的感知，控制點此時變成了一個點光源。

  明確告知用戶什么被選中是一個光標(biāo)的責(zé)任。比如下圖中所有選中的圖標(biāo)都會有一種懸浮的特效，并且會有我之前提到的控制點光源來告知其控制點。

  實現(xiàn)這個特效實際上將原有的一層圖標(biāo)分成了四層。最上面的光源層告知控制位置，第二層是實際的圖標(biāo)，第三層是動態(tài)位置層，第四層是根據(jù)光源變化的陰影層。

  這樣的設(shè)計邏輯好像沒什么問題。但是在某些情況下，這些設(shè)計邏輯可能會造成不想要的視覺反饋。比如下圖中一組按鈕的高亮選擇，若繼續(xù)沿用圖標(biāo)的那個半透明圖層，則實際顯示出來顏色過深降低了區(qū)分度。對于這些按鈕的顯示，則采用懸浮的設(shè)計并取消光源，比如下圖中日歷的選擇按鈕。與此類似的小細(xì)節(jié)修改點還有很多，不再贅述。

  那么解決了光標(biāo)的邏輯和顯示問題，我們來看 Apple 如何進(jìn)一步推動光標(biāo)設(shè)計，來使其明確的傳達(dá)功能性。首先光標(biāo)作為一個指向性的物件，必須保持隨時可見，因此光標(biāo)的顯示顏色是和當(dāng)下背景有關(guān)的，仔細(xì)觀察你會發(fā)現(xiàn)光標(biāo)會依舊底下內(nèi)容的顏色而更改自身的顏色。其次對于常見的拉選框，光標(biāo)還會像下圖一樣變成指向性圖標(biāo)。

  但在 iPad 中，光標(biāo)的功能指向性不止于此。它可以根據(jù)需求自動調(diào)整顏色，變成功能性的圖標(biāo)。而在變更過程中，還需要考慮光標(biāo)的中心位置是否明確，填充類型轉(zhuǎn)換為邊緣線類型時視覺重量的提升等等。

  更絕妙的是：我說了一篇文章，也許你壓根沒在 iPad 上見過這個光標(biāo)，因為 iPad 有觸摸版的人是少數(shù)。

  大家現(xiàn)在熱烈討論的 ARM 版 Mac，其實 Apple 已經(jīng)做了準(zhǔn)備了很多年了。比如 4 年前宣布取消 32 位應(yīng)用支持，5 年前開始推廣 Metal 圖形層來統(tǒng)一框架，這些都是在為 Mac for ARM 做準(zhǔn)備。只是太多人分析事情只看當(dāng)下不看大局，選擇蒙著眼睛，或者是真的看不到。今年大家看到的性能表現(xiàn)優(yōu)異，不過是過去數(shù)年努力的成果展示而已。

  其實 Apple 不是什么魔法師，只是在設(shè)計時認(rèn)真的去為用戶做考量。愿意在這些別人不在意的細(xì)節(jié)上投資，一點點積累之后，就有了自己獨特的用戶體驗。用戶雖然對每年的創(chuàng)新所帶來的小毛病憋著一肚子氣，但心底里還是希望有人能付出努力，把這些別人不在意的細(xì)節(jié)一點點做好，于是盡量寬容，大概就是這種默契吧。

  本文所有素材來源: Apple WWDC: Design for the iPadOS pointer

  過去幾年里， Apple 放出的設(shè)計向視頻大概有近百個。本文的引用源也是其中之一，本文并非對該設(shè)計視頻的翻譯，而是我看過視頻，在 WWDC 與 Apple 工程師交流后，把一些想法用文字碼在這里。其實 Apple 每年放出這些視頻我想初衷也是和大家一致的，這些心得值得被更多人所知。本文的初衷也是如此。

  有些人可能不熟悉觀看 Apple 官方 WWDC 視頻的方式，其實在 iOS 或者 Mac 應(yīng)用商店，下載應(yīng)用，就可以看所有視頻了。沒有 Apple 設(shè)備也沒關(guān)系， Apple 的開發(fā)者官網(wǎng)也有，鏈接如下：。

  > 下載少數(shù)派 、關(guān)注 ，了解更精彩的數(shù)字生活 ?