中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

自谷歌的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ù)摗?/p>

今天探討的是谷歌的Material Design和iOS里的設(shè)計隱喻的一致性。因為這兩個都是高度成型的人機交互實例，所以可以拿出來作為共同點的一定是相當(dāng)有意義的設(shè)計點，并且通過這種一致性探索我們更能進行一次產(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è)計準則有更高層級的一致性，才能使得他們不只是在一個平臺或一個設(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ù)視圖時是平鋪開的：我們就好像把所有的頁面擺在了桌子上進行挑選。所有的這些頁面，都是被放在了一個平面內(nèi)，就好像整個操作系統(tǒng)是一個很長很長的大大的世界，而我們的手機是一個可以移動的攝像頭，我們通過戳屏幕，劃屏幕來改變這個攝像頭的方位，從而能夠從這個頁面到下一個頁面。

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

然而，這種設(shè)計卻稍微有一些體驗區(qū)別：它的體驗和電腦給我們的體驗并不相同。想想看我們在電腦上所能操作的東西都在哪里？要知道，圖形化操作系統(tǒng)里有個很大的東西叫桌面。而我們可以想象一下，我們在操作計算機的時候有沒有一種“攝像頭在移動”的感覺？我相信所有windows的用戶都沒有這種感覺，Mac的用戶也少有這種感覺。

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

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

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

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

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

現(xiàn)在感覺多任務(wù)后臺的處理幾個平臺都達到了某種一致：蘋果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)站都會在頁面中維護一個面包屑導(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ī)范中，谷歌偏向于使用提升放大的形式進行界面遞進：和紙片原則保持一致，每個新的頁面都是離用戶更近的部分，并且當(dāng)前頁面是從上個頁面的某個部分分離出來的，那種感覺就好像手下面蜷縮著一群小貓，你戳了一個小貓她就跳了起來：你可以清楚地看到他的花紋，眼睛的顏色，因為他是你挑選的所以他會離你更近，也理所當(dāng)然地遮住了其他的小貓和盛小貓的盒子，而你可以查看更多關(guān)于這個小貓的細節(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)航被放到了頂部進行維護。

查看原生iOS的應(yīng)用不難發(fā)現(xiàn)他們的導(dǎo)航是這樣的：右上角的返回按鈕旁邊是上個頁面的標題，但是這個標題不是憑空添加上去的，而是在進行頁面跳轉(zhuǎn)的時候從中間移動到左邊的——和從右邊插入一個界面保持了一致；也和左右切換的頁面跳轉(zhuǎn)方式實現(xiàn)了設(shè)計上的統(tǒng)一。相當(dāng)于應(yīng)用的導(dǎo)航鏈條在頂部維護，而向右滑動返回也有了依據(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)前進行更改。比如編輯賬戶信息，展示賬戶信息和編輯賬戶信息的界面應(yīng)當(dāng)是同一個，在賬戶信息的展示頁面點擊編輯操作時變化不應(yīng)當(dāng)是彈出或跳轉(zhuǎn)到另外一個界面進行更改編輯，而是將展示信息變成可編輯狀態(tài)；這樣我可以清楚地知道我改變了什么，而不需要在兩個界面之間通過某一項的名稱去做關(guān)聯(liá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)用圖標可以進入編輯模式；你可以卸載它干什么都可以。但是在交互設(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)了一個刪除按鈕，點擊一下刪除這個項就消失了。

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

動畫提醒

動畫的存在意義我想有個很經(jīng)典的解釋，就是：我們在正常生活中很少看到一個東西憑空產(chǎn)生和憑空消失。人是這樣，面包也是這樣。所以每個界面、圖標、按鈕的出現(xiàn)和消失都應(yīng)當(dāng)有其軌跡，這樣才不會突兀。

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

我要吐槽

關(guān)于手勢，有兩個槽點要吐：第一個就是向左滑動，第二個就是下拉刷新。

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

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

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

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

facebook根據(jù)這個做刷新的確是很棒的設(shè)計。但是現(xiàn)在似乎應(yīng)用都把這個變成了數(shù)據(jù)更新的動作：在固定界面，在賬戶界面；對手勢濫用最嚴重的就是淘寶和支付寶，各種下拉左劃按住滑，完全沒有任何交互理念指導(dǎo)的設(shè)計；找不到任何理由的功能添加?？赡苁枪δ芴嗔藢嵲诓恢劳睦锓帕耍蛘呤钦嫘挠X得這樣做很好，原因不得而知，但是在我看來很多設(shè)計很費解。

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

作者：靠譜男青年獎得主

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

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