Button Bar 的 Style 調整

螢幕快照 2018-01-06 下午9.32.55.png
螢幕快照 2018-01-06 下午9.36.16.png
Button Bar 有些預設的 Style 格式可能是我們不想要的,比如:
  1. 滑鼠移到該 Button Bar 上方的時候出現黑底藍字;
  2. 點選後全部 Button Bar 又出現黑底藍字。
黑底藍字的呈現讓使用者介面的感覺怪,可能需要做調整
螢幕快照 2018-01-06 下午9.23.23.png
調整 Style 的地方在 Inspector 的第三個 Tab: Appearance(圖示是一個調色盤),我們可以看到 Button Bar 主要有四個可以調整的部分:
  1. Button Bar
  2. Button Bar: Dividers
  3. Button Bar: Segment
  4. Button Bar: Icon
螢幕快照 2018-01-06 下午9.22.42.png
第一個部分 Button Bar 沒有特別需要調整的,維持 Normal 即可。
第二個部分 Button Bar: Dividers 沒有特別需要調整的,同樣維持 Normal 即可。
第四個部分 Button Bar: Icon 因為為使用到 Icon,不需要別調整。
螢幕快照 2018-01-06 下午9.42.44.png
主要問題應該是出在第三個部分 Button Bar: Segment
Button Bar: Segment,又細分為五個狀態:
  1. Active
  2. Inactive
  3. Hover
  4. Pressed
  5. In Focus
Button Bar: Segment 的 Active 狀態,Fill 的 Solid Color 顏色是黑色
螢幕快照 2018-01-06 下午11.09.49.png
把 Solid Color 顏色改成無顏色,文字顏色從藍色改為黑色
螢幕快照 2018-01-06 下午11.19.56.png
Button Bar: Segment 的 Inactive 狀態,文字顏色也從灰色改成黑色
螢幕快照 2018-01-06 下午11.27.39.png
其他的部分不影響太多,可以暫時先不調整,這樣的使用者介面看起來就比較習慣
螢幕快照 2018-01-07 上午12.04.16.png

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s