App UI 設計師該不該學寫程式

Bing
Bing
Mar 14, 2016 · 5 min read

我是一個 App UI 設計師,我會寫一些簡單的 Swift、Objective-C,寫著寫著也 3 年了啊(遠目)。


誤入歧途的開始

我所待的是一個新創團隊,成員非常少,就我一個設計師與兩個工程師做全部的開發。在幾年前,設計師會寫些 HTML、CSS 並不是少數,所以設計師兼寫一些網頁,也不是奇怪的事情,也因為人太少了,所以也沒有什麼前端後端的,誰會寫,誰就端走。

當公司之後決定要開發 App 的時候,老闆理所當然覺得介面就是我做(就是你了,皮卡丘),在老闆的邏輯裡,這不就跟寫 HTML、CSS 一樣意思嗎?而且介面是我設計的,當然是我自己最清楚,寫起來也最有愛(疑?)

那時,我自己也覺得設計師寫 App 的介面其實好像也挺正常的。於是我就踏上不歸路了。


學習過程

在當 Web Designer 的時候,我對寫一些有的沒的還挺有興趣的,像是 SCSS、SUSY 之類的也是自學,所以我並沒有抗拒程式或者是對程式過敏的症狀。這對於有興趣學習 Xcode 的設計師來說很重要,因為這門技術沒有「愛」還真的很難學下去。

我 iOS 的學習的方式是透過書、網站、跟 Youtube:

一開始學習真的很困難,因為整個架構跟程式碼的長相,都跟寫網頁有很大的不同,無法依靠過去的經驗來做。所以看書的話,程式就是照書打。看影片的話,就是一邊看一邊暫停,把影片放大到全螢幕,用肉眼死命去看他到底打了什麼,他點了哪裡,我就點哪裡。

第一個星期,我連 App 都沒有跑起來過,因為一跑就閃退。之後以淚洗面了幾個月,就漸漸可以做出一些什麼來了。

但我現在回頭看,那時候真的是做得非常爛(我對不起所有的使用者)。


工作流程

  1. Wireframe:Omnigraffle
  2. Prototype:inVision
  3. UI 設計:Sketch
  4. App 介面製作:Xcode(iOS App 的開發軟體,MAC only)

我的工作流程上,跟一般的 UI 設計師沒什麼差別,只是在於我多了一項使用 Xcode 來製作 App 的介面,然後少了作「標註」給工程師的過程。

在 Xcode 的部分,主要就是在 Storyboard 繪製每一個介面,然後連接每個畫面,讓畫面可以跳轉,另外再塞塞假字。所以工程師拿到的東西,就會像一個真的 App,只是充滿了假字,然後工程師再把程式補上去。

整個過程跟寫網頁的 HTML、CSS 很像。


驚人的發現

之後,我遇到其他公司的工程師或者是設計師,我才知道我被唬了。原來在業界,App 介面的撰寫,還是由工程師來進行,跟寫網頁不一樣。

但我也發現,原來由工程師來撰寫 App 的介面,容易發生一些問題,例如:

如果設計師對 HIG 不夠了解:

設計師不夠了解 iOS 的 Human Interface Guidelines,所以容易設計出工程師做不來,或者工程師覺得很無意義的設計。

工程師表示:為了這東西客制化元件是有那個必要嗎(翻白眼)

更甚者是連一開始的設計尺寸就出了問題(工程師準備燒炭了)。

設計師與工程師協同合作的困難:

工程師製作出顏色不對、距離不對、尺寸不對的介面。

設計師表示:工程師是眼睛脫窗了嗎(翻白眼)

會發生這樣的狀況,很常是因為工程師看著設計師在 UI 上華麗的「標註」,看到眼睛都花了,雙眼無法對焦,導致只能靠「感覺」去做。但這樣的「感覺」,怎麼可能逃過設計師的火眼金睛。最後只能讓設計師坐在工程師旁邊一起調整,或者是讓工程師自己去學著用 Sketch。

備註:我覺得 Sketch 是一個很好的解決辦法,但或許也可以嘗試使用 ZeplinSympli


如果設計師會寫程式

因為 App 介面是設計師自己做的,最顯而易見的改變會是:

  • 工程師與設計師不用再為了介面,退貨來退貨去的狀況。
  • 設計師自己會了解到,樣式的限制。
  • 再也不用花時間作工程師疑似沒在看的「標註」。
  • 設計師比工程師更願意花時間調整 UI,畫面也容易比較工整漂亮。

但如果上面的好處都無法吸引到你,你只是受不了工程師愛改不改的嘴臉,其實…


其實設計師可以不用學寫程式

我認為互相了解對方的想法,比起義無反顧的去學寫程式來得重要。例如:

工程師讓設計師了解,iOS 對於元件樣式修改的限制在哪,哪些地方可以換顏色,哪些地方可以改大小,排版又是怎樣的邏輯與規則…。

設計師也讓工程師了解,設計師所使用的顏色、樣式、格線…的 Design Style Guide,讓工程師可以快速製作,不用再算座標,不用再查色碼…。

都可以加速開發,或者讓溝通更順暢。


但是,如果設計師對學習寫程式很有興趣呢

恭喜你,你有一身橫練的筋骨,是百年難得一見的練武奇才。

不過,學習的過程絕對不輕鬆就是了。例如像 AutoLayout(Apple 的一種排版玄學),它因為充滿了智慧,所以人類也要依靠豐富的經驗,與強大的智慧才能駕馭它。

如果設計師對 Xcode 有興趣,非常建議從 design+code 開始學習,因為這就是為了讓設計師學習寫 Xcode 的書,而且還有影片可以看、有範例程式碼可以直接複製貼上。

Bing

Written by

Bing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade