自谷歌的Material Design設(shè)計(jì)語(yǔ)言問(wèn)世人機(jī)交互界面的討論與探尋又出現(xiàn)了一波小高潮，有人探討Material Design與iOS設(shè)計(jì)的優(yōu)劣，有人研究擬物化和扁平化設(shè)計(jì)差異，有人把Material Design和iOS設(shè)計(jì)風(fēng)格和擬物化和扁平化和切換動(dòng)效和毛玻璃和深淺色設(shè)計(jì)和對(duì)比色漸變和同系色漸變混到一起聊。

事實(shí)是，他們大部分是結(jié)對(duì)出現(xiàn)的，有人去比較Material Design和擬物這就是不應(yīng)該了：Material Design更多涉及的是關(guān)于用戶(hù)體驗(yàn)與人機(jī)交互的設(shè)計(jì)，而扁平等概念是圖形設(shè)計(jì)中的，并非同一維度；同理和毛玻璃等也不應(yīng)當(dāng)被拿來(lái)談?wù)摗?/p>

今天探討的是谷歌的Material Design和iOS里的設(shè)計(jì)隱喻的一致性。因?yàn)檫@兩個(gè)都是高度成型的人機(jī)交互實(shí)例，所以可以拿出來(lái)作為共同點(diǎn)的一定是相當(dāng)有意義的設(shè)計(jì)點(diǎn)，并且通過(guò)這種一致性探索我們更能進(jìn)行一次產(chǎn)品設(shè)計(jì)的自我審查：關(guān)于人機(jī)交互，我們做對(duì)了嗎？

首先需要清楚的是，Material Design和iOS的設(shè)計(jì)都不只是應(yīng)用在移動(dòng)設(shè)備上：通常，蘋(píng)果的電子產(chǎn)品本身會(huì)和用戶(hù)界面在設(shè)計(jì)上高度一致，并且產(chǎn)品線(xiàn)之間會(huì)保持設(shè)計(jì)上的一致性，無(wú)論是手機(jī)設(shè)備的操作系統(tǒng)還是一體機(jī)的操作系統(tǒng)還是便攜個(gè)人計(jì)算機(jī)的；而Material Design更是被谷歌應(yīng)用在谷歌系網(wǎng)站、安卓平臺(tái)app設(shè)計(jì)以及chrome的設(shè)計(jì)上。所以這兩個(gè)用戶(hù)界面設(shè)計(jì)準(zhǔn)則有更高層級(jí)的一致性，才能使得他們不只是在一個(gè)平臺(tái)或一個(gè)設(shè)備作用，而是可以作為一種交互原則被應(yīng)用在所有的人機(jī)交互場(chǎng)合。

層級(jí)與盒子

• Material Design：紙片與z軸
• iOS：層級(jí)與毛玻璃

無(wú)論是一個(gè)移動(dòng)操作系統(tǒng)還是富web應(yīng)用，現(xiàn)在我們面對(duì)的每個(gè)應(yīng)用、每個(gè)產(chǎn)品都是復(fù)雜的：我們需要在多個(gè)界面之間跳轉(zhuǎn)，這些頁(yè)面應(yīng)當(dāng)怎樣被組織？依次平鋪？不同操作流程之間的頁(yè)面應(yīng)當(dāng)是什么關(guān)系？是否應(yīng)當(dāng)在界面里展現(xiàn)一個(gè)查看所有界面的入口？

安卓早期系統(tǒng)的跳轉(zhuǎn)動(dòng)畫(huà)很多：漸隱、扭曲、3D、縮放，旋轉(zhuǎn)，但是到最后似乎所有的用戶(hù)都喜歡上了最簡(jiǎn)單的左右平滑和從上下方抽出的過(guò)度動(dòng)畫(huà)。因?yàn)樵谏钪?，我們更常?jiàn)到的便是平移運(yùn)動(dòng)：一個(gè)電視從客廳移動(dòng)到了臥室，一支筆從課桌移動(dòng)到了書(shū)包，一個(gè)枕頭從沙發(fā)移動(dòng)到了床上。

相對(duì)于水霧一樣的透明度漸變，平移是最符合人的心理預(yù)期的，更不要說(shuō)那些奇奇怪怪的變化方式了。

iOS的界面切換更簡(jiǎn)單直白，就是一個(gè)左右方向的變化，多任務(wù)視圖時(shí)是平鋪開(kāi)的：我們就好像把所有的頁(yè)面擺在了桌子上進(jìn)行挑選。所有的這些頁(yè)面，都是被放在了一個(gè)平面內(nèi)，就好像整個(gè)操作系統(tǒng)是一個(gè)很長(zhǎng)很長(zhǎng)的大大的世界，而我們的手機(jī)是一個(gè)可以移動(dòng)的攝像頭，我們通過(guò)戳屏幕，劃屏幕來(lái)改變這個(gè)攝像頭的方位，從而能夠從這個(gè)頁(yè)面到下一個(gè)頁(yè)面。

這種抽象沒(méi)有問(wèn)題，和我們把所有的試卷都擺在地上進(jìn)行分發(fā)一樣，看起來(lái)自然而不突兀。

然而，這種設(shè)計(jì)卻稍微有一些體驗(yàn)區(qū)別：它的體驗(yàn)和電腦給我們的體驗(yàn)并不相同。想想看我們?cè)陔娔X上所能操作的東西都在哪里？要知道，圖形化操作系統(tǒng)里有個(gè)很大的東西叫桌面。而我們可以想象一下，我們?cè)诓僮饔?jì)算機(jī)的時(shí)候有沒(méi)有一種“攝像頭在移動(dòng)”的感覺(jué)？我相信所有windows的用戶(hù)都沒(méi)有這種感覺(jué)，Mac的用戶(hù)也少有這種感覺(jué)。

我們使用時(shí)更像在一個(gè)特定的面積里把東西拖來(lái)拖去，所有的操作都是在“桌面”這個(gè)面積里完成的。但是一個(gè)平面容納的東西是有限的，所以我們可以有的解決方案就是：

1. 將所有的頁(yè)面按照面積填充進(jìn)桌面這個(gè)平面里。
2. 把桌面設(shè)計(jì)成一個(gè)盒子，給予所有的面不同的層級(jí)。

所以無(wú)論是從windows到mac甚至網(wǎng)頁(yè)頁(yè)面，都變成了有空間感的東西。有空間了，我們就可以統(tǒng)一這些平臺(tái)上的體驗(yàn)了：你的手機(jī)是個(gè)盒子；寬就是你看到的寬，高就是你看到的高，厚度就是你看到的厚度；我們的界面可以在高度上做文章。所以我們看到iOS里的左右跳轉(zhuǎn)目前是下一步的頁(yè)面覆蓋了這一步的頁(yè)面；就好像有一個(gè)頁(yè)面在被點(diǎn)擊之后被插入了進(jìn)來(lái)由我繼續(xù)處理。這種感覺(jué)就好像我按了一下鈴鐺，服務(wù)員給我端過(guò)來(lái)一張餅：這張餅是我點(diǎn)的而且我知道怎么把這張餅推出去，穩(wěn)妥安全。

相比之下Material Design規(guī)范就更加抽象討巧：我們將所有的界面都看做紙片，紙片進(jìn)來(lái)出去，你抽掉一張你插進(jìn)來(lái)一張，你抬起來(lái)一張你放下去一張；所有的交互都有了意義。在紙上涂涂畫(huà)畫(huà)指指點(diǎn)點(diǎn)，這是我們從小到大養(yǎng)成的一個(gè)習(xí)慣。所以Material Design的設(shè)計(jì)師在談及Material Design的設(shè)計(jì)用意時(shí)就說(shuō)“我們可能現(xiàn)在并沒(méi)有到那個(gè)地方，而我們相信假以時(shí)日我們會(huì)達(dá)到那個(gè)地方”，這是一句含糊不清的話(huà)。但是按我的理解，他們的重點(diǎn)應(yīng)該是“將電子設(shè)備中的交互操作完全模擬成生活中的實(shí)物交互”，就像我拿到一個(gè)飛鏢就想找木頭扎一下一樣，直接繼承人與實(shí)物交互的體驗(yàn)，讓人機(jī)交互更顯自然。

關(guān)于層級(jí)設(shè)計(jì)還有一個(gè)不同點(diǎn)就是Material Design中彈出框都是有陰影的，因?yàn)樗x人更近。在這種設(shè)計(jì)上可以看出Material Design是假設(shè)所有人都在“低著頭操作”。iOS的處理是3D處理——嘗試左右上下移動(dòng)你的手持設(shè)備，彈出框偏移量很少；其次是桌面，其次是壁紙。iOS使用這種方式來(lái)表達(dá)遠(yuǎn)近關(guān)系。這兩種方式都自然地達(dá)到了目的。

現(xiàn)在感覺(jué)多任務(wù)后臺(tái)的處理幾個(gè)平臺(tái)都達(dá)到了某種一致：蘋(píng)果9和安卓5的多任務(wù)切換竟然長(zhǎng)得一模一樣，除了一個(gè)豎著的一個(gè)橫著的，實(shí)際上都很像windows 7里的flip多任務(wù)切換，這也使得盒子隱喻在這里也變得統(tǒng)一，而多任務(wù)后臺(tái)界面也是盒子隱喻的一個(gè)典型交互頁(yè)面。

跳轉(zhuǎn)與導(dǎo)航

• Material Design：界面相同元素銜接
• iOS：頂部與底部導(dǎo)航

關(guān)于導(dǎo)航，我想先提一個(gè)過(guò)去幾十年里長(zhǎng)盛不衰的網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)：面包屑導(dǎo)航。特別是在論壇和軟件下載站，幾乎每個(gè)網(wǎng)站都會(huì)在頁(yè)面中維護(hù)一個(gè)面包屑導(dǎo)航，包括到現(xiàn)在很多層級(jí)較多較深比較復(fù)雜的網(wǎng)站已然保持著這個(gè)設(shè)計(jì)點(diǎn)。

看著面包屑導(dǎo)航又好像另外一個(gè)東西：文件路徑。是的，對(duì)于用戶(hù)來(lái)是，知道自己現(xiàn)在究竟在什么地方是很重要的。只有在清楚了解到自己的位置才能放心做交互——我在這里，我上邊是這個(gè)，當(dāng)前操作屬于哪個(gè)分類(lèi)下的；并且我可以很快地跳到其他地方。

相對(duì)于效率來(lái)說(shuō)，在移動(dòng)端的設(shè)計(jì)上這個(gè)導(dǎo)航的意義更偏向于用戶(hù)操作的安全感：我清楚知道當(dāng)前頁(yè)面濕從哪里來(lái)的，我清楚知道當(dāng)前頁(yè)面屬于什么模塊，并且我清楚知道怎么回去。

這種處理給了用戶(hù)很強(qiáng)的操作暗示。在Material Design設(shè)計(jì)規(guī)范中，谷歌偏向于使用提升放大的形式進(jìn)行界面遞進(jìn)：和紙片原則保持一致，每個(gè)新的頁(yè)面都是離用戶(hù)更近的部分，并且當(dāng)前頁(yè)面是從上個(gè)頁(yè)面的某個(gè)部分分離出來(lái)的，那種感覺(jué)就好像手下面蜷縮著一群小貓，你戳了一個(gè)小貓她就跳了起來(lái)：你可以清楚地看到他的花紋，眼睛的顏色，因?yàn)樗悄闾暨x的所以他會(huì)離你更近，也理所當(dāng)然地遮住了其他的小貓和盛小貓的盒子，而你可以查看更多關(guān)于這個(gè)小貓的細(xì)節(jié)，自然而然。

返回應(yīng)該的操作是什么？是這個(gè)貓蜷縮了回去，然后掉到了她跳出來(lái)時(shí)的那個(gè)盒子里；于是我們又看到了其他的小貓。

實(shí)際上我覺(jué)得如果是這種交互的話(huà)應(yīng)該是面對(duì)屏幕提起一個(gè)東西和放下一個(gè)東西，簡(jiǎn)單的點(diǎn)按并沒(méi)有能夠在我的交互上給我足夠的提醒。

另外看iOS的導(dǎo)航設(shè)計(jì)：首先便是似乎已經(jīng)成了真理的底部欄，現(xiàn)在打開(kāi)十個(gè)應(yīng)用有九個(gè)都是有底部欄的。這就是同個(gè)應(yīng)用不同功能之間的分塊，相當(dāng)于一個(gè)一個(gè)應(yīng)用功能的大入口。而隨著頁(yè)面往下跳轉(zhuǎn)，底部欄并沒(méi)有變化：內(nèi)部跳轉(zhuǎn)的導(dǎo)航被放到了頂部進(jìn)行維護(hù)。

查看原生iOS的應(yīng)用不難發(fā)現(xiàn)他們的導(dǎo)航是這樣的：右上角的返回按鈕旁邊是上個(gè)頁(yè)面的標(biāo)題，但是這個(gè)標(biāo)題不是憑空添加上去的，而是在進(jìn)行頁(yè)面跳轉(zhuǎn)的時(shí)候從中間移動(dòng)到左邊的——和從右邊插入一個(gè)界面保持了一致；也和左右切換的頁(yè)面跳轉(zhuǎn)方式實(shí)現(xiàn)了設(shè)計(jì)上的統(tǒng)一。相當(dāng)于應(yīng)用的導(dǎo)航鏈條在頂部維護(hù)，而向右滑動(dòng)返回也有了依據(jù)：你想要返回的那個(gè)頁(yè)面在當(dāng)前頁(yè)面的左側(cè)，所以應(yīng)當(dāng)使用右滑來(lái)返回。

對(duì)于iOS來(lái)說(shuō)，除了左右的頁(yè)面切換實(shí)際上還有一種：直接從下方浮出來(lái)的一整個(gè)界面，這種頁(yè)面通常是一些主線(xiàn)程操作的旁支操作。比如在瀏覽一個(gè)產(chǎn)品的時(shí)候需要登錄，那么登陸框應(yīng)當(dāng)是從下方彈出來(lái)而非跳轉(zhuǎn)的，登陸之后才會(huì)繼續(xù)正常的操作。

對(duì)于編輯信息這個(gè)操作，iOS和Material Design的理念都應(yīng)當(dāng)是：在當(dāng)前進(jìn)行更改。比如編輯賬戶(hù)信息，展示賬戶(hù)信息和編輯賬戶(hù)信息的界面應(yīng)當(dāng)是同一個(gè)，在賬戶(hù)信息的展示頁(yè)面點(diǎn)擊編輯操作時(shí)變化不應(yīng)當(dāng)是彈出或跳轉(zhuǎn)到另外一個(gè)界面進(jìn)行更改編輯，而是將展示信息變成可編輯狀態(tài)；這樣我可以清楚地知道我改變了什么，而不需要在兩個(gè)界面之間通過(guò)某一項(xiàng)的名稱(chēng)去做關(guān)聯(lián)進(jìn)行更改。

手勢(shì)

• Material Design：戳，使勁戳，多戳幾下
• iOS：滑動(dòng)和點(diǎn)擊

關(guān)于手勢(shì)這個(gè)交互點(diǎn)我覺(jué)得重要性無(wú)需多說(shuō)，這是發(fā)生在以觸摸屏為主的人機(jī)交互界面上最頻繁的交互方式。

而當(dāng)前手勢(shì)的類(lèi)型變得繁多風(fēng)度：?jiǎn)坞p三擊、長(zhǎng)按、兩三N個(gè)手指按、上下左右滑、捏、擴(kuò)，又出來(lái)個(gè)3DTouch；得，蘋(píng)果的設(shè)備終于完全實(shí)現(xiàn)了3D化，安卓還是個(gè)偽3D。

Material Design中的主要交互方式就是點(diǎn)，這里你應(yīng)該點(diǎn)一下，放大你應(yīng)該點(diǎn)兩下，想要更多操作按的時(shí)間長(zhǎng)點(diǎn)—— 編輯、刪除，滿(mǎn)足你。相比之下iOS里滑動(dòng)和點(diǎn)擊平分秋色：左劃、上劃、右滑、點(diǎn)擊，這些構(gòu)成了絕大部分iOS交互的手勢(shì)。

戳一下，是人們對(duì)于未知東西試錯(cuò)的一個(gè)習(xí)慣動(dòng)作，所以將點(diǎn)擊作為主要操作方法合情合理；而安卓的長(zhǎng)按和雙擊在Material Design出現(xiàn)之前還并沒(méi)有什么能夠理解的設(shè)計(jì)隱喻：為什么長(zhǎng)按就會(huì)有一個(gè)菜單出來(lái)呢？是安卓訂的規(guī)則：在新手機(jī)的系統(tǒng)引導(dǎo)就告訴了你長(zhǎng)按應(yīng)用圖標(biāo)可以進(jìn)入編輯模式；你可以卸載它干什么都可以。但是在交互設(shè)計(jì)上來(lái)看真的是難以理解：我把手放到某個(gè)東西上時(shí)間長(zhǎng)一些我就可以更改他？至少在我的經(jīng)驗(yàn)里沒(méi)有這種場(chǎng)景，更別說(shuō)雙擊放大這種東西了。

我在windows上雙擊打開(kāi)程序的，為什么到這里變成了放大。Material Design給出了一些修正：長(zhǎng)按一個(gè)項(xiàng)目，相當(dāng)于把它提起來(lái)；我們按著不動(dòng)，就相當(dāng)于一直提在手中；我們可以拿著它移動(dòng)，然后放到別的地方去，而雙擊這個(gè)東西哪怕是在Material Design體系里還是很難理解。對(duì)比來(lái)看iOS的確在交互上更有一些優(yōu)勢(shì)：由于將頁(yè)面跳轉(zhuǎn)看作是一個(gè)從左到右的過(guò)程，所以我們可以在當(dāng)前界面把前一個(gè)頁(yè)面從左邊拉回來(lái)。

但是同樣，iOS平臺(tái)對(duì)于長(zhǎng)按操作的處理我也是很難理解，實(shí)在不知抽象成物理世界中的什么操作。相對(duì)于安卓來(lái)說(shuō)，iOS長(zhǎng)按貌似比較少。

關(guān)于滑動(dòng)手勢(shì)操作，大部分的用戶(hù)持握手機(jī)的是右手。所以在滑動(dòng)手勢(shì)中，往左滑動(dòng)和往上滑動(dòng)對(duì)應(yīng)更多的是和“刪除”相關(guān)的東西。比如一個(gè)列表，拇指左劃出現(xiàn)了一個(gè)刪除按鈕，點(diǎn)擊一下刪除這個(gè)項(xiàng)就消失了。

對(duì)于右手持握手機(jī)的用戶(hù)來(lái)說(shuō)，右下是自己手所在的地方：離右下越近，就是靠自己越近。往右下拖動(dòng)，就是將某個(gè)東西放得離自己更近。與之相方，往左和往上都是遠(yuǎn)離自己。刪除后臺(tái)程序時(shí)是往上滑，刪除列表項(xiàng)時(shí)是往左滑，安卓刪除后臺(tái)也是往左滑。早期安卓刪除照片操作便是往上滑，以交互設(shè)計(jì)著稱(chēng)的SmartisanOS對(duì)于拒接電話(huà)的操作也是往上滑，對(duì)于這個(gè)操作，不同平臺(tái)有統(tǒng)一的設(shè)計(jì)。而對(duì)于拇指來(lái)說(shuō)往左是向外，和往上滑有相同感受。

動(dòng)畫(huà)提醒

動(dòng)畫(huà)的存在意義我想有個(gè)很經(jīng)典的解釋?zhuān)褪牵何覀冊(cè)谡Ｉ钪泻苌倏吹揭粋€(gè)東西憑空產(chǎn)生和憑空消失。人是這樣，面包也是這樣。所以每個(gè)界面、圖標(biāo)、按鈕的出現(xiàn)和消失都應(yīng)當(dāng)有其軌跡，這樣才不會(huì)突兀。

動(dòng)畫(huà)是和頁(yè)面跳轉(zhuǎn)以及手勢(shì)操作有機(jī)結(jié)合的部分。而正如前面所說(shuō)，動(dòng)畫(huà)應(yīng)當(dāng)是模擬物理世界的運(yùn)動(dòng)軌跡，氣球的放大縮小車(chē)子的近大遠(yuǎn)小皮球的碰撞彈跳和椅子的挪來(lái)挪去都是可以理解的，那些個(gè)花里胡哨又匪夷所思的華麗動(dòng)畫(huà)還是不要的好。

我要吐槽

關(guān)于手勢(shì)，有兩個(gè)槽點(diǎn)要吐：第一個(gè)就是向左滑動(dòng)，第二個(gè)就是下拉刷新。

首先向左滑動(dòng)，這個(gè)操作主要是在列表項(xiàng)里操作，我認(rèn)為向左滑動(dòng)本身就是一個(gè)離開(kāi)的操作——拇指向外刷出去一個(gè)項(xiàng)和往上扔出去一個(gè)項(xiàng)的心理感受十分類(lèi)似：讓這個(gè)離我遠(yuǎn)點(diǎn)。但是由于刪除操作是個(gè)危險(xiǎn)操作，基本上刪除的東西要么是有個(gè)垃圾桶給人反悔要么就得在刪除時(shí)提出警告：確認(rèn)刪除……，您將……。蘋(píng)果的平臺(tái)上左劃之后出現(xiàn)了一個(gè)“刪除”字樣，所以就有很多人開(kāi)始往這里塞東西了，然后好像慢慢地這個(gè)東西變成了一個(gè)“更多操作”入口。

和安卓的長(zhǎng)按一樣，如果把這個(gè)左劃理解為更多操作的入口的話(huà)未免太過(guò)牽強(qiáng)，我實(shí)在想不出這個(gè)左劃和更多操作之間的聯(lián)系。

但是換一種想法，蘋(píng)果的大部分左劃出來(lái)的并不是“編輯”，而是“刪除”，所以這個(gè)交互就講得通了：左劃就是個(gè)刪除操作，而后邊的“刪除”實(shí)際上應(yīng)當(dāng)是“確認(rèn)刪除”，起到的作用是刪除流程中的確認(rèn)步驟。但是后來(lái)被用爛了，致使很多人都認(rèn)為這是個(gè)“更多操作”入口，是因?yàn)楫a(chǎn)品經(jīng)理總是喜歡往應(yīng)用里塞東西，把左劃和更多操作聯(lián)系起來(lái)對(duì)我來(lái)說(shuō)確實(shí)有些困難。

另一個(gè)要吐槽的便是下拉刷新，自從facebook使用了下拉刷新并成為一個(gè)典型交互示例之后，好像所有應(yīng)用的刷新都變成了下拉。問(wèn)題是facebook將下拉用作刷新操作是有前提的：她是一個(gè)動(dòng)態(tài)流的界面，整個(gè)頁(yè)面就是一個(gè)很長(zhǎng)的列表；里面是一個(gè)一個(gè)動(dòng)態(tài)擺成的列表；下拉是查看列表里時(shí)間久一些的動(dòng)態(tài)，往上滑是查看列表里比較新的動(dòng)態(tài)，拉到頂部之后進(jìn)行的下拉操作是一個(gè)很合理的試錯(cuò)動(dòng)作。

facebook根據(jù)這個(gè)做刷新的確是很棒的設(shè)計(jì)。但是現(xiàn)在似乎應(yīng)用都把這個(gè)變成了數(shù)據(jù)更新的動(dòng)作：在固定界面，在賬戶(hù)界面；對(duì)手勢(shì)濫用最嚴(yán)重的就是淘寶和支付寶，各種下拉左劃按住滑，完全沒(méi)有任何交互理念指導(dǎo)的設(shè)計(jì)；找不到任何理由的功能添加?？赡苁枪δ芴嗔藢?shí)在不知道往哪里放了，或者是真心覺(jué)得這樣做很好，原因不得而知，但是在我看來(lái)很多設(shè)計(jì)很費(fèi)解。

有人說(shuō)，下拉刷新和滑動(dòng)有更多操作方法是培養(yǎng)出來(lái)的，我們可以直接用。這個(gè)我不否認(rèn)，包括左劃變成了更多和下拉就變成了刷新的代名詞，好像大家也沒(méi)覺(jué)得有什么不對(duì)。但是交互就是這樣，發(fā)展的方向就是使人機(jī)交互界面更易懂更易學(xué)，這也是交互之所以存在和發(fā)展的原因

作者：靠譜男青年獎(jiǎng)得主

原文鏈接：http://www.jianshu.com/p/14721ab5a2ac

版權(quán)聲明：若該文章涉及版權(quán)問(wèn)題，請(qǐng)聯(lián)系我們主編，QQ：419297645