▲ 影片專有名詞解釋
註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的操作介面

