薪水版的大家聖誕節快樂，在年末換工作潮的當下，想挑戰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

出處：The difference between a UX Designer and UI Developer
在圖中，我們可以看到在一個網站或是APP的開發過程中，UX注重的是資訊設計、調查研
究，常與問卷和訪談為伍，並要對使用者的回饋提出良好的解決方案，確保整體流程符合
好的使用者體驗；UI則注重視覺並跨足到前端工程（但事實上不用太深入），UI設計師得
不斷琢磨畫面如何又美觀、又能正確引導使用者的操作。而他們兩者在交互設計上是重疊
的。

但是只有在規模比較大、編制較為複雜的公司，才會分開成UI設計師、UX設計師兩種不同
職位。台灣的中小企業、接案公司與新創公司數量龐大，員工也較容易一人分飾多角，加
上雇主不見得區分得清楚這兩者的差別，將UI/UX放在一起的職缺比比皆是，甚至把網頁
設計師或前端工程師與之混為一談的也很多啊！此外，一般來說由PM（產品經理）負責的
需求分析、客戶溝通等等工作，在小公司往往也都落在UI/UX designer身上…

可以參考Rei Huang的文章：你是做UI的，那懂不懂UX? （https://heywesley.wordpress
.com/2016/04/23/ui-designer-know-about-ux/）有令人會心一笑的見解。

### 我真的什麼都要會嗎？

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

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

所以，問題回到「如何自學成為UI/UX設計師」，我認為必須先調查清楚自己想要任職的
公司/職位，要求的範圍究竟只專注於UI Design，還是要求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設計專精的領域，基本上我在這一塊還很欠修煉…必須要做的是調查並研究目標使用
者的習慣，找出潛在需求並規劃進產品中，並且製作Function Map（功能地圖）和Wirefr
ame（線框圖），使UI設計可以將之轉化為符合使用者需求的介面視覺稿。至於怎麼調查
呢？問卷、訪談都是常用方法，更深入的還有文獻與數據分析…所以真正的UX設計師的學
歷或相關背景要求通常也比較高。
增進使用者體驗是一個循環的過程，如同軟體會一直更新，UX的工作就是不斷的讓產品更
能促進使用者在操作上的流暢，進而解決他們的問題（痛點）。

Tom Liou寫的給超超超新手的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