Udemy線上課程 UI 設計入門:畫出有程式邏輯的設計稿 講師:卡斯伯 六角學院 影音教學 中文發音 繁體中文字幕版(DVD版) Udemy線上課程UI設計入門:畫出有程式邏輯的設計稿講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版) 內容說明: 這門線上課程將會帶你完整跑過一次設計流程,讓你了解在每個流程當中需要產出什麼樣的文件或內容。 課程還會提供常見的排版版型,並且運用一些設計準則讓排版更加靈活。 此外更透過原子設計與GoogleMaterialDesign等設計規範來介紹UI元件的正確繪製觀念,並會對應程式碼的撰寫方式,讓你繪製出有程式邏輯的設計稿,與工程師的協作更加流暢。 這門線上課程最後還規劃了一個電商網站的最終作業,讓你不用擔心只學到理論卻沒有實作作品! 課程內容: 01介紹 001六角學院線上學員社團.html 002課程介紹.mp4 003免費作業上傳空間.html 02基本概念 004先來聊聊什麼是UI設計.mp4 005開發流程與設計思考.mp4 006介面設計相關的設計師.mp4 007初學者必看的設計規範.mp4 03設計流程_IA_Logicflow_Wireframe 008設計流程簡介.mp4 009IA資訊架構.mp4 010FunctionalMap功能地圖.mp4 011LogicFlow操作邏輯流程.mp4 012Wireframe線框稿.mp4 04設計流程_設計精稿與標註文件 013GridSystem網格系統.mp4 014AtomicDesign原子設計.mp4 05從原子設計學習介面的常見元件 015Buttons按鈕.mp4 016States物件狀態.mp4 017Input輸入格.mp4 018RadioButtons&Checkbox單選按鈕與複選框.mp4 019Links連結.mp4 020Icon圖示.mp4 021Text文字.mp4 022Color色彩.mp4 023設計師常會忽略的通用設計(Accessibility).mp4 024Practice-Accessibility.zip 024【小練習】挑選達到AA級的色彩.html 06原子設計第二階段:分子 025Navigation導覽元件.mp4 026Accordions折疊面板.mp4 027Tooltips提示工具.mp4 028Card卡片.mp4 029Modal互動視窗.mp4 030Alert警告訊息.mp4 031DataTable資料表.mp4 032Form表單.mp4 033C.R.A.P.四個幫助你優化介面的設計準則.mp4 034Homework-Form.zip 034【章節作業】換你試試看:優化表單設計.html 07原子設計第三階段:組織 035Header頁首.mp4 036Footer頁尾.mp4 037運用常見的介面版型排出好設計.mp4 08原子設計第四階段:模板 001扭矩與加速性能Torqueandaccelerationperformance.txt 038Templates模板.mp4 039如何做出高轉換的著陸頁(LandingPage).mp4 040行動版的介面優化:響應式排版(RWD).mp4 041透過頁面的六種狀態提升使用者體驗.mp4 042Homework-Sections-Landing-Page.zip 042【章節作業】透過模板排出一個響應式登陸頁.html 09原子設計第五階段:頁面 043Pages頁面.mp4 044教你打造最流行的深色模式(DarkTheme).mp4 045Practice-Dark-Theme.zip 045【小練習】套用深色模式.html 10與工程師協作的必要文件 046一定要做設計規範嗎?.mp4 047UI-Kit-Wireframe.zip 047【免費資源】WireframeUIKit.html 048切圖命名與格式.mp4 049Spec設計標注檔.mp4 11設計流程_Prototype高擬真原型製作 050原型設計的種類與技巧.mp4 051【章節作業】製作你的第一份設計精稿-1.mp4 052【章節作業】製作你的第一份設計精稿-2.html 12情境模擬:工程師現身說法(feat.六角學院校長洧杰) 053Q1:繪製的設計稿被說功能太難做不出來.mp4 054Q2:如何協助設計師提供可執行的設計稿.mp4 055Q3:如何跟工程師溝通有互動效果的介面.mp4 056Q4:工程師對間距等設計細節不太在意.mp4 057Q5:設計師需要學前端技術嗎?.mp4 058Q6:專案協作上的常見問題.mp4 13實戰演練:電商網站設計專案 001掌握平台推薦機制與規則,不走彎路不入坑.txt 059【小提醒】最終作業的設計細節.html 060電商網站的設計細節.mp4 061【小練習】主題發想.html 062步驟_UserStoryMapping使用者故事對照.mp4 063【小練習】撰寫使用者故事對照.html 064步驟_FlowChart流程圖.mp4 065flow-chart-example.drawio.zip 065【小練習】新增功能流程.html 066步驟_UIFlow介面流程圖.mp4 067ui-flow-example.drawio.zip 067【階段作業】接續完成UIFlow.html 068步驟_Wireframe線框稿.mp4 069【階段作業】繪製響應式線框稿.html 070步驟_Mockup設計精稿.mp4 071【階段作業】完成設計精稿.html 072步驟_Prototype原型設計.mp4 073【階段作業】製作高擬真原型.html 074步驟_Behance作品整理技巧.mp4 075【最終作業】透過_Behance展示你的作品.html 14前往職場:設計師面試技巧 076【小提醒】共筆文件.html 077設計師這樣面試就對了(上).html 078設計師這樣面試就對了(下).html 相關商品:Udemy線上課程UI設計入門:畫出有程式邏輯的設計稿講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版)Udemy線上課程使用HTML、CSS開發一個網站(含教材)講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版)Udemy線上課程Vue出一個電商網站(含教材)講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版)Udemy線上課程精通Bootstrap4-開發超強不解釋(含教材)講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版)Udemy線上課程AdobeXD:網頁設計真容易(含教材)講師:卡斯伯六角學院影音教學中文發音繁體中文字幕版(DVD版)