UIUX&前端技術自學分享

陳昱安
7 min readMar 14, 2018

這幾天把面試心得分享到ptt、blink等論壇上,得到了不少迴響,其中不乏詢問如何自學跟自學資源的,自己也蠻訝異一年來的成長,在此統一做個回覆。如果沒有follow到的傳送門於此:

UI/UX學習歷程與作品

我接觸UIUX大約是一年多前,自己本來就擅長於視覺設計,但沒想過要當飯吃,知道有UIUX這個選項以後就開始自學,以下為學習方式與資源:

100 Days UI

我記得這好像是從一個國外的設計師開始發起的,簡單來說,就是每天做一個UI,持續100天不同的題目。這實在要很有意志力,我大概到20幾天之後就懶了XD那時候剛好錄取實習就沒有再繼續。在進行100 Days UI的同時,也可以參考看看別人是怎麼做的,從臨摹開始,同時去思考為什麼要這麼做。練習這個的缺點是通常只有單頁面或功能,所以不能算是一份完整的UIUX練習。下面這個連結集合了很多100 days ui的作品,題目也可以依照這裡面走:

彼得潘的ios課程

兩個學期以前,彼得潘來台大開ios開發的課程,所以我也會很簡單的ios app開發,在這個課程當中真的收穫良多,也是我立志要學好UIUX的轉捩點,錄取UI實習的作品集也是從這個課堂而來:

這邊的學習方式就是真的去規劃一個app,從user story、wireframe到prototype都做出來,是最好的練習方式,也順便完成了一個大型的作品集。

uxabc 實體課與網路資源

這是在業界非常有名的Taylor開的實體課,在報名課程之前就已經從官方Medium學到了很多UI必須注意的小細節。傳送門:

報名實體課真的是我人生做過最好的決定(太誇張),這個課也是我錄取實習以後,發現仍有不足才去報名的,說真心話不便宜,還好有學生價打折扣,但上課品質絕對不打折,一個月的時間打破我之前所有觀念,接著一步一步重新建構起來,上完這個課絕對有信心跟別人說我的專長是UIUX。下面這個是我在這四個禮拜的課程中所做的作品(這篇文怎麼好像變成葉佩文了)。

其他學習資源

  • Dribbble:每天看培養美感與跟上設計潮流。
  • Medium:追蹤跟UI有關的議題更新資訊,有蠻多專業的部落格,最重要的是不要怕看英文文章。
  • ios design guideline:Apple官方出的設計規範,絕對要看得滾瓜爛熟,一樣不要怕看英文。
  • Material Design guideline:Material Design的官方設計規範,一樣要看得滾瓜爛熟,但彈性比ios大。

最重要的是,當進到一個網站,或著新下載App,仔細研究一下流程規劃、設計,同時思考為什麼這樣做,怎樣做會更好,學習評論。初學者還是建議從臨摹開始,久而久之記得要培養自己的風格。

Web Front-end 前端技術學習歷程與作品

會踏入1 0的世界我自己也料想不到,剛開始只是看到對UI設計師的要求多有html/css這項,才去碰了一點,後來因為自己專案需求開始研究網頁程式的各種技術,像是git、sass、pug、gulp、bootstrap、vue、react、node、express等等。以下我會將學習資源以技術作為分類。

html/css/jQuery

嚴格說起來我是從Hahow上的這堂課開始對html與css產生理解,但我現在回過頭來看,我認為這堂課的定位比較像是「網頁設計師」而非「前端工程師」。網頁設計師介於設計師與工程師之間,可以是兩者溝通的橋樑,也有UI設計師跨足做到網頁設計這塊,職責大概是將UI設計師輸出的設計稿轉換成程式碼,並用jQuery插件做一些簡單的動效。

這部分的練習,最簡單就是用google chrom的開發人員工具去看不同網頁的程式碼大概是怎麼做的,我也有去dribbble、behance拿別人的設計稿來做做看。其實這部分熟悉的話已經有蠻多工作可以找的,去104查詢網頁設計師的要求就是這三個。

Bootstrap/Sass/Gulp

將這三個放在一起是蠻突兀的,但我真的是這三個套在一起學。會用到bootstrap是因為自己在進行專案當中,手刻UI實在是太慢了,索性買了六角學院的這堂課(超推)。基本上這堂課看完就能對bootstrap有很全面的理解,透過自己的練習與運用可以蠻快上手的。而若要更改、客製bootstrap樣式,則要對sass有一定的理解(因為bootstrap 4是由sass開發),而瀏覽器其實無法讀取sass檔案,就要用Gulp自動打包、轉換成css。

Git/Github

老實說我對git還沒有到完全能夠駕馭,一開始我是用sourcetree這個視圖化軟體操作git(設計師一定要看到東西的天性),簡單的commit、push、pull、checkout是ok,但在什麼時候開新分枝跟如何完美的Merge起來則還在摸索,最近也正在嘗試用command line操作git。

Vue.js/firebase

熟悉Vue可以說是我人生的高峰,會選擇Vue是因為六角學院的老師推薦,而且官方文件也算很好讀,加上近兩年火紅起來覺得會是未來的趨勢,也因此免費的教學影片蠻多的,其中我大推這位國外Youtuber:

他講的非常清楚(除了他的英國腔),而且一段影片不會很長,一天看個五六段一個禮拜內就能看完。看完的話能夠對Vue有完整的認識,也能學會操作router跟連接firebase。剩下的我就是在專案中邊做邊學,翻了很多文件跟github,目前是能夠獨立做完一個簡單的web app。

其他學習資源

  • codecademy:拿來熟悉程式碼,其中基本Javascript蠻有用的。
  • github:這應該不用提了,多多觀摩別人的程式。
  • 培養自行查資料、判斷資料的能力(重要!):前端的技術日新月異,不會有人從頭到尾教會你,記得估狗是你的好朋友。

目前規劃

  1. node.js/express.js:沒有點後端資料庫概念在資料操作上不能得心應手。
  2. react.js:facebook開發的react仍是前端框架最大家,學習生態完整,且能夠銜接上react native。
  3. ios swift:實習可能會使用到的。

後記

這一年來真的做了很多事情,也成長了很多。去年應徵UI實習時履歷丟了一大堆只有三家回覆我,今年應徵更難的工程師卻每個都錄取,算是給自己的一個肯定。但我知道這條路還很漫長,技術不斷在更新,工程師絕對沒有停止學習的一天。最後希望這點資訊能幫助大家

(我已經很努力回想過去這一兩年到底做了些什麼,如果臨時想到有缺少的部分會上來更新。)

--

--