前言

UI 跟 UX 是兩個完全不一樣的東西，以工程師的角度簡單來說，
UI 是美術視覺看得到的，
UX 是了解使用者的理解後改善體驗，
詳細的定義請搜尋網路上的各種介紹，
一般小公司不太會有 UX 設計師，但不管大小公司機會都有 UI 設計師，
這兩種身份職責不同，對我們工程師來說，實作的範圍也不同，
UI 是每一次做功能的時候，UI 設計師都會給我們設計稿，讓我們照著設計刻，
UX 設計師說話的時候可能就很恐怖了，可能是改頁面間的動線、頁面裡放的資訊等，可能會需要大大改動 app 的架構。

Android 官方

官方的 design guidelines：Design for Android。
這裡面非常的詳細，從基本的顏色、界面，到手勢、動畫、甚至聲音都有規範，
裡面也有大量 do 跟 don't 的範例。

業界常用 UI 設計工具

最常用的工具：

• Sketch
• Figma
• Zeplin
• Adobe XD
• 還有很多。
  不需要自己會做，可以載別人的設計檔來練習照著刻。

培養與練習

可以搜尋"ui 設計 網站"，有各路 UI 設計師整理了界面、元件、顏色、交互相關資訊：

很多網站都有提供上面介紹的設計工具的檔案，
但可能會發現有很多的設計美得誇張，非常難以實現，
不用太過擔心，這是理論上，但實際在公司運作的時候，
不管是開發時程、不同平台使用習慣及其官方的 design guidelines 等考量，
一般是不容易看到這麼浮誇的畫面，這點可以下載幾個知名 app 就能知道了，
另外，臨摹一個既有 app 也是很好的做法，但需要有針對性，比方說：

• 電商：塞，盡量塞很多東西。
• 音樂、娛樂：繽紛、互動、有趣。
• 時刻表、比價等大量文字資訊的 app：思考如何設計的簡單乾淨又不失方便。

拿到設計稿後要注意的東西

• 框線
• 陰影
• 圓角
• 字型
• 還有前面每一項的大小、粗細、顏色、與四周的間距等。

這還只是基本的，
看不到的地方還有：

• 內容太多、太少會不會跑版。
• 從系統改變字體大小、字型、界面大小。
• 不同解析度的裝置。
• light / dark 模式。
• 無障礙（視障）。
• 新舊頁面是否一致，如果改動新頁面的元件，舊頁面會不會很醜。
• 等待、空、重試、錯誤、還有各種商業邏輯的狀態。
• 還有非常多的細節。

結語

很多時候，做出了一個功能並不是讓我們最開心的地方，而是畫面很美也很好用，
在公司裡，會有專業的設計師出設計稿給我們，
我們只要照著實作就可以，但平常還是要培養一些美感、流行以及設計規範，
公司的設計師經常是拿 iPhone，他們不見得會去追 Android 新的設計規範，
這時候我們就要出面溝通了。