資訊大雜燴: 進退失據的UI設計，到底需要什麼做靈魂

小優同學其實已經畢業2年了，青春無敵的面龐依然留有一點學生時代的稚氣，大概也是因為這份青春的氣息加上積極向上樂於學習的態度，不知道從什麼時候起，設計部門裏的同事半調侃半讚賞地開始稱呼她「小優同學」。

早在大三的時候，出於對 UI設計的熱愛，小優同學已經開始用自己的 Macbook Pro 一邊學習一邊接私單，得益於此，寢室的姐妹也沒少跟她一起去簋街敞開了吃小龍蝦。

畢業季來臨，小優同學放棄了並不那麼熱愛的本職專業，而是向着自己熱愛的設計靠攏。得虧大學後2年的積累，小優同學被一家20多人的小型創業公司相中了，由此告別學生時代，開始 UI設計師的職業生涯。

在過去的2年時間裏，小優同學每天早上都得跟隨著西二旗洶涌的人流，擠上地鐵，前往位於中關村善緣街的辦公室。

北京乾燥的氣候，堅定不移上漲的房租和忙碌緊湊的節奏，都沒有成為小優同學的障礙。在 UI設計這個圈子裏，小優同學已經堅定不移地奮鬥了4個年頭，對於軟體的使用早已熟稔，設計的趨勢，各平臺的規範也都瞭然於胸，產品的需求和客戶的意見再也不會像剛入職的時候那樣讓她手忙腳亂。

是，在最近半年的工作當中，小優同學隱約感受到了一絲壓力。參與的設計專案越多，越發清晰地感受到 UI設計師這個職業上方的玻璃天花板。不是不懂得排版，也不是畫不好介面，更不是不清楚最新的效果如何實現，而是發現自己並不懂得 UI元素背後，真正的原理。

「我知道它們每個控制元件的名字，也知道它們大概應該在哪，可就是說不清楚為什麼。」

這次的專案，小優同學的任務是要為一個老產品重新設計一整套的控制面板。這個面向企業使用者的產品有著相對複雜的業務邏輯，隨著甲方業務的快速變化，這個產品的介面和功能都要進行相應的調整。在重新設計控制面板這個事情上，小優同學開始發現自己的經驗不夠用了，並不是不會畫，而是「不知道為什麼」所給她造成的困擾，開始影響到了自己的 UI設計了。

已經是週五的下午4點，面對著依然半空著的 UI設計稿，小優同學焦躁地摁動著中性筆頂端的按鈕，一下又一下，設計稿看樣子是陷入僵局了。

沉思間，肩膀被人輕輕拍了一下，小優同學回頭，看到了端著馬克杯的盯著她的昱姐。

昱姐是公司的資深互動設計師，10多年前就已經在做著互動設計的活兒，設計 UI 稱得上是大佬，對於產品也有著頗為獨到的見解，目前負責公司內一個主要的產品的更新改版。

「看你糾結好幾天了。碰到問題了？」昱姐的左手輕輕搓著馬克杯的杯口邊緣，笑著問到。

「是呀，有點無從下手，不知道為什麼，也不知道哪裏出了狀況。」鬆開手中的筆，小優同學雙手糾纏。

「不缺這一時半會兒，溜達著，聊聊唄。」昱姐說道，拍了下小優同學的肩膀，笑著轉身帶頭走向門外。

「好噠~」小優同學意識大佬又要傳授祕技了，趕緊跟上。

「功夫往往在詩外。你的疑惑和問題可能並不在這個專案裡，答案往往是在其他的地方。」昱姐微微一笑。

美劇裡的掌故

「看過美劇《疑犯追蹤》麼？」昱姐掃了一眼正在摸魚看美劇的前端，下意識問道小優同學。

「當然看過！我喜歡根妹！宅總也很有意思！」聊到自己感興趣的劇，工作上的不快似乎都被撫平了。

「宅總有個特別有意思的愛好，還記得麼~」昱姐嘴角的弧度裏面彷彿藏著什麼祕密。

「是收藏什麼電腦……」小優同學右手撫摸下巴，遲疑道。

「對，那個叫做施樂之星，最早有著圖形化介面的電腦，誕生於上世紀70年代中期，之後的蘋果和微軟的作業系統介面也都是抄襲自這一產品，也算是一次偉大的抄襲吧。」昱姐盯著窗外，眼神中有一絲神往。

「最初的圖形化介面的設計者當中，有人是資訊工程學背景背景，有的會寫程式，也有精通平面設計的設計師，有鑽研行為學和心理學的學者，各有所長，從不同的領域彙集起來，一同創造更為優秀的軟硬體，當然，還有UI。」

「如今顯而易見的設計，在當時都是參考各個領域的知識，從0到1一點點創造和摸索出來的。最表層的圖形界面，只是諸多領域的一個視覺交匯點，它的縱深維度，遠遠不止於此。」昱姐的表情有點高深莫測。

從電影到互動的維度

「你有看過4D電影嘛，小優同學？」昱姐的思維之飄忽，讓小優同學有點猝不及防。

「誒，你說的是那種會跟著電影場景變化，椅子會跟著搖動或者震動，會噴水的那種4D電影麼？」遲疑了一下，小優答道。

「對！其實這個東西可以幫你更好的理解你的 UI設計和互動。」昱姐喝了一口咖啡，繼續說道：「你所看到的電影字幕和文字，都是一維的，而海報，電影中平鋪的場景，就是二維的，這個不難理解。電影院藉助3D眼鏡和偏振光，讓你感受到遠近距離和物體的厚度，這就變成3D的了。那麼4D指的是什麼呢？對，是時空。」

「UI設計中，文字元素是一維的，常見的圖示啊圖片啊，UI控制元件啊，這些都是二維的元素。很多時候，對於 UI 的探討還僅僅停留在這個層面上。UI介面中很多東西會模擬現實世界中的實體，比如帶有光影的按鈕，帶有陰影的卡片，它們會有實體一樣的質感，這是三維。可是，當一個 UI元素在動效的加持之下會運動，它身上就有了時間的屬性。這就算是四維的了。真要說起來，這真得只能簡單地歸為 UI 的範疇麼？我覺得，根子是在互動上。」

「這讓我想起兩個關於蘋果的掌故。一個有個年輕人去蘋果面試，帶著他親手製作的一個小樣給喬布斯看，他讓底部的 Dock 中的圖示隨著游標的移動而出現縮放的動態效果，點選之後圖示會靈活地彈跳，他因此而入職蘋果，並且隨後負責了 Mac系統中這一功能的開發。」

「這個我太熟悉了。」本身就是 Mac 使用者的小優同學感嘆道：「所以動效實際上是增加了時間維度的 UI元素對吧？」

「可以這麼說，但是還不止。」昱姐說道：「通過合理的設計，你還能通過合理的設計感知到重量！」

「那是怎麼實現的？！」小優同學瞪大了眼睛。

「這就是另外一個故事了。早在80年代，開發最早的 Macintosh 系統的時候，有位工程師就開發過一個特別有意思功能，當用戶把檔案拖到一個資料夾的時候，會根據檔案大小，系統發出不一樣大的聲音，大檔案放進去會發出更為沉重的聲音，而小檔案放進資料夾的時候，會在聲音上作出更輕巧的迴應，這樣一來，使用者就能感知到檔案的大小重量了！」

「所以，UI設計的根源要往互動上找。但是僅僅瞭解互動的維度是不夠的。這個時候該祭出喬幫主的名言了：」

「設計不只關乎外觀和感覺，設計需要洞悉產品運作的原理。」

「這句話我聽過！」小優同學開始對這句話有更深入的理解。

「對，互動設計根本上是關於人的科學，需要設計師瞭解人的心理和行為，也要明白事物運作的規律。懂得互動，就能夠更好地將人和數字介面真正連線到一起。如今在設計行業當中，有許多職位都強調要懂得使用者體驗，而使用者體驗本質上也是關於互動，關於人的。從根源上掌握設計的脈絡，UI設計師，UX設計師，產品設計師，產品經理，這些都只是頭銜。」

「就是說，我要知其然，也要知其所以然才行！」小優同學高興道~

設計要回歸基礎

「在70年代之前，電腦沒有介面，靠的是小紙條來輸入輸出內容。在80年代到新世紀，圖形化介面逐步佔據主流，以滑鼠和鍵盤為主的互動，而如今的我們，已經隨著 iPhone 的誕生，手指觸控成為主要互動手段。」

「這有什麼問題嗎？」小優同學聽出昱姐似乎要丟擲什麼重要的論調。

「如今移動端互動是主流。對於許多00後而言，他們自出生之後就有 iPad 和大屏手機相伴，而從事 UI、互動、產品的從業者，入行的時候，iOS 和安卓已經是最主要的平臺，甚至它們就是一切。想想看，你開始學習設計的時候，真的去追溯過 UI設計的根源麼？更多的恐怕只是圖形元素和介面控制元件之間的排列組合吧？」

「大概就是這個樣子……」小優同學忍不住撓了撓頭，不好意思地笑了。

「先進的平臺賦予你更高遠的視野，可是距離紮實的大地，就更遠了。但是身為設計師，恰恰是需要回歸基本，才能讓設計走心又走腎。再高階的海報設計，都是從基本的平面構成開始的，功夫無非是一橫一豎，好的 UI設計的基礎不止是懂得軟體的運用，還要懂得人的心理和行為，以及事物運作的規律，通常，我們常常簡單稱之為互動。」昱姐笑道。

流程的力量

「我們現在常說的使用者體驗設計，也是互動設計的一個部分。你想讓你的 UI 更加優秀，自然也是希望 UI 的體驗也足夠好是吧？」

「我當然想要我的 UI 使用者體驗更好啦！所以我要怎麼做？」小優同學覺得沒帶個小本子出來真是失策。

「一個合理的設計，通常不是簡單的 UI 排列組合，這個已經說過了。按照現代數字產品設計的成熟流程，我們會劃分出前後5個不同的層級，從前到後分別是戰略層，範圍層，結構層，框架層，表現層。UI設計師輸出的介面應該算是最後面的表現層的產物，如果沒有前面四層打好基礎，自然就沒法在最後輸出好的設計啦。」昱姐看了下喝空的咖啡杯，將杯子順手擱在窗臺上。

「整個構建過程當中，互動設計師幾乎是全程參與，貫穿始終。在產品立項初期，互動設計師需要協同產品經理、用研和公司高層，一同敲定戰略層和範圍層，也就是產品的方向和基本的功能特性，在使用者研究等支撐資訊的幫助下，協同產品經理，完成需求文件的構建。此後，確定目標使用者，不斷了解使用者的特徵、喜好、行為模式，轉化需求為低保真原型，隨後搭建資訊架構，梳理產品流程，完成頁面原型，隨後協同 UI設計，完成高保真 UI 效果圖。當然，這些你大概都是瞭解的。」昱姐如數家珍地說出了互動設計師的工作職能。

「所以，我想要繼續進步，得從互動開始了？」小優同學感覺像是被醍醐灌頂了。

「你說呢？」昱姐微笑道：「有空來聽我的課吧。」