開發人員與 UI / UX 設計師之間的合作模式

UI / UX 設計師

在工作了一段時間後,陸續接觸了幾位不同的 UI / UX 設計師,

而每個人做事的方法都有所差異,在這邊簡單地列出幾個想法。

設計師所使用的工具

在 UX 設計師裏頭,有配合過使用 AxureAdobe 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 來宣告這些顏色。

這樣我們便可以很輕鬆地讓這句話和程式產生連結

「在登入畫面的圓形按鈕,背景色要用藍色」

只需要一開始多花一些心思,定義一下彼此之間的「用詞」,

出份規格表

xxx app –

blue = #157AFB

white = #FFFFFF

要溝通或者調整的時候,就可以省下許多時間了!