UI 設計入門：畫出有程式邏輯的設計稿| 六角學院

設計師投入業界最重要的就是作品，作品是呈現能力的最有力表現，課程最後會介紹實戰中的工作流程，一步一步帶你完成 ... 設計流程①：IA➝Logic flow➝Wireframe. 初入UI設計，看似簡單卻不容易 初入UI設計看似簡單卻不容易 介面概念過於抽象難以尋找統整的秘笈 美學太主觀不知如何證明其價值 帶你實作一個電商網站 文字、簡報讓麻瓜也能懂美學 投入新領域，最害怕的就是許多艱澀難懂的專有名詞，透過統整的資訊依序地透過影片、簡報，讓初學者發現“美”原來那麼簡單！ 說再多也比不過動手做 美學相對於其它領域來說相當抽象，僅有透過文字、圖像、影片都無法確保學習狀態，因此課程中提供許多小作業，並由講師、助教給予回饋確保學習成果。

不僅有小範例，更要大實力！ 設計師投入業界最重要的就是作品，作品是呈現能力的最有力表現，課程最後會介紹實戰中的工作流程，一步一步帶你完成工程師、用戶、老闆都喜愛的UI設計作品。

不只教，還要帶你/妳就業 UI作品設計 我們會引導學員設計出具有優勢的作品，讓你呈現實力顯得毫不費力！ 履歷撰寫 我們有免費的職涯、轉職服務，迄今已幫數百位學員媒合到適合的工作。

學員社團 學習過程不孤單，任何時間都有與你一同奮鬥的同學，更有許多學長姐能給予更多職場情報喔！ 課程大綱   介紹 Availablein days days afteryouenroll 六角學院線上學員社團 開始 課程介紹 (0:46) 預覽 免費作業上傳空間 開始 AppleM1觀看公告 開始   基本概念 Availablein days days afteryouenroll 先來聊聊什麼是UI設計 (2:46) 預覽 開發流程與設計思考 (7:03) 開始 介面設計相關設計師 (9:00) 開始 初學者必看的設計規範 (7:30) 開始   設計流程①：IA➝Logicflow➝Wireframe Availablein days days afteryouenroll 設計流程簡介 (2:21) 開始 IA資訊架構 (5:32) 開始 FunctionalMap功能地圖 (5:14) 開始 LogicFlow操作邏輯流程 (5:02) 開始 Wireframe線框稿 (5:06) 開始   設計流程②：設計精稿與標註文件 Availablein days days afteryouenroll GridSystem網格系統 (3:46) 開始 AtomicDesign原子設計 (2:11) 預覽   從原子設計學習介面的常見元件 Availablein days days afteryouenroll Buttons按鈕 (5:43) 開始 States物件狀態 (5:30) 開始 Input輸入格 (7:36) 開始 RadioButtons&Checkbox單選按鈕與複選框 (2:15) 開始 Links連結 (2:06) 開始 Icon圖示 (5:40) 開始 Text文字 (8:46) 開始 Color色彩 (4:20) 開始 設計師常會忽略的通用設計（Accessibility） (3:27) 開始 【小練習】挑選達到AA級的色彩 開始   原子設計第二階段：分子 Availablein days days afteryouenroll Navigation導覽元件 (6:43) 開始 Accordions折疊面板 (1:44) 開始 Tooltips提示工具 (1:53) 開始 Card卡片 (3:45) 開始 Modal互動視窗 (2:52) 開始 Alert警告訊息 (2:21) 開始 DataTable資料表 (2:37) 開始 Form表單 (8:43) 開始 C.R.A.P.四個幫助你優化介面的設計準則 (4:00) 開始 【章節作業】換你試試看：優化表單設計 開始   原子設計第三階段：組織 Availablein days days afteryouenroll Header頁首 (5:25) 開始 Footer頁尾 (5:12) 開始 運用常見的介面版型排出好設計 (6:47) 開始   原子設計第四階段：模板 Availablein days days afteryouenroll Templates模板 (6:01) 開始 如何做出高轉換的著陸頁（LandingPage） (5:42) 開始 行動版的介面優化：響應式排版（RWD） (6:27) 開始 透過頁面的六種狀態提升使用者體驗 (7:47) 開始 【章節作業】透過模板排出一個響應式登陸頁 開始   原子設計第五階段：頁面 Availablein days days afteryouenroll Pages頁面 (8:06) 開始 教你打造最流行的深色模式（DarkTheme） (7:27) 開始 【小練習】套用深色模式 開始   與工程師協作的必要文件 Availablein days days afteryouenroll 一定要做設計規範嗎？ (4:44) 開始 【免費資源】WireframeUIKit 開始 切圖命名與格式 (4:55) 開始 Spec設計標注檔 (1:34) 開始   設計流程③：Prototype高擬真原型製作 Availablein days days afteryouenroll 原型設計的種類與技巧 (6:54) 開始 【章節作業】製作你的第一份設計精稿-1 (3:46) 開始 【章節作業】製作你的第一份設計精稿-2 開始   情境模擬：工程師現身說法（feat.六角學院校長洧杰） Availablein days days afteryouenroll Ｑ1：繪製的設計稿被說功能太難做不出來 (6:00) 預覽 Ｑ2：如何協助設計師提供可執行的設計稿 (6:46) 開始 Ｑ3：如何跟工程師溝通有互動效果的介面 (8:59) 開始 Ｑ4：工程師對間距等設計細節不太在意 (7:44) 開始 Ｑ5：設計師需要學前端技術嗎？ (8:21) 開始 Ｑ6：專案協作上的常見問題 (4:32) 開始   實戰演練：電商網站設計專案 Availablein days days afteryouenroll 【小提醒】最終作業的設計細節 開始 電商網站的設計細節 (9:21) 開始 【小練習】主題發想 開始 步驟①：UserStoryMapping使用者故事對照 (2:10) 開始 【小練習】撰寫使用者故事對照 開始 步驟②：FlowChart流程圖 (1:13) 開始 【小練習】新增功能流程 開始 步驟③：UIFlow介面流程圖 (1:15) 開始 【階段作業】接續完成UIFlow 開始 步驟④：Wireframe線框稿 (1:31) 開始 【階段作業】繪製響應式線框稿 開始 步驟⑤：Mockup設計精稿 (1:31) 開始 【階段作業】完成設計精稿 開始 步驟⑥：Prototype原型設計 (0:55) 開始 【階段作業】製作高擬真原型 開始 步驟⑦：Bēhance作品整理技巧 (6:05) 開始 【最終作業】透過Bēhance展示你的作品 開始   前往職場：設計師面試技巧 Availablein days days afteryouenroll 【小提醒】共筆文件 開始 設計師這樣面試就對了(上) 開始 設計師這樣面試就對了(下) 開始 ShowAllLectures 此為境外交易會產生額外交易手續費用（詳細規定請洽發卡公司），如需使用台幣付款可以透過此 連結購買。

註冊課程 $2,800 2020-ORIGIN 2020-ORIGIN 快速購買