自谷歌的Material Design設(shè)計語言問世人機交互界面的討論與探尋又出現(xiàn)了一波小高潮，有人探討Material Design與iOS設(shè)計的優(yōu)劣，有人研究擬物化和扁平化設(shè)計差異耀销，有人把Material Design和iOS設(shè)計風(fēng)格和擬物化和扁平化和切換動效和毛玻璃和深淺色設(shè)計和對比色漸變和同系色漸變混到一起聊畔况。事實是，他們大部分是結(jié)對出現(xiàn)的憋沿，有人去比較Material Design和擬物這就是不應(yīng)該了：Material Design更多涉及的是關(guān)于用戶體驗與人機交互的設(shè)計，而扁平等概念是圖形設(shè)計中的沪猴，并非同一維度辐啄，同理和毛玻璃等也不應(yīng)當(dāng)被拿來談?wù)摬烧拢裉焯接懙氖枪雀璧腗aterial Design和iOS里的設(shè)計隱喻的一致性。因為這兩個都是高度成型的人機交互實例壶辜，所以可以拿出來作為共同點的一定是相當(dāng)有意義的設(shè)計點悯舟，并且通過這種一致性探索我們更能進(jìn)行一次產(chǎn)品設(shè)計的自我審查:關(guān)于人機交互，我們做對了嗎砸民？
首先需要清楚的是抵怎，Material Design和iOS的設(shè)計都不只是應(yīng)用在移動設(shè)備上：通常，蘋果的電子產(chǎn)品本身會和用戶界面在設(shè)計上高度一致岭参，并且產(chǎn)品線之間會保持設(shè)計上的一致性反惕，無論是手機設(shè)備的操作系統(tǒng)還是一體機的操作系統(tǒng)還是便攜個人計算機的，而Material Design更是被谷歌應(yīng)用在谷歌系網(wǎng)站演侯、安卓平臺app設(shè)計以及chrome的設(shè)計上姿染。所以這兩個用戶界面設(shè)計準(zhǔn)則有更高層級的一致性，才能使得他們不只是在一個平臺或一個設(shè)備作用秒际，而是可以作為一種交互原則被應(yīng)用在所有的人機交互場合盔粹。
層級與盒子
Material Design:紙片與z軸
iOS:層級與毛玻璃
無論是一個移動操作系統(tǒng)還是富web應(yīng)用，現(xiàn)在我們面對的每個應(yīng)用程癌、每個產(chǎn)品都是復(fù)雜的：我們需要在多個界面之間跳轉(zhuǎn)舷嗡，這些頁面應(yīng)當(dāng)怎樣被組織？依次平鋪嵌莉？不同操作流程之間的頁面應(yīng)當(dāng)是什么關(guān)系进萄？是否應(yīng)當(dāng)在界面里展現(xiàn)一個查看所有界面的入口？
安卓早期系統(tǒng)的跳轉(zhuǎn)動畫很多：漸隱锐峭、扭曲中鼠、3D、縮放沿癞，旋轉(zhuǎn)援雇，但是到最后似乎所有的用戶都喜歡上了最簡單的左右平滑和從上下方抽出的過度動畫，因為在生活中椎扬，我們更常見到的便是平移運動：一個電視從客廳移動到了臥室惫搏，一支筆從課桌移動到了書包，一個枕頭從沙發(fā)移動到了床上蚕涤，相對于水霧一樣的透明度漸變筐赔，平移是最符合人的心理預(yù)期的，更不要說那些奇奇怪怪的變化方式了揖铜。iOS的界面切換更簡單直白茴丰，就是一個左右方向的變化，多任務(wù)視圖時是平鋪開的：我們就好像把所有的頁面擺在了桌子上進(jìn)行挑選。所有的這些頁面贿肩，都是被放在了一個平面內(nèi)峦椰，就好像整個操作系統(tǒng)是一個很長很長的大大的世界，而我們的手機是一個可以移動的攝像頭汰规，我們通過戳屏幕汤功，劃屏幕來改變這個攝像頭的方位，從而能夠從這個頁面到下一個頁面控轿。這種抽象沒有問題，和我們把所有的試卷都擺在地上進(jìn)行分發(fā)一樣拂封，看起來自然而不突兀茬射。
然而，這種設(shè)計卻稍微有一些體驗區(qū)別：它的體驗和電腦給我們的體驗并不相同冒签。想想看我們在電腦上所能操作的東西都在哪里在抛？要知道，圖形化操作系統(tǒng)里有個很大的東西叫桌面萧恕，而我們可以想象一下刚梭，我們在操作計算機的時候有沒有一種“攝像頭在移動”的感覺？我相信所有windows的用戶都沒有這種感覺票唆，Mac的用戶也少有這種感覺朴读，我們使用時更像在一個特定的面積里把東西拖來拖去，所有的操作都是在“桌面”這個面積里完成的走趋。但是一個平面容納的東西是有限的衅金，所以我們可以有的解決方案就是1，將所有的頁面按照面積填充進(jìn)桌面這個平面里簿煌。2氮唯，把桌面設(shè)計成一個盒子，給予所有的面不同的層級姨伟。所以無論是從windows到mac甚至網(wǎng)頁頁面惩琉，都變成了有空間感的東西。有空間了夺荒，我們就可以統(tǒng)一這些平臺上的體驗了：你的手機是個盒子瞒渠，寬就是你看到的寬，高就是你看到的高技扼，厚度就是你看到的厚度在孝，我們的界面可以在高度上做文章。所以我們看到iOS里的左右跳轉(zhuǎn)目前是下一步的頁面覆蓋了這一步的頁面淮摔，就好像有一個頁面在被點擊之后被插入了進(jìn)來由我繼續(xù)處理私沮，這種感覺就好像我按了一下鈴鐺，服務(wù)員給我端過來一張餅：這張餅是我點的而且我知道怎么把這張餅推出去，穩(wěn)妥安全仔燕。相比之下Material Design規(guī)范就更加抽象討巧：我們將所有的界面都看做紙片造垛，紙片進(jìn)來出去，你抽掉一張你插進(jìn)來一張晰搀，你抬起來一張你放下去一張五辽，所有的交互都有了意義，在紙上涂涂畫畫指指點點外恕，這是我們從小到大養(yǎng)成的一個習(xí)慣杆逗。所以Material Design的設(shè)計師在談及Material Design的設(shè)計用意時就說“我們可能現(xiàn)在并沒有到那個地方，而我們相信假以時日我們會達(dá)到那個地方”鳞疲，這是一句含糊不清的話罪郊，但是按我的理解，他們的重點應(yīng)該是“將電子設(shè)備中的交互操作完全模擬成生活中的實物交互”尚洽，就像我拿到一個飛鏢就想找木頭扎一下一樣悔橄，直接繼承人與實物交互的體驗，讓人機交互更顯自然腺毫。
關(guān)于層級設(shè)計還有一個不同點就是Material Design中彈出框都是有陰影的癣疟，因為它離人更近，在這種設(shè)計上可以看出Material Design是假設(shè)所有人都在“低著頭操作”潮酒，iOS的處理是3D處理——嘗試左右上下移動你的手持設(shè)備睛挚，彈出框偏移量很少，其次是桌面急黎，其次是壁紙竞川。iOS使用這種方式來表達(dá)遠(yuǎn)近關(guān)系。這兩種方式都自然地達(dá)到了目的叁熔。
現(xiàn)在感覺多任務(wù)后臺的處理幾個平臺都達(dá)到了某種一致：蘋果9和安卓5的多任務(wù)切換竟然長得一模一樣委乌，除了一個豎著的一個橫著的，實際上都很像windows 7里的flip多任務(wù)切換荣回，這也使得盒子隱喻在這里也變得統(tǒng)一遭贸，而多任務(wù)后臺界面也是盒子隱喻的一個典型交互頁面。
跳轉(zhuǎn)與導(dǎo)航
Material Design:界面相同元素銜接
iOS:頂部與底部導(dǎo)航
關(guān)于導(dǎo)航心软，我想先提一個過去幾十年里長盛不衰的網(wǎng)頁導(dǎo)航設(shè)計：面包屑導(dǎo)航壕吹。特別是在論壇和軟件下載站，幾乎每個網(wǎng)站都會在頁面中維護(hù)一個面包屑導(dǎo)航删铃，包括到現(xiàn)在很多層級較多較深比較復(fù)雜的網(wǎng)站已然保持著這個設(shè)計點耳贬。看著面包屑導(dǎo)航又好像另外一個東西：文件路徑猎唁。是的咒劲，對于用戶來是，知道自己現(xiàn)在究竟在什么地方是很重要的，只有在清楚了解到自己的位置才能放心做交互——我在這里腐魂，我上邊是這個帐偎，當(dāng)前操作屬于哪個分類下的，并且我可以很快地跳到其他地方蛔屹。相對于效率來說削樊，在移動端的設(shè)計上這個導(dǎo)航的意義更偏向于用戶操作的安全感：我清楚知道當(dāng)前頁面濕從哪里來的，我清楚知道當(dāng)前頁面屬于什么模塊兔毒，并且我清楚知道怎么回去漫贞。這種處理給了用戶很強的操作暗示。在Material Design設(shè)計規(guī)范中育叁，谷歌偏向于使用提升放大的形式進(jìn)行界面遞進(jìn)：和紙片原則保持一致迅脐，每個新的頁面都是離用戶更近的部分，并且當(dāng)前頁面是從上個頁面的某個部分分離出來的擂红，那種感覺就好像手下面蜷縮著一群小貓仪际，你戳了一個小貓她就跳了起來：你可以清楚地看到他的花紋围小，眼睛的顏色昵骤，因為他是你挑選的所以他會離你更近，也理所當(dāng)然地遮住了其他的小貓和盛小貓的盒子肯适，而你可以查看更多關(guān)于這個小貓的細(xì)節(jié)变秦，自然而然。返回應(yīng)該的操作是什么框舔？是這個貓蜷縮了回去蹦玫，然后掉到了她跳出來事的那個盒子里，于是我們又看到了其他的小貓刘绣。實際上我覺得如果是這種交互的話應(yīng)該是面對屏幕提起一個東西和放下一個東西樱溉，簡單的點按并沒有能夠在我的交互上給我足夠的提醒。另外看iOS的導(dǎo)航設(shè)計纬凤，首先便是似乎已經(jīng)成了真理的底部欄福贞，現(xiàn)在打開十個應(yīng)用有九個都是有底部欄的。這就是同個應(yīng)用不同功能之間的分塊停士，相當(dāng)于一個一個應(yīng)用功能的大入口挖帘，而隨著頁面往下跳轉(zhuǎn)，底部欄并沒有變化：內(nèi)部跳轉(zhuǎn)的導(dǎo)航被放到了頂部進(jìn)行維護(hù)恋技。查看原生iOS的應(yīng)用不難發(fā)現(xiàn)他們的導(dǎo)航是這樣的：右上角的返回按鈕旁邊是上個頁面的標(biāo)題拇舀，但是這個標(biāo)題不是憑空添加上去的，而是在進(jìn)行頁面跳轉(zhuǎn)的時候從中間移動到左邊的——和從右邊插入一個界面保持了一致蜻底，也和左右切換的頁面跳轉(zhuǎn)方式實現(xiàn)了設(shè)計上的統(tǒng)一骄崩。相當(dāng)于應(yīng)用的導(dǎo)航鏈條在頂部維護(hù)，而向右滑動返回也有了依據(jù)：你想要返回的那個頁面在當(dāng)前頁面的左側(cè)，所以應(yīng)當(dāng)使用右滑來返回刁赖。對于iOS來說搁痛，除了左右的頁面切換實際上還有一種：直接從下方浮出來的一整個界面，這種頁面通常是一些主線程操作的旁支操作宇弛，比如在瀏覽一個產(chǎn)品的時候需要登錄鸡典，那么登陸框應(yīng)當(dāng)是從下方彈出來而非跳轉(zhuǎn)的，登陸之后才會繼續(xù)正常的操作枪芒。對于編輯信息這個操作彻况，iOS和Material Design的理念都應(yīng)當(dāng)是：在當(dāng)前進(jìn)行更改。比如編輯賬戶信息舅踪，展示賬戶信息和編輯賬戶信息的界面應(yīng)當(dāng)是同一個纽甘，在賬戶信息的展示頁面點擊編輯操作時變化不應(yīng)當(dāng)是彈出或跳轉(zhuǎn)到另外一個界面進(jìn)行更改編輯，而是將展示信息變成可編輯狀態(tài)抽碌，這樣我可以清楚地知道我改變了什么悍赢，而不需要在兩個界面之間通過某一項的名稱去做關(guān)聯(lián)進(jìn)行更改。
手勢
Material Design:戳货徙，使勁戳左权，多戳幾下
iOS:滑動和點擊
關(guān)于手勢這個交互點我覺得重要性無需多說，這是發(fā)生在以觸摸屏為主的人機交互界面上最頻繁的交互方式痴颊。而當(dāng)前手勢的類型變得繁多風(fēng)度赏迟，單雙三擊，長按蠢棱，兩三N個手指按锌杀，上下左右滑，捏泻仙，擴糕再，又出來個3DTouch，得玉转，蘋果的設(shè)備終于完全實現(xiàn)了3D化突想，安卓還是個偽3D。Material Design中的主要交互方式就是點冤吨，這里你應(yīng)該點一下蒿柳，放大你應(yīng)該點兩下，想要更多操作按的時間長點—— 編輯漩蟆，刪除垒探，滿足你。相比之下iOS里滑動和點擊平分秋色：左劃怠李，上劃圾叼，右滑蛤克，點擊，這些構(gòu)成了絕大部分iOS交互的手勢夷蚊。戳一下构挤，是人們對于未知東西試錯的一個習(xí)慣動作，所以將點擊作為主要操作方法合情合理惕鼓，而安卓的長按和雙擊在Material Design出現(xiàn)之前還并沒有什么能夠理解的設(shè)計隱喻：為什么長按就會有一個菜單出來呢筋现？是安卓訂的規(guī)則，在新手機的系統(tǒng)引導(dǎo)就告訴了你長按應(yīng)用圖標(biāo)可以進(jìn)入編輯模式箱歧，你可以卸載它干什么都可以矾飞，但是在交互設(shè)計上來看真的是難以理解：我把手放到某個東西上時間長一些我就可以更改他？至少在我的經(jīng)驗里沒有這種場景呀邢，更別說雙擊放大這種東西了洒沦，我在windows上雙擊打開程序的，為什么到這里變成了放大价淌。Material Design給出了一些修正：長按一個項目申眼，相當(dāng)于把它提起來，我們按著不動蝉衣，就相當(dāng)于一直提在手中括尸，我們可以拿著它移動，然后放到別的地方去买乃，而雙擊這個東西哪怕是在Material Design體系里還是很難理解姻氨。對比來看iOS的確在交互上更有一些優(yōu)勢钓辆，由于將頁面跳轉(zhuǎn)看作是一個從左到右的過程剪验，所以我們可以在當(dāng)前界面把前一個頁面從左邊拉回來。但是同樣前联，iOS平臺對于長按操作的處理我也是很難理解功戚，實在不知抽象成物理世界中的神呢操作，但是相對于安卓來說似嗤，iOS長按貌似比較少啸臀。關(guān)于滑動手勢操作，大部分的用戶持握手機的是右手烁落，所以在滑動手勢中乘粒，往左滑動和往上滑動對應(yīng)更多的是和“刪除”相關(guān)的東西。比如一個列表伤塌，拇指左劃出現(xiàn)了一個刪除按鈕灯萍，點擊一下刪除這個項就消失了。對于右手持握手機的用戶來說每聪，右下是自己手所在的地方：離右下越近旦棉，就是靠自己越近齿风。往右下拖動，就是將某個東西放得離自己更近绑洛。與之相方救斑，往左和往上都是遠(yuǎn)離自己。刪除后臺程序時是往上滑真屯，刪除列表項時是往左滑脸候，安卓刪除后臺也是往左滑，早期安卓刪除照片操作便是往上滑绑蔫，以交互設(shè)計著稱的SmartisanOS對于拒接電話的操作也是往上滑纪他，對于這個操作，不同平臺有統(tǒng)一的設(shè)計晾匠。而對于拇指來說往左是向外茶袒，和往上滑有相同感受。
動畫提醒
動畫的存在意義我想有個很經(jīng)典的解釋凉馆，就是：我們在正常生活中很少看到一個東西憑空產(chǎn)生和憑空消失薪寓，人是這樣，面包也是這樣澜共，所以每個界面向叉，圖標(biāo)，按鈕的出現(xiàn)和消失都應(yīng)當(dāng)有其軌跡嗦董，這樣才不會突兀母谎。動畫是和頁面跳轉(zhuǎn)以及手勢操作有機結(jié)合的部分。而正如前面所說京革，動畫應(yīng)當(dāng)是模擬物理世界的運動軌跡奇唤，氣球的放大縮小車子的近大遠(yuǎn)小皮球的碰撞彈跳和椅子的挪來挪去都是可以理解的，那些個花里胡哨又匪夷所思的華麗動畫還是不要的好匹摇。
我要吐槽
關(guān)于手勢咬扇，有兩個槽點要吐。第一個就是向左滑動廊勃，第二個就是下拉刷新懈贺。首先向左滑動，這個操作主要是在列表項里操作坡垫，我認(rèn)為向左滑動本身就是一個離開的操作——拇指向外刷出去一個項和往上扔出去一個項的心理感受十分類似：讓這個離我遠(yuǎn)點梭灿。但是由于刪除操作是個危險操作，基本上刪除的東西要么是有個垃圾桶給人反悔要么就得在刪除時提出警告：確認(rèn)刪除……冰悠，您將……堡妒。蘋果的平臺上左劃之后出現(xiàn)了一個“刪除”字樣，所以就有很多人開始往這里塞東西了屿脐，然后好像慢慢地這個東西變成了一個“更多操作”入口涕蚤，和安卓的長按一樣宪卿，如果把這個左劃理解為更多操作的入口的話未免太過牽強，我實在想不出這個左劃和更多操作之間的聯(lián)系万栅。但是換一種想法佑钾，蘋果的大部分左劃出來的并不是“編輯”，而是“刪除”烦粒，所以這個交互就講得通了：左劃就是個刪除操作休溶，而后邊的“刪除”實際上應(yīng)當(dāng)是“確認(rèn)刪除”，起到的作用是刪除流程中的確認(rèn)步驟扰她。但是后來被用爛了兽掰，致使很多人都認(rèn)為這是個“更多操作”入口，是因為產(chǎn)品經(jīng)理總是喜歡往應(yīng)用里塞東西徒役，把左劃和更多操作聯(lián)系起來對我來說確實有些困難孽尽。另一個要吐槽的便是下拉刷新，自從facebook使用了下拉刷新并成為一個典型交互示例之后好像所有應(yīng)用的刷新都變成了下拉忧勿，問題是facebook將下拉用作刷新操作是有前提的杉女，她是一個動態(tài)流的界面，整個頁面就是一個很長的列表鸳吸，里面是一個一個動態(tài)擺成的列表熏挎，下拉是查看列表里時間久一些的動態(tài)，往上滑是查看列表里比較新的動態(tài)晌砾，拉到頂部之后進(jìn)行的下拉操作是一個很合理的試錯動作坎拐，facebook根據(jù)這個做刷新的確是很棒的設(shè)計。但是現(xiàn)在似乎應(yīng)用都把這個變成了數(shù)據(jù)更新的動作养匈，在固定界面哼勇，在賬戶界面。對手勢濫用最嚴(yán)重的就是淘寶和支付寶乖寒，各種下拉左劃按住滑猴蹂，完全沒有任何交互理念指導(dǎo)的設(shè)計院溺，找不到任何理由的功能添加楣嘁。可能是功能太多了實在不知道往哪里放了珍逸，或者是真心覺得這樣做很好逐虚，原因不得而知，但是在我看來很多設(shè)計很費解谆膳。
有人說叭爱，下拉刷新和滑動有更多操作方法是培養(yǎng)出來的，我們可以直接用漱病。這個我不否認(rèn)买雾，包括左劃變成了更多和下拉就變成了刷新的代名詞把曼，好像大家也沒覺得有什么不對。但是交互就是這樣漓穿，發(fā)展的方向就是使人機交互界面更易懂更易學(xué)嗤军，這也是交互之所以存在和發(fā)展的原因
