UIUX&前端技術自學分享

陳昱安
陳昱安
Mar 14, 2018 · 7 min read

這幾天把面試心得分享到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實習時履歷丟了一大堆只有三家回覆我,今年應徵更難的工程師卻每個都錄取,算是給自己的一個肯定。但我知道這條路還很漫長,技術不斷在更新,工程師絕對沒有停止學習的一天。最後希望這點資訊能幫助大家

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

陳昱安

Written by

陳昱安

Web Developer @ Dcard

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade