一般在設計 UI 時，難免會因為 mockup 的長相而忽略了許多設計網頁時應該要注意的事，這也是區分 UI 設計師與平面設計師的好方法。

為什麼這麼說呢？不像一般的平面設計，網頁可以滾動、滑鼠移動、內容長度變化、使用裝置、寬高度等等而有不同的 layout 呈現。因此怎麼設計一個好用的 UI 也是相當大的挑戰。

「浪費別人的時間無異於殺人，爛 UI 也是」

使用者斷網時，是否能夠即時提醒使用者；在填完表單如果送出時有錯是否可以儲存；在錯誤時能夠顯示適當的錯誤訊息提示使用者等等，在理想下使用者都會

在這裡並無法一一介紹各種細節，但提供幾個大方向參考。

狀態

在設計 UI 時，可以從狀態下手。

空狀態

沒有文字、沒有標題、沒有圖片等等，甚至一位使用者剛創帳號，有許多版位都是空的資料，要怎麼設計 UI？

許多設計師往往沒有考慮這些情況，mockup 上面都是理想的 UI 版面，有圖有文字、統一的大小，卻沒辦法套用在實際應用上。

一般狀態

所謂的一般狀態就是考慮正常狀況下，這個頁面會如何呈現，我們需要同時考慮，這裡的欄位是否為必要、可選的，是否有些版位會缺少圖片？要怎麼做替代？

稀少狀態

什麼是稀少狀態，就是在正常情況下少見，但仍然存在的狀態。例如當標題過長的時候要如何呈現？直接斷行嗎？還是用 ...... 代替？還是兩行後直接用 ...... 代替？

在設計時，如果圖片跟實際圖片的比例不對該怎麼辦？例如卡片設計的圖片比例皆為 16:9，但有些使用者的圖片是 1:1，甚至是 9:16。要直接裁掉留白還是用其他方式處理？

處理文字排版

在瀏覽器當中，我們可以用 rem, em 來設計相對的字體大小，而不用直接寫死。透過 SCSS 或其他解決方案（modular typography），我們可以更有系統地管理 UI。

我們也要考慮文字在不同裝置下的顯示，是否要等比例縮放，還是個別使用不同的字型大小？

空白

如何處理（管理）空白系統相當重要。好的空白會讓 UI 看起來更有一致性，除此之外也更容易管理。例如定義一套空白系統，規定標題與標題間的空白、卡片與卡片之間的空白等等。

排版

對於多欄的排版，最優先要考量的是在手機上要如何呈現，要直接塞回一欄，還是變成 icon 顯示？另外因為在手機上沒有 hover 的關係，所以如果設計一些 hover 才能看到的選項的話，就要另外特別處理才行。

載入狀態

在物件還沒有載入的時候，我們可以用 Loading Placeholder 來做。最近是建立幾張假的 UI 放在那邊。不過 background-color: linear-gradient 其實會觸發 layout 跟 paint。所以用得太多並不是一件好事，你可以改用 Spinner 的方式來取代。

錯誤發生時要如何處理？

• 你的 UI 能處理 400, 404, 401, 402 嗎？
  「浪費別人的時間無異於殺人，壞 UI 也是」如果使用者斷網時，是否能夠即時提醒使用者，在他們填完長長的表單後。或者直接在瀏覽器儲存以免資料丟失

• Input 的狀態是否正確？

  能否設計出對應的錯誤訊息，或是覆蓋到有可能出現的錯誤。例如密碼長度、email 長短......。

• 錯誤訊息是否夠明顯、反饋夠大？

  • 錯誤是否能夠被使用者發現？
  • 提供完整的訊息跟後續的操作，好讓使用者繼續下一步嗎？

• UI 在 API call 時能夠即時反應嗎？

  • 呼叫請求時，進入 Loading, Pending 狀態

Shit always happen

你對你的 UI 很有自信，但是否過於理想化？以下我們來看看卡片設計：

這張卡片構造相當簡單，但是當情況改變時，或許這張卡片就不太合適了。

• 你能夠保證圖片的比例維持正確嗎？如果不會 1:1 怎麼辦？在前端切掉嗎？會不會切到重要部分？這要按照需求而定。

他們通常在專門領域創造或提供創意，並利用各種視與道理方式傳達的方式，表現法的功力作品，即設計師的實力。

除了自身創作實力外還可以怎麼做？

既然跨入前端領域，就必須了解到在 UI 當中，時常要考慮額外的情況。不要用平面的思維來詮釋 UI，那只會變得空有精緻的畫面，卻忽略了真實世界的不完美。