視覺規範沒有一定的標準,究竟是美醜優先,還是使用者體驗優先,這都沒有一個準則,當然在最理想的情況下,是能同時符合兩者。所以在按鈕的使用上,我嘗試找出一些規則,來讓畫面不至於凌亂,並且讓使用者可以感受到舒適。
而按鈕本身有著不同的個性,所以在畫面的使用上,也會依據需求的不同,來使用不同個性的按鈕。就算是同一個Framework所提供的按鈕,也會有相當多樣的選擇供開發者使用,但是選擇一多,往往也會造成困擾。
“目前的情況下該用哪種按鈕?”
上面的問題,我也思考很久,所以整理了幾種可能的性給大家參考參考。
外框線與填滿類型
外框線與填滿類型,會因為網頁設計的底色有不同定義,假設背景是淺色系,那麼深色的按鈕就會被認定為填滿;反之,深色的背景,那麼淺色就是被認定為填滿。
這個部分我選擇Bootstrap 3的按鈕來說明(選用單純的按鈕,去除其他可能性),左邊我稱為外框線的按鈕,右邊則是填滿的按鈕。
外框線的按鈕
這種按鈕是通常是白色底或是淺灰階的底色,搭配上不同色彩的文字,文字的色彩通常預設為藍色或是黑色。
填滿的按鈕
而填滿的按鈕,則是按鈕底色充滿色彩,如:黑色、藍色、紅色等等,文字的色彩通常是白色,當然也有可能會出現其他淺色系的文字。
外框線的按鈕 | 填滿的按鈕 | |
---|---|---|
吸引力 | 較不引人注目 | 吸引使用者注目 |
個性 | 輕鬆、細膩 | 大膽、強烈 |
用途 | 大部份的按鈕 | 希望使用者注意按鈕 |
色彩 | 淺色 或接近於背景色 | 深色 或者相對於背景色 |
重要度 | 低 | 高 |
接下來,在從一些範例來說明以上的內容。
範例
奇妙清單
奇妙清單是一個雲端記事本的工具,有點類似Evernote,但是沒有那麼多功能,主要是利用列表來記錄待辦事項等等。這一類型的服務工具,首要工作就是吸引使用者的使用,有足夠的使用者試用後,才能在推銷更進階付費服務。
網站背景色是淺色系,綠色的試用按鈕以及右上方的藍色按鈕,都屬於先前所提到的填滿類型按鈕(兩者其實動作是類似的);其他的部分如登入、觀看影片的動作都是外框線的按鈕。這也清楚地說明註冊、試用的動作比其他都還要重要,所以將註冊使用填滿類型的按鈕。
Github
Github是Git雲端版本儲存庫,是目前最流行版本控管儲存庫,而這類型的工具,和一般使用者所接觸的網頁會有很大的不同,這類型網站有許多功能可以去設定、調整、觀看等等。所以在畫面上會有許多的按鈕,在這樣的情況下必須決定什麼是這畫面上最重要的,以及避免畫面的凌亂。
這畫面上,大多的按鈕都是屬於外框線類型的按鈕,只有一個綠色的填滿類型按鈕(Compare, review, create a pull request),且是用圖示表示,那綠色按鈕是Git進行版本控管的一些功能,所以就這畫面而言,版本控管是最為重要的,這個方式不僅可以將重點標示出來,也可以保持畫面的整潔,試想:如果畫面充滿了五顏六色的按鈕,那麼重點在哪?
另外,在Github的設定選項內,其中可以找到刪除儲存庫的功能,要特別注意到,”刪除”並不是重要的選項,而是要避免使用者誤觸,所以這部分Github使用外框線的按鈕,搭配紅色的文字。
Github這網站有相當多的功能,大家不妨隨便逛看看,它們在設計時,大多頁面通常只有一個填滿類型的按鈕(少數會超過一個)。
當然,這邊所提的原則,並不是絕對,也有很多更好設計(包含很好的UX)。但是在規劃版面按鈕還沒有任何想法時,可以嘗試這樣的規則。
- 找出畫面上最重要功能使用填滿類型的按鈕
- 其他通通都是用外框線類型的按鈕