2017-5-16 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
從電視機(jī)到互聯(lián)網(wǎng)，從臺(tái)式機(jī)到手機(jī)，再到今天的穿戴式設(shè)備，新技術(shù)發(fā)展的同時(shí)，設(shè)計(jì)發(fā)生了哪些改變？設(shè)計(jì)師如何面對(duì)這種變化？來看螞蟻金服UED總監(jiān)梁山鷹在UCAN 上的演講。
一個(gè)山谷里如果下雨，一粒水滴究竟會(huì)滴向哪里，其實(shí)是不可預(yù)測(cè)的。但是它的大致方向是不可避免的?！?jiǎng)P文·凱利
20多年前比爾蓋茨寫過這么一本書——《未來之路》。在當(dāng)時(shí)的中國(guó)，“信息高速公路”這個(gè)帶有新科技概念的名詞火速傳播開來，其實(shí)和現(xiàn)在的情況有點(diǎn)類似，現(xiàn)在每個(gè)人都在說AR、VR、AI人工智能，所有人都在談，可并不了解它究竟代表什么意義。
20多年過去了，我們現(xiàn)在回頭看所謂的信息高速公路是什么，很好理解。它運(yùn)用了互聯(lián)網(wǎng)這個(gè)新技術(shù)，以前所未有的廣度、深度和便捷性，全世界的人和信息全都串聯(lián)在了一起。
互聯(lián)網(wǎng)承載的主體是信息。如果我們回過頭來看信息的載體：硬件所發(fā)生的一些變化，會(huì)看到一些趨勢(shì)和特性，那么我在這里和大家一起來探討一下。
人類獲取信息的方式一直都在以主動(dòng)形態(tài)替代被動(dòng)形態(tài)，以更方便快捷而準(zhǔn)確的方式獲取個(gè)人所期望的信息。什么意思呢？20多年以前，我們信息的載體：媒體，主要是報(bào)紙、雜志、廣播、電視?；ヂ?lián)網(wǎng)作為一個(gè)新的媒介出現(xiàn)的時(shí)候，它自然而然就把前面一種形態(tài)變成了被動(dòng)形態(tài)，而互聯(lián)網(wǎng)設(shè)備是一種主動(dòng)形態(tài)。
大家回想一下二三十年以前，我們接受信息的方式是什么？接受新聞的方式是什么？——7點(diǎn)鐘的時(shí)候全家守坐在電視機(jī)前，電視里的羅京邢志斌正襟危坐，傳達(dá)來自中央的指示，全國(guó)、全世界都發(fā)生了什么?；ヂ?lián)網(wǎng)時(shí)代，當(dāng)你安上電腦連上網(wǎng)之后，主動(dòng)查詢來自全世界各地的信息。這就把之前傳統(tǒng)媒體的狀態(tài)變成了被動(dòng)狀態(tài)。
可再往后面去看，桌面電腦和以筆記本電腦為首的Mobile狀態(tài)比起來，它自己也變成了一個(gè)被動(dòng)形態(tài)。你在家安上一個(gè)桌上電腦，不可能背著這個(gè)電腦滿世界跑。筆記本放在書包里，到辦公室，回到家里隨時(shí)連上網(wǎng)都可以進(jìn)行信息接收和傳遞，所以這又是主動(dòng)替代被動(dòng)形態(tài)的過程。
我們來到移動(dòng)互聯(lián)網(wǎng)時(shí)代。手機(jī)從兜里一拿出來，幾乎不需要漫長(zhǎng)的開機(jī)過程就可以完成信息的傳遞。和打開筆記本電腦這種比較被動(dòng)的狀態(tài)比起來，這又是一個(gè)主動(dòng)替代被動(dòng)的過程。
我們當(dāng)前所處的時(shí)代是移動(dòng)手機(jī)作為霸主地位存在的時(shí)代，可為什么這幾年我們都要講穿戴式設(shè)備。因?yàn)槿绻覀冇辛耸直砘蛘咧悄苎坨R，甚至是智能的耳機(jī)，這又是一個(gè)主動(dòng)替代被動(dòng)的過程。為什么？當(dāng)我擁有這些穿戴式設(shè)備的時(shí)候，我接收和傳遞信息的時(shí)候甚至不需要把手機(jī)從口袋里拿出來——它可以通過手表、眼鏡、耳機(jī)直接傳達(dá)給我。
穿戴式設(shè)備第一波出來的是智能手表，后面出來的是大家都在談的智能或者VR眼鏡、耳機(jī)這類設(shè)備，我統(tǒng)稱為智能助手。
那么，什么樣的設(shè)備或者狀態(tài)會(huì)替代智能助手，或者說把智能助手變?yōu)楸粍?dòng)狀態(tài)？我稱之為AI Everywhere。不管個(gè)人在什么時(shí)間、什么地點(diǎn)，無需攜帶物理設(shè)備，AI或者Sensors都可以感知到我是誰，我需要什么信息，而主動(dòng)推送給我。這肯定會(huì)是在很久之后發(fā)生的事情，但可以肯定的是，這又是主動(dòng)替代被動(dòng)形態(tài)的過程。
在這個(gè)漫長(zhǎng)的過程里，我們可以看到媒體的變化。
媒體形式在經(jīng)歷每個(gè)階段的時(shí)候，我們查看信息都有不同的狀態(tài)。最開始的時(shí)候是在固定的物理位置定時(shí)查看，想想7點(diǎn)鐘的新聞聯(lián)播；后面在固定的物理位置隨時(shí)查看，想想你在桌上電腦前接收信息；手機(jī)出現(xiàn)以后我們是在不固定的物理位置隨時(shí)查看，一直到我們現(xiàn)在所說，如果說有可穿戴式智能助手出現(xiàn)的時(shí)候，它會(huì)是一個(gè)什么形態(tài)，也許是我們無需打開電腦做出物理動(dòng)作，而主動(dòng)進(jìn)行的智能信息傳遞。
在主動(dòng)替代被動(dòng)的形態(tài)里，UX會(huì)有哪些特征。相信在我剛才和大家講述的過程里也應(yīng)該能看出：
? 首先是便捷性。什么是便捷性？是從物理狀態(tài)而言的。我們減少額外的物理操作動(dòng)作，比如說用拿起手機(jī)替代打開電腦。比如說直接從眼鏡里面?zhèn)鬟_(dá)信息去替代我們拿起手機(jī)的動(dòng)作，這是從物理層面上來講的。
? 其次是主動(dòng)性。什么是主動(dòng)性？主動(dòng)性是我們會(huì)減少用戶額外的交互操作，主動(dòng)進(jìn)行輔助功能。
? 最后一個(gè)是智能性。這也是我們?yōu)槭裁葱枰髷?shù)據(jù)和AI，是因?yàn)槲覀兿Ｍㄟ^技術(shù)提供更智能，更個(gè)性化的服務(wù)。
舉一下我們?cè)谖浵佔(zhàn)龅睦印?
第一，掃臉登錄。大家用支付寶的話應(yīng)該都知道掃臉登錄的功能。第一個(gè)版本因?yàn)榧夹g(shù)的不成熟，所以我們要求用戶面對(duì)鏡頭的時(shí)候需要眨一下眼，需要左右扭一下頭，以確認(rèn)用戶的真實(shí)性。這個(gè)從物理狀態(tài)來說，實(shí)際上對(duì)用戶并不是更智能，也并不更便捷。
所以在第二個(gè)版本，我們利用眼紋和更好的面部識(shí)別功能，快速識(shí)別用戶。到第三個(gè)版本，這個(gè)版本其實(shí)很有意思，和我們所說的人工智能其實(shí)沒有那么大關(guān)系，但是要和大家講一講。剛才看到的那兩版有沒有發(fā)現(xiàn)一個(gè)問題，你想象一下，一個(gè)大老爺們?cè)诘罔F上面拿出手機(jī)登錄支付寶，這個(gè)時(shí)候全屏顯示他的頭像，他對(duì)著手機(jī)眨眼、扭頭，很尷尬，旁人看了以為是四十五度角完美自拍。
為了減少用戶的尷尬，我們把面部區(qū)域縮小，增大了留白的區(qū)域。留白的區(qū)域是為了做更好的面部識(shí)別，有屏幕的反光，在光線不好的時(shí)候幫助提高識(shí)別效率。
螞蟻智能小馬達(dá)
這個(gè)產(chǎn)品是基于大數(shù)據(jù)和AI的智能客服。因?yàn)橛辛舜髷?shù)據(jù)和AI更加了解了用戶，更加知道他們要什么，所以可以根據(jù)入口的不同推薦不同的自助工具?？梢宰龅缴舷挛你暯樱浪谝痪湓拞柫酥?，第二句話、第三句話都在說什么。即使是有很短的兩個(gè)字的語言，我們都知道他問的是什么，可以給他提供更準(zhǔn)確的答案。也可以根據(jù)不同用戶行為習(xí)慣，給他主動(dòng)推薦問題。另外還有DST（Dialog State Tracking），根據(jù)對(duì)話狀態(tài)，引導(dǎo)用戶定位到更加精準(zhǔn)的答案。在這個(gè)項(xiàng)目里，就是體現(xiàn)了我們希望能夠更智能、更主動(dòng)、更便捷地為用戶提供服務(wù)。
隨著我們?cè)诨ヂ?lián)網(wǎng)時(shí)代的媒體、設(shè)備、技術(shù)發(fā)展，我們一直在盡力模擬和現(xiàn)實(shí)世界相似的場(chǎng)景。構(gòu)建具有還原性和真實(shí)直觀性的體驗(yàn)世界。
先給大家看一段視頻。
相信大家在互聯(lián)網(wǎng)上看到過很多這種類似的視頻，不僅僅是這種2歲的嬰兒，甚至是貓狗都可以和iPad交互。這樣的事情在二三十年以前是不可想象的。
我最開始學(xué)電腦的時(shí)候接觸到的是DOS界面。相信很多90后根本沒有用過這個(gè)，這實(shí)質(zhì)上是一個(gè)指令交互，你給電腦輸送準(zhǔn)確的信息和命令，電腦再給你反饋。但是你必須清楚地知道并學(xué)習(xí)指令的拼寫和語法，所以后來我們有了GUI界面，GUI界面實(shí)際上也是對(duì)現(xiàn)實(shí)世界的模擬。對(duì)于桌面以及文件夾、文件管理系統(tǒng)的一種模擬。這個(gè)比較好理解：為什么現(xiàn)在電腦里、手機(jī)里都說文件夾，我們?cè)诂F(xiàn)實(shí)生活里都知道把文件放到文件夾，把它們放到桌面進(jìn)行移動(dòng)，有了對(duì)現(xiàn)實(shí)世界模擬，GUI界面這樣更易于學(xué)習(xí)和掌握的界面才會(huì)出現(xiàn)。
下一階段，當(dāng)我們每天使用手機(jī)時(shí)，是對(duì)現(xiàn)實(shí)世界手勢(shì)交互的模擬。大家知道為什么一個(gè)2歲小孩可以那么自如去使用ipad，就是因?yàn)檫@種手勢(shì)交互的動(dòng)作是我們與生俱來的，是現(xiàn)實(shí)世界里面每一天都在使用的。20多年以前，你很難想象一個(gè)2歲嬰兒話都講不利索，你讓他很完整的去了解DOS界面指令是什么。但是在20年之后非常自然就發(fā)生了。
AR時(shí)代來臨的時(shí)候，可能就不僅僅是只是單純的手勢(shì)交互。不管是手勢(shì)、語言、動(dòng)作都可以和真實(shí)場(chǎng)景之間的進(jìn)行互動(dòng)。所以從UX角度來說越來越具有直觀性，越來越可以讓大家以低學(xué)習(xí)成本甚至是無學(xué)習(xí)成本的方式去理解到使用到。
再往未來，大家看到的截圖是鋼鐵俠里的場(chǎng)景，我們可以想像在未來的世界里面，隨著UX和技術(shù)的不斷發(fā)展，我們會(huì)去模擬現(xiàn)實(shí)世界里大部分的場(chǎng)景、環(huán)境、以及溝通交互方式。
把這個(gè)歷程走完我們會(huì)發(fā)現(xiàn)什么？我們會(huì)發(fā)現(xiàn)所謂重建真實(shí)的UX具有什么樣的特征？
第一個(gè)特征，具有還原性，我們會(huì)極大程度上真實(shí)還原，并且增強(qiáng)現(xiàn)實(shí)的交互方式。
第二個(gè)特征，直觀性。交互方式是從現(xiàn)實(shí)生活里的交互行為的復(fù)制，它的學(xué)習(xí)成本會(huì)越來越低。那個(gè)時(shí)候我們和機(jī)器之間，或者人與人之間通過虛擬現(xiàn)實(shí)或者是AR的方式進(jìn)行溝通，學(xué)習(xí)成本肯定會(huì)比現(xiàn)在更低。
再給大家舉幾個(gè)例子
為什么要做AR紅包？為什么要用增強(qiáng)現(xiàn)實(shí)的方式去做？現(xiàn)在大家每天收到紅包的時(shí)候是怎么樣收到的：二維界面，點(diǎn)擊，打開，20塊錢，運(yùn)氣不好的0.88。那我們現(xiàn)實(shí)生活里接收到紅包，或者接收禮物是什么樣子，小的時(shí)候過圣誕節(jié)過春節(jié)，爸媽給你包了禮物藏在家里某個(gè)地方。小孩子滿屋去找，找到了之后，小孩在當(dāng)前物理位置和父母之間交互過程中，所產(chǎn)生出來的這種現(xiàn)實(shí)生活里的情感，如何能夠在當(dāng)前新技術(shù)上進(jìn)行復(fù)制。并不是說我們因?yàn)橛辛薃R而要做這些事情，而是因?yàn)槲覀冃枰肬X去模擬現(xiàn)實(shí)生活中的交互方式，重塑這種情感。
螞上是用AR技術(shù)復(fù)制現(xiàn)實(shí)生活中的支付場(chǎng)景。這些都是進(jìn)行當(dāng)中的項(xiàng)目，不好說太多。但是從用戶體驗(yàn)角度，我們是希望把現(xiàn)實(shí)生活中支付方式更好的還原，直觀的帶給用戶，以減少他們的學(xué)習(xí)成本。
最后是感官交互。
感官交互和前面講的有密不可分的關(guān)系。現(xiàn)實(shí)感官有5種，聽覺、視覺、觸覺、嗅覺、味覺。大家在下面聽演講，看到的是有三維景深的我；由于我的個(gè)性特征、職務(wù)以及演講的內(nèi)容，你所聽到的語音聽覺反饋是和其他場(chǎng)次截然不同的，即使是相同的內(nèi)容，不同的人講給你的聽覺反饋也是不同的；觸覺——當(dāng)前坐在這個(gè)場(chǎng)子里，大家和座椅有摩擦，感受到座椅的質(zhì)感；以及味覺、嗅覺，今天冷不冷，濕不濕，空調(diào)足不足，所有的感官反饋構(gòu)成了你今天在這個(gè)場(chǎng)地里聽演講時(shí)整體的觀感。
但是我們看看現(xiàn)在的技術(shù)所構(gòu)成的的感官反饋：語音，只是單純的語音輔助——Siri給你一些單純的語音反饋；視覺，大部分停留在二維界面上；觸覺只是Vibration，手機(jī)或者游戲手柄簡(jiǎn)單的操作震動(dòng)反饋；而嗅覺、味覺現(xiàn)在幾乎沒有。
看到上面這張圖的話可以想像，未來如果通過個(gè)性語言模擬現(xiàn)實(shí)聽覺場(chǎng)景，提供個(gè)性化語音溝通。增強(qiáng)視覺，基于AR/VR場(chǎng)景化、個(gè)人化的視覺呈現(xiàn)，到擬真觸覺、嗅覺、味覺，如果全部用在一起的話，將會(huì)給我們建造一個(gè)和現(xiàn)在多么不同而又更真實(shí)的感官世界。
在這里所謂感官交互UX具有以下兩個(gè)特征：一個(gè)是一體性，用戶體驗(yàn)將前所未有把所有的感官融入在一起。還有一個(gè)是真實(shí)性，我們將最大可能性復(fù)制現(xiàn)實(shí)生活里感官傳遞的信息過程。
再給大家舉一個(gè)例子，螞蟻、阿里機(jī)器人以及軟銀合作的金融行業(yè)服務(wù)機(jī)器人Pepper。當(dāng)我在螞蟻F工作室和它互動(dòng)的時(shí)候，它可以通過有個(gè)性的語音和我進(jìn)行交互，表演跳舞；它的手做得非常逼真，和人握手時(shí)有極強(qiáng)烈的真實(shí)感；它的兩個(gè)眼睛實(shí)際上是攝像機(jī)，和人面對(duì)面交互的時(shí)候，眼睛會(huì)跟著你的移動(dòng)而移動(dòng)。
雖然這還是一個(gè)比較初級(jí)的機(jī)器人階段，但是這種震撼是前所未有的。相信隨著技術(shù)的進(jìn)步，這種把所有感官調(diào)動(dòng)起來的體驗(yàn)會(huì)越來越多，而且越來越會(huì)震撼到我們每一個(gè)人。
講到這里，似乎我的演講應(yīng)該收尾了。我們分析了新技術(shù)下新設(shè)計(jì)有哪三個(gè)方向：主動(dòng)信息、重建真實(shí)和感官交互。這三個(gè)方向下又有值得我們注意的幾個(gè)UX特性。但是不知道大家有沒有注意，我的標(biāo)題“新設(shè)計(jì)”后面有一個(gè)問號(hào)，為什么會(huì)打這個(gè)問號(hào)？我再多說幾句。
在螞蟻金服我們覺得設(shè)計(jì)分為三個(gè)層次。最上面一個(gè)層次叫做設(shè)計(jì)文化，中間這個(gè)層次叫做設(shè)計(jì)語言，最下面這個(gè)層次叫做設(shè)計(jì)執(zhí)行。
? 設(shè)計(jì)執(zhí)行實(shí)際上是我們每一個(gè)設(shè)計(jì)師現(xiàn)在每天在做的工作。具體的產(chǎn)品設(shè)計(jì)，包括了交互、視覺、體驗(yàn)、動(dòng)效、品牌。
? 設(shè)計(jì)語言里，最下面一層是規(guī)范、系統(tǒng)、工具，再往上一個(gè)層次有我們的設(shè)計(jì)原則。最上面一層是我們的設(shè)計(jì)是從哪里來的，根源、靈感、比喻。
? 設(shè)計(jì)文化是設(shè)計(jì)理念，設(shè)計(jì)價(jià)值觀和設(shè)計(jì)底線。
問一下大家，當(dāng)新技術(shù)來臨的時(shí)候，這張圖里哪些東西可能是會(huì)變的？哪些東西是不變的？我覺得左邊（設(shè)計(jì)文化）中間上半部分部分（設(shè)計(jì)語言中的靈感、比喻與根源）是不會(huì)變的，變的可能是規(guī)范、原則和我們每天做的設(shè)計(jì)執(zhí)行。為什么說有些東西是不會(huì)變的？我舉個(gè)例子，我們螞蟻提倡的設(shè)計(jì)理念，有這么四種：
第一，設(shè)計(jì)是真實(shí)世界的投射，是真誠(chéng)的，可被信任的。
這一點(diǎn)剛才我曾經(jīng)舉了很多例子。
第二，設(shè)計(jì)的功能大于形式。
在總結(jié)螞蟻設(shè)計(jì)理念時(shí)我們找了很多同學(xué)一起過來討論。首先問他們的一個(gè)問題——對(duì)你們影響比較深的設(shè)計(jì)理念，設(shè)計(jì)的思潮，或者設(shè)計(jì)的大師是誰？其中被提到了很多的，大家想都能想出來，包豪斯、瑞士平面設(shè)計(jì)主義風(fēng)格……這些東西都是大半個(gè)世紀(jì)以前出現(xiàn)的設(shè)計(jì)理念。但是這些理念沒有隨著時(shí)間的推移，沒有隨著新技術(shù)的誕生而消亡。相反的，它反而更好指導(dǎo)了現(xiàn)今的設(shè)計(jì)工作。從擬物化往扁平化發(fā)展過程中，功能大于形式這一塊東西就深深影響到了現(xiàn)在扁平化的設(shè)計(jì)。
第三，設(shè)計(jì)是系統(tǒng)的有邏輯的。
我們希望設(shè)計(jì)師可以一步一步反推回去，知道為什么會(huì)做這個(gè)設(shè)計(jì)，設(shè)計(jì)的系統(tǒng)里怎么能從具體的執(zhí)行反推到規(guī)范，反推到文化，把原因道理說清楚。設(shè)計(jì)不是憑空而來，不是沒有邏輯的。
最后一點(diǎn)，設(shè)計(jì)的潮流是短期的，設(shè)計(jì)的理念是長(zhǎng)久的。
什么是設(shè)計(jì)的潮流？大家現(xiàn)在每天在朋友圈或者微博分享的2017年十大流行趨勢(shì)，2017年你不得不知道的十種色系的運(yùn)用，2017年十大動(dòng)效趨勢(shì)，什么設(shè)計(jì)師不學(xué)習(xí)就會(huì)被淘汰的軟件技術(shù)，這些是設(shè)計(jì)潮流。設(shè)計(jì)潮流不是你不可以去聽的東西，不是你不可學(xué)習(xí)的東西。但是，在面對(duì)新技術(shù)的時(shí)候，你腦子里應(yīng)該知道很清楚的什么是不變的，什么是變化的。因?yàn)檫@些變化，你要去學(xué)習(xí)。
再舉個(gè)例子，90年代末的時(shí)候，互聯(lián)網(wǎng)經(jīng)濟(jì)爆發(fā)，在美國(guó)硅谷，當(dāng)時(shí)會(huì)Photoshop的人才就被認(rèn)為是高科技的人才，會(huì)做的，那種叫做高科技人才。大街上，甚至你不需要有文憑，那么多初創(chuàng)企業(yè)，哦，你會(huì)Photoshop，來我們這邊，我們一起來創(chuàng)業(yè)。幾年之后互聯(lián)網(wǎng)泡沫破碎，該玩完都玩完。留下來的是對(duì)于什么是不變的、什么是變化有自己理解的設(shè)計(jì)師，這些設(shè)計(jì)師才真正影響了當(dāng)前設(shè)計(jì)趨勢(shì)和設(shè)計(jì)潮流。
同樣對(duì)于現(xiàn)在的設(shè)計(jì)師，我不反對(duì)你去研究新技術(shù)、學(xué)習(xí)新趨勢(shì)，可如果你連設(shè)計(jì)里不變的東西都沒有學(xué)好沒有搞懂，我不覺得你能把變化的那一部分設(shè)計(jì)好。
我相信，只有把這個(gè)問題搞清楚了之后，我們才可以把新設(shè)計(jì)后面的問號(hào)去掉。
謝謝大家。
藍(lán)藍(lán)設(shè)計(jì)( m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.miumiuwan.com