淺嚐即止・超譯UI/UX設計與前端工程

林育正 Riven
RAR 設計攻略
Published in
7 min readMay 3, 2018

本篇文章適合剛開始網路創業、想做數位產品,或想踏入UI/UX領域及IT領域成為設計師、工程師的朋友們,我會先用自己的觀點詮釋UI/UX及前端的工作內容,並以設計師(Designer) 與工程師(Developer) 如何進行協作做結尾。

整體僅分成三點進行討論,他們分別是:

  1. 數位產品碰上瀑布流沖刷出來的坑
  2. UI/UX設計與前端工程的角色分工
  3. 設計師與工程師的情感糾葛

數位產品碰上瀑布流沖刷出來的坑

還記得瀑布流開發嗎?就是以前的年代設計師將設計稿畫好,切圖給工程師,進行切版、開發及維護,線性工作流程雖然看似如生產線般有效率,卻不適用於新創公司及地球級科技公司 (如 Facebook, Airbnb等)。

為什麼?原因是這類科技服務類的數位產品,每天面對的大量的使用者以及市場變化,若只是做好一個網站擺在那邊,風向一變就沒人要用了;好的數位產品理應抓住全球的網路變遷趨勢,並隨著現有使用者為核心調整、迭代產品,也就是必須不斷升級,不然就會被淘汰。

當然,瀑布流還是有其用途的,多屬於靜態網頁類型,像是政府入口網站、隔壁媽媽臭臭鍋的餐飲網頁,以及簡易公司形象網站等。

如果今天客戶想做一個滿滿的大平台(像是媒合人力、交友網站等),卻選擇傳統的找了一個設計外包,做好圖之後發案給另外一組工程團隊,以為「只要盯好進度、並符合投資人要求,我的新創事業就成功了。」這樣很有可能跳入幾個危險的坑:

網站架構跟線框稿要先出來,誰要做?

舉常見的開發流程一開始需要規格、架構及Wireframe,這些東西不是所有 UI 設計師都能包辦,特別是裡面很多跟新創的商業模式有關,誰決定今天數位產品長什麼樣子?不就是創辦人嘛,如果按照瀑布流,這一步得先完成。

試想 Facebook 或 Airbnb 現在的樣子是一開始就被畫出來的嗎?還是誰可以肯定按照一開始規劃的架構藍圖做出來就一定能順練上線然後大家搶著用@@

開發到一半突然要改,需要更新設計稿。

雖然規劃好 Wireframe 了,但總有意外,像是工程師都動工三個月了,發現執照沒有過遭同業檢舉、市場突然迸出一樣的產品,及今天老闆心情好想要加新功能,其實在業界都頗常見。

要解決通常有兩條路,一條是拜託設計師改稿,然後拜託工程師加班,整個合作烏煙瘴氣。另一條是花錢解決,投資人那邊也請自己解決。

設計師的稿沒按照Guideline或開發環境限制,做不出來。

工程團隊開發到一半,發現這個畫面接不上另一個畫面,跑來找你抗議,回頭找設計師卻發現對方因為結案愛理不理,甚至要求加錢才做。

創業維艱・做人很難・客戶多難搞・對吧?

要怎麼做才能避免踏進這些坑呢?讓我們先試著了解現代產品開發的角色。

UI/UX設計與前端工程的角色分工

這四個相信是大家走在路上都會被拖住問的問題了,這邊做最淺白的說明,並且不針對該職業所需具備的技能做討論,原因很簡單,不只一般人會不懂,公司裏的主管、HR也常搞不清楚呀!最快的方法請直接參考欲應徵公司職缺的內容說明。

UX vs. UI 差在哪

解釋這兩種差異的圖很多,筆者認為這張最貼切。

別以為介面規劃怎麼走別人就會怎麼走

一言以敝之:UI 就是看到的、用得到的生理層面,UX是心理上的愉悅,關乎爽不爽。

大概抓到感覺後,我們再來看他們的日常工作內容;以網站來說,UX 做的是蓋鋼筋骨架( Wireframe & Prototype ) ,包括架構規劃、版面配置,及頁面間的交互等。在這之前若是謹慎點尚包含使用者研究(User Research)和使用者故事(User Story)。UI 則是設計網頁上功能並顧及美學,讓使用者方便的操作。

前端設計/工程

這跟上面UI/UX只有麻煩的釐清不同,前端(Front-End)是個清楚且理性的領域,但會無限的膨脹及擴大,你今天說你是做前端的,往往會被投射憐憫的眼神,日益變形的語言不說,框架時不時就會冒出新的要學,絕非三言兩語可以解釋,直接上圖:

六角學院 前端開發者宇宙地圖

發現了嗎?做前端的並不像以前只要會 Html 5, CSS 3 跟 JavaScript了,會這三個都拿到就僅是取得前端入場券而已。

工程師要學的要做的何其多,如果業主本身尚未想清楚想要什麼樣的產品,冒冒失失地規格書也還沒做就要開始開發了,如此大坑誰踩到就是誰衰。因此,UX/UI以及 Prototyping 的介入,即是在進開發前,需要先確保產品方向是成功率最大的,並且包含UI/UX/F2E/RD/PM..等所有人對產品的想像是一致的。

設計師與工程師的情感糾葛

不知道你有沒有發現,身邊愈來愈多設計師會寫Code,也好多工程師會畫Sketch了?多虧科技發展及網路資源,設計師與工程師之間的界線越來越模糊,協作的重要性也日益明顯。

現在大多數的數位產品就跟線上遊戲一樣,永遠都在公測,從來沒在跟你正式發表的。

這意謂著,一個設計開發系統永遠不會有完成的一天,Designer 跟 Developer的戰爭永不止息。

數位產品開發過程 by Joy Intermedia

在一個理想的開發團隊裡,UI設計師要能夠和UX、工程師,以及其他部門一起保持緊密協作,追求讓整個數位產品開發流程更加流暢。

不少可以減少設計師與工程師的溝通成本的工具,要用。就跟交往多年的男女朋友,依舊要經營愛情一樣,馬桶蓋要蓋、吵架要溝通、牙膏不小心刷下去了記得清掉,很多生活上的細節都是維持情感的重點;反應在產品開發上就是,設計師的稿請標註好再給工程師,別讓辛苦的RD大大要去滴顏色跟猜字級,工程師也請尊重設計師出的畫面,覺得要改善請記得溝通,並切記不要再把自己講話沒有藝術感解釋成「我講話直接,是為了專案效率。」這種一秒翻遍全公司設計師白眼的話了。

身為設計師,總會有一種擁抱烏托邦的情懷,比如酷炫的動態,完美無暇的視覺等;現實往往會四處碰壁,工程師會放大絕:「這個沒有套件可以做。」

最後落得只有按照工程導向主導開發,設計師只能配合產圖。

嘿!記得,工程師就像魔術師一般,可以將你的點子化為真實,但他們不是通靈王,只丟畫面不標註、不說明,不跟客戶溝通好做原型,佛系UI 4 ni ?

好好當朋友,這次專案別放手。 — Dribble by Jason Rain

好好地解釋你的設計,與他們分享你的價值。

告訴他們為什麼你的設計提案值得被開發出來。協助他們學習如何判斷實作出來的成品與你的設計是否相符。當你說某個東西看起來不好的時候,告訴工程師你是怎麼想的。

因為工程師越是喜歡設計,他們越能夠理解背後的思維,看見設計的價值,進而讓設計越快完成實作,而且還會做得更好。

先有設計還是先有開發 ,沒有標準答案,雖然有很多工具能協助數位協作,但最終還是取決於團隊中每個人的溝通技巧,以及對這項產品的愛。

噢開心就拍手 Dribble

感謝您的閱讀!若這篇文章對你有幫助的話,可以拍手來點掌聲哦!是我繼續寫作的動力 :)

拍手「1下」:閱。
拍手「10下」:覺得不錯。
拍手「20下」:相當實用。
拍手「51下」:聽說在一秒內拍完可以突破極限到第51下哦!
51下是開玩笑的啦XD Pinterest

日常的小分享或生活動態都在 個人臉書 歡迎追蹤!

相關合作洽談請來信至:riven@monospace.tw

我是Riven 我們下次見囉~!

--

--

林育正 Riven
RAR 設計攻略

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design