平面如何轉UI/UX

我是一枚平凡的不能再平凡的雜草級設計師，因為不是大神級的人物，當時轉行到入行也經歷了挺多的思想鬥爭和難關。所以我有對這行的理解和經驗總結可以分享一下，方便大家做參考和避免一些彎路。

我的背景

設計等級：設計小渣

入行時間：1.5年

轉行過程是：平面 → UI/UX → UX

我本科平面設計，因為偶然的機會接觸了些UI設計，並對它產生了濃厚的興趣。研究生時期，聽說學校有專門學習app設計的專業，於是毅然決然的轉了。後來發現，這專業不僅僅要學習UI，還有UX、用研、前端代碼等其他方面的課程。畢業後選擇了從事UI、UX方面的工作，但發現自己更喜歡UX。現在在一家2B產品研發公司負責CRM以及營銷相關的後台系統的UX設計。

產品設計基本流程

調研 → 需求導圖 → UX交互原型 → UI界面視覺圖 → 開發（前端、後端、數據）→ 測試 → 上線

什麼是UI/UX

具體的專業定義我就不說了，網上很多，我主要介紹下我自己對這兩個領域的理解以及他們的關係

UI和UX的關係

從以上信息可以得知，相比UI，UX涉及面廣，邏輯性強，由於對接部門比較多，設計師需要有較強的溝通技能。但是這並不是意味著UI就不重要。

那麼UI和UX到底有著怎樣的關係呢？

從產品角度來說，UI和UX屬於相輔相成的好基友關係，誰缺了誰都不行！個人覺得也有點類似前端和後端的關係。

它兩都是產品由概念到上線的重要組成部分。有了好的交互卻沒有好的視覺，或是有了好的視覺卻缺少了好的交互，這樣設計出來的產品絕對不是個好產品。

為什麼這麼說呢？我來打個接地氣的比方：如果把一個產品比喻成一個人的話，那麼UI就是皮膚、五官等外貌組成部分，決定你長得怎麼樣；UX就是五臟六腑、骨骼、血管等一系列你看不到但又不可或缺的部分，他們決定你生理機能是否能正常運作、是否健康。你能說一個人的組成部分可以只要前者或者只要後者嗎？缺少了哪個部分或組件，這個人都是殘缺的，當然誰都希望自己是健康的。在這個看顏值的社會，如果能長的好看當然就更受歡迎啦！

從設計師角度來說，不管是UI還是UX設計師雖然設計側重點不一樣，但應同時具備UI和UX的技能。為什麼呢？這要從交互原型圖開始說起！

交互原型圖是UX設計師以黑白灰為主色調的可交互界面產出物。主要作用是展示頁面信息布局，同時儘可能地模擬用戶和界面之間的互動場景，好的原型圖甚至可以直接操作。如果UX設計師的視覺技能比較好，就能更清楚的傳達給UI關於交互的方式、信息層級關係等重要內容，避免UI在設計時的誤解，那麼可以減小UI返工和修改的工程量。同時也能更好的還原產品真實度，方便做用戶體驗測試。

但是並不是所有UX設計師都具備良好的視覺技能，所以UI也需要有一定的UX知識。因為當你拿到一份交互原型開始設計UI時，你也可以用你的理解去判斷交互設計的合理性，如果不合理及時跟對接人溝通進行優化；也能更好的從用戶體驗角度出發去設計界面。同時也可以避免一些一味追求視覺美觀，而忽略了用戶體驗，在沒溝通的情況下把交互設計亂改一通的情況出現。

如果UX能把原型圖視覺表達的更清楚，而UI能更好的理解，並以UX角度出發去做設計，那麼這樣工作效率和產品質量都會非常高。

平面如何轉UI/UX

1.設計思維的轉變

平面：通常屬於感性思維，美觀站主導地位，他們的目的是使用一切辦法讓輸出物擁有較高的顏值，雖很多也為甲方服務，但設計角度多以自己的審美出發

UX：通常屬於理性思維，用戶體驗佔主導地位，因為他們的設計角度永遠以用戶的角度出發，而不是自己

UI：則是介於兩者之間，需要有感性的一面，也需要有理性的一面，因為他們的設計即要以用戶角度出發，又要以自己審美角度出發去設計。但是用戶體驗永遠高於顏值展現。

所以不管你是要轉UI還是UX，都要學會換位思考，設計的時候更重多的是考慮「用戶操作簡不簡單，方不方便，邏輯合不合理」，不要只是想好不好看。當你在設計時，要多多考慮用戶的基本認知、操作習慣、使用場景等方面。

我在接觸UI/UX的初期，就是太注重產品好不好看，可能是平面背景的原因，對設計有了思維定式。但是在做用戶測試的時候發現，他們往往不太喜歡我做的產品，因為不好用。一開始他們確實會被好看的視覺吸引，但是當他們開始使用的時候，其實很少會去在意好不好看，更多的是在意好不好用。就像我的產品，他們找不到需要的功能、流程太複雜、信息太混亂等等都是不好用的原因。

那麼UI/UX在實際設計時到底要注意哪些呢？我來舉個實例：就拿最常見的詳情頁和編輯頁的主要操作按鈕來說。由這兩張有贊截圖可以發現，編輯頁的操作按鈕放在頁面下面，而基本信息的操作按鈕在頁面上面，並且三種按鈕三種樣式。這是為什麼呢？

從UX角度來說，當用戶在編輯資料的時候，方向是從上到下的垂直填寫，當填完最後一項的時候，會很慣性的往下找按鈕點擊，並且兩者間的移動距離較短。如果把按鈕放到頁面上面的話，那麼用戶的視線和操作方向先從上到下，再從下到上，並且填寫的最後一項離按鈕較遠。兩者相比，是不是第一種體驗更好呢？而在詳情頁的按鈕在頁面上面且跟區塊標題對齊的原因是該頁面只能對「基本信息」這一個區塊進行修改，其他區塊都是不能編輯的。還有一個原因是基本所有的詳情頁中的編輯位置都在頁面上方，所以凡是「編輯」按鈕，用戶就會潛意識的知道去頁面上方找。

從UI角度來說，在編輯頁面里，點擊「確定」的頻率會遠遠高於點擊「取消」的頻率，所以「確定」為主按鈕，需要在視覺上突出；而「取消」為次按鈕，設計樣式的時候就應該弱化處理。這裡又會出現一個問題，為什麼點擊「確定」頻率就一定高於「取消」！假設你是用戶，只有當你在詳情頁點擊「編輯」時才會進入編輯頁面，那麼什麼情況下會點擊「編輯」呢？一般情況下是你確定你有某個信息需要修改，否則你為什麼要去點「編輯」呢？由於用戶的目標需求而有了以上的設計理由。並且一般當兩個按鈕同時出現時，強調積極含義按鈕「確定、保存等」，弱化消極含義的按鈕（刪除、取消等）。

那麼這時候你是不是想問為什麼詳情頁中的編輯樣式又不一樣了？原因很簡單，就是場景目的不一樣！在編輯頁里，按鈕是主角，因為只有按了按鈕之後，該頁所做的操作才能生效；而在詳情頁中，查看信息才是用戶的目的。只有當查看時候發現信息錯誤時，才會去編輯修改。但是難道你每次進去查看信息的時候都需要修改嗎？明顯不是！當你點擊編輯按鈕時，不會立馬對頁面產生結果。所以詳情頁中的「編輯」按鈕是非常輕量級的信息，需要比「取消」更弱化。

發現了嗎？這麼簡單又常用的按鈕，在設計的時卻要考慮這麼多事情。所有UI/UX的設計都是需要有理有據的，每個細節都要推敲再推敲！這也是為什麼現在招聘UI時，還要看你懂不懂交互。因為UI不僅僅是對視覺的設計，從某種層度上來說也是對交互的二次設計。兩者都會影響用戶體驗。

2.工作模式的轉變

①需要積極主動溝通

通常一個平面設計師都是獨立完成一個海報、廣告、VI等項目設計。在設計過程中，較少涉及跨部門的團隊合作。但UI/UX不一樣，UI/UX只是產品在設計過程中的某個環節而已，所以項目都是團隊合作型。

不管是部門內部還是跨部門，積極主動的溝通都是非常重要的。這樣可以提高工作效率，也能避免不必要的麻煩。

如果在設計的時候理解的內容不準確或者風格不統一，後期的修改量會非常的大。有的修改是牽一髮而動全身，涉及的不僅僅是你一個人，而且是一個部門或者是多個部門。就像我現在在做的一個項目，四個交互設計師同時在做，但是當我們在後來看稿的時候發現編輯頁的相同功能的按鈕，有人是「確定」，有人是「保存」；有人按鈕大一點，有人按鈕小一點。後來為了統一我們內部現有頁面不一樣的地方，我們花了兩天時間。如果在一開始就能及時溝通統一的話，後期修改量會大大減小。

②產品永遠不會有完成的一天

在做平面的時候，當你設計完一套海報、廣告、VI等項目並交付出去時，那麼就意味著這個項目就完成了，你就會開始設計其他新的

任務了。但是對於互聯網產品來說，設計永遠不會有完成的一天。因為這類產品是需要不斷優化迭代才能走的更遠。就像建造房子一樣，是分一期項目、二期項目等。一期時候上線功能少，處於市場試水階段。二期時候除了優化一期的功能，還要加入新的功能更好的滿足用戶的需求。以此類推，所以當你剛做完一個功能的時候，可能你下一個項目就是優化這些功能。

就像我剛進這個公司做的第一個項目是優化老版本的電子券創建和投放流程。由於現有電子券種類無法滿足市場需求，所以還要設計新種類的電子券創建頁面已經裡面的微交互。當我完成之後，我的第二個項目就是整個後台系統的大改版。由於我對老版本的電子券模塊已經很熟悉了，所以我需要做的就是結合改版後的後台系統繼續優化電子券模塊。雖然一直都在做這塊，但是現在這版的使用流程比最早的那個版本更簡單更清楚。下圖是電子券模塊優化前後的流程圖。

怎麼準備入門作品集

作品集代表你的專業度，直接影響你能不能拿到面試，有時候還會影響到你談薪資。UI/UX的作品集的準備跟平面很不一樣。對於平面來說，作品展示越多越好，動態的、靜態的、2d、3d等，作品越多代表你的技能越多，屬於水平領域的展示。而UI/UX則是越專一越好，越專一代表你越專業！屬於垂直領域的展示。

互聯網產品分2b、2c、移動端、pc端、ios系統、安卓系統等方面，需要針對性的準備作品。如果你要找2b設計職位，那就需要多準備點跟2b有關的設計。我之前拿到過一個專門設計安卓app公司的面試，但由於我作品集里都是跟ios相關的作品，所以面試就掛了。

平面→UI：作品集里應該更多的展示一些跟UI有關的作品，平面作品放一兩個有代表性的就好。如果你的平面作品過多，別人會以為你更多想找的是平面而不是UI，並且覺得你的專業度不夠，那麼在投簡歷的時候就有可能被刷掉。每個作品也需要好好設計一下，因為UI屬於視覺設計，所以作品顏值度很重要。一般UI作品展示主要分以下幾大塊：產品背景介紹、icon設計、頁面以及頁面中的細節設計等。具體怎麼做可以去behance、dribbble、站酷等專業網站看看大神們是怎麼設計作品的。

平面→UX：作品集里多放點跟UX相關的作品。不過跟UI不一樣的是，UX需要展示作品的製作思路過程。例如：用戶的痛點/產品的需求是什麼，你的解決方法是什麼的，你是怎麼設計流程的等等。具體怎麼做可以戳這個鏈接，裡面非常詳細的介紹了交互設計作品集應該準備哪些內容。寫的非常好，我當時準備的時候也是參照這個的。

我在剛畢業準備作品集的時候，12個作品裡面放了一半UI/UX作品，一半平面作品。對於UI/UX作品，我只是放了些界面截圖，並沒有其他的文字說明和一些細節展示，只是跟展示海報、logo那樣展示了我的UI/UX作品。當時拿著這個作品集投了一段時間的簡歷，發現都石沉大海。後來根據朋友的建議和看了相關的帖子，我把作品集大改了一下。一共8個作品，2個跟排版有關的平面作品，6個都是UI/UX的，並且增加了細節頁面、寫了相關文字說明，清楚的解釋了作品的背景和設計的過程。作品集是不可能一次就能改到自己滿意的，需要不斷的調整。這次的大改，我前前後後修改了N次，並在修改期間一直在投簡歷。後來面試就越來越多了。

怎麼準備面試

我面試失敗經歷比較多（T-T），所以有了以下的總結：

對於第一次找UI/UX工作的人來說，千萬別把中意的公司放在前面去投。先隨便投了幾個公司先試試水，當面了幾家以後，發現面試是有套路的，每家公司問的問題都差不多，來來回回就那幾個，例如選一個你最滿意的作品介紹下，你是怎麼定位你自己的，你為什麼會投我們家等等。針對這些普遍性的問題去網上看看別人怎麼回答的，再結合自己實際情況稍作修改。除了準備個人問題，還要調查下公司的背景資料和主要產品。一來是為面試做更好的準備，二來能幫你對這個平台和以後的發展空間有個更好的判斷。

做足了功課，再去投你心儀的公司，那麼成功率就會高很多。當然還要看你臨場發揮能力，如果自己表達能力不夠好或者有面試恐懼症的人，建議還是提前準備比較好，畢竟機會是留給有準備的人的！

我在上面提到我面試失敗的那家公司是我最早面試的公司之一，當時沒有太多面試經驗也沒有什麼工作經驗，外加也沒好好準備，就去面試了。去了知道那公司挺是專門做安卓方面的app的，面試時候也被很多問題問懵逼了，尤其是問到跟安卓有關的問題。其實我都沒怎麼用過安卓系統，去前也沒好好研究過。所以結果可想而知。如果把這家公司放在後面一點面試，雖然沒有相關作品，但是如果提前做好一些資料準備，研究下安卓系統，會不會結果不一樣呢？

-------------------------------------------------------------------------------------------

以上是我作為一個還沒入行太久的初級設計師的一些理解和經驗的分享，希望能讓正要轉行的你有些了解，也預祝你能成功轉行。因為第一次寫，如有說的不正確的地方請同行前輩們多多海涵及時提出哈~

推薦閱讀：