方格精選

自學介面設計及Sketch資源分享

更新於 發佈於 閱讀時間約 6 分鐘

這篇文章會分享我平常關注的設計資訊來源以及淺談當初是如何自學Sketch,把自己當初從平面設計轉到介面設計時所收集的一些資源分享在這篇文章中,提供給初學及入門的人參考。

raw-image

介面設計神器:Sketch

如果有學過Adobe相關的軟體,要入門Sketch我覺得基本上是很好跨過去的門檻,一些基礎的概念或是快捷鍵其實大同小異。

  1. 官網將Sketch軟體下載,碰到的問題可以在官方文件找到答案。如果你是一個軟體新手,從這份文件裡面其實按造他的分類,是能夠一步一步的理解Sketch。(當然Sketch最大的缺點就是只有支援Mac。)英文苦手可以透過這個中文化網站查看教學,但因為整個軟體都是英文,所以從英文學習可以減少翻譯上的問題。
  2. 介面設計火紅一陣子的 UI Design Challenge,當你申請後,每天都會寄一個主題到你的信箱,持續100天,這時候的重點在於熟悉軟體和對介面設計的敏感度,還不用特地的去思考流程之類的心法,尤其在如果你也是上班族每天回家之後時間不多的情況下。
  3. 不停地練習、不停地練習,與此同時參考以下幾個網站內的設計風格,理解目前趨勢以及各個大神的作品:DribbbleBehance。如果真的卡關沒想法,可以從 Collect UI 參考其他人的設計。
  4. 如果在這期間中碰到了Sketch問題,可透過介面設計的社團(如:Taiwan UI/UX Designers)或是優設網來尋找解答,尤其優設網內有很多實用技巧和實戰經驗分享,當然也歡迎在這邊留言或是我的Facebook詢問。


不停地閱讀和思考提升介面設計心法

UI Challenge 不用到100天,大約到三分之一甚至是一半時,我相信你對軟體的熟悉度就會有一定的基礎了,這時候可以開始進階到介面設計的內功部分。以下介紹我平時是從哪邊吸取日月精華。

raw-image
  1. Muzli:這個由Invision團隊所開發的Chrome外掛,可以讓你每次打開新分頁都會出現所有精選熱門的設計資訊網站上的最新消息,你也可以自訂要顯示哪些,小小的缺點是只能篩選他自己幫你準備好的網站,但他們所準備的網站基本上已經都是設計大站了。
  2. 優設網:剛剛已經分享過的優設網,上面有非常多豐富的設計資訊和素材分享,完全就是一本設計葵花寶典,只要打開網站,稍後閱讀的文章就會新增一大堆。
  3. AAPD:剛開始接觸介面設計的時候一直覺得台灣幾乎沒有資源,能看到收集資源的網站也非常少,雖然AAPD現在是Medium上的出版專題,但已經是我認為在台灣可以得到很多資訊和好文章的平台了,期待有一天會成為台灣UIUX的最大資訊平台。
  4. 創誌:各種專業實戰文,偏向使用者研究的文章居多,有時候比較偏生硬。
  5. Taiwan UI/UX Designers 臉書社團:比較多是可以看到一些介面設計相關的活動或是職缺。有時候可以看到別人的發文和大神們的回答可以長知識。
  6. UX四神湯:同樣也是Medium上面的出版專題,很特別的是她們是由四個目前都在海外工作的設計師分享自身經驗,可以看到不同國家的做事方式和執行經驗。
  7. 嫁給RD的UI Designer:這是我很早期就在追蹤的介面設計前輩的部落格,很多實用的介面設計攻略,可以在這邊提升很多等級,以致她後來開介面設計課時我有去上過,我個人是蠻推薦的,以一個完全不懂的人,到他的課程裡可以學到很多介面設計該有的Mindset。
  8. Feedly:這就不是設計知識的資源了,但這是我個人收集各大網站的RSS訂閱氣,介面很清爽,可以輕鬆把各大網站都在這邊管理訂閱,可以一次看到每天最新的設計文章。而且還有App可以使用,在通勤時的閱讀好夥伴!
raw-image

系統性地學習

以上的學習算是一個很零碎的方式,資訊和教學文章散落各地,無法像一本教學書,或是教學課程提供有系統性地教學。如果你是一個需要有人督促,或是更需較有規劃的方式學習的話,以下也提供幾個學習管道。

  1. Hahow:台灣現在的線上課程指標網站,上面除了介面設計還有各式各樣能夠在網路上學習的專業技能,主要都以非常基礎的課程為主,缺點是只要不夠有毅力,很容易課沒上完就忘了這件事
  2. UXabc:專業專業再專業的介面設計學習機構,能夠帶領你穩紮穩打的學習介面設計的內外功,課程優秀之外教室環境還很舒服,如果有預算,很推薦可以到這裡學習。他們的Medium也會不定時的發布設計文章供大家補血。
  3. 嫁給RD的UI Designer:如同我上面所介紹的,課程內容可以提升自己在介面設計上的心法,而不淪為軟體技工,但課程內容不定時發布,可能需要自行去追蹤最新消息。
  4. 我自己:厚起臉皮毛遂自薦,其實我平常都有在接家教的一對一教學課程,算起來好像也教過不少,Sketch、illustrator及html, css。有些人會好奇為什麼這麼多免費資源還會家教,以我目前教過的學生告訴我的有幾個答案,一是靠自己自學不夠堅定,二是需要有人幫忙規劃,最後則是直接有導師可一同討論和解答減少時間成本。如果有興趣歡迎 Email:kyledesign312@gmail.com 詢問。

第一篇介面設計相關文章,就先以分享資源為主。日後會再陸續分享自己在介面設計中打滾當邊緣人的心得和資源分享,如果覺得喜歡可以按下愛心,將這篇文章分享給需要的朋友。



留言
avatar-img
留言分享你的想法!
pxCode Team-avatar-img
2022/01/28
感謝你的整理分享,或許會對 RWD 網頁切版有興趣,可以關注 pxCode 得知更多輕鬆的方法,非常好自學!謝謝
avatar-img
Kyle Hsia
188會員
36內容數
以分享自己的設計經驗為主。經歷創意行銷公司、外商到新創軟體公司。同時分享正職以外的時間如何接案增加收入並管理自己的時間精進專業能力
Kyle Hsia的其他內容
2025/03/05
分享使用AI加速產品開發和UI/UX設計的經驗,包含如何利用AI提升效率、優化設計流程,以及重新思考設計師角色的價值。作者分享了幾個實際案例,例如開發記錄美好時刻、約會備忘錄等小工具的心得,並總結在產品開發中的五大優點:提升溝通效率、克服技術限制、客觀設計評論、重新思考設計師角色和降低產品嘗試門檻。
Thumbnail
2025/03/05
分享使用AI加速產品開發和UI/UX設計的經驗,包含如何利用AI提升效率、優化設計流程,以及重新思考設計師角色的價值。作者分享了幾個實際案例,例如開發記錄美好時刻、約會備忘錄等小工具的心得,並總結在產品開發中的五大優點:提升溝通效率、克服技術限制、客觀設計評論、重新思考設計師角色和降低產品嘗試門檻。
Thumbnail
2024/07/21
這篇文章分享了我在職場中遇到的挑戰和困境,以及如何通過與來自矽谷的資深產品VP的共事中學到的寶貴經驗。文章中詳細介紹了主管身上學到的經驗,如善用生活比喻、運用視覺策略、保持積極正面的態度等,及我如何跨領域思考,最終通過開放和學習的態度成為更優秀的產品設計師。
Thumbnail
2024/07/21
這篇文章分享了我在職場中遇到的挑戰和困境,以及如何通過與來自矽谷的資深產品VP的共事中學到的寶貴經驗。文章中詳細介紹了主管身上學到的經驗,如善用生活比喻、運用視覺策略、保持積極正面的態度等,及我如何跨領域思考,最終通過開放和學習的態度成為更優秀的產品設計師。
Thumbnail
2023/05/24
過去一年因為經濟產生的變化,以及疫情開始轉為開放的態度後,就業市場也跟著產生了改變,原本因為疫情而紅起來的遠距辦公,到處都在推廣遠距工作到的好處,到現在台灣的公司開慢慢的鼓勵員工回到辦公室 我們公司最近也開始運行混合辦公模式,一週必須進辦公室兩天,對於年初才因為有遠距工作而搬離台北的我來說,上班突然
Thumbnail
2023/05/24
過去一年因為經濟產生的變化,以及疫情開始轉為開放的態度後,就業市場也跟著產生了改變,原本因為疫情而紅起來的遠距辦公,到處都在推廣遠距工作到的好處,到現在台灣的公司開慢慢的鼓勵員工回到辦公室 我們公司最近也開始運行混合辦公模式,一週必須進辦公室兩天,對於年初才因為有遠距工作而搬離台北的我來說,上班突然
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
市場上有許多 UI 的設計職缺,在設計這一個行業裡面,學歷或是工作履歷能幫你增加打開履歷的機會,但真的進入面試的關鍵就在作品集。要怎麼準備作品集?要怎麼去應徵這些職缺?要怎麼樣才能提高進入面試的機率?有時候作品集佔了至關重要的地位,今天這一章將介紹如何準備 UI 專用的設計作品集,並提供一些建議,
Thumbnail
上完Hahow產品設計實戰課程心得分享,分析要點將從以下4點探討 1. 課程規劃 2. 教學風格 3. 講義素材 4. 其他想法 適合對象:UIUX新手與對UI感興趣的轉職者
Thumbnail
上完Hahow產品設計實戰課程心得分享,分析要點將從以下4點探討 1. 課程規劃 2. 教學風格 3. 講義素材 4. 其他想法 適合對象:UIUX新手與對UI感興趣的轉職者
Thumbnail
找到你想成為的設計師典範,盡可能主動模仿學習。這個設計師可以是公司的主管,或是某某產業的專家,甚至坐你旁邊的同事。仔細觀察他的成長路徑和工作模式。如果可以的話,也可以試著透過Messenger或Linkedin社交軟體接觸,了解他是如何站上今天這個位置,或許能得到一些意外的收穫,少走一點冤枉路。
Thumbnail
找到你想成為的設計師典範,盡可能主動模仿學習。這個設計師可以是公司的主管,或是某某產業的專家,甚至坐你旁邊的同事。仔細觀察他的成長路徑和工作模式。如果可以的話,也可以試著透過Messenger或Linkedin社交軟體接觸,了解他是如何站上今天這個位置,或許能得到一些意外的收穫,少走一點冤枉路。
Thumbnail
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中,最常被問的問題了。 其實我並不鼓勵大家購買大量課程、書籍來淹沒自己,因為資訊量很大,而且每位老師的經歷、教法有不同,有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。 而此時的你並不知道,到底應該投資哪一種類型項目,最能「
Thumbnail
這個應該算是許多人透過粉專私訊小編、或是在個別諮詢中,最常被問的問題了。 其實我並不鼓勵大家購買大量課程、書籍來淹沒自己,因為資訊量很大,而且每位老師的經歷、教法有不同,有些著重於視覺創意、工具深入應用 ; 有些則對於 UX分析研究相當有經驗。 而此時的你並不知道,到底應該投資哪一種類型項目,最能「
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
這次要來介紹的《打造成功 UI/UX 的 50 個關鍵》,非常適合「完全零基礎」的初學者,想轉職介面設計師,卻苦惱不知道從何開始的你,趕快來看看吧!
Thumbnail
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
Thumbnail
深入淺出介面設計講座 即使這個講座,本意是給大學生或社會新鮮人,提供他們成為UI設計師路上的一些小建議。 但我認為這個講座的內容也非常適合想要轉職UI設計師、或已經成功成為UI設計師的你們,這場講座可以幫助你看清楚一些事情、一些或許可以再努力看看的方向。
Thumbnail
多元裝置時代的網站UI/UX設計法則 這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍,第一章開始便從UI設計的構造關係開始談起,之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
Thumbnail
多元裝置時代的網站UI/UX設計法則 這是一本「從零開始」教你怎麼從網頁設計認識UI設計的書籍,第一章開始便從UI設計的構造關係開始談起,之後每個小節逐一介紹網頁每一個區塊的功能與可能被使用者所操作的形式。
Thumbnail
自學UI設計這條路上,「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度,但比起較為片段的網路文章,統整好各式訊息與知識架構的書籍,總是能讓初出茅廬的初學者能稍微有點頭緒。
Thumbnail
自學UI設計這條路上,「實體書」一直在自學中擔任至關重要的腳色。儘管書中的資訊更新遠遠不及網路上的更新速度,但比起較為片段的網路文章,統整好各式訊息與知識架構的書籍,總是能讓初出茅廬的初學者能稍微有點頭緒。
Thumbnail
這篇文章會分享我平常關注的設計資訊來源以及淺談當初是如何自學Sketch,把自己當初從平面設計轉到介面設計時所收集的一些資源分享在這篇文章中,提供給初學及入門的人參考。
Thumbnail
這篇文章會分享我平常關注的設計資訊來源以及淺談當初是如何自學Sketch,把自己當初從平面設計轉到介面設計時所收集的一些資源分享在這篇文章中,提供給初學及入門的人參考。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News