進退失據的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 效果圖。當然，這些你大概都是了解的。」昱姐如數家珍地說出了交互設計師的工作職能。

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

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

報名方式（QQ號 2446255072），添加大課堂客服娜娜：