領悟這五要點後,你就不是菜鳥設計師了 Five things you realize when becoming a senior designer

Shandy Tsai
UXeastmeetswest
Published in
7 min readOct 9, 2018

--

【本文為個人看法,僅供參考】

先前寫了許多設計、技術類文章,發現比較少分享個人學習心得。從求學、第一份工作,第一次換工作,中間經過許多挫折與吸取教訓的心路歷程。

犯錯是必須的,成長是辛苦也值得的。這次透過插畫*的方式,輕鬆地帶大家認識產品設計師的各種辛酸血淚 lol

圖1. 媽我真的不想再改了…

*因為無奈熊長得很符合我的菜,以此為插畫基底 😍

ㄧ、看到Behance, Dribbble的美麗prototype,不再興奮地跳起來

1. You no longer get thrilled by amazing prototypes on Design Websites

剛開始學習UX/UI時,常常會瀏覽Dribble, Behance等設計作品網站,看到華麗的動畫、優雅的排版,會非常興奮地想學習效仿。

直到工作一陣子後,發現最具挑戰的是把設計真正實現的開發過程、考量到不同的使用情境,及與多方團隊合作的溝通技巧。

當然,不是說這些理想prototype不再重要,而是更加了解實際開發的過程及挑戰。

圖2. 「什麼動效?能code出來的才是好動效」

二、發現Wireframe只有設計師看得懂

2. You realize other than designers, no one understand wireframes

Wireframe*是設計過程中很重要的環節,進行發想、初階成品,讓設計師可以專注於使用流程及互動。還記得在學校、求職的過程,都會要求要做線框圖,以解釋設計流程。

但是 . . . 我發現好像只有我看得懂 😂 😂 😂

「Shandy你在呈現設計時,請盡量使用高保真設計原型」還記得剛入職時,PM跟我這麼說,當時的我百思不得其解。後來與各部門溝通經驗多了,才逐漸明白:

1. 大部分的人是視覺動物 People are visual

大多數人需要擬真的設計原型,才能感受、想像產品交互,提供真實回饋

2. 需要更多步驟去解釋產品交互 interaction design is more than static images

通常Wireframe只有簡略的少數畫面,但實際產品包含了畫面切換,甚至是一個下拉選單dropdown、search bar搜尋列,都有可能影響到用戶體驗

3. 有時候視覺元素會影響用戶體驗 Visual could affect UX

雖然說Wireframe盡可能減少視覺元素,但視覺設計是用戶使用產品的第一印象,包含圖片、插畫、色調等

當有足夠經驗時,你會漸漸明白使用Wireframe的適當時機。如果是產品團隊在發想階段、重視流程或是功能性>外觀,這時候使用Wireframe是快速及有效的方式;但如果需要跨部門討論、進行用戶訪談時,盡量使用高寶真的prototype,會得到更真實的想法及回饋。

圖3. 設計提案報告完了,大家好像都似懂非懂,原來是什麼都不懂 😂

*Wireframe線框圖是一種低保真度的設計原型,在去除所有視覺設計細節之下,進行頁面結構、功能、內容規劃

三、工程師是你最要好的媽擠

3. Engineer is your best friend

有些設計師會認為工程師是敵人,他們總是問一大堆問題、提出需求、甚至打擊你的設計:「如果按這個按鈕,介面應該要長怎麼樣?」、「可不可以給我這個圖片的svg檔」、「這個功能技術端無法支援」…等。聽到這些問題,差點又多長了幾根白頭髮。

好的產品是設計、工程與商業的結晶,缺一不可

不同的意見是很正常的,因為你們出發的角度不同,目的都是為了讓產品更完善。工程師考量各種使用情境,與交互細節。他們會從元件的角度去思考,盡量重複利用,減省資源及時間,他們是產品的建造者及捍衛者。

學習理解開發者的角度及思考邏輯、試著釐清問題、解釋設計理由,相信你們可以一起”搬磚”的很愉悅順利!

圖4. 好的產品是一個團隊共同努力的成果,試著站在對方的角度著想

四、沒有一次到位的設計

4. Design never should be once and done

剛開始接觸UX/UI的朋友,會認為做好用戶研究、資訊架構、競爭者分析後,畫出來的設計圖就是最後定案。

NO NO NO 這是一個常見設計迷思

Design is the art of continuous problem solving — an active cycle of investigating and validating needs, crafting and developing ideas, and creating solutions. — Material Design

與視覺設計很不同的是,產品設計是多方合作的過程。與PM討論功能目的、和工程師釐清各種使用情境、與QA確認設計細節、聆聽使用者回饋等。

所以當設計提案被打槍時,是非常非常非常正常的。記住,大家都是為了讓產品更好,或者想要貢獻產品想法。許多時候是在於溝通技巧,如何有效呈現設計與捍衛設計。因此,釐清真正的問題、適時聆聽是很重要的。

圖5. 怎麼沒有一次射中靶的…

五、產品是迭代(永無止盡)的過程

5. Product development is never complete

這點跟第四點有相關,也就是說當你設計完了、也開發完了,用戶也使用到新功能了,你深深嘆了一口氣:「啊~終於結束了這三個月的折磨日子」

殊不知,這時真正的產品大魔王才開始…

直到用戶使用產品,我們才會得到真正的數據,瞭解實際使用情境及回饋。有可能需要修改設計、或是增加輔助功能等。能盡量減少修改次數的方法之一,就是在推出前做User Testing,提早了解產品缺陷及即時修正。最著名的例子 — Netflix做了非常多的A/B Testing,去理解用戶、最佳化用戶體驗。

圖. Netflix利用A/B Testing,了解用戶喜好,進行產品迭代
圖6. 山這麼高、這麼遠,我腿這麼短是要怎麼爬過去QQ

結語 Conclusion

話說了這麼多,想要成為一個優秀的產品設計師,不只需要精進設計實力,還要考量現實狀況、學習與各部門溝通技巧,及“非常良好”的耐心細心,才能領導團隊創造一次又一次更好的產品。

沒有最好的產品,只有更好的產品

好,我知道聽起來壓力很大

還是先來放鬆一下,來~~~跟我深吸一口氣,吐一口氣~~~

快給我回去認真工作!!!

圖7. 最好的解決辦法就是戴上耳機,動動屁股,讓腦袋靜一靜

*特別感謝無奈熊給我許多插畫的靈感

--

--

Shandy Tsai
UXeastmeetswest

Sr. Product Designer @ Duolingo | Co-Founder @ UXEastMeetsWest & Asian Creative Foundation | @shandyartadventure