前端工程師需要注意的 UI/UX 提醒
Dec 18, 2023
身為前端工程師，有些我認為的 common sense 是需要時時刻刻提醒自己，列出幾點我們常遇到的狀況。
千萬不要說：「PM 沒定義」
1. 可以點擊的元素都要加 cursor: pointer
2. 連結請優先考慮使用 a link ，避免使用 onclick=window.open, window.location
這主要是為了 SEO，另外我常會看這個連結會導到哪裡，若預期他會是個連結，請讓它表現的像是個連結。
3. 壓縮圖片
前端的效能是前端工程師的責任，不管圖片從哪裡來請一律要過壓縮過
- png/jpeg: https://tinypng.com/
- svgo: https://jakearchibald.github.io/svgomg/
千萬不要說，「這是 UX 提供的。」
另外有時會看到假 SVG，就是 SVG 圖檔，但裡頭的內容卻是 base64 png。這就要跟 UX team 確認一下問題，有可能轉檔錯誤。
4. 只要有非同步請求在 UI 上就需要考慮 loading 和 error handle
由於大部分設計都會優先針對正向行為來做處理，在實作時需要考慮 loading 狀態，或者 error 的顯示。
千萬不要說：「PM 沒定義」
前端工程師本來就介於實作和設計與溝通上的集合，把這些可能會漏掉的球接好，才能真正發揮前端工程師的價值。
5. 不要帶著問題去找 PM/UI/UX，請帶著解決方案
例如有些情況，就直接問 PM or UI/UX：「這樣做會有效能問題」，請先思考解決方案之後再提出討論。一方面，我們可以展現我們的主動性和解決問題的能力；另一方面，這也有助於我們與項目經理更有效地溝通，提高解決問題的效率。
例如：「我們在開發新功能時遇到了性能瓶頸。」
- 解決方案選項：「這樣做在大量資料時會卡住，可能要花些時間研究怎麼優化，或者要提供一個 loading 中的 UI，讓使用者知道正在讀取中」
