iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 11
2
Modern Web

深入現代前端開發系列 第 11

Day11 設計 UI 真的很簡單嗎?談 UI 狀態

一般在設計 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,那只會變得空有精緻的畫面,卻忽略了真實世界的不完美。


上一篇
Day10 有了 jQuery 為什麼要有xxx?
下一篇
Day12 前端如何管理 API (上)
系列文
深入現代前端開發32

1 則留言

1
hannahpun
iT邦新手 5 級 ‧ 2019-09-17 13:32:52

這篇太讚了,以後可以轉給設計師看了

我要留言

立即登入留言