[心得] 聽說你想成為UI/UX設計師（一） - 看板Salary

薪水版的大家聖誕節快樂，在年末換工作潮的當下，想挑戰UIUX職缺的各位是否也有 ... 在回答這些問題之前，我必須要先強調一下： 不是每一間公司對於UI/UX設計師職位的 ... PTT職涯區 即時熱門文章 24小時內熱門文章 最新文章 熱門看板 看板列表 我的收藏 最近瀏覽 mdi-account 批踢踢PTT搜尋引擎 PTT職涯區/ Salary(工作職場) [心得]聽說你想成為UI/UX設計師（一）＋收藏分享看板Salary(工作職場)作者VPatsy(Patsy)時間1年前發表(2020/12/2514:42),編輯推噓8(8推0噓2→)留言10則,9人參與,1年前最新討論串1/1 薪水版的大家聖誕節快樂，在年末換工作潮的當下，想挑戰UIUX職缺的各位是否也有諸多憧憬或迷惘呢？這篇是今年三月就寫好的，但尚未在這裡發布過。

剛經歷第一次跳槽，在密集面試後終於有個結果，喘口氣的同時，來分享一下此文，希望可以回饋給版友們。

網誌好讀版 http://enntang.com/ui-ux-designer-tips-before-start/ 自從UI/UX設計師工作滿一年心得發布後，詢問如何自學成為UI/UX設計師的來信非常多，其實我真的很惶恐XD因為我才剛進新手村，網路上厲害的前輩們也已經撰寫非常多文章可以引大家入門，我只能貢獻出一點點小心得，希望能給提問的網友、或是對UI/UX有興趣，卻不知怎麼提問來更加了解這個行業的人一點小小幫助。

在回答這些問題之前，我必須要先強調一下： 不是每一間公司對於UI/UX設計師職位的要求都一樣，而職稱也不一定完全反應工作內容； 公司的要求也不該侷限你對自己的要求。

如果你曾經在台灣任職過設計相關工作，一定很清楚：只要是跟「設計」相關的，很容易出現明明應徵一個平面設計職位，卻要幫忙切網頁或是兼作企劃的狀況，更別提奇怪的行政美編這種擺明就是要你去打雜的職缺了。

UI/UX的狀況比上述稍微好一點，但眾多職缺當中還是有許多混亂不易弄清的地方。

###UI與UX傻傻分不清？ 雖然我們常把UI/UX放在一起講，其實UI和UX指的是不同的工作階段，下面這張圖我認為是可以很好地說明他們在開發流程中所擔綱的角色： http://enntang.com/wp-content/uploads/2020/03/ux-vs-ui-dev-skills-expanded.png 出處：ThedifferencebetweenaUXDesignerandUIDeveloper 在圖中，我們可以看到在一個網站或是APP的開發過程中，UX注重的是資訊設計、調查研究，常與問卷和訪談為伍，並要對使用者的回饋提出良好的解決方案，確保整體流程符合好的使用者體驗；UI則注重視覺並跨足到前端工程（但事實上不用太深入），UI設計師得不斷琢磨畫面如何又美觀、又能正確引導使用者的操作。

而他們兩者在交互設計上是重疊的。

但是只有在規模比較大、編制較為複雜的公司，才會分開成UI設計師、UX設計師兩種不同職位。

台灣的中小企業、接案公司與新創公司數量龐大，員工也較容易一人分飾多角，加上雇主不見得區分得清楚這兩者的差別，將UI/UX放在一起的職缺比比皆是，甚至把網頁設計師或前端工程師與之混為一談的也很多啊！此外，一般來說由PM（產品經理）負責的需求分析、客戶溝通等等工作，在小公司往往也都落在UI/UXdesigner身上… 可以參考ReiHuang的文章：你是做UI的，那懂不懂UX?（https://heywesley.wordpress .com/2016/04/23/ui-designer-know-about-ux/）有令人會心一笑的見解。

###我真的什麼都要會嗎？ 其實也不能說雇主們是錯的，畢竟大環境下形成的產業生態，造成現在設計師什麼都要會一點的狀況；這對就職者來說也不一定是壞事，我們更有機會在多方接觸的時候，摸索出自己真正有興趣的領域，思考自己想選擇哪條路去鑽研，或是開心地當一個跨領域設計師。

當然如果顯然公司就是要你打雜，這就母湯了！青春有限啊孩子！出社會後每一年都是打穩根基、學習專業知識的重點時機，如果一直浪費時間在亂點技能樹（或濫竽充數）都是在扼殺自己升遷或是往理想職缺邁進的機會，在資訊業，你不主動進步，就是等著自己被後浪推到沙灘上，很可怕的。

所以，問題回到「如何自學成為UI/UX設計師」，我認為必須先調查清楚自己想要任職的公司/職位，要求的範圍究竟只專注於UIDesign，還是要求UI與UX兼具？是否要求前端程式語言？先知道目標的要求，才能把有限的資源集中在刀口上，並訂定有效的學習計畫。

或是提早逃離火坑（刪除線） 當然，其實我鼓勵要入行的朋友，同時接觸UI、UX、網頁前端程式語言三者的入門知識，然後依照職缺要求或是自己的特質調配你的能力雷達圖。

例如你的目標職缺若較注重UI視覺設計，那麼將後面兩者的學習比例減輕，了解必要概念即可。

如果職缺強調的是程式的實作，或職缺就叫做「網頁設計師」，那當然除了了解RWD原理外，一定會熟稔前端語言。

###建立屬於你自己的能力雷達圖 http://enntang.com/wp-content/uploads/2020/03/UIUX%E5%88%86%E5%B7%A5%E5%9C%96- 02-2-1024x918.png 我目前的能力雷達圖 我認為以下這六點是UI/UX設計師最重要的技能： （一）使用者介面設計 也就是UI設計，懂得運用視覺設計原理，安排、製作出每個操作流程的介面圖稿，必須能夠兼具美感與易用性。

大致分為網頁的介面設計和APP介面設計。

網頁有一般瀏覽者觀看的企業形象網站、短期活動介紹頁、購物網站等；現在也越來越流行將企業管理系統（ERP）以HTML5網頁的形式來製作了。

APP包含iOS或Android的手機、平板應用程式；以及搭配觸控螢幕設備的OS系統，如車用導航、保全系統…等，也需要介面設計，端看公司的需求，如果是接案為主的公司則可能兩個都要做。

網頁的介面設計須熟悉RWD（響應式網頁設計），APP的介面設計則要了解不同裝置（OS）的規範。

（二）前端語言 不是每個UI/UX職缺都需要前端語言能力。

如果需要，即是要求以下這三項： html css Javascript/jQuery* 這三項程式語言就是所謂「切版」所必備的，能夠讓你的網頁視覺圖稿被實做成有流程順序的、可以被「模擬操作」的外殼。

（外殼套上後端程式後才會變成真正的網站喔） *註：jQuery是預先寫好的Javascript函式庫，可以用簡化的語法寫出和Javascript相同的效果，只要會操作就可以應付大部分的切版所需，但如果不了解Javascript的原理就使用jQuery，很容易陷入只知其然不知其所以然的狀況，所以部分教學者會主張先確切了解Javascript的原生寫法再進階到jQuery比較妥當。

（三）使用者研究 是UX設計專精的領域，基本上我在這一塊還很欠修煉…必須要做的是調查並研究目標使用者的習慣，找出潛在需求並規劃進產品中，並且製作FunctionMap（功能地圖）和Wireframe（線框圖），使UI設計可以將之轉化為符合使用者需求的介面視覺稿。

至於怎麼調查呢？問卷、訪談都是常用方法，更深入的還有文獻與數據分析…所以真正的UX設計師的學歷或相關背景要求通常也比較高。

增進使用者體驗是一個循環的過程，如同軟體會一直更新，UX的工作就是不斷的讓產品更能促進使用者在操作上的流暢，進而解決他們的問題（痛點）。

TomLiou寫的給超超超新手的UIUX指南中，對UX的解釋非常清楚而淺顯易懂，推薦初學者一定要讀。

（四）流程邏輯 想成為好的UI/UX設計師，邏輯能力非常重要，因為網頁與APP的操作是連貫性的，且依循著一定的規則。

如果交給你設計一款點餐APP，你會怎麼安排呢？總共劃分成幾個步驟、一個步驟要做多少動作、填多少資料？要先選優惠券再點餐呢？在什麼時機點計算總價呢？要先登入才能點餐、還是點完餐再登入？光是這些差異，就影響到背後的程式撰寫，更大大影響使用者體驗。

不僅操作流程安排本身需要大量思考，視覺方面也是：APP所使用的按鈕要怎麼擺放才能成功引導使用者完成結帳？有符合閱讀的順序嗎？畫面之間所使用的元件，有沒有依照重要性做階層式的設計？ 因為以上提到的問題，都需要設計師非常縝密的思考、推敲，才能合理地安排出來。

如果你是個習慣揮灑藝術的感性主義者，記得平時在逛網頁、操作APP時多觀察每個操作的環節，並思考這樣設計可能是為了達成什麼目標、解決什麼問題？因為UI/UX設計師無時無刻不會被問「為什麼要這樣設計？」，來自配合的工程師、客戶以及使用者。

如果答不出來，撇除掉語言表達能力不好，可能就是你的操作流程經不起考驗啦（很殘酷的～～）。

（五）團隊協作 之前就提過了，做這一行是很難單打獨鬥的，除非你是一個身兼企劃/設計/前後端程式能力的大神（這樣的人年薪不是我們可以想像的，說不定也不會受僱於人而是自己創業了）。

更別說，有時設計師也會接觸客戶、需要跟團隊以外的人溝通產品的細節，整天一直坐在自己位子上悶頭做著設計，幾乎是不可能發生的。

於是，如果不喜歡過於緊密的團隊合作、三不五時就小組會議的工作節奏，或是有人群恐懼、甘願當個獨行俠的話，可能要多考慮一下XD （六）視覺美感 作為一個設計師怎麼能拋棄美感的要求呢？但是跟團隊合作的能力一樣，很難靠短期的惡補來提升該方面的能力，這個除了天份之外，就得靠平時的累積。

Pinterest、Behance網站放在瀏覽器書籤隨時關注是基本的，不只UI介面的設計作品，任何你喜歡的領域如書籍裝幀、古典藝術、電影海報的賞析，都有助於審美的鍛鍊。

當然，UI設計絕不能只靠感覺，我們必須幫產品挑選適合的風格。

喜歡的作品別忘了一定要保存下來並且做適當的分類，資料庫越充足的設計師，越容易找出客戶喜歡的解決方案。

###總結 大致了解UI/UX的工作內容和必備能力後，相信已畫出初步的地圖，腦中對於如何學習入門較有概略的輪廓了。

在自學過程中，我們很難做到盡善盡美，一定會因為本身的技術背景或人格特質而有所差異的。

事實上，很難等到所有能力都非常強才入行，通常都是一邊做一邊學習，此時不僅可以靠團隊合作截長補短，也可以透過擔任UI/UX工作中、自我學習時，甚至轉換更理想的公司時，漸漸摸索出獨特的能力值配置，尋找適合自己的位置。

沒有對錯，一切端看能不能適應業界所需、做得開不開心而已（這非常重要！）。

-- ※發信站:批踢踢實業坊(ptt.cc),來自:49.216.86.160(臺灣) ※文章網址:https://www.ptt.cc/bbs/Salary/M.1608878546.A.44F.html 推dog37743612/2519:46, 1年前 ,1F推12/2519:46,1F推helloliou12/2523:25, 1年前 ,2F同行推一個12/2523:25,2F推pan123412/2610:58, 1年前 ,3F推，寫得很詳細12/2610:58,3F推jobintan12/2611:02, 1年前 ,4F可以得話連前端技能樹一起點，可得如虎添翼之效。

12/2611:02,4F推aidansky098912/2612:10, 1年前 ,5F台灣沒有UX吧，UICSS設計師比較實在12/2612:10,5F推jc1075512/2617:17, 1年前 ,6F腿12/2617:17,6F→jc1075512/2617:17, 1年前 ,7F*推12/2617:17,7F推feni111512/2622:10, 1年前 ,8F推啊12/2622:10,8F→fakeshadow912/2700:04, 1年前 ,9F推12/2700:04,9F推yinmeyinme12/2715:13, 1年前 ,10F推12/2715:13,10F‣返回看板[Salary]職場‣更多VPatsy的文章文章代碼(AID):#1VvOdIHF(Salary)更多分享選項網址： 分享至： facebookplurktwitter關閉廣告方便截圖Salary近期熱門文章 1 5 [討論]關於服裝如何要求？已刪文[Salary] hass2314703小時前,07/01 5 5 [討論]上市櫃企業員工年薪排行榜2018-2022[Salary] blpac5小時前,06/30 1 6 [討論]職業媽媽處境已刪文[Salary] hope5145小時前,06/30 2 5 [選擇]offer選擇[Salary] wen6208小時前,06/30 1 7 Re:[閒聊]為甚麼公職國營薪資不高一堆人考?[Salary] sunskist083111小時前,06/30 8 25 [閒聊]有沒有可以脫魯的工作？[Salary] a509021311小時前,06/30 3 9 [問題]沒打算去的工作還寄信問面試結果[Salary] gg15ffgg15ff12小時前,06/30 2 9 Re:[閒聊]為甚麼公職國營薪資不高一堆人考?[Salary] AlainDelon13小時前,06/30更多近期熱門文章>>PTT職涯區即時熱門文章 4 15 Re:[心得]航運沒救了啦[Stock] joseph8732小時前,07/01 0 6 [請益]15年前很紅的36歲科技主管一封信回頭看[Tech_Job] andonie2小時前,07/01 9 16 [情報]上海Teresa卡餐廳小小兵卡影城活動[creditcard] cokelon2小時前,07/01 12 16 [情報]英雄聯盟卡下半年[creditcard] rz7593小時前,07/01 9 51 [新聞]4.2萬坪新購物中心來了！SOGO進駐台北大[home-sale] fedona3小時前,07/01 6 6 [情報]中信LINEPayVisa刷UberEats回饋10%[creditcard] BNYMellon3小時前,07/01 5 14 Re:[情報]富邦新臺幣零存整付夢想月月存三倍利[Bank_Service] sseeaann3小時前,07/01 13 42 [請益]融資對大盤的影響[Stock] g10fily3小時前,07/01更多即時熱門文章>>‣返回看板[Salary]職場‣更多VPatsy的文章文章代碼(AID):#1VvOdIHF(Salary)關閉廣告方便截圖