只有日常 | 第一次 UI/UX 接案的過程

一開始的念頭

在以前當 UI/UX 設計師的五年間,每當看到別人能夠獨立接案,
都會覺得又佩服又嚮往,對我來說,覺得那不只是能力上的肯定,
同時也代表著,那是一種達到「夠格」的標準。

所以我一直很希望能夠獨立去接看看案子,
也把「嘗試接案」列進了我的人生 To-Do List,
但在那之前,內心那個「不夠好」的聲音會一直跑出來提醒我:

Hey, you are not good enough.

也因此,我總是把想法收回,
告訴自己「再等等吧,等我準備好了再說」,
但想當然的,我也就真的繼續放著了


機會來了

直到今年,大學的朋友突然找上我,想一起合作一個 UI/UX 的 App 案子,
收到訊息時的那一刻,我真是又驚又喜。

雖說那時我已經轉職成為前端工程師,但心中對 UI/UX 的熱愛始終還在,
而且機會就擺在眼前,這次若不抓住,之後也不知道還會不會有。

所以我沒有再想太多,直接把那個「不夠好」的聲音拋在腦後,
大致了解一下需求後,我簡單的回了:

好啊,我接!

也就有此次接案經歷,更讓我開心的是,
竟然因此完成了人生 To-Do List 上的一項願望


我們怎麼分工

這個接案是我和設計夥伴是一起分工合作完成的,
接下來,就簡單分享一下整個 UI/UX 接案的過程,以及我們是怎麼合作的。

UX / 架構規劃

  • 需求分析與流程設計
  • 資訊架構規劃
  • 互動草稿製作

UI / 視覺設計

  • 品牌風格設定
  • 介面設計與排版
  • 視覺與互動細節優化
● 這邊的 UX 是偏架構面,包含需求與功能邏輯的整理、頁面流程與資訊結構的規劃,未涉及使用者研究,著重在將業主需求轉化為可實作、可理解的產品架構

我主要負責 UX 架構規劃,把業主想要的功能和需求整理出整體邏輯,
規劃出頁面流程和互動草稿,讓整個產品的結構清楚、好理解。

設計夥伴則負責 UI 視覺設計,從 Logo、配色到整體風格都由他主導,
再根據我的草稿去繪製畫面,調整排版和細節,讓整個設計有完整和一致的視覺感。


從 0 到 1 的過程

上面的描述或許還是不夠明瞭,所以下面就整理出之前完成這個產品的整個過程 ↓

Step 1 | 理解需求:從「想做 App」開始

業主先提供相關資料,我和設計夥伴研讀資料後,一起與業主開會,理解業主整體的方向和理念,例如:

為什麼要做這個 APP?
這個 APP 想改善使用者什麼問題?
做這個功能想達成什麼目的?
這個 APP 有想帶給使用者什麼感覺?
目標使用者客群是哪些人…等

Step 2 | 整理功能:把想法攤開來看

理解業主需求後,我開始在 FigJam 攤出所有功能,依重要性和類型進行分類,整理出產品的主要結構。

第一次 UI/UX 接案的過程_feature map

Step 3 | 構思流程:讓功能變成實際操作

各功能確認後,就能構想需要哪些介面與流程來完成單一功能,有些人會再繪製 User Flow(使用者流程)去順流程,但這塊我就略過,直接把流程和草稿結合在一起。

第一次 UI/UX 接案的過程_UI architecture

Step 4 | 草稿階段:最喜歡的黑白世界

我最容易進入心流的部分!

把所有功能與流程轉化為草稿,因為都是「黑白色」,所以可以讓我專注的在資訊擺放與操作邏輯,分出層級,並以簡單圖形化方式呈現。

第一次 UI/UX 接案的過程_draft 黑白稿

Step 5 | 品牌定調:風格的誕生

接下來就是換成設計夥伴的部分了

在與業主定期的需求確認會議中,設計夥伴逐漸理解業主理念,然後依此發想品牌風格與 Logo 設計。

Step 6 | 介面設計:讓草稿變成畫面

在品牌方向確立後,設計夥伴就開始進行整體介面的視覺設計,這階段主要是把我前面規劃好的頁面草稿與流程,轉化成實際畫面。

第一次 UI/UX 接案的過程_UI 視覺稿

Step 7 | 最後階段:確認互動的完整性

終於到最後一步了!

在介面視覺確定之後,會再把整體流程和互動邏輯重新檢查一遍,確認每個按鈕、切換或提示的行為都合理、連貫。同時也會整理出一些互動設計指引,方便後續工程師開發。

第一次 UI/UX 接案的過程_mockup

呼~~

以上,就是整個接案的過程。

現在回頭看,真是一大工程,真的很感謝我的設計夥伴和我一起合作完成,
不然只有我自己一個人做真的是會累死。

緣分也是很奇妙,因為這次合作,與許久不見朋友又重新產生連結,
也因為朋友接觸到業主,彼此培養出一些合作默契出來。

然後也有跟設計夥伴討論明年要來一起報名 Google UX 證照,
如果真的有取得,到時再來 blog 分享心得吧!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *