我的 UI/UX 設計入門方式

自從開了這個 BLOG 後,好多人都問我這些關於 UI/UX 設計的技術是從哪裡學到的。就台灣來講這個領域太新了,剛入行的時候只能夠自學,缺少很多資源,通通靠自己摸索,所以我希望能整理出一套系統性的 UI/UX 教育方式,但這需要花費大量的時間,靠下班後的空檔根本不夠,頂多寫寫 BLOG 讓大家加減看。目前我不想把 UI/UX 硬拆成兩塊,雖說這本來就是兩個不同的領域,但世界上所有的事物都是有關聯的,不能說我只想做這個其他連碰都不碰,很快就會陷入窠臼遇到瓶頸。大概是因為我喜歡規劃分析、但又不想放棄能做漂亮炫圖的機會吧。

Guideline

UI/UX 設計的領域包山包海非常非常廣,所以不能說「我討厭這個」把某項踢一邊不去理解,比如 Guideline。(當然也是有在某個領域強到不像個人、其他全部放掉的某天賦專精。這種專才建議到國外發展,在台灣除非有辦法進入很高檔的公司,不然依照現在產業狀況會活得很辛苦。)

連 Guideline 都不懂的人,不配稱為 UI/UX 設計師!

設計人通病之一就是只看圖不看字,偏偏 Guideline 之類的文件都是字為主。把「我是念設計的耶~」掛在口邊、說 Guideline 限制創意,作設計就是不能被侷限在框框裡…哈哈哈,能力不足看不懂 Guideline 、沒辦法遵循 Guideline 的同時做出讓人眼睛一亮的作品就老實講,硬拗些有的沒的…你以為這樣說 RD 就會放過你嗎?那是遇到菜鳥 RD 才會自己吞下去幫忙擦屁股。這和丟下一句「我是女生耶~」所以掏錢的都該是男生的責任一樣,哪個傻鳥吃這套就哪個去買單。

以下是官方 Guideline 網址,不用倒背如流(每年改版就要重背了),知道需要時要去哪裡找就好。最起碼最起碼,把內建元素的尺寸背下來,不然開個 Evernote 做筆記也好。

iOS 7 Design Resources
Android Grids
Windows Apps

手繪

念設計不代表手繪好,但手繪不好也很難成為一代宗師。不要被日系動漫騙了,沒幾兩肉的娘砲可以單手騎重機單手揮舞大劍…人家都說是幻想了不然咧?現實就是要靠練習才能成長,手繪是很多設計人的致命傷,如果你想走 UX、多少還是去學一下基礎素描,和人溝通現場撇幾筆很有用。如果想 UI 路線…你看 Dribbble 上哪個大師的手繪底子很差的?

素描課不貴,畫室或是學校的推廣教育都有開課,還很便宜。我雖然是本科生、不過高職 3 年被當了 21 學分差點畢不了業,別再說什麼妳是本科生訓練紮實了,沒這回事。一直到研究所都畢業了才又回頭去畫室上課,發現是沒搞懂繪畫方法的問題,才把手繪救回來。有人說「我沒有畫畫的天分」,這跟天份無關,靠的是方法和練習。我已經把繪畫當成是某種科學了,有固定的公式可以套用,背熟原則就好了。

比如亮面、暗面、陰影、高光等等,對應不同材質也有不同表現技法,世界上常見材質就那幾種:玻璃、金屬、毛皮、木紋、塑膠、紙…等等。全部條列出來、一項項學著畫。全部都畫過…再深入下去就跟內力一樣靠時間磨,一天長一分,沒有武俠小說大還丹吃下去就長一甲子功力這種好康的事。UX 學素描目的在「訓練敢畫圖」的膽量,UI 要學的就比較多了,再去畫室報一堂水彩課吧,素描水彩都輪過一次就知道自己哪邊不足了。

閱讀新知

多看看總是好的,不會講英文的人被丟到英國獨自求生,只要不老是跟講中文的人打交道,英文想練不起來都難。同樣,每天大量接觸 UI/UX 資訊,看久了也能唬爛個幾句。現在是資訊爆炸的時代,每天不知道有多少文章在網路上發表,我的最愛裡加一堆書籤每天點一遍,不如學著用 RSS ,直接把各站最新文章搜集在同一頁裡。Google 閱讀器死掉之後我改用 Feedly ,配合 MAC 版 Reeder ,訂閱太多的下場就是每天都有幾百篇的文要看…

我不太在手機上看文章,會離開電腦又無聊到得開 RSS 的時候八成在搭捷運吧,晃來晃去硬要看小小的字太傷眼了。而且網路速度太慢,看個文章要等很久會煩躁,不如把腦袋放空休息一下。硬要推薦一套手機版的 RSS ,還是Reeder for iPhone ,操作方式和電腦版一致、畫面風格也一致。

以下是我有訂 RSS 、又幾乎天天更新的優良好站,每天看、看個 1 年基本素養就有了(有寫筆記的話)、出來騙吃騙喝說自己是 UI Designer 沒問題。

PSD+
UI 設計師必備,頂尖 Photoshop 技術教學,對岸很多看起來很高明的中文教程其實都翻譯這個站的。這是一個系列站,包山包海什麼都有,從攝影、向量繪圖、網頁技術、影片剪輯到手工藝製作,挑自己適合的訂閱吧。

Smashing Magazine
理論、商業模式、技術、設計通包的網站,幾乎是站在潮流最前端,看不懂也要訂一下。

优设
對岸的站,比台灣的站多了很多對工作有實際幫助的文章,有很多翻譯文救了不少看不懂英文的設計師。他們還有線上免費講座可以聽很佛心有誠意了,更新速度很快,每天數篇。資源大全 整理得不錯。對於初學者來說是座寶山。強烈推薦安裝繁簡轉換外掛 同文堂 ,還是習慣看繁體中文…

站酷
對岸設計人聚集的地方,很多教學文。因為該站是個人發表文主,有些文章內容有誤要小心。其中最推薦「影天醬 」的文,會有頓悟升級的感覺。素材庫的資源也很多,小心版權問題。

搜集資料

幾年前我是開資料夾做圖片整理,最近用了 SparkBox 來整理圖片,還不錯,就是有點頓。Pixa 在觀察範圍內。特別好的圖文就用 Evernote 另外存起來寫筆記。搜集來的東西都還是別人的,只有親手寫下筆記、思考消化後的東西才會是自己的。以下是拿來當激發靈感、參考對象的網站。

Dribbble
我一定把這個放在搜集資料第一名,不是照三餐看,而是乾脆掛在上頭不下線了。世界各地高手雲集的地方,善用關鍵字搜尋 + Popular 排序,你會得到全世界。它偏向概念性質、最新潮的設計(也許不怎麼實用),可以激發很多創意。作品圖片品質極佳,要模仿練習也有無數對象可以跟著學。

Behance
Adobe 的設計師作品發表平台,內容很多很雜包山包海,操作介面不太順。除非 Dribbble 真的找不到我想看的才會到這裡來挖。

Pttrns
Mbile Patterns
lovely ui
這3個都是搜集漂亮的 iPhone、iPad app 介面 Pattern、並分類的網站。

Android Patterns
Android 的 Pattern、一樣有分類。

iOS Icon Gallery | iOS Icon Design Gallery
美美的 Desktop icon …Dribbble 看不夠時我會跑來這。

CSS Galleries / CSSMania
siteInspire - Web Design Inspiration
CSS 網頁設計靈感來源,畢竟 Dribbble 是靜態一張圖,這邊是實際可操作的網站,執行逆向工程時好用。

Mobile Web Design | Best Mobile Websites | Mobile Website Gallery
做 Responsive Web 好用的網站參考!

最重要的是:保持對任何事物的好奇心和熱情

這點才是最難達成的,技術可以靠練習,一些鳥人破事卻會瞬間澆熄所有熱情。

我也很常遇到,比起技術不足、更討厭和人與人之間的勾心鬥角。又不能喊「我只喜歡研究技術、畫漂亮的圖,拜託不要來找我麻煩。」有這麼順利尾戒銷路會變差、香港天橋下的阿婆也會失業。自從和老公討論好,打定主意不要跳進去和某些被稱之為「亂象」的人群瞎攪和後、我總算可以用很酸的語氣和個人偏見寫文了。為了什麼營造專業形象、打好人際關係避免得罪他人通通閃邊去吧,又不發我薪管我糧的。網路發達真是件好事,可以躲在螢幕後面發廢文。(喔對、我媽知道我在這裡發廢文,不用問了。)

Akane Lee

Akane Lee

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

Comments

wave
comments powered by Disqus

Press ESC to close