iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1

除了親和性的配色外,訊息的傳遞也是很重要的,與平面設計不同的是訊息並非只有圖文的傳遞,還包含了狀態、互動、提示等等訊息,訊息也同時可以用許多不同色彩表示,增加訊息所能表示的情感、急迫性、引導性等等。

連結色彩(包含不同狀態)

網頁設計中的 <a> 除了本身的預設樣式外,另外還包含以下幾種 “狀態”

  • a:link - 未拜訪過的連結。
  • a:visited - 已拜訪過的連結。
  • a:hover - 滑鼠回入的連結。
  • a:active - 按下狀態的連結。
  • a:focus - 鍵盤專注的狀態。

a:link - 未拜訪過的連結及 a:visited 已拜訪過的連結,這兩種並非在所有網站都有這樣的需求,通常會運用在「需要紀錄已讀取」的網頁上,像是搜尋引擎就是很好的例子(但現在很多都改用 JavaScript 來設計)。

設計:可視專案需求來決定是否加入這個樣式。

https://ithelp.ithome.com.tw/upload/images/20181023/20083608XVT8q5PDfH.png

https://ithelp.ithome.com.tw/upload/images/20181023/20083608KbgMF77cpZ.png

a:hover - 滑鼠回入的連結,這個樣式普遍都會製作,主要讓用戶滑鼠滑入時了解「這是一個可互動的按鈕」,如果少了這個樣式用戶可能會誤以為沒有連結。但要特別注意,這個樣是在行動版無法正確的呈現(因為手機沒有滑鼠 hover 的事件)。

設計:在文本中的設計中大多會使用略深的主色或次要色,然後加上下底線作為呈現。

如果以按鈕呈現,也會使用略深為按鈕原色的設計

a:active - 按下狀態的連結,這是滑鼠按下的樣式,通常會與 .active 一起製作,而 .active 可以透過後端或 JavaScript 直接套用在按鈕之上,表示目前啟用中的按鍵。

設計:通常會使用略深於普通狀態的色彩,設計時可以與 .active(啟用樣式)一起設計(文本有時不會設計,或同 hover 樣式)。

a:focus - 鍵盤專注的狀態,許多用戶會使用鍵盤搭配 tab 來瀏覽網頁(也有一部分是屬於視覺障礙者),這個專注狀態可以讓用戶了解目前「專注」的按鈕,如果用戶需要按下此按鈕,則可以按下 Enter 鍵。

設計:文本中會使用瀏覽器預設的外框,主要是因為文本中不一定能調整高度,視覺上可能會干擾到其他文字的閱讀,因此不一定會另外設計。

按鈕會在原本按鈕外增加一圈類似色彩,如果沒有另外設計則會套用瀏覽器預設的樣式。

瀏覽器預設的 focus,每個瀏覽器略有不同(下圖為 Chrome 的樣式),預設樣式不會隨著網站設計改變,大多會使用藍色外框,因此會建議自行設計。

部分網頁設計師由於沒有程式開發的經驗,所以會忽略許多行為上的樣式狀態,除了 link, visited 外,其餘都是設計時必備的項目,一開始就必須加入喔。

結語

按鈕互動對於使用者回饋相當重要,如果缺乏足夠回饋,用戶時常會以為該連結是否無法運作。而設計師為了追求畫面上的完美,有時會疏忽掉用戶操作的回饋,執行上則會建議一開始預先定義相關元素的互動狀態、錯誤行為等等,避免後續開發上的疏忽。


上一篇
你的網頁文字是否足夠清楚呢?
下一篇
色彩運用(3) - 按鈕的配色
系列文
前端「設計」聖光之路30

尚未有邦友留言

立即登入留言