自學 UI/UX 各階段心路分享

收到很多剛踏入 UI/UX 這個領域的學生或設計師傳訊,他們迷惘,並且擔心自己的未來…我又不是神怎麼會知道你的未來是什麼?只能分享自己自學 UI/UX 各階段的心路歷程供參考了。

剛起步的菜鳥 時期

什麼都不懂,一堆名詞動詞要查 Google 不然完全不知道在講啥。Guideline?蛤?可以吃嗎?

我起步的時間不算早,大約是 iPhone 3GS 那一波。因為英文太差只能看簡中文章,或者整頁丟去 Google 翻譯。繁中文章?這時間幾乎沒有專門的設計站在介紹 UI/UX,全靠 新同文堂 把簡中轉繁中。

x 招解決 oo 問題

那時候特愛看「x 招解決 oo 問題」之類文章,似乎只要會這幾招就能搞定了。像是:

与众不同!20个提升品牌效果的平面设计技巧
解锁新姿势!我有50个方法教你做出好看的美食排版设计
用这13个方法,帮你做出真正轻量化的移动APP 设计

算了吧,這種文章看多了除了「感謝大大分享祝大大一生平安」之外,就是累積更多看不懂的專有名詞。但學習新領域一定經過大量看、大量不懂、大量 Google 查單字的時期。

10 招裡有辦法記住 1 招並實際使出來就很偷笑了,初期挫折感很大,怎麼自己什麼都不懂啊~之類。

開始拜大神

隨著閱讀文章量累積,也會看到很多美美的炫圖,知道幾個設計師貼作品的網站,開始崇拜大神。
Dribbble - Show and tell for designers

幾位知名大神的名字朗朗上口,比如:
Mike | Creative Mints
Eddie Lobanovskiy
Marcelo Schultz

神拜再多都沒用啦,自己沒練習光看怎麼會進步?

如何做出 XX 炫圖

身為設計師,理所當然追求視覺稿要多炫有多炫,又看了那麼多大神炫圖,巴不得自己也這麼厲害。但他 X 的我就是個剛畢業的菜鳥,連素描都畫的 2266 是能搞出多炫的東西?剪剪素材拼拼公家單位最愛環保地球風格還差不多。(參考 第一次做研討會主視覺就上手之「環保三寶」的應用

狂爬 Adobe Photoshop Design & Illustration Tutorials by Envato Tuts+ 的教學。可是他們就算現成寫好好的步驟,自己照做出來還是差了點味道。

而且,要自己原創,在這階段根本不、可、能、多、漂、亮

半懂不懂 時期

爬了 1 年的文,主要常用術語都不知道 Google 多少,進入很少有關鍵字看不懂的時期。但也只是「知道這名詞在講什麼」,離深入瞭解、有自己的見解很遠,所以很喜歡講解某技術專用詞的文章。

不可不知的 XX 技術

針對某個實作運用的主題/名詞深入介紹,像是:

仅此一篇,读懂卡片式设计长盛不衰的秘密
从这3个方面,帮你改善移动端APP的输入体验
专业干货!提高无线端表单可用性的7个设计原则

看的時候都懂,轉頭要自己實作時沒幾招用得出來的。非常令人沮喪的時期,覺得大家都好強怎麼自己都過一年了進步這麼慢。

20xx 年,x 條規則

還是很菜,多少懂一點了但更懷疑自己的方向,不知道現在在幹嘛,更甭提未來產業變化,所以很愛看有人幫忙整理好的「今年流行」、「未來會怎樣」之類的文章。像是:

绝对不能错过!2016 年最流行的8个UI设计趋势分析
2017年,这五条设计趋势将惊艳整个设计圈
未来交互新趋势!6个值得提前学习的「语音交互」设计方法

發現自己看再多還是不知道可以怎麼做。這些規則什麼的,都是其他人整理好的東西,融會貫通的也是別人不是我啊!

看半天除了點頭按讚,覺得「哇~寫文的都好棒啊!好厲害」之外,我學會了什麼?對我手上的工作幫助多少?

感覺有幫助又好像沒幫助,非常疑惑自己的腦子泡了多久的水導致吸收不了新知。

開始自己寫 RWD 、爬國外文章 時期

這個時期簡中文章已無法滿足我,老是那些東西繞來繞去換句話說,同領域文章看多了就算英文再爛,基本關鍵字也能讀懂。

工作上要和 F2E 溝通,不如自己寫比較快!但給 RD 看的文件往往只有英文版,就算有中文翻譯,落差很大:寫 HTML、CSS 用的是英文啊!不看原文根本搞不懂在講啥,

Bootstrap
Susy
Sass

RWD 寫一寫發現自己的英文單字量變多了,卻只能和瀏覽器溝通,沒辦法和人類對話…

質疑專案開發流程 時期

工作 3 年,因為工作上摔過的坑、撞過的牆也多了,慢慢開始把眼光從「視覺」、「Photoshop」放到外面的世界。會思考團隊合作、專案流程、工作時程。像是:

41% 的APP 不合格?可能是你没试过这个快速高效的工作流程!
专业科班的答案!一个完整的交互设计流程是怎样的?

看了一堆發現,自家公司完全推不動,哈哈哈。(淚)

其實是自己太嫩,視角只有正前方 30 度,不知道別人在幹嘛、不懂公司文化,更不知道什麼是商業價值、營運模式。一頭熱想在公司推動改良,根本是來亂的。

起碼有辦法畫出「利害人關係圖」、「價值主張圖」再來說改變工作流程吧…

把眼光放到「視覺」以外的世界

一旦開始質疑專案流程,就回不去只有「視覺」的世界了,像是會不會游泳的差別。會手寫 HTML、CSS 是個很大的分水嶺。

UI 方面會開始爬「互動設計」、「資訊架構」的文章。
UX 方面開始看各種「方法論」、尋找怎麼融入實作的技巧。

就算是簡中,這些方面的文章數量遠遠不足,不看原文都不行。不然就是等歐萊禮出中文書…往往落後國外 1~2 年。

在資訊業落後 1~2 年!?

Swift 年年改版,落後個 1 年都不知道被沖到哪裡去了。UI/UX 更新的速度可能稍慢一點,也沒慢到哪去,你看 Apple 發表會,每年 iOS 介面都不太一樣。

而且看越多越會覺得基本功很重要,比如英文、手繪、情緒管理、時間管理…進入還債階段。以前什麼東西偷懶逃避沒學好,現在都要回頭還債補回來,很辛苦。

大量買書挑錯 時期

雖然網路文章多,但很零散瑣碎,沒有完整連貫且系統性講 UI、UX、互動的文章,還是要靠書籍才行。

看得越多你會發現開始「百家爭鳴」,也就是爬到的文互相矛盾

怎麼辦呢?我還滿慶幸菜鳥時期查關鍵字時,一個關鍵字至少把 Google 搜尋到的前 5~10 頁連結全部點開閱讀。就算有錯誤或說法不同導致理解不能,林北看個一脫拉庫總會總結個概略答案出來吧?

有寫過論文就會知道,「參考文獻」非常重要,誰說過的話、這資料怎麼來都得附上出處。國外書籍頗講究這部份,多少能看得出來是作者自己鬼扯、還是有什麼理論支持他的說法。

書籍能系統性敘述一個論點,去蕪存精。就算論點起衝突…多看個幾本還是能得到一個大略的概觀,加上自己的見解,也能說點什麼唬唬人。

前提是「大量閱讀書籍」,只看一本沒用,參考文獻拿來找延伸閱讀的補完資料,觸角會越伸越廣,到某個程度會覺得「通通串起來了」,有種(好像)通了的感覺。

(到這個時期我才開始大量買書…iPhone 3Gs 時期是有幾本 UI/UX 書可以買啊!?年代不同好嗎?初學者建議網路文章隨便看看就好,先從研讀書籍開始,系統性打點地基再爬文,可以省去我那一口氣連看 10 頁 Link 的土砲作法,前因後果脈絡也比較清楚紮實。)

十大易用性原則

大概自學 UI/UX 3 年後,我就很少在看「x 招解決 oo 問題」之類的文了。這種鎖碎的技巧太多,追都追不完,只會讓自己覺得「資訊恐慌」。

所有的 UI 設計易用性,本質上只有 3 點。由 Jakob Nielsen 提出,他是所有 UI/UX 設計師都該知道的人物喔!

  • 易於學習
  • 相對無錯
  • 便於使用

我把 十大易用性原則 背下來,所有的「招式」源頭都是這 10 條原則。把它們當成核心理念,再回頭去看「招式」,就會感悟到「招式」不過是為了實現這 10 條規則的技巧。

然後招式就會變得很不重要…

如果你同時學習 UX ,那會發現「招式」可以放一邊去有空再說,理解使用者、戳對痛點,比在 UI 上死刻對產品的效益更大。

做自己喜歡的事

「我是 XXX,現在是設計師/學生/F2E。經歷 XXXXX….對 UI/UX 有興趣但不知道下一步是什麼,我未來可以走什麼方向?」

比起「我未來可以走什麼方向」,是 UI 還是 UX,做自己想做的事,熱情和毅力可以燒得比較久。

會迷惘是正常的,別說 6 年後自己會走到哪裡,我連 6 個月後自己會做什麼工作都不確定了。找出自己最想做的,堅持下去。

迷惘的原因之一包含擔心未來找不到飯吃餓死。

在台灣,好手好腳的設計師就算是菜鳥,要餓死沒有那麼簡單,根本不是擔心未來找不到工作。而是在煩惱週圍的眼光、怕自己下錯決定時間砸下去後薪水不夠高。

說穿了只是對 UI/UX 的興趣沒有大到可以擺脫這些煩惱。

我都和傳訊給我的那些人說:比起煩惱「未來可以走什麼方向」,不如思考「我喜歡什麼」。就算 UI/UX 這個領域薪水比較高,但自己沒興趣的話日子會過得很痛苦,甚至抗拒學習。

有興趣才會砸時間在這個領域上,你的時間花在哪,成就就會在哪。(所以我砸了 100 小時在 PS4 FF 零式上,得到的成就就是搜集完全部的獎杯。)

推薦一本我買了送朋友的好書:阿德勒「被討厭的勇氣 」。能幫你思考人生方向,放下許多負擔、堅定自己的信念。

對未來感到迷惘?套句阿德勒的說法…一切都是藉口!有迷惘的只是在煩惱人際關係找說詞而已。根本不是真愛(?)

包含我自己在內,對未來感到迷惘,其實只是不想承認自己太偷懶導致畢業後沒有拿得出手的技藝可說嘴而已。一旦有真愛(?)根本不會迷惘啊!

Akane Lee

Akane Lee

如果設計師能和工程師順利合作,那麼老公也就能準時下班了吧!因此努力分享 UI 和 UX 方面的知識、技術、各種踩過的坑與心得。

Comments

wave
comments powered by Disqus

Press ESC to close