我是Lena,一名透過自學從金融轉為設計業的UI設計師。這裡會分享轉職路上到進入業界的心得與經驗,希望可以幫助到每位想轉職為UI設計師的朋友!

當初決定踏入UI設計領域時在網路上得到了非常多的資訊和前輩們分享的心得,於是我也決定將自學的這段經歷分享上來,希望能幫助到當初和我一樣迷茫、想自學卻不知從何開始的人。

先介紹我的背景:

國立科大商科畢業,大學時沒碰過繪圖軟體、沒有相關作品,設計相關經歷是0,雖然從小就有興趣但仍沒有一項拿得出手的技能。

當時看到很多都是設計背景、頂尖四大,或是在學期間就有相關作品的前輩分享,不禁覺得自己沒有什麼優勢(含淚)。

我參考許多入門心得文之後,大致理出了自己的學習地圖,以下分成不同要點分享,文末會放上我讀過的幾篇入門文章。

一、學習準備

關於設計與UI

如果你和我一樣不具設計背景,先簡單了解設計的發展史。設計是什麼,設計的目的呢?有哪些類型呢?接著了解什麼是UI,和一般人常聽到的平面視覺設計差別在哪?交互設計又是什麼?UI設計師的工作內容通常是哪些?工作流程呢?(不過有些公司分工不會很細就是了)

首先了解自己做的這件事情是什麼。

Guideline

很重要的Guideline,雖然有翻譯版但我是讀原文(直接從官網取得也方便),比較貼近原意想表達的。看完一次後,實作時邊做邊查,也容易記得起一些基本的了(元素尺寸等等)。

iOS design resources

Android Material Desgin

iOS Guideline該怎麼看?——Akane Lee

二、應用實作

設計原則

由於我沒有任何設計基礎,所以從設計四大原則、版面、色彩、字體等等基本知識與應用開始了解,網路上有非常多文章、市面上也有很多書可以參考。

軟體應用

掌握基本軟體:PS、AI,有Mac的用Sketch,沒有的可以用XD,動效部分可以使用AE(這可以擺後面一點學)。可以先找基礎入門課了解大致功能,多練習幾次就慢慢上手了。當初急著想學很多軟體(好像設計就是會很多軟體),後來才了解軟體是工具,更重要的是思考模式。

臨摹學習

一步一步來的臨摹教程,是幫助我快速上手軟體的方法,但這不是長久之計。軟體熟悉後可以開始到各大作品網站觀察大神們的作品,色彩、構圖、光影、交互等等,試著拆解所有的細節、如何做出來的、思考為什麼要這麼設計。下面附上幾個知名的作品網站:

Pinterest

Dribbble

Behance

Awwwards

還需要了解如何能平衡理想與現實、減少與工程師間的溝通阻礙:視覺設計師是怎樣讓前端工程師100%實現設計效果的?

解析度與螢幕尺寸

了解什麼是DPI與PPI,還有DP、PT、SP之間的關係。Android和iOS系統分別要以哪種尺寸來做設計呢?(這個每個人的做法都不太一樣,建議多爬文會有自己的思路)

為設計師打造的DPI指南

iphone螢幕尺寸整理

命名、標註與切圖

雖然命名沒有一定的標準,多是以各團隊為主。不過比起內建的Oral、Oral2,經過命名整理後的圖層與切圖會整齊許多,自己修改內容、工程師開發時也能輕鬆找到對應的元件。標註的部分除了軟體插件,還有團隊協作用的Zeplin,在標註與切圖上能夠省下不少時間,被邀請的團隊成員也可以在設計稿上留下備註。

一份詳盡的UI切圖命名規範

告別切圖標註-Sketch/PS+Zeplin

Prototype製作

如果想將設計稿做成一個可操作的原型(Prototype),有許多工具可以幫助我們。Prototype可以讓我們更直觀了解介面間的切換、交互效果,就像平常在手機上操作App一樣,在團隊開發過程中也有很大的助益。

產品原型製作工具使用分享

另外還有設計前的使用者研究分析、資訊架構等等前置流程和思考,這裡就不多敘述了。

三、閱讀與思考

網路上的資源非常多,除了練習外要大量閱讀文章,設計相關的職涯發展、不同角色間的溝通、前輩經驗、產品研發與優化、使用者研究等等都有,每天吸收一點對自己有幫助之外,也能慢慢篩選出一些好文。同時也盡可能看看不同領域的文章、思考不同的觀點,認識這個世界。

這好像比較抽象一點,大概是讓自己不斷吸收新知、訓練思考,需要長時間累積(我也還在努力中)。

關於課程

PTT上有滿多人問到入門課程選擇的問題,以我經驗分享,我自己用的平台是Udemy,很常促銷也有許多免費的課程,但幾乎都是英文的。

對於害怕英文或想上中文的人可以上Hahow,目前有觀摩幾堂課,但當初入門的時候沒有上過。另外中國也有很多成套課程,強調終身幫你解決所有問題,但大概要台幣一萬元以上,對於有經濟考量的人可能不是首選。

我當初挑選的是一系列的課:從基本知識簡介到教你實作出一個頁面,甚至有教到Code與網頁設計部分(皮毛)。其實Hahow的課程也多是這種的,老師還能幫你批改作業、回答問題等等。我覺得這類課程的好處是:短時間內能產出一個介面,讓你成就感滿分,然後有動力繼續學下去(OK我自己屬於需要成就感滿足那型)。而日後更進階的課,再依自己需求去挑選(我也好多口袋名單呀)。

但僅僅上完入門課程不代表什麼保證,還是得花時間去吸收更多的知識、做更多的練習,盡量不要讓自己養成被動取得資訊的習慣。

資源網站

放上幾個多方面資源的學習網站和我私心的Blog給大家參考,也推薦大家可以加入FB社團與同行前輩交流和分享資訊哦。

優設:大量文章,還有很多免費的線上課程、軟體基礎入門,不過比較完整的都是付費的。

站酷:有中國許多大神發表的好文、教學與作品,可以追蹤喜歡的大神。

學UI網:也是中國的,有付費課程和許多短篇教程。

Akane Lee:當初把大神UI/UX相關的文章都翻完了,也有推薦書單。希望之後有幸能上到大神的課:)

As A Product Designer:在這裡可以看到很多分享,也發現了很多值得Follow的前輩,而且都是中文!

入門文章

從零基礎如何自學UI設計

我的UI/UX設計入門方式——Akane Lee

寫給UI設計新人的入門體系指南

除了上面提到的之外,還有很多技能都值得學習,比如入門文章連結裡提到的手繪、網頁設計html/CSS/Javascript等等(寫不完拉),都能在這條路上分別幫助我們不同的地方,至於怎麼分配技能點,在學習的過程中再由大家摸索出自己的方向了。

我認為自學最怕的是一直在自己的世界裡,找不到盲點,所以盡可能看看別人的經驗、多問多交流。我想沒有最完美的學習方法,只有最適合自己的,畢竟學習的路是永無止盡的(官腔)。

本文轉載自《Lena — 從金融自學轉職成功的UI設計師

作者介紹 |

Lena

從金融自學轉職成功的UI設計師

分享