sketch_00

Sketch 初心者在設計 UI 前要做的五件事!

就像廚師大展廚藝前要備菜一樣,產品設計師在做設計前,也應該把需要的材料都準備好,設計才會順利快速。Sketch 是現在 UI 設計師最喜愛的繪圖軟體之一,在開始繪製畫面與展開工作流程前,進入"可持續設計"的狀態是很重要的。在此,設計師 Jon Moore 分享給讀者 5 個 Sketch 繪製前要做的事情,協助你進入這個狀態裡:

用 Sketch 設計前要做的五件事情:

1. 設定字體格式

雖然做這件事很枯燥,但其實後來也必須做不是嗎?文字是用戶了解產品最直接的途徑,所以這一步將是關鍵。我喜歡在所有的設定中挑選字體的尺寸和風格,所以我的字體格式頁看起來如下(我通常還會創建一個暗色主題):

sketch

如果我們先有這般的字體設定頁,之後若要改變字體將會很快速便利:1)全選,2)更改字體,3)同步風格。搞定!

 

每個主題下包含四種字體格式:

  • 預設(通常設定 80-100% 透明度)
  • 次級(50-70% 透明度)
  • 不可用(20-40% 透明度)
  • 強調(常使用品牌色)

 

為什麼我不是改變顏色值而是設定透明度呢?

這個小技巧能讓文字在任何背景顏色上看起來都舒服。下圖中,第二行設定了透明度,看起來比單純的灰色自然多了,因為它融合了背景的顏色。而我們並不是個別的挑選不同的顏色,只是設定透明度讓它們看起來像不同的顏色,多方便呀~

sketch_02

 

最後,別忘了將你設定好的字體格式在 Sketch 中創建為 Text Style。如果你日後想要將"不可用格式"的透明度從 25% 改到 30%,你只要改變字體格式中的樣式,這樣文件中所有套用相同樣式的文字都跟著改變。

sketch_03

 

進階技巧:在字體格式的命名中使用斜線(看上圖),將可在 Insert 的下拉選單 Styled Text 中創建次級的選項:

sketch_04

 

2. 設定顏色以及風格

決定其他東西之前,你要選定 5 種基準色:

基準色

  • 品牌色:如標題,就是品牌的主色。
  • 黑色:選定一種你將在設計中使用的標準黑色。我會避免純黑,取而代之的是加入了少量品牌色的黑色(或者加入互補色)。看下圖:
sketch_05

在你的品牌色上覆蓋上 80-90% 透明度的黑色。選取這個顏色作為你的基準黑。這是個小細節,卻會產生奇妙的效果。

 

狀態顏色

  • 錯誤狀態:紅色系。這個顏色提示使用者有東西出錯了。純紅色可能會有點太搶眼,加上少許黃色或藍色可讓這個紅色看起來更舒服。
  • 警告狀態:黃色系。這個顏色會讓使用者警覺可能會有錯誤發生。別選擇太濃烈的黃,我一般選擇帶點橙色的黃,這樣在白色背景上的辨識度也不錯。
  • 成功狀態:綠色系。這個顏色提示使用者操作進展順利。我喜歡 app 中的顏色偏冷,所以我會在綠中加一點藍色。
sketch_06

從左到右:品牌色、黑色、錯誤狀態、警告狀態、成功狀態

 

為什麼只設定五種顏色呢?因為產品中顏色的選用要十分謹慎,不要沒理由地使用某種顏色。在我的設計中,除非我想讓用戶注意什麼東西,否則我會使用大量的黑色和白色。額外的顏色適合於表格或圖片,但請選用基準顏色之外的顏色。

 

風格

設定風格也能節省未來修改的時間。這些元件包括了 app 中的任何東西,從卡片、背景到列表背景等。下圖是我的一些元件風格:

sketch_07

 

每當我設計對象時我就會調用這些。如果我想更新基準樣式,我只需回到這個頁面中就能同步我頁面中所有的樣式了。這真的很節省時間!

 

3. 創建頁面(Pages)和畫板(Art Boards)

這步驟很簡單,但卻能讓你理清思路。再開始設計前,先決定如何組織你的設計:

  • 依功能:在食物 app 中,你也許需要一整頁來存放 “食譜” 的畫板,另一頁來存放 “個人資訊” 的畫板。
  • 依使用者角色:在閱讀 app 中,你也許需要一頁來存放 “讀者” 的畫板,而另一個頁來存放 “投稿者” 畫板。
  • 依工作流:在 Uber 的 app 中,你也許用一頁來存放 “叫車” 這個工作流程,而另一個頁來存放 “增加信用卡” 的工作流程。

 

皆能用上面提到的方式展開,但要儘早決定,並堅持使用一種。

sketch_08

 

4. 建立你的網格系統和佈局

網格系統真的很重要。

設定好網格系統會讓佈局和擺放元素變得簡單;你甚至不用考慮元素間的擺放距離,因為網格系統都設定好了,只需按造他的規範。

sketch_09

12 列的網格仍是使用最多的一種,因為它可以被最多數整除:1、2、3、4、6 或 12。

 

下圖是一個以 8 px 為基準的網格系統設置案例:

sketch_10

這是個有著懸浮內容區域的全寬度的 app。當瀏覽器的寬度增加時,這 12 列網格依然會待在內容區域的中間。

 

設置網格系統時需要考慮介面的佈局(是沿著邊緣移動 edge-to-edge 的還是浮動 floating 的),你可能需要為不同佈局的頁面分別設定網格系統。

sketch_11

內容部分隨著網格浮動變形,且網格設有最大寬度並置中。

 

額外的好處:開發人員會非常愛你,因為大多前端架構皆使用網格系統。

小提示:一般來說,我不設定網格結構中的行,因為每頁的行都在變換。但如果你想要的話,也是可以的。

 

5. 導入品牌相關要素

最後要做的,是導入所有的品牌相關要素。也許是一個 Logo,也許是一系列的 icon。重要的是,你要將它們都轉換為 Symbol。

sketch_12

 

為什麼?

想像一下,你已經設計了 75 個帶有你的 Logo 和標語的 header。但老闆卻臨時換句標語,那你該怎麼辦?好吧,若你沒有將它轉換為 Symbol,那就不得不分別更新這 75 個頁面。設計初期就將這些品牌要素轉換成了 Symbol,修改 Symbol 就能自動修改全部頁面,不用幾分鐘能全部換掉這些不用的標語。

至此,所有的準備工作就完成,開始你的設計吧!

 

本文章已獲得作者與翻譯者授權,翻譯者:Puddinnng,原文:5 Things to Do Before You Start Your Next Design File in SketchApp , or, Preparing Your Design “mise en place” by Jon Moore,原文出處 medium

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文:
  • Polly

    超實用的筆記,剛好今天整日就是在研究第4點!