設計翻譯

用更好的方法在 Sketch 設計按鈕

按鈕就像你從來沒看過他們一樣!也許啦。

此文翻譯來自 UX power tool,作者是喜歡的設計師 Jon Moore,他的文章非常幽默風趣,同時也是 UX power tool 的創辦人之一。本篇內文及圖片,版權皆為作者及 UX power tool 所有。 原文連結
翻譯提示:
1. 由於 Sketch 內元素名稱都是英文,symbol 相信設計師們都很熟悉,為了避免混淆我就不特別翻譯了。
2. Button Container 指的是按鈕本身的區域,我這邊翻譯成容器。
下載這個 demo file 或是從 UX Power Tools下載整個 UI kit,裡面有各種聰明的 symbols 就像這個一樣。

Sketch 的 symbols 棒呆了因為他為管理元件提供了很棒的地方。按鈕是最容易創造的元件之一,但像是上面的文字區域,他會有很多狀態、顏色跟風格。所以這也意味著,我們需要創造一大堆不同的 symbols。

舊方式

這裡有一些我幾個月前做的按鈕 symbols:

如果你的 symbols 看起來像這樣請舉手…🖐🏼

又棒又乾淨吧!我大概有 12 個月的時間都用這個方法,而且沒發生問題。這是一個管理按鈕 symbols 的好方法,而且這包含了所有我需要設計的按鈕狀態。

按鈕顏色
主要顏色,次要顏色,白色
按鈕狀態
原始狀態, 游標移過的狀態, 點擊狀態, 不能使用的狀態

嚴格說起來這不算糟糕,但是如果像下面這樣的話會有一點頭痛:

  • 如果我需要增加一個綠色的按鈕,我需要增加三個新的 symbols⋯⋯ 一個需要有三種按鈕狀態。
  • 如果我想要一個白色的按鈕配上藍色文字,我會需要三個新的 symbols。
  • 如果我需要拿掉按鈕的邊框 (border) ,我需要更新 每 一 個 我設計的 symbols。
  • 做十個 symbols 只為了一個元件?⋯⋯真的嗎?⋯⋯有必要嗎?

新方法

我會保留我的內心小劇場,只跟你分享我們首先要創造什麼就好。我的 UI kit 不再需要十種以上的按鈕 symbols。

現在⋯⋯只要一個就夠。

多孤單啊!這讓我想起浩劫重生裡湯姆漢克自己一個人在船上的那一幕。安息吧威爾森。

全面披露: 這一個 symbol 是有一點誤導啦,因為我們確實還需要建立其他 symbols ,把它當作建立其他按鈕的一部份。但這個 symbol 將會被用在整個 UI kit 裡面,所以它是一個權衡之後的結果。

當我們完成後,你可以建立彩虹般那麼多顏色的按鈕,並且有各種狀態 ⋯⋯全部都只從一個按鈕 symbol 建立,看一下吧:

一個 symbol 創造了這些。這就像是你留下兩隻小兔子,結果回來變成一整座動物園。

按鈕結構

這個按鈕 symbol 裡面有三個巢狀的 symbols:

  • 按鈕文字(很重要): 我們用這個去改變按鈕想說的訊息。
  • 按鈕符號 (沒那麼重要): 如果按鈕在 “loading” 的狀態,我們可以使用這個。
  • 按鈕容器 (最重要的): 這個給我們形狀、顏色跟狀態。

*編按:按鈕容器 Button container 指的是按鈕本身。

這三個 symbols 將要讓你意亂情迷啦

按鈕文字

我之前有寫過一點關於這個的文章,但我再次回顧一下:

“為什麼這個文字是一個 symbol ?” 她特別強調的問。

所以你不一定要把你的文字變成 symbols,但是這樣做可以增加按鈕的彈性。

快速地提醒一下喔,Sketch 允許你交換 symbols 內的元素,讓你免於 symbols 分離的地獄。最簡單(跟最常見)的應用方式是符號:置換一個為打勾的框框符號,跟已打勾符號的 symbols,十分簡單啊。

我很有效率的做了一樣的事,但我用的是文字。我在 Sketch 裡創造了 10 種樣式,然後用這些文字樣式,去個別創造獨特的 symbols。

這些文字樣式跟顏色很好的對應我主要的樣式規範( central stylesheet
交換 Symbol 的黃金法則
Sketch 允許你交換完全相同大小的符號。

也就是說,如果你的 symbols artboards 只比其他大一點或者小一點,它們就不會出現在你的 symbols 下拉選單裡面(見下圖)。 所以我不得不確保所有文字 symbols artboard 是完全相同的高度和寬度。

因為我的按鈕的文字本身是一個巢狀的 symbol,如果我想讓我的文字是不同的顏色,我只要從我的 symbols 範例的下拉選單中,選擇一個其他文字 symbol 就好了。 這也太簡單了吧!

簡單到一隻訓練過的山羊都可以做到。

不可否認的,我把這麼多種顏色文字都做成 symbols 是有點過頭了。但至少你需要一個淺色的文字 symbol 跟一個深色的文字 symbol,它可能是白色的文字跟品牌主色系的文字。


按鈕符號

這可能是最不重要的 symbol (如果你想離開的話請隨意吧)但是我在一個新的專案裡發現他很實用。這是一個敘述在點擊後反應狀況的概念。

這個系統正在思考!可能是我瘋了,但他好像還在思考

以這個按鈕的 ” 主要 symbol ” 的基本概念是,你很有效率的堆疊所有需要的元素跟狀態做成一個 symbol,然後根據你想表現的內容,決定是否要把巢狀 symbols 置入。

這個符號 symbol 圖層在主要的按鈕是一個佔位元素( placeholder ),代表 “loading” 的狀態(見上圖)。

坦白說,這裡沒有太多要說的。我只有一個符號 symbol 跟一些小小的 loading 形狀,然後我讓他們漂浮在按鈕中央。不確定“漂浮( floating )”是什麼意思嗎?讀一下 Peter Nowell 棒呆了的文章吧。他教我所有會的東西,但是他不知道:

看看他有多簡單:

幫助你回收你設計花費的時間,我建議你可以用一些工具像是 UX Power Tools.

如果你很驚訝想著為什麼我有那麼多可以改變符號顏色的選項,看看 Francesco Bertocci 這篇很棒的文章:

我無情的從你的指尖偷走了這個技術,謝啦老兄!

按鈕容器(The Button Container)

按鈕容器是整個 symbol 裡最重要的部分⋯⋯所以如果你跳過這段,你考試就會不及格、被退學,也許最後會為了錢淪落到在 Santa Monica 的碼頭雜耍網球。

根據你需要多少種形狀,你可以做各種不同形狀的 symbols,這邊是我做的:

還在等菱形的按鈕出現 😒

幸運的是,這些符號中的每一個在功能上是相同的。唯一的差別是他們的遮罩(mask)(在完美的世界裡,我們也可以使用遮罩 symbols ,但是不能總是得到我們想要的一切,但我們現在可以嗎?)

我用這些容器 symbols 就像多種選擇的藥丸一樣,所以我喜歡有很多種不同形狀的選擇:

  • 堅硬的: 0px ,銳利沒有圓角的。
  • 柔軟的圓角: 通常介於 2px- 10px 邊框圓角。
  • 圓角: 100% 邊框圓角,長方形有很圓的角度,很適合提示跟標籤。
  • 左圓角: 這樣我才能把按鈕放在一起變成一個集合。這是用來當按鈕集合左側的元素。
  • 右圓角: 跟上面一樣,只是變成右邊。

就像我說的,你只需要一些容器當你覺得你可能會用的按鈕形狀。也就是說,如果你永遠不會用到圓角按鈕,那就不需要做圓角的容器了。

建造一個容器

每個容器都是用兩個巢狀 symbols 跟一個遮罩建立的:

  • 狀態 Symbol: 這個容器在游標移過時、點擊時跟聚焦時的狀態嗎?
  • 顏色 Symbol: 這個容器是什麼顏色?
  • 遮罩: 這個容器是什麼形狀?

狀態

狀態是容器裡最重要的 symbols,用一些透明度跟混合模式的技巧,可以讓容器表現出游標移過、聚焦時、被點擊跟不能使用的狀態。

對於一些像是“游標移過 — 聚焦”的狀態,可以同時把兩個 symbols 一起用。這樣你只需要更新兩個 symbols 而不是四個。

這裡是它們在我們的按鈕 symbols 切換的樣子:

點它!

再說一次,因為狀態是 symbols,而且每個狀態的 symbol 都是一樣的尺寸,我可以從下拉選單選擇交換 symbols 置換他們的內容。

說到 symbol 的置換⋯⋯
專業的小撇步™
讓不同種類的 symbol( 狀態、顏色、所有的文字)寬度有一點點不同。這樣可以確保他們不會一起出現在其他種類的 symbols 下拉選單裡。 你不會想要不小心選了“ 顏色 / 紅色 ” 當作按鈕的狀態,當你其實想要選的是“ 狀態 / 滑鼠移過的狀態”

顏色

最後是顏色的圖層。這基本上只是把填色做成矩形,超棒的:

我喜歡把這些 symbols 做成一大堆不同顏色:

這些是給我的按鈕可愛色調的顏色們。沒什麼需要說的了!


總結

你不需要為了每一個元件,做一大堆不同的 symbols。你只需要一些必備的物件、然後建立他們一次就夠了。然後用這些相同的小物件去建立其他完整的元件!我整個 symbol 頁裡大部分都是零碎的小物件,而不是元件本身。但用這些零碎的小物件,我就可以建立一些真的很複雜的元件了。

這整組 UI kit 可以在 UX Power Tools 下載到喔!🙃


Digital Sunday 分享你想知道的 UI/UX 新知。在翻譯名詞上有任何建議,歡迎留言與我討論及分享喔。

Like what you read? Give Hannah Tsou a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.