UI / UX 設計師

在工作了一段時間後，陸續接觸了幾位不同的 UI / UX 設計師， 而每個人做事的方法都有所差異，在這邊簡單地列出幾個想法。

設計師所使用的工具

在 UX 設計師裏頭，有配合過使用 Axure、Adobe Xd、或是用 Sketch 直接和 UI 一起出的。 而在 Sketch 的模式下，它裡頭有個詞叫做「symbol」，其意義和 iOS 裡頭的 UIView 相關物件相同。

物件的概念

Sketch 提供了 Symbol 的建立，讓使用者在設計時，能夠把一些重複使用到的元件，做成一個 symbol， 而它會自動定義這個 symbol 哪些值是可以被異動的：

如同上方寫的「中華電信」，便是可被異動的值，但更改這個字串並不會影響整體的外觀。

以 iOS developer 來說

設計師可以了解到，UINavigationBar 的樣貌大概是長這樣，並明白 UIBarButtonItem 能夠控制的外觀欄位有哪些，像是這邊顯示的 Edit 字串。 而設計師也可以自行建構 symbol，來增加重複使用的便利性；這點也如同我們在開發 App 一樣， 會建立一些較容易重複使用到的 UIView 來呈現畫面。 設計師可以更明確地定義物件哪些欄位是會怎麼變動的，像是一個「客製化的按鈕」， 可以先明白它的背景色可能會在其他頁面做換色、或是字體會更改， 這都可以讓開發人員在一開始設計這個按鈕時，都考慮進去來增加彈性。

維持一致性

symbol 的概念，可以維持整個專案的外觀一致性； 也就是說當設計師需要調整剛剛所說的「客製化按鈕」， 想把圓角從 5 pixel 改為 10 pixel，便只需要更改 symbol 即可， 不需要再到各個使用到相同外觀的按鈕，都去一一調整為 10 pixel； developer 也一樣，只需要更改其類別即可，省去重複定義的時間。 也可降低設計師和開發人員之間的溝通成本，讓彼此能夠更專注地做好自己的工作。

接下來呢？

照著上述的做法，我們已經可以較清楚地和設計師們以一致的用詞溝通元件： 設計師：「在登入畫面的圓形按鈕，背景色要用藍色」 ：「等等⋯⋯你說的藍，是什麼藍？」 我們可以理解圓形按鈕是之前所建構的 CircleButton（舉例），但顏色呢？ 「就 157AFB 啊～」 這絕對不是一個友善的方式啊⋯⋯ 在設計稿中可能會出現的顏色，建議的做法是請設計師都幫它們取個名稱， 並使用一個 structure 來宣告這些顏色。

import UIKit

struct UISetting {
    static let blue = UIColor(colorLiteralRed: 21/255, green: 122/255, blue: 251/255, alpha: 1)
}

這樣我們便可以很輕鬆地讓這句話和程式產生連結 「在登入畫面的圓形按鈕，背景色要用藍色」

func setUpView() {
    let loginButton = CircleButton()
    loginButton.backgroundColor = UISetting.blue
}

只需要一開始多花一些心思，定義一下彼此之間的「用詞」， 出份規格表 xxx app – blue = #157AFB white = #FFFFFF 要溝通或者調整的時候，就可以省下許多時間了！