Matrix 精選

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

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

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

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

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

  怎么回事？雖然指針很精確，但是這里的體驗(yàn)不好，指針指向的位置頭可能出現(xiàn)錯(cuò)誤的判斷。比如上圖中指針的位置，比如用戶想點(diǎn)的其實(shí)是暫停音樂，而因?yàn)橹羔樉哂邢袼丶壍木�確度，很可能在圖上的位置就識別成了上一首歌，這樣的話用戶會(huì)有自己犯錯(cuò)的感覺，體驗(yàn)就很糟糕。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  大家現(xiàn)在熱烈討論的 ARM 版 Mac，其實(shí) 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ù)年努力的成果展示而已。

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

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

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

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

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