2020-7-7 工作心得 - 如何回應UI的問題?

[hsiaofung]

• 問題: model 疊 model 有違反好的UI 設計原則嗎?
• 問題: 下載password 按鍵需要提示訊號嗎?
• 問題: 若有需要提示訊息，要放在哪裡? 用什麼方法顯示 ?
• 問題: 若有一系列的下載步驟，例如: 開啟檔案、選擇資料夾，要如何安排?
• 排版問題 :
• 新增task panel, 是否要有，是否要放到底下? 有什麼有影響(不要直接講，有沒有什麼使用者情境可以提供不同的視野和想法?)
• UI 會問那些問題?
  • 使用者角色role要和group 綁在一起嗎?
  • VMWare 使用者權限如何設計?
  • 要提供哪些功能?
    • 例如: 使用者角色和權限的功能?
      • 要提供group 的功能嗎? 為什麼? 客戶用得到嗎? 客戶要怎麼用呢?
      • 要提供group 下可以設定role 的功能嗎? 為什麼? 有什麼好處、優點呢?
        • 視覺 : 要提供那些顏色、字型、icon ?
• UI 主要問的是有什麼做法能讓使用者完成目標?

[hsiaofung]

UI 會想要的視覺和行為:

• 視覺 : 左右對齊。
• 視覺 : 對比。 顏色要對。
• 視覺 : modal 的長寬要有最大長度。

行為

• 行為: 只有一個項目時不需要出現delete。
• 行為: 在modal 內的選項不要被(modal)蓋住(例如: 裡面的色盤)。

按鈕

• input 要做驗證。
• 若是field validation 不過，按鈕要disable 不能點擊。按鈕要變灰色。
• (智慧選擇)減少使用者點擊，例如: 隨機產生色塊，自動幫使用者選擇，使用者可以少點擊一次，也會提供色盤若使用者想要自己選也可以。(提供default選項)
• (自動消失)使用者點擊後，若不需要的可以自動消失，例如 : 色盤，使用者點擊完後就不需要了，可以自動消失，減少使用者點擊。

[hsiaofung]

Scroll Bar

• scroll bar : 不要window 出現，內部元件也出現，能夠盡量不出現就不要出現。
• scroll bar 有需要才出現，可以當滑鼠hover 到的時候，再出現元件的scroll bar。
• scrollbar 的原生很醜，可以客製化scroll bar。
• 元件有scrollbar，window有scrollbar 可以做切換，當hover到元件就切到此元件的scrollbar，關閉window的scrollbar。反之就開啟window scrollbar

[hsiaofung]

Icon

• icon 應該要比字來的淺色，因為使用者要注意的是文字，icon 只是輔助
• icon 要做兩種顏色，一種是active，一種是normal。
• 每個icon 的長寬要固定現在是24x24

[hsiaofung]

Layout

• card和card之間的間距是24
• card 和 header 間的距離也是24
• card 和右邊的距離也是24
• card 和footer 的距離也是24
• footer 的高度是60px
• footer 上方的border top 要黏住左右兩邊。
• modal 固定高度，不會轉換頁面時忽大忽小。

[hsiaofung]

新功能

• 這個功能前端做得到嗎?

[hsiaofung]

Help 系統

disable 的 function bar button 需要顯示不能按下去的原因，幫助使用者了解會什麼不能按?