🐺 市場一變,投資計畫就跟著亂? 🌕 熱銷 AI 投資課 71 折 ❗️ 點擊再領 $400 購課金
AI 幫你找回投資節奏🎶
登入/註冊
UI 介面設計入門,輕鬆上手 Sketch!
0 seconds of 2 minutes, 32 secondsVolume 0%
Press shift question mark to access a list of keyboard shortcuts
鍵盤快捷鍵
播放/暫停空白鍵
音量增加↑
音量減少↓
快進 5 秒→
倒退 5 秒←
開啟/關閉字幕c
全螢幕/離開全螢幕f
靜音/取消靜音m
Decrease Caption Size-
Increase Caption Size+ or =
跳轉至%0-9
00:00
00:00
02:32
 
AAPD

UI 介面設計入門,輕鬆上手 Sketch!

這堂 UI 入門課程將帶你學習主流 UI 設計軟體 Sketch,並掌握如何設計與改善使用者介面,透過 Sketch 的各項實用功能與插件,一起提升介面的視覺設計與使用者體驗!
Hahow AI 學習升級
1,132 人已購買
課程已下架
課程已下架,有任何問題可以找客服。

關於課程

課程包含

包含 3 章 15 單元、1 項作業

課程時長

5 時 25 分鐘

課程總人數

1132 位同學

觀看限制

不限觀看次數,還會附贈完課證書

學習升級

Hahow AI 學習助教
無需額外付費
即時問答、重點整理、測驗理解,讓知識派上用場

最新消息

課程內容

▲ 影片專有名詞解釋
註1:非破壞性變形是指在「不破壞原始素材」的狀態下,改變素材的外型,意思是隨時都能透過重新設定數值再變回原狀。

註2:數據運算功能指的是Sketch支援數學運算,當你在輸入數值的欄位中輸入運算符號就能得到運算後的數值,就像內建計算機一樣。

註3:匯出圖檔是在做網頁或app非常重要的步驟,sketch提供了非常方便的匯出功能,除了可以一次匯出多張圖之外,還可以同時匯出不同尺寸的圖檔,非常方便。


【 07/14內容更新 】

感謝大家,課程募資順利結束!


默默的募資人數竟然超過了600%!真的很感謝大家的支持!不知道原來有這麼多人對UI設計有興趣,我也非常期待有更多人可以一起交流學習~這幾天發現大家的提問中有滿多同學提到關於團隊合作的訣竅或可能會遇到的問題,坦白說,UI設計是一個可大可小的題目,根據產品的屬性、使用者的需求不同,其實很難有一個標準答案,甚至每個人的工作習慣跟團隊編制不同,合作方式都會有所不同。

所以,不斷的測試、驗證、思考、調整,是做一個好的產品必經的過程,而UI設計師的角色就是把「真正的需求」轉化成「實際的產品」,這其中也少不了許多溝通(多溝通真的是唯一的解藥),而我們能做的事情是:如何降低「溝通成本」,我常覺得UI設計是想7做3,視覺設計只是UI設計的最後一道工序,產品可以很難看但很好用,卻千萬不能很好看但卻完全不知道怎麼用,前期的思考非常重要。所以我也調整課程的一些結構,花稍微多一點篇幅幫大家建立UI設計的基本觀念,透過這些基礎再去延伸如何解決問題。

另外觀念篇比較細部的課程大綱也在下方提供給大家參考(總長約60分鐘):


單元1 | 觀念篇:Sketch基本特色與介紹,它與ps與ai差別在哪裡?

  • Sketch 基本介紹與特色
  • 認識設計格式 - 向量圖以及點陣圖
  • 了解Photoshop/illustrator/Sketch和UI設計的關係
  • 總結:為什麼你要用Sketch來做UI
  • 安裝Sketch軟體以及Toolbox插件小幫手 

單元2 | 觀念篇: UI 是什麼?跟UX 有什麼不同?

  • UI/UX 名詞解釋- UI 作品範例 
  • UI/UX實際上的差異及工作範疇
  • 關於團隊:UI 設計師會接觸到的人 
  • 延伸閱讀:國內外UI/UX網站推薦


單元3 | 觀念篇:網頁與 App 設計尺寸及規範

  • 產品開發流程- 常見網頁規格及 RWD 介紹 
  • 關於單位(pt和px)及像素密度(ppi)
  • 常見行動裝置尺寸介紹(iOS&Android)
  • iOS Human Interface / Material Design 簡介


單元4 | 觀念篇: UI 設計流程,實作前你該瞭解的事

  • UI/UX設計開發流程
  • User story 使用者故事介紹
  • Functional Map 功能清單介紹
  • UI Flow 概念簡介
  • Wireframe線框稿跟Prototype原型有什麼不一樣?
  • 小觀念:頁面的各種狀態 

(課程的簡報文件也會放在課程內容中提供給大家做下載)


此外,雖然這門課程主要核心目標為入門的軟體基礎教學,但我從大家的提問中也感受到一些課程上的需求,也非常感謝大家的支持,所以還是希望可以做一點課程上的回饋,所以,若課程籌備期間上課人數達到以下目標: 

Hello,大家好,我是Simon!

我是一名 UX 設計師、目前在東京的跨國企業工作。喜歡探索新知,樂於分享。希望透過分享讓世界變得更美好:)

想自學卻不知道從何學起

我本身在大學時學的是平面設計,但因為自己不是科班出身,在設計上常常抓不到要領,要花比別人更多時間才能呈現出自己滿意的作品,而對平面設計而言,多數人常常以美醜定義作品的好壞,所以我過去常常是「憑感覺」在做設計,甚至覺得作品只要「好看」就好了。

自學 UI 讓我學會用另外一種角度做好設計

在接觸 UI 設計之後,設計邏輯和思考變得相對的重要許多,設計上對於細節的要求更甚,尤其在設計手機介面時因為空間有限,畫面中每一個元素出現的位置都應該有它的原因,但許多「撇步」常常都是需要經驗累積和分享的,在自學 UI 的過程中常常會有「以自我中心設計」的盲點,設計出好看卻「不好用」的介面,所以我也會和大家分享我在自學的過程中遇到的問題和如何用對的方法找答案,讓自學的過程更有樂趣並且更順利!

那些年,學校沒教的事

的確,現在市場上對於 UI 設計師的需求非常的高,行動裝置和數位消費的普及讓設計這塊領域也有了很大的變化,但是多數學校裡卻沒有一個好的橋樑傳授這些知識,學校所學到的知識和業界真正需要的有著不小的落差,所以我希望透過我的一點經驗,幫助想進入 UI 設計領域的朋友,可以在起步的時候更加順利。

“ UI 設計的全名是 User Interface (使用者介面),是一個連接「使用者」和「電腦程序」中間的介面。”

廣義來說,使用者會接觸到的產品「介面」都算是UI的範疇,例如:自動販賣機、汽車的儀表板、手機 app 等等。但有個前提是, UI 是由視覺設計和互動所組成,介面需要透過「輸入」和「輸出」和使用者產生互動行為並給與反饋, UI 設計的目的就是讓這個過程變得美好且順暢。

▲  個人作品 》Music player

「一個好的 UI 設計,不能只是好看,同時也要好用。」

▲開工之前的準備工作很重要,明確的流程圖可以幫助在設計時少走許多冤枉路

▲在開始畫UI之前,最好將頁面的架構畫出來,確定好元素的位置功能以及層級關係,可以避免邊做邊想造成的一些混亂

▲有時間的話也可以製作快速的原型來驗證易用性

▲ 個人作品》知識媒體App使用流程

其實用什麼軟體做 UI 都沒有關係 ( illustrator 或 photoshop 都有人使用),但為什麼 Sketch 會成為目前主流的 UI 設計軟體呢?正如sketch官方網站所提到的, Sektch 相當的輕量化,也非常容易使用,它捨棄許多在 UI 設計上不必要的功能,可以讓設計師有更高的效率產出畫面,並聚焦在「設計」本身,所以 Sketch 幾乎可說是為了 UI 設計而生的軟體。有興趣的朋友可以到 Sketch 的網站瞭解更多它的特色。

▲Sketch的操作介面

▲此為 Sketch 官網的介紹影片

近年來行動裝置的普及和網路市場的擴大, UI 設計人才的需求也與日俱增,不管是網頁、手機 APP 、數位科技產品,都有不少 UI 設計人才的需求,所以 UI 設計師可謂是目前相當熱門的職業之一。

如果你是以下三種人,非常歡迎你來學習這門課程

  1. 想要從平面設計轉換到 UI 設計
  2. 非設計背景但想從事 UI 設計工作
  3. 想要更快速更有效率的產出介面的視覺設計

可能較不適合這堂課的人

1.比較不喜歡思考或不講求邏輯,東西只要好看就好的人

2.想要學影像處理或是繪製圖案的人(Sketch不太適合做這些事)

這堂課會聚焦在軟體的操作以及做介面時的設計思考,所以在報名課程前也可以思考看看自己需求哦!

這堂課程著重在UI的基本觀念以及Sketch的基本實作技巧,所以不會教程式或是製作原型的軟體,但以UI設計來說,具備基本的程式語言能力和製作原型(Prototype)也有一定的必要性,在實務上可以縮短和工程師溝通的時間,也許未來有機會可以開啟這方面的相關課程。

我將會從基礎理論到實作讓大家了解 UI 設計的輪廓,希望透過這堂課程,在有限的時間內,可以讓大家學習到 UI 設計最重要的部分:

  •  UI 設計的核心觀念
  •  Sketch 實作技能
  •  至少完成兩個以上的UI作品
「做 UI 不只是表面的視覺呈現,更重要的是不斷重塑想法並持續思考使用者的需求」

▲你可以很快速地做出像這樣子的app登入頁面 


▲一個網站的著陸頁也可以非常快速的製作出來 

▲產品結帳頁面 

▲學習完UI設計的基礎後,可以更進一步的使用精細的工具製作動態流程

本篇課程介紹所看到的作品都是我使用 Sketch 完成的,在上完課程後,相信你也能用 Sketch 做出自己的UI作品!

我也寫了關於UI入門的文章,提供給大家延伸閱讀:

如果對課程有任何疑問,也歡迎大家在下方留言提出,我都會盡我所能回答大家 :D

哪些人適合這堂課?
1.想要從平面設計師轉換成 UI 設計師 2.非設計背景但想從事 UI 設計工作 3.想要更快速更有效的產出介面的視覺設計
你可以學到
能夠理解 UI 設計的工作流程以及 Sketch 的操作邏輯,並產出完整的UI設計頁面。
上課前的準備
需要準備的工具 / 軟體(若購買課程前不清楚版本是否支援,請先留言與老師確認。)
一台 Mac 電腦( Sketch 只支援 Mac 系統)以及 Sketch 軟體(可以先到官方網站下載試用版: https://www.sketchapp.com/ )
需要具備的背景知識
若有設計背景及基本的 illustrator 及 photoshop 操作會比較容易上手,但 Sketch 是一個相對簡單直覺的軟體,所以完全沒有經驗的人也不用太擔心,只要跟著老師的步驟就能輕鬆上手。課程中也會提到一些基礎設計觀念,幫助大家製作出完整的介面設計。
單元一覽
3 章 15 單元|總時長 325 分鐘
全部展開
1
核心基礎:UI 設計基本觀念
影片單元
單元 1 - 觀念篇-1 / Sketch基本介紹與特色,它與PS和AI的差別在哪裡?
影片單元
單元 2 - 觀念篇-2 / 什麼是UI設計?跟UX一樣嗎?
09:56
影片單元
單元 3 - 觀念篇-3 / 網頁&行動裝置設計規範及尺寸
16:42
影片單元
單元 4 - 觀念篇-4 / UI設計工作流程 - 實作前你必須了解的事
作業單元
作業 1 - 你的第一個 App UI介面設計
查看作業
2
實作練習:快速上手 Sketch
影片單元
單元 1 - 實作篇-1 / 快速上手!熟悉Sketch工作區
影片單元
單元 2 - 實作篇-2 / 提高工作效率 - Sketch常用功能
33:40
影片單元
單元 3 - 實作篇-3 / 提高工作效率 - Sketch熱鍵及實用技巧
21:36
影片單元
單元 4 - 實作篇-4 / 版面配置邏輯介紹
12:29
影片單元
單元 5 - 實作篇-5 / 完稿及匯出圖檔
14:17
3
設計案例練習 (App+Web)
影片單元
單元 1 - 案例練習-1 / iOS App介面設計 - part1
29:40
影片單元
單元 2 - 案例練習-1 / iOS App介面設計 - part2
21:14
影片單元
單元 3 - 案例練習-2 / 網頁Landing page設計 - Part1
53:33
影片單元
單元 4 - 案例練習-2 /網頁Landing page設計 - Part2
17:47
影片單元
單元 5 - 資源分享 / 常用插件、原型工具介紹及線上資源分享
23:52
影片單元
單元 6 - 【新增課程】讓你的UI作品動起來,Prototype實作 (使用Prott)
12:05
試看單元
播放試看影片
章節 1 - 核心基礎:UI 設計基本觀念
單元 1 - 觀念篇-1 / Sketch基本介紹與特色,它與PS和AI的差別在哪裡?
試看影片
08:43
播放試看影片
章節 1 - 核心基礎:UI 設計基本觀念
單元 4 - 觀念篇-4 / UI設計工作流程 - 實作前你必須了解的事
試看影片
23:19
播放試看影片
章節 2 - 實作練習:快速上手 Sketch
單元 1 - 實作篇-1 / 快速上手!熟悉Sketch工作區
試看影片
26:07
課程評價
4.8
/ 5.0
90 則評價
Ching Yeung2021-03-17
很棒的ui入門課程
深入淺出的課程,讓初學者對uiux有基本的認識。個人覺得課程十分有用,可惜的由於figma已是大勢所趨,一個軟件就代替sketch及其他extensions的功能,所以老師也決定讓課程下架了。(自己也有上simon老師的figma課程,大推,比sketch課程更updated,也更深入) 總的來說非常感謝Simon老師的課,真的獲益良多!:)
AAPD
授課老師
2021-03-26
謝謝你的留言!
查看更多
nnnnaug2020-02-21
如課程標題SKETCH快速上手
一邊上課,更能自主去延伸找一些UI相關資料來學習,推薦給基礎為零,猶豫很久要學SKETCH又不知從何學起的人來上課。 可能要小小注意的: 1.唯一可惜的是教學年份有點久遠了,有些插件不太能用,跟課程有些微的出入,但能夠因為這堂課培養對UI的興趣、開始自主學習也滿好的。 2.如用13吋筆電觀看課程有點吃力,錄製課程時軟體視窗希望能全屏。
AAPD
授課老師
2020-06-05
謝謝你的支持與反饋!
查看更多
陳昭綸2018-08-19
很實用,講解過程簡單明瞭
對於想進入 UI 設計領域的新手來說,本課程是很好的進入點。老師在課程中也提供很多除了 SKETCH 之外對工作流程很方便的小工具。 老師也一步一步示範如何完成一個 UI 作品,讓新手可以更快進入狀況。上完此課程讓我可以一窺 UI 設計殿堂的奧妙。 值得推薦!
查看更多
Judy Chyou2018-08-16
簡單明瞭,易了解
這門課很清楚明白,很容易理解,適合完全不懂的初學者,唯一美中不足就是講解過程可以放大螢幕,讓人明白操作過程。 自己本身是一名平面設計師,已經會ai 或是 ps,有這樣的經驗,真的會非常快上手,同時也會非常快速去操作完成一個頁面。
查看更多
SUN2017-02-16
初學者必看課程,講解很詳細非常受用喔!
課程講解內容及速度很適合初學者學習,不會有來不急的問題,還可以一直反覆聽,老師也很樂於回答學生問題,非常值得!! 除了技能外延伸資源分享也很有幫助,對於自學的人來說是一大助力,總之大推這堂課!猶豫的人不要錯過喔!!!
查看更多

意猶未盡嗎?

關於講師

AAPD
3堂課程
7篇文章
11,350位學生
AAPD 是一個設計教育品牌與人才孵化器,我們致力於培養優秀的產品設計人才,同時分享設計師在成長過程中所需要的知識與技能,以及創造社群共學的環境與交流互動。 我們長期關注產品設計 (UI/UX)、設計職涯、個人成長、設計趨勢與產業動態等議題,希望能夠降低設計師在職涯成長的過程中所遇到的阻礙。 我們也期待 AAPD 成為一個產品設計領域進步的推進器,除了知識的分享與傳遞外,我們也希望幫助設計師思考如何夠過設計的力量,為服務的組織與產品創造更多的價值與影響力。
查看更多
前往講師頁面
精選學生作業

購課前問答

日期最新
日期最新
日期最舊
愛心數
張雅琪
2020-04-04
請問老師影片中所說的課程學習檔案是在哪裡下載的呢?
AAPD
授課老師
2020-06-05
你好,購課後在每個單元的標題旁邊都有可以下載課程範例檔案哦!
回覆
我也想問
洪萓妗
2019-07-16
老師好,想請問如果不是MAC系統的電腦,是不是就不適合上這門課??因為Mac支援sketch
AAPD
授課老師
2021-02-26
沒錯,Windows 的話會推薦我今年開的另一堂 Figma 課程哦! https://hahow.in/cr/uiux-figma
回覆
我也想問
Meow Lin
2019-04-24
請問老師,如果使用最新版本的sketch,其功能會與舊版有很大的差異嗎?(之前使用49.1現在升級到54.1感覺差好多...)想知道舊版跟新版兩者之間的差異~謝謝
AAPD
授課老師
2019-04-27
嗨你好,最近 Sketch 的更新比較大,所以功能上會有一些新功能的加入,但其實核心的操作原理都差不多,但由於課程已經錄製一段時間,當時是用比較舊版的 Sketch ,雖然基礎觀念跟操作都有帶到,但可能跟目前 Sketch 版本不同,購課可以考慮一下哦!
回覆
我也想問
harryya7749
2018-10-29
想問問最新版的52.2已經找不到IOS UI Design這選項了,是轉移到其他地方?還是需要靠插件方式處理呢?謝謝
回覆
我也想問
黃X
2018-07-24
想請問一下 sketch的動態流程 有辦法直接轉成code讓工程師直接使用嗎~
AAPD
授課老師
2021-02-26
還是會需要上傳設計稿到像是 Zeplin 這類的工具交付給工程師
回覆
我也想問
購買單堂課

NT$1,500
有什麼優惠可以用?
小蛙幫你找最佳優惠
登入看看 有什麼優惠用

相關標籤