小優(yōu)同學(xué)其實(shí)已經(jīng)畢業(yè)2年了，青春無(wú)敵的面龐依然留有一點(diǎn)學(xué)生時(shí)代的稚氣，大概也是因?yàn)檫@份青春的氣息加上積極向上樂(lè)于學(xué)習(xí)的態(tài)度，不知道從什么時(shí)候起，設(shè)計(jì)部門(mén)里的同事半調(diào)侃半贊賞地開(kāi)始稱呼她「小優(yōu)同學(xué)」。
早在大三的時(shí)候，出于對(duì) UI設(shè)計(jì)的熱愛(ài)，小優(yōu)同學(xué)已經(jīng)開(kāi)始用自己的 Macbook Pro 一邊學(xué)習(xí)一邊接私單，得益于此，寢室的姐妹也沒(méi)少跟她一起去簋街敞開(kāi)了吃小龍蝦。
畢業(yè)季來(lái)臨，小優(yōu)同學(xué)放棄了并不那么熱愛(ài)的本職專業(yè)，而是向著自己熱愛(ài)的設(shè)計(jì)靠攏。得虧大學(xué)后2年的積累，小優(yōu)同學(xué)被一家20多人的小型創(chuàng)業(yè)公司相中了，由此告別學(xué)生時(shí)代，開(kāi)始 UI設(shè)計(jì)師的職業(yè)生涯。
在過(guò)去的2年時(shí)間里，小優(yōu)同學(xué)每天早上都得跟隨著西二旗洶涌的人流，擠上地鐵，前往位于中關(guān)村善緣街的辦公室。
北京干燥的氣候，堅(jiān)定不移上漲的房租和忙碌緊湊的節(jié)奏，都沒(méi)有成為小優(yōu)同學(xué)的障礙。在 UI設(shè)計(jì)這個(gè)圈子里，小優(yōu)同學(xué)已經(jīng)堅(jiān)定不移地奮斗了4個(gè)年頭，對(duì)于軟件的使用早已熟稔，設(shè)計(jì)的趨勢(shì)，各平臺(tái)的規(guī)范也都了然于胸，產(chǎn)品的需求和客戶的意見(jiàn)再也不會(huì)像剛?cè)肼毜臅r(shí)候那樣讓她手忙腳亂。
是，在最近半年的工作當(dāng)中，小優(yōu)同學(xué)隱約感受到了一絲壓力。參與的設(shè)計(jì)項(xiàng)目越多，越發(fā)清晰地感受到 UI設(shè)計(jì)師這個(gè)職業(yè)上方的玻璃天花板。不是不懂得排版，也不是畫(huà)不好界面，更不是不清楚最新的效果如何實(shí)現(xiàn)，而是發(fā)現(xiàn)自己并不懂得 UI元素背后，真正的原理。
「我知道它們每個(gè)控件的名字，也知道它們大概應(yīng)該在哪，可就是說(shuō)不清楚為什么?！?/p>
這次的項(xiàng)目，小優(yōu)同學(xué)的任務(wù)是要為一個(gè)老產(chǎn)品重新設(shè)計(jì)一整套的控制面板。這個(gè)面向企業(yè)用戶的產(chǎn)品有著相對(duì)復(fù)雜的業(yè)務(wù)邏輯，隨著甲方業(yè)務(wù)的快速變化，這個(gè)產(chǎn)品的界面和功能都要進(jìn)行相應(yīng)的調(diào)整。在重新設(shè)計(jì)控制面板這個(gè)事情上，小優(yōu)同學(xué)開(kāi)始發(fā)現(xiàn)自己的經(jīng)驗(yàn)不夠用了，并不是不會(huì)畫(huà)，而是「不知道為什么」所給她造成的困擾，開(kāi)始影響到了自己的 UI設(shè)計(jì)了。
已經(jīng)是周五的下午4點(diǎn)，面對(duì)著依然半空著的 UI設(shè)計(jì)稿，小優(yōu)同學(xué)焦躁地摁動(dòng)著中性筆頂端的按鈕，一下又一下，設(shè)計(jì)稿看樣子是陷入僵局了。
沉思間，肩膀被人輕輕拍了一下，小優(yōu)同學(xué)回頭，看到了端著馬克杯的盯著她的昱姐。
昱姐是公司的資深交互設(shè)計(jì)師，10多年前就已經(jīng)在做著交互設(shè)計(jì)的活兒，設(shè)計(jì) UI 稱得上是大佬，對(duì)于產(chǎn)品也有著頗為獨(dú)到的見(jiàn)解，目前負(fù)責(zé)公司內(nèi)一個(gè)主要的產(chǎn)品的更新改版。
「看你糾結(jié)好幾天了。碰到問(wèn)題了？」昱姐的左手輕輕搓著馬克杯的杯口邊緣，笑著問(wèn)到。
「是呀，有點(diǎn)無(wú)從下手，不知道為什么，也不知道哪里出了狀況?！顾砷_(kāi)手中的筆，小優(yōu)同學(xué)雙手糾纏。
「不缺這一時(shí)半會(huì)兒，溜達(dá)著，聊聊唄?！龟沤阏f(shuō)道，拍了下小優(yōu)同學(xué)的肩膀，笑著轉(zhuǎn)身帶頭走向門(mén)外。
「好噠~」小優(yōu)同學(xué)意識(shí)大佬又要傳授秘技了，趕緊跟上。
「功夫往往在詩(shī)外。你的疑惑和問(wèn)題可能并不在這個(gè)項(xiàng)目里，答案往往是在其他的地方。」昱姐微微一笑。
美劇里的掌故
「看過(guò)美劇《疑犯追蹤》么？」昱姐掃了一眼正在摸魚(yú)看美劇的前端，下意識(shí)問(wèn)道小優(yōu)同學(xué)。
「當(dāng)然看過(guò)！我喜歡根妹！宅總也很有意思！」聊到自己感興趣的劇，工作上的不快似乎都被撫平了。
「宅總有個(gè)特別有意思的愛(ài)好，還記得么~」昱姐嘴角的弧度里面仿佛藏著什么秘密。
「是收藏什么電腦……」小優(yōu)同學(xué)右手撫摸下巴，遲疑道。
「對(duì)，那個(gè)叫做施樂(lè)之星，最早有著圖形化界面的電腦，誕生于上世紀(jì)70年代中期，之后的蘋(píng)果和微軟的操作系統(tǒng)界面也都是抄襲自這一產(chǎn)品，也算是一次偉大的抄襲吧?！龟沤愣⒅巴猓凵裰杏幸唤z神往。
「最初的圖形化界面的設(shè)計(jì)者當(dāng)中，有人是信息工程學(xué)背景背景，有的會(huì)寫(xiě)程序，也有精通平面設(shè)計(jì)的設(shè)計(jì)師，有鉆研行為學(xué)和心理學(xué)的學(xué)者，各有所長(zhǎng)，從不同的領(lǐng)域匯集起來(lái)，一同創(chuàng)造更為優(yōu)秀的軟硬件，當(dāng)然，還有UI?！?/p>
「如今顯而易見(jiàn)的設(shè)計(jì)，在當(dāng)時(shí)都是參考各個(gè)領(lǐng)域的知識(shí)，從0到1一點(diǎn)點(diǎn)創(chuàng)造和摸索出來(lái)的。最表層的圖形界面，只是諸多領(lǐng)域的一個(gè)視覺(jué)交匯點(diǎn)，它的縱深維度，遠(yuǎn)遠(yuǎn)不止于此?！龟沤愕谋砬橛悬c(diǎn)高深莫測(cè)。
從電影到交互的維度
「你有看過(guò)4D電影嘛，小優(yōu)同學(xué)？」昱姐的思維之飄忽，讓小優(yōu)同學(xué)有點(diǎn)猝不及防。
「誒，你說(shuō)的是那種會(huì)跟著電影場(chǎng)景變化，椅子會(huì)跟著搖動(dòng)或者震動(dòng)，會(huì)噴水的那種4D電影么？」遲疑了一下，小優(yōu)答道。
「對(duì)！其實(shí)這個(gè)東西可以幫你更好的理解你的 UI設(shè)計(jì)和交互。」昱姐喝了一口咖啡，繼續(xù)說(shuō)道：「你所看到的電影字幕和文本，都是一維的，而海報(bào)，電影中平鋪的場(chǎng)景，就是二維的，這個(gè)不難理解。電影院借助3D眼鏡和偏振光，讓你感受到遠(yuǎn)近距離和物體的厚度，這就變成3D的了。那么4D指的是什么呢？對(duì)，是時(shí)空?！?/p>
「UI設(shè)計(jì)中，文本元素是一維的，常見(jiàn)的圖標(biāo)啊圖片啊，UI控件啊，這些都是二維的元素。很多時(shí)候，對(duì)于 UI 的探討還僅僅停留在這個(gè)層面上。UI界面中很多東西會(huì)模擬現(xiàn)實(shí)世界中的實(shí)體，比如帶有光影的按鈕，帶有陰影的卡片，它們會(huì)有實(shí)體一樣的質(zhì)感，這是三維?？墒?，當(dāng)一個(gè) UI元素在動(dòng)效的加持之下會(huì)運(yùn)動(dòng)，它身上就有了時(shí)間的屬性。這就算是四維的了。真要說(shuō)起來(lái)，這真得只能簡(jiǎn)單地歸為 UI 的范疇么？我覺(jué)得，根子是在交互上?！?/p>
「這讓我想起兩個(gè)關(guān)于蘋(píng)果的掌故。一個(gè)有個(gè)年輕人去蘋(píng)果面試，帶著他親手制作的一個(gè)小樣給喬布斯看，他讓底部的 Dock 中的圖標(biāo)隨著光標(biāo)的移動(dòng)而出現(xiàn)縮放的動(dòng)態(tài)效果，點(diǎn)擊之后圖標(biāo)會(huì)靈活地彈跳，他因此而入職蘋(píng)果，并且隨后負(fù)責(zé)了 Mac系統(tǒng)中這一功能的開(kāi)發(fā)?！?/p>
「這個(gè)我太熟悉了?！贡旧砭褪?Mac 用戶的小優(yōu)同學(xué)感嘆道：「所以動(dòng)效實(shí)際上是增加了時(shí)間維度的 UI元素對(duì)吧？」
「可以這么說(shuō)，但是還不止。」昱姐說(shuō)道：「通過(guò)合理的設(shè)計(jì)，你還能通過(guò)合理的設(shè)計(jì)感知到重量！」
「那是怎么實(shí)現(xiàn)的？！」小優(yōu)同學(xué)瞪大了眼睛。
「這就是另外一個(gè)故事了。早在80年代，開(kāi)發(fā)最早的 Macintosh 系統(tǒng)的時(shí)候，有位工程師就開(kāi)發(fā)過(guò)一個(gè)特別有意思功能，當(dāng)用戶把文件拖到一個(gè)文件夾的時(shí)候，會(huì)根據(jù)文件大小，系統(tǒng)發(fā)出不一樣大的聲音，大文件放進(jìn)去會(huì)發(fā)出更為沉重的聲音，而小文件放進(jìn)文件夾的時(shí)候，會(huì)在聲音上作出更輕巧的回應(yīng)，這樣一來(lái)，用戶就能感知到文件的大小重量了！」
「所以，UI設(shè)計(jì)的根源要往交互上找。但是僅僅了解交互的維度是不夠的。這個(gè)時(shí)候該祭出喬幫主的名言了：」
「設(shè)計(jì)不只關(guān)乎外觀和感覺(jué)，設(shè)計(jì)需要洞悉產(chǎn)品運(yùn)作的原理。」
「這句話我聽(tīng)過(guò)！」小優(yōu)同學(xué)開(kāi)始對(duì)這句話有更深入的理解。
「對(duì)，交互設(shè)計(jì)根本上是關(guān)于人的科學(xué)，需要設(shè)計(jì)師了解人的心理和行為，也要明白事物運(yùn)作的規(guī)律。懂得交互，就能夠更好地將人和數(shù)字界面真正連接到一起。如今在設(shè)計(jì)行業(yè)當(dāng)中，有許多職位都強(qiáng)調(diào)要懂得用戶體驗(yàn)，而用戶體驗(yàn)本質(zhì)上也是關(guān)于交互，關(guān)于人的。從根源上掌握設(shè)計(jì)的脈絡(luò)，UI設(shè)計(jì)師，UX設(shè)計(jì)師，產(chǎn)品設(shè)計(jì)師，產(chǎn)品經(jīng)理，這些都只是頭銜?！?/p>
「就是說(shuō)，我要知其然，也要知其所以然才行！」小優(yōu)同學(xué)高興道~
設(shè)計(jì)要回歸基礎(chǔ)
「在70年代之前，電腦沒(méi)有界面，靠的是小紙條來(lái)輸入輸出內(nèi)容。在80年代到新世紀(jì)，圖形化界面逐步占據(jù)主流，以鼠標(biāo)和鍵盤(pán)為主的交互，而如今的我們，已經(jīng)隨著 iPhone 的誕生，手指觸摸成為主要交互手段。 」
「這有什么問(wèn)題嗎？」小優(yōu)同學(xué)聽(tīng)出昱姐似乎要拋出什么重要的論調(diào)。
「如今移動(dòng)端交互是主流。對(duì)于許多00后而言，他們自出生之后就有 iPad 和大屏手機(jī)相伴，而從事 UI、交互、產(chǎn)品的從業(yè)者，入行的時(shí)候，iOS 和安卓已經(jīng)是最主要的平臺(tái)，甚至它們就是一切。想想看，你開(kāi)始學(xué)習(xí)設(shè)計(jì)的時(shí)候，真的去追溯過(guò) UI設(shè)計(jì)的根源么？更多的恐怕只是圖形元素和界面控件之間的排列組合吧？」
「大概就是這個(gè)樣子……」小優(yōu)同學(xué)忍不住撓了撓頭，不好意思地笑了。
「先進(jìn)的平臺(tái)賦予你更高遠(yuǎn)的視野，可是距離扎實(shí)的大地，就更遠(yuǎn)了。但是身為設(shè)計(jì)師，恰恰是需要回歸基本，才能讓設(shè)計(jì)走心又走腎。再高級(jí)的海報(bào)設(shè)計(jì)，都是從基本的平面構(gòu)成開(kāi)始的，功夫無(wú)非是一橫一豎，好的 UI設(shè)計(jì)的基礎(chǔ)不止是懂得軟件的運(yùn)用，還要懂得人的心理和行為，以及事物運(yùn)作的規(guī)律，通常，我們常常簡(jiǎn)單稱之為交互?！龟沤阈Φ?。
流程的力量
「我們現(xiàn)在常說(shuō)的用戶體驗(yàn)設(shè)計(jì)，也是交互設(shè)計(jì)的一個(gè)部分。你想讓你的 UI 更加優(yōu)秀，自然也是希望 UI 的體驗(yàn)也足夠好是吧？」
「我當(dāng)然想要我的 UI 用戶體驗(yàn)更好啦！所以我要怎么做？」小優(yōu)同學(xué)覺(jué)得沒(méi)帶個(gè)小本子出來(lái)真是失策。
「一個(gè)合理的設(shè)計(jì)，通常不是簡(jiǎn)單的 UI 排列組合，這個(gè)已經(jīng)說(shuō)過(guò)了。按照現(xiàn)代數(shù)字產(chǎn)品設(shè)計(jì)的成熟流程，我們會(huì)劃分出前后5個(gè)不同的層級(jí)，從前到后分別是戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。UI設(shè)計(jì)師輸出的界面應(yīng)該算是最后面的表現(xiàn)層的產(chǎn)物，如果沒(méi)有前面四層打好基礎(chǔ)，自然就沒(méi)法在最后輸出好的設(shè)計(jì)啦。」昱姐看了下喝空的咖啡杯，將杯子順手?jǐn)R在窗臺(tái)上。
「整個(gè)構(gòu)建過(guò)程當(dāng)中，交互設(shè)計(jì)師幾乎是全程參與，貫穿始終。在產(chǎn)品立項(xiàng)初期，交互設(shè)計(jì)師需要協(xié)同產(chǎn)品經(jīng)理、用研和公司高層，一同敲定戰(zhàn)略層和范圍層，也就是產(chǎn)品的方向和基本的功能特性，在用戶研究等支撐信息的幫助下，協(xié)同產(chǎn)品經(jīng)理，完成需求文檔的構(gòu)建。此后，確定目標(biāo)用戶，不斷了解用戶的特征、喜好、行為模式，轉(zhuǎn)化需求為低保真原型，隨后搭建信息架構(gòu)，梳理產(chǎn)品流程，完成頁(yè)面原型，隨后協(xié)同 UI設(shè)計(jì)，完成高保真 UI 效果圖。當(dāng)然，這些你大概都是了解的。」昱姐如數(shù)家珍地說(shuō)出了交互設(shè)計(jì)師的工作職能。
「所以，我想要繼續(xù)進(jìn)步，得從交互開(kāi)始了？」小優(yōu)同學(xué)感覺(jué)像是被醍醐灌頂了。
