UI/UX | 前端工程師技能盤點，體驗從使用者的角度看世界
這篇文章是前端工程師養成班系列文章的其中一篇。
在這個系列，我會分享工程師養成班的課程規劃、各技能的學習內容與實務應用，讓還沒走上這條路的人可以一探究竟，再決定是否要走上這條不歸路。
本篇著重在前端工程師養成班所學的 UI / UX，以及從業一年多的前端小白，在實務上的 UI / UX 應用。
關於我 | 餐飲背景，在決定報名養成班之前，對工程師、寫程式一點概念都沒有，大學科系與數理、資工、資管完全零交集。
而上課的年紀，正是鄉民（酸民？）熱烈討論工程師應該要退休( 被淘汰? ) 的年紀。
這樣的背景，在半年的養成班苦讀後後成功轉職，目前在間不錯的接案公司做政府的案子，辦公室有大落地窗可以遠眺美麗華摩天輪與台北 101 ，過著朝九晚五、咖啡喝到飽、work life belance 的生活。
UI / UX 是什麼？
從字面上解析
UI 是 User Interface 使用者介面設計。以網頁為例，設計網頁的畫面，按鈕元件，顏色、字體大小的設計都在此範疇
UX 是 User Experience 使用者體驗。
這部分關於網頁的使用流，比較抽象，但如果生活中曾經有過以下情境
“ 這網頁有夠難用，都找不到我要的功能”
“ 這點餐/排隊流程設計有夠差的 ”
“ 這購物車怎麼都找不到刪除按鈕、怎麼都找不到取消訂閱的按鈕 ”
或類似的經驗，就是使用者體驗的範疇
找不到刪除當然是精心設計的，太容易清空購物車要怎麼帶動經濟奇蹟？
UI / UX 專業的部分結合了心理與設計領域，我自己的定義是：對使用者心理 ( 包含行銷心理、社會心理等 ) 有更專業了解的設計師。
既然用 “/ “ 分開了，代表其實是 2 個專業，重視使用者體驗的公司會編制 2 個職位，預算不夠的團隊就會一人包，不太在意的，就可能是美術設計、或讓前端工程師兼任這個職位的內容 ( 或是以為有做，其實沒有 )
用人資領域來打比方，10年前 “ 人資 “ 這個職位的概念還沒在台灣普及的時候，發薪水的是會計或行政 / 總務 / 秘書、招募是部門主管 / 同事老闆的工作，訓練通常也是部門主管/老闆
到今天，越來越多人能理解人資包含薪酬、考勤、招募、訓練。專業的薪酬需要了解市場行情、分析公司體質、訂出足以激勵員工的薪資獎酬制度
負責考勤的人資需熟捻勞基法，訂出符合營運需求，又不會違法的出勤規範，(像一例一休就逼慘很多服務業；那些周末不營業的小店，很多都是為了符合其實比較適合上班族的勞基法規T_T)
招募則要了解人力市場現況，及公司狀況，找出合適管道及合適人才；例如需要即戰力的部門，卻找一堆畢業生進來當砲灰，逼死新鮮人、再怪主管不會留人就很可怕
訓練要能分析或透過與部門主管或資深同仁溝通、歸納出各職務需求的能力、並且安排及執行訓練(可能是課程、講座、讀書會或 OJT )
每一個名詞都代表一整包的專業，大公司拆開分工，小公司幾人包辦，不在意的就一樣讓行政總務或會計全包，但這樣的公司，通常只有執行那些動作，而比較少去思考怎樣的制度或規劃會對公司發展、員工成長比較有利，再去執行
好像扯遠了…
延伸閱讀：UI/UX 哪裡不同？ | 經理人
養成班的 UI / UX 教了什麼 ?
養成班的 UI / UX 設計共安排了 3 堂課，在時間有限的情況下，教學重點放在 Personal, UI Flow, 十大易用性原則，以及Adobe XD 圖軟體)
什麼是 Persona ?
自己的翻譯是：使用者分析。
在設計網頁時，明確定義好使用者，才能更精準的判斷需求；包含年齡、性別、收入、職業、喜好、個性（？）等細節，年齡還不能只是區間，要明確的一個數字。
課堂上，老師用案例討論來讓我們練習，就訂餐平台先設定一位使用者 ( 注意是特定的一個人唷 ! )，讓我們思考網站設計可以加入哪些功能，更符合他的需求。
我們這組設定了一個科技公司的行政秘書，是個年輕的漂亮妹子 ( 哪來的性別歧視XD ) ，因為職務需求，負責幫同事訂便當，老闆喜歡餐點有變化
綜合以上，妹子自己的收入並不重要，因為不是自己要負擔的。
並且因為是公司天天訂，平台如果能提供月結、配合公司直接扣款，會省去妹子每天收錢找錢應付科技肥宅尷尬閒聊的困擾（又歧視ＸＤ），因為老闆喜歡餐點有變化（善變），若能每天推薦沒點過的美食對她來說會很加分
有其他組的人設直接是住在山裡的科技肥宅 ( 真的是各種歧視XD 為何科技後面都要加肥宅 ?! )、在家上班（當時沒嚴重疫情，在家上班代表他是神人等級）
訂餐需求包含了可以跟妹子聊天、加價指定妹子外送等服務，直接歪樓變成奇怪的交友軟體斜槓外送平台，現在想想取名叫 tinPanda 或uberdate 貌似也很 catchy!
練習結束後，老師就目前 2 大訂餐平台的廣告，分析了他們的 TA ( 顧客 ) 其實是有明顯區隔
U 牌狂打大明星 + 今晚我想來點 + 知名品牌餐點 = TA 願意花多一點錢、非餐期會有用餐需求
F 的菜鳥決勝點系列、小助理被要求各種不可能的任務 = TA 是小市民如我、荷包扁扁，但生活所需的柴米油鹽醬醋茶 + 餐都想一次包辦到、餐點不追求時尚、求個溫飽(怎麼越講越可憐)…
總之 Persona 做的越細越精準，就越能符合到顧客的需求與喜好，進而設計出讓顧客愛不釋手的產品 ( 網頁 )
什麼是 UI Flow
課堂上的理解是使用者的操作流程。
老師以商品加入購物車為例，延伸出每一個節點，在網頁上需要有甚麼功能或下一步的流向，可能是提醒、可能是選擇
例如在單一商家 ( 非商城 ) 決定結帳時，在結帳頁面，使用者會期待可以看到每一個商品及數量，要可以刪除單品、可以加減品項的數量、使用者按下結帳後，要可以選擇付款方式等等…。
其實這部分有 3 個老師講到，都用購物車到結帳來舉例，印象滿深，也很實用。
延伸閱讀：初學者的UI Flow
什麼是十大易用性原則
太專業了直接上連結：專業說明傳送門
非常實用的觀念，串起設計與使用者的思維，衝擊比較大的是要從使用者的角度、語言去做設計，例如給長輩用的網站，符合時下極簡、文青、留白美感的設計就不適合，反而是字體越大越好、避免用文青喜歡的超小字來設計主要是長輩在用的網站，然後順便幫長輩做視力檢查，可以的話大紅大紫大花的中華美學反而受長輩青睞（？）
網路很多年輕人習以為常的 icon，長輩可能無法理解其中的意思，常見像是
- 齒輪 = 設定
- 三個點 = 更多選單
- 放大鏡(棒棒糖? ) = 搜尋
- 中間有個點的倒水滴 = 地標
這些你知我知以為大家都知道的語言，其實沒有我們想像中的通俗，不能為了酷炫的設計特效、讓網頁變的很難用，同時也不要考驗使用者的記憶，明明之前有用過的功能，7秒後完全找不到等等；使用者對於網頁的 “操作學習” 程度越低越友善、諸如此類
Adobe XD
非常直覺好用的繪圖軟體，相較於功能多到沒完沒了的 PS (photoshop) 跟 AI (illustrator)，XD 的介面就對使用者極為友善
養成班用 XD 來畫 Wireframe (框線圖) 跟 視覺稿 Mock up* （根據不具名消息來源指出，現在改用 Miro）
我個人很愛 Adobe XD ，對新手來說畫圖超容易，調整照片的形狀、大小、濾鏡也比 photoshop 方便個 100 倍( photoshop 的濾鏡在哪？他就是那種以前明明用過，但每次使用都還是靠 “通靈” 去找的工具 )
美中不足的是，老師並沒有教我們製作網頁需要使用的大多數功能，反而花了太多時間教我們做炫技的按鈕元件，(可惜全班不到一半的人聽懂、而且專題上完全用不到)
我是不介意學目前用不到的技巧，但糟糕的是我們真正需要畫 Wireframe 跟 Mockup 的功能及注意事項在課堂上都沒教，後來都是靠自己在Youtube上找影片、跟有有幾個設計背景的同學教我們一些實用的功能。
*Wireframe 與 Mockup
一直沒有老師很明確的解釋跟正式的中文翻譯，就同學們討論後的理解，Wireframe是線稿，用來大致排版出整個網頁上，照片會放哪個位子、文字區塊在哪裡等定位出大方向，所以用假圖跟假文字就好，Mockup則很接近網頁最終的樣子、文字大小、顏色、位置都要精準，可以的話圖片要用正確的圖或相關主題的照片來示意
UI 界大神的佛心教學著實在那幾堂課幫了我很多
對養成班的前端工程師來說，UI/ UX 需要學的是
- 網頁設計觀念：在畫設計稿時，header, footer 等區塊、字體大小跟照片比例就應該精準，Mockup 應該是可以直接當切版 coding 的實際尺寸，但比例要怎麼抓沒有人會，這個概念也是只有部分同學體會出來，直到團體專題製作時，很多同學畫的Mockup，都不是能拿來切版的精準比例
- Adobe XD 怎麼存檔 (超級基礎，但沒人找的到) → 後來是旁邊設計背景的同學教的，最後一堂課終於有人問老師，她才知道 ” 原來這也要教 ” (就是沒站在使用者的角度思考)
- Adobe XD 想要的圖可以裁切需要的範圍、並匯出 → 也是設計背景同學跟大家分享
默默又想回憶起當時上課有多無奈，總之，這堂課原本的價值，應該比我們實際獲得的高，但至少我們知道要設計出使用者友善的網頁，心理學、易用性原則、分析Personal等等專業缺一不可
UI / UX 之於前端工程師的職場應用
而前端工程師有沒有一定要學 UI / UX ?
如果公司沒有專門的編制，UI / UX 會是沒人帶，但你必須會的硬實力
前面提到，有規模 / 大公司 / 重視使用者體驗的公司會編制專門的職位，但不是所有公司都有這樣的預算可以編制設計，也不是人人都有機會 / 運氣 / 能力可以加入這樣編制的公司，以轉職來說，要比底層觀念，不可能比得過本科系念四年的 ，要說比 coding 邏輯或語法，也比不過有些從國小國中就把寫程式當興趣在發展的年輕人
而從另一個現實面考量，轉職工程師相較於本科系畢業生，技術水平或底層觀念通常是弱勢，並且許多喜歡用轉職工程師的主管，看中的是全方位技能，而不只是會寫程式，這樣看來，求職時 coding 以外的技能，就是轉職者可以作為優勢的部分了
如果有設計背景、行銷背景、營運背景、業務背景，UI / UX 使用者體驗或許會是你比其他人更容易上手的項目，在轉職的路上就是小加分的機會，而那些前端包設計的公司，就會是你可以發展的方向
我自己的經驗，如果團隊沒有沒有專門的 UI / UX，或者負責規劃產品的那個人沒有這塊專業，你最好自己懂一些，可以在業者提出之前先思考使用者體驗來設計流程，或是跟業者一起討論
雖然付錢是老大他說了算，但我認為好的前端，不可以把責任全部推給業主，不然網頁產品到客或使用者手上開始測試時，許多功能流程會改到崩潰，畢竟最後花時間(加班)改 code的苦主是前端工程師本人
UI / UX 學習心得
UI / UX 是一門可以求職的專業技能，把設計出一個網頁需要的基本概念列出來，算是CP值滿高的一門課，前提是…
老師不要講到專有名詞就切換成英文，不要沒教我們需要，卻花時間教我們用不到的 T_T
或是可以跟我們很多同學一樣，抱怨完老師，自己在網路上找資源學習吧 !
老師在 XD 教了什麼用不到的東西？
按鈕的特效 !!!
由於太多同學不會，老師又說期末要考這個，所以當時我錄了三隻無聲教學影片分享給同學 ( 人生第一隻上傳到 YouTube 的影片，成就解鎖，也是滿值得紀念的 ! )
結果6個月後的期末考也沒考，是考相對簡單又實用的Mockup及燈箱動畫…
如果喜歡我的文章，可以拍拍手讓我知道，更歡迎你追蹤並持續關注更多的分享。
下一篇，我會整說明養成班的視覺設計。
想轉職工程師、對養成班有興趣、或對前端工程師有興趣的朋友們敬請期待 ~
網頁開發世界，我們不孤單，我們下篇文章見！