<cite id="q8uye"></cite>
<dl id="q8uye"><small id="q8uye"></small></dl><tr id="q8uye"><td id="q8uye"></td></tr>
<dl id="q8uye"></dl>
  • 新聞中心

    详细内容

    從 iPadOS 光標(biāo)設(shè)計(jì)看 Apple 的設(shè)計(jì)理念

      Matrix 精選

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

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

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

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

      

      這事情交給 Apple 來(lái)做是這樣的。我們要給 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í)是暫停音樂(lè),而因?yàn)橹羔樉哂邢袼丶?jí)的精確度,很可能在圖上的位置就識(shí)別成了上一首歌,這樣的話用戶會(huì)有自己犯錯(cuò)的感覺,體驗(yàn)就很糟糕。

      

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

      

      有什么解決辦法呢? Apple 提出了「動(dòng)態(tài)精確度」的概念,在這個(gè)思路下,iPad 上鼠標(biāo)指針的精確度會(huì)隨著界面元素的不同而隨時(shí)調(diào)整自己。達(dá)到輸入精確度與界面預(yù)期精確度相匹配的效果。比如在上圖中,iPad 的指針被替換成了一個(gè) 19 pt 的圓來(lái)幫助用戶完成精確度的過(guò)度。仔細(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)指針?lè)旁谥虚g,用戶有可能點(diǎn)錯(cuò)的模糊狀態(tài)。用動(dòng)態(tài)精確度的想法解決了鼠標(biāo)精確度的問(wèn)題, Apple 的目光又回到了我們現(xiàn)在熟悉的鼠標(biāo)光標(biāo)上。這東西用起來(lái)像是這樣,我們很熟悉,好像沒什么問(wèn)題。

      

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

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

      

      怎么解決?設(shè)計(jì)一個(gè)新的過(guò)渡吧,每一次鼠標(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)問(wèn)題解決了,再來(lái)看看是不是圓滿了。唉?這個(gè)文字選擇它怎么不好用啊。下圖中是我們熟悉的文字光標(biāo)選擇用起來(lái)好像也沒什么問(wèn)題。但是遷移到 iPad 上似乎總有點(diǎn)問(wèn)題。

      

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

      

      如何避免用戶選擇錯(cuò)誤而帶來(lái)的挫敗感?解決方案依舊是動(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),來(lái)明確告知用戶這里是有明確時(shí)間間隔的。

      

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

      

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

      

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

      

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

      

      說(shuō)了許多光標(biāo)的邏輯,卻還沒說(shuō)它的設(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í)仍對(duì)控制點(diǎn)有位置上的感知,控制點(diǎn)此時(shí)變成了一個(gè)點(diǎn)光源。

      

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

      

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

      

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

      

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

      

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

      

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

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

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

      本文所有素材來(lái)源: Apple WWDC: Design for the iPadOS pointer

      過(guò)去幾年里, Apple 放出的設(shè)計(jì)向視頻大概有近百個(gè)。本文的引用源也是其中之一,本文并非對(duì)該設(shè)計(jì)視頻的翻譯,而是我看過(guò)視頻,在 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ù)字生活 ?

    在線表單提交
    更多
    您的姓名
    聯(lián)系方式
    留言內(nèi)容

    在線留言 / 我們的客服人員收到您的留言后將第一時(shí)間向您取得聯(lián)系

    傳真:(0755) 29939876

    聯(lián)系電話:0755-29939993  29939994

    24h銷售熱線:13828818369

    24h售后服務(wù)熱線:13590149467



    email:mindray@126.com

    地址:深圳市寶安區(qū)沙井鎮(zhèn)新橋第三工業(yè)區(qū)金元二路19號(hào)

    Copyright @ 2018 . All rights reserved. 

    技术支持: 凡客科技 | 管理登录
    seo seo
    国产精品久久久99毛片,久久综合老熟女中文字幕,影视先锋黄片一级在线,中文精品无码2021 国产精品v亚洲精品色欲 高清亚洲美女一区
    <cite id="q8uye"></cite>
    <dl id="q8uye"><small id="q8uye"></small></dl><tr id="q8uye"><td id="q8uye"></td></tr>
    <dl id="q8uye"></dl>