UI 設計師轉職之路

UI Designer Road Map

林育正 Riven
Jul 28, 2018 · 19 min read
Image for post
Image for post
此設計稿皆為 Adobe XD 向量繪製,收錄在 Adobe Xd設計實務|成為UI設計師的8項核心技能
小訣竅:如果 Medium 閱讀額度不夠用,可以訂閱 RAR 設計攻略 會收到最新文章、教學影片與近期活動通知!😀(點擊連結後輸入「訂閱攻略」即可。)
📱 訂閱 【RAR 設計攻略】最新教學文章、影片不再錯過~   
💻 加入【Adobe XD Taiwan】與更多設計師交流、討論!

Adobe Xd設計實務|成為UI設計師的8項核心技能」

Image for post
Image for post
感謝學員支持已於上線第一天成功達標!即將開課。

[ 傳送門 ] 點擊下列技能可跳轉至該段落說明。

UI 使用者介面設計師 一轉

設計規範爬梳乾貨UX思維設計思考心理學線框稿

UI 使用者介面設計師 二轉

插畫美感靈感配色文案圖庫UI設計

UI 使用者介面設計師 三轉

原型標註版本控制略懂開發厚黑學出師

UI 使用者介面設計師 四轉

Daily UISide Project社群參與

Image for post
Image for post

設計規範

也許在剛開始接觸設計的時候先知道這些規則跟框架,更可以讓之後的創意與技術得已突破。

必讀規範
Google Material Design Ant DesignApple Developer
Image for post
Image for post

爬梳乾貨

Image for post
Image for post

UX思維

Image for post
Image for post

設計思考

推薦書籍:
1. 設計的方法:100個分析難題,跟成功商品取經,讓設計更棒、更好的有效方法
2. 圖解設計思考:好設計,原來是這樣「想」出來的!
Image for post
Image for post

心理學

壹、「腦補用途」

貳、「標示說明」

參、「對應性」

肆、「回饋機制」

熟知相關原則及規範後,再進行設計規劃時會感受到滿滿地踏實。

Image for post
Image for post
Image for post
Image for post

插畫

Image for post
Image for post

美感

不多說,請用眼睛去體會。每日必逛養眼睛網站書籤:DribblePinterestBehance
Image for post
Image for post

靈感

每日必逛滋潤腦袋書籤:awwwardslapaIllustration ui

蒐集美感儲藏靈感 — Eagle (國產,支持一下)

Image for post
Image for post

配色

配色參考工具:Adobe Color CCCoolorsNIPPON COLORS - 日本の伝統色
網頁漸層配色:
WebgradientsEGGRADIENTS
Image for post
Image for post

文案

需要假文假字的時候再搭配產生器:Lorem Ipsum
Image for post
Image for post

圖庫

推薦圖庫:pexelspakutasofindaphoto
Image for post
Image for post

UI設計

Image for post
Image for post
Image for post
Image for post

原型

Sketch 、Adobe Xd目前都有支援簡易原型產出功能,如果需要更方便的工具可以選擇 Marvel APP或 Invision,若是更針對微互動效果,則是 Protopie、Principle、墨刀等
Image for post
Image for post
介面設計師轉職之路網頁Prototype
Image for post
Image for post
可參考 Monospace 與 韓國 Protopie 連線舉辦的原型軟體教學直播
Image for post
Image for post

標註

可選用 Zeplin、Sketch Measure及 Adobe XD 內建的spec功能。
Image for post
Image for post
Adobe XD 的 spec (beta) 畫面
Image for post
Image for post
Zeplin 的標註畫面 (取得切圖檔案、CSS樣式)
Image for post
Image for post

版本控制

Image for post
Image for post
我們曾經舉辦過的分享活動:淺談給設計師的版本控制。
Image for post
Image for post

略懂開發

Image for post
Image for post
Image for post
Image for post

厚黑學

推薦書籍:天下第一奇書厚黑學
Image for post
Image for post

出師

Image for post
Image for post
Adobe XD 作為新的 UI/UX 整合工具,相當令人期待!
Image for post
Image for post

Daily UI

Image for post
Image for post

Side Project

Image for post
Image for post

社群參與

Image for post
Image for post
社群空間在資訊產業中的實體價值仍無法取代 — Monospace
台灣常舉辦 UI 相關活動的空間或社群:
台北:CosignTaiwan UI/UX Designers
台中:Monospace共同工作空間UX/UI台中聚
台南:planett好想工作室

由於「想轉職 UI 該怎麼做?」很常被問,就稍微整理一下,希望可以幫助到你!也歡迎各路網友、大大留言補充相關資源 :)

Image for post
Image for post
相關合作洽談請來信至:riven@monospace.tw

RAR 設計攻略

設計攻略

林育正 Riven

Written by

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

RAR 設計攻略

關於設計的技巧 × 知識 × 方法 × 教學 × 攻略

林育正 Riven

Written by

是數位遊牧型態的設計師💻 喜歡邊旅行邊工作的生活,逐網路、插座與咖啡而居。期待能夠將艱難的設計與開發技術,用麻瓜都能夠聽得懂的話,說給每一個人聽。更多關於我:riven.design

RAR 設計攻略

關於設計的技巧 × 知識 × 方法 × 教學 × 攻略

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store