設計好按鈕的原則

像一個按鈕

第一點,按鈕要像一個按鈕,好像廢話對不對,但是並不全然,看看以下範例,一個是label,一個按鈕,一個方塊上有個字,能一眼分辨出來他們的差別嗎?

這個實驗只想表達一件事,按鈕不僅僅是一個框圍住一個字的表達,至少在目前的介面設計上,要做到像一個按鈕,大致上還可以參考以下幾點。

內容物與邊界

首先,按鈕粗劣的分為兩層,內容物和按鈕本身,在思考一個按鈕的時候,千萬不要假設它的內容物就只有那樣,除非你確定,你的APP或網頁,只有一個按鈕,不然你可能還需要思考以下幾個情況。

  1. 當內容物很少的時候
  2. 當內容物很多的時候
  3. 當內容物不是字的時候
  4. 當內容物是別國語言的時候

所以千萬不給一個按鈕設一個固定寬高,以下就是一個不良示範:

較為推薦的設計如下:

所以再設計一個按鈕的時候,必須暫時忽略裡面會放什麼字,並且以內容物的相對距離來取代固定大小的寫法, 以下紅色區塊是相對距離,黑色區塊是內容物的大小,把紅色區塊自然撐大。

這樣一來,不管這個按鈕的內容物是icon還是string,不管字串多大,應該都不會出錯。

我的demo只是用了一個張img來示意,實際上,用svg或iconfont會更好控制字體和icon的大小保持一致,可是如果為了保持畫面平衡,必須要使用大一點的按鈕,請用最小或最大寬度來控制,但這種按鈕,不建議用在網頁產品/服務上,但用在活動網站或官方網站上,倒是比較可以接受的。

因為這算是例外,假設一個產品允許太多例外,那麼guideline就等同虛設了,對不。

按鈕家族

為了因應不同場景和需求,通常一套完整的UI系統會有好幾款按鈕,就好像一個家族一樣,雖然都長大不太一樣但是一眼就能認出來,他們都是按鈕,並且來自同一個家族。

範例來源:餓了麼 elememt ui

範例來源:阿里巴巴集團 Ant design

多想想目前你要設計的只是一個按鈕,還是是在設計一個系統畫面,剛好需要一個按鈕,不然最後一個產品裡面就會出現各式各樣的按鈕,彷彿他們的出現,都只是一場意外。

表達與出現

按鈕上的敘述,必須直接明瞭,嚴謹模糊不清。

錯誤示範:

/p>

「ok」這種曖昧的字就盡量不要用,按鈕某程度是一個指令,必須清楚告訴user,按下去會發生什麼事。

關於出現的意思,就是按鈕「必須出現在user期待他會出現的地方」,
錯誤示範:

正確示範:

剛剛說過,按鈕有「下一步要做什麼」的含義,所以通常,決定都會放在一段內文敘述後,CTA的按鈕也是如此,必須要搭配一些大標題或視覺表達、影片,才會讓人有「下一步」要點擊的慾望,所以要像按鈕的意涵,也是user期待在「某個地方」可以找到按鈕。

代碼上的分類

網頁上的東西,基本上,就簡單的分為兩種,按鈕也是,分別就是inline 和 block,簡而言之,inline的東西都是並排,block的東西就是獨佔一排,所以按鈕只有這兩種。

所以在設計畫面的時候,可以在情況把需要的按鈕放進去,為什麼會特別提這個呢?

因為在和一些設計師說以上的內容的時候,有些設計師會覺得這樣不太符合現實(?),因為畫面的情況很多元,不過坦白說,再如何多元,都離不開像素,就是來來去去那幾種,你可以發明新的,不過確保user會知道如何使用(例如你故意把按鈕設計成需要hover才出現的彩蛋按鈕),那就可以不需要跟隨這裡所說的一切規範。

同一個畫面,inline和block的表達都可以做的一模一樣的效果,差別是,block左右邊框只有最小距,寬達100%,而inline的按鈕,則是雖內容變化,卻無法做上下的調整。

所以提到剛剛的第二種情況,最好的作法是,一個外框,包裹著一個block按鈕,而對外框做調整即可。這樣就可以避免一個例外的誕生。

回饋

用顏色、形狀、陰影、聲音或其他方式來處理user滑上去按鈕、按下按鈕、鬆開按鈕等不同時機的體驗,但一個家族,請勿有多套回饋方式,這樣會分散user的注意力,也會混繞user。

錯誤示範,一個家族,有多個按鈕和回饋方式:

正確示範,一個家族,只會有一種回饋方式: