Udemy — The Complete App Design Course — UX, UI and Design Thinking 筆記
完整的APP設計課 — UX, UI 和設計思考 — 學習設計製作美觀、可愛的 App 應用程序
課程心得：
由 London App Brewery LAB 針對完全沒有任何基礎的初學者，所推出的 App UIUX 課程，在Udemy上為 4.4 顆星，總時數 3 小時。老師很用心的提供相當多面向的網站、文章及書籍資源，對初學者來說是觀念上大補帖型的課程，非常推薦作為進入 App UIUX領域的第一門課。
Section 1 — Introduction
1. Introduction to the App Design Course
80–20法則：80% of the gains come from 20% of the result。20%所必須知道的知識可包含真實世界所需80％的case。
2. How to Get All The Free Stuff
3. Download Your Massive Bundle Here
4. Why design is important for an app entrepreneur
2016年有兩百萬 apps 在 IOS app store, 兩百四十萬 apps 在 Android Google play store。易用性與介面美觀等emotional responses決定人們對app的喜愛程度。
5. Designer vs. Non-Designer Thinking
專業的設計師會根據色彩學（color theory）和字型學(Typography)的specification來進行設計。
Section 2 — Color Theory
6. Understanding the Mood of Your Colour Palette
色彩對情緒(Moods)的影響，像紅色很常使用在車廠代表速度，或是跟愛有關的銷售。黃色是代表快樂且非常強烈吸引目光的顏色，作為大型海報背景色非常吸睛，在 App 上也可能讓自己從一對 App 海中被挑出。綠色很常代表安全和新鮮，許多食品相關喜歡使用。藍色代表信任，很多醫療產業喜歡使用，而面試時穿藍色的在第一印象也是容易讓人覺得可以信任。紫色代表皇室、富裕和女性，很常被用在支付相關領域。
7. How to Combine Colours to Create Colour Palettes
12色相環中，相近的兩色會讓人感覺比較愉悅耐看，180度的相反兩色則會跳躍出來吸引目光，不適合當作主要介面的色彩。當使用完全相反色彩的左右兩色來設計，可以同樣吸引人但不至於那麼強烈，比較耐看。如果使用色相環上三角形的位置的三個色彩，雖然很平衡，但是很像90年代的設計。現代設計喜歡使用單配色(monochromatic)的色彩配色，透過深淺來表現強調。
8. Tools for Designing with Colour
挑選色彩可以參考Color Hunt擁有非常多配色組合可以直接複製color code，或是Flat UI Colors for iOS，針對 iOS 系統色彩表現特別好。Google 針對 Android 的 Material Design 也是可以直接配色好。另外推薦 ColorZilla 這個 Chrome Extension 套件，可以直接吸取顏色。
9. Tools for Designing with Color Resources
10. Further Reading on Designing with Colour
推薦書
推薦文章
Section 3 — Typography
11. Introduction to Typography
文字使用很重要。
12. The Serif Type Family — Origins and Use
襯線(Serif)字體，早期是石頭刻字所形成的字體，通常用於正式場合，像是法律事務所。
區分四種主要的襯線字體，左上像是 Adobe Jensons’s, Cenaurs, Goudy等等，像是14世紀在使用的，非常保守。右上算是左上的現代版，像 Times New Roman, Baskerville 或是 Georgia。左下是非常現代的字體，右下是 slab 的。
如何區分這四種，可以觀察字體最粗和最細的部分。從傳統到現代的字體，可以看到很像拿一隻扁平的筆去畫出來的。
而 slab 是一種完全沒有任何粗細的字體樣式，是專門為報紙印刷設計的字體，早期印刷品質非常糟糕的年代，墨水會印刷後暈開造成字型的細節都不見的一種狀況而成。
13. The Sans Serif Type Family — Origins and Use
無襯線(Sans Serif)字體，沒有尖角在字體末端，比較現代。
右上是 Grotesque 像 Franklin Gothic, news Gothic。右上是 Neo-Grotesque 像 Helvetica 或 Arial, 左下是 Humanist 像 Gill Sans, Homer, Adana等。右下是 Geometric 像 Futura，非常的幾何形，圓形都像用尺規畫的。
14. How Typography Determines Readability
字體的重點在於功能。舉例 Humanist 相對 Grotesque 作為路牌可以讓開車的人更容易辨認文字內容。因為 Humanist 的可讀性更高，文字設計上有較多的開放空間，間距較寬，而且文字g和9較容易區分，字寬也不同。這些都影響文字的使用。
15. How to Combine Fonts Like a Pro
通常 Title 和 Body 會使用不同的字型，例如標題使用襯線字體，內文使用無襯線字體，因為無襯線字體相對於襯線字體容易閱讀，又可做出標體與內文的區分。另外一種做法反過來，使用無襯線字體作為標題，襯線字體作為內文，這樣的對比讓畫面也是好的。使用襯線與襯線，或是無襯線與無襯線會讓畫面太過無趣，缺乏設計感。
而字體使用上建議使用不超過兩種字體，三種到極限，四種就太多了。每一種字體會有自己的個性，像是最一開始Love letter的字體不同營照的氛圍不同，如果將不同個性的字體混雜在一起，會變得雜亂。現代的字體與傳統的字體也不應該被混雜在同一個畫面。現代和現代，傳統和傳統，字型才會平衡。
建議使用對比的時候，除了襯線字體與無襯線字體去做對比之外，使用字體的粗細，從 Bold、Regular、thin去做變化。
以下這6種字體，建議無論何時都不要使用。不會是好的設計。
WhatFont 是一個 Chrome Extension 可以查詢網頁上別人使用的字體，點擊後框選字體即可得知字型、樣式、大小、顏色、粗細等資訊。Font.com是用來下載字體的網站，淡大部分需要付費商業使用。推薦 Font squirrel，可以免費下載商業使用的字體。還有推薦 Mac 上的一個 App — Sky Fonts，可以模擬字體被應用在網頁上的感覺。
16. Further Reading on Typography
推薦書籍
- Thinking with Type, Second Revised and Expanded Edition: A Critical Guide for Designers, Writers, Editors, and Students (Design Briefs)
- The Elements of Typographic Style
- Just My Type: A Book about Fonts[ JUST MY TYPE: A BOOK ABOUT FONTS ] by Garfield, Simon (Author ) on Sep-01–2011 Hardcover
推薦文章
Section 4 — User Interface (UI) Design for Mobile
17. What is User Interface (UI) Design?
課程將教學如何創造漂亮且良好情緒反饋的設計。
18. The Tour Guide Approach to UI Design
首先，必須想像自己的 App 體驗是一趟愉快的旅程。設計師必須帶領這趟旅程從A到B到C。
當看到一張圖片會從大標、副標為先，之後才看到註解。這是人類行為，總是被最顯眼的吸引，網頁、App設計也是。
Web Design in 4 Minutes
19. What is Good Practice in Interaction Design
做設計的時候必須給予使用著 hint 來引導使用者如何操作。
舉例：一個按鈕如何讓人覺得可以按壓？設計按鈕的陰影，並且在手指滑過去的時候，按鈕顏色變深。類似視覺上按壓下去的效果。
設計的 Golden rule: function comes before form. 許多按鈕設計會使用環狀圓形或是陰影漸層來表現一個 button。
iOS7 之後開始推廣 flat design: 讓設計看起來像一片玻璃一樣，沒有任何陰影來暗示一個按鈕。
但未來可能會更傾向使用隱約的陰影會漸層來暗示這個行為。像是Mac OS folder的設計，有約略的陰影在旁邊，暗示不只是一個文字或圖片，而是具有互動功能的。 Material Design 也是一個很好的例子。
20. The Importance of Alignment
設計的重要觀念：盡可能減少對齊(Alignment)的數量。
以名片為例，過多的對齊會讓人感覺混亂。
21. Colour in User Interface Design
盡可能保持簡單的設計。以 Uber 網站為例，即便是很簡單的黑白色調，重要資訊一樣一躍而出。可以參考 Dribbble 上專業設計師的範例。
Dribbble search by colour tool
22. The Many Ways of Designing Text Overlays
當文字以圖片為背景的時候，切記文字被背景圖吃掉。特別是當圖片是會改變不是由設計師決定的時候，可以使用色彩遮罩或是高斯模糊遮罩來使文字突出於圖片。
如果文字僅顯示於整個頁面的下方，可利用由上而下漸層的陰影來做處理，陰影只出現在文字後方，圖片仍然保持清晰。
23. How to Be an Attention Architect
可以使用許多不同文字樣式來凸顯所要強調的資訊
24. Further Reading on User Interface Design
推薦書籍
- About Face: The Essentials of Interaction Design
- Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design
推薦文章
Section 5 — User Experience (UX) Design for Mobile
25. What is User Experience (UX) Design?
UX Design 是無所不在，到處都是。必須非常有彈性的去假想所有的可能。如果沒有好的使用者體驗，大部分的 app 會在第一次使用就被刪除。舉例 Apple 的 Reminder App，使用者體驗很差，導致大部分的人傾向下載外面的 Todo List App。接下來會以七個問題來檢視是否是好的 UX 設計。
26. Usability
第一個問題是：我的使用者是為什麼使用這個 App?
不好的例子：一個幫助找到最近廁所的 App，他們在下載後第一個頁面是很長的使用條款，接著要求輸入生日，而且是必須一個一個點擊月份和年份的輸入方式，非常耗時，而且不必要，在真正開始使用這個 App 之前必須經過總共5個畫面，對一個尿急的人來說，超級沒有意義。
好的例子：一個安排預約活動的的 App，進入第一個畫面只有三個按鈕，今天、明天、本週，包含了90%的使用者。思考如何最小化使用者的使用歷程是很重要的。
27. Asking for Permissions
以Benjamin Franklin 想要獲得一個高層人士的好感，透過向對方借一本對方很珍惜的書，人腦因為需要平衡自己為什麼會做出借書這樣的幫助舉動，於是合理化的方式是，我喜歡這個人所以我借這個人這本書，結果是，後來就願意在未來對他給予更大的幫助。UX 很接近人類心理學。使用白帽(White Hat)的方式來讓使用者往你希望的方向前進。如果是用一些技巧讓使用者去觸發某種只是對自己有利的行為是不好的。假設如前面不好的例子中，需要使用者同意來取得使用者的 GPS 位子以定位廁所，可以在使用者開始使用並熟悉這個 APP 之後再詢問。
28. User Profiling
例子是Bourbong原本是instagram的原型，功能變多之後，發現最多的人用來分享照片，所以簡化了所有的東西，並且將使用者族群限縮後，特定於一個範圍。
29. Form vs. Function
第二個問題是：我們的設計根據是因為 good 還是 clever？
不好的例子：NBC News 設計一個12個選項的環狀選單，讓字體變90度垂直，當使用手機變換方向的時候，這個選單也跟著旋轉，非常困惑使用者，當設計和功能有出入的時候，永遠以功能為優先。現在他們改成無聊的下拉式選單，但現在終於可以很容易的去閱讀選單。
30. Consistency
第三個問題是：我的設計是否維持一致性（consistent）?
不好的例子：網站是髮型設計的公司，卻將網頁背景放陽光沙灘，還有一排飛機作為按鈕，讓人非常困惑。
不好的例子2：一個回報IT問題的頁面使用購物車 icon 來收集問題。
31. Simplicity
第四個問題：我可以讓流程更簡單嗎？
不好的例子：醫院的病患管理系統，太多功能在一個介面讓人找不到需要使用的功能。
不好的例子2：太多顏色和按鈕的設計，手指會很難點選選項，而且會不理解到底icon所代表的行為是什麼，按下去會有什麼結果。
不好的例子3：一進入 App 後有很長達三的畫面的教學示範頁面，建議盡可能簡化使用流程。
32. Don’t Make Me Think
第五個問題：我是否讓我的使用者更辛苦？
每個人和電腦一樣都有一定限制的 RAM，我們盡可能減輕使用者的負擔。
不好的例子：非常複雜的密碼限制。如果只是一個生活上使用的網站，不是銀行或是CIA，使用者不認為需要那麼複雜的安全限制。
不好的例子2：九個教學頁面的教學沒有人會想看，建議可以用小的 hint 在按鈕的旁邊，顯示小小的對話框給予暗示，不要 front-loaded 你的使用者。
不好的例子3：英國銀行的按鈕有一個可以修改密碼的的按鍵，從 Clear 改成使用 Error 的字樣在上面，讓使用者很困惑，我按下這個按鈕是 Report 了什麼 Error？我們應該盡可能讓文字盡量清楚。
不好的例子4：通常將 App 像下拉會 Refresh 頁面，從facebook、Twitter、instagram大家都是這樣，是習慣的 Pattern，但有 App 企圖將下拉的行為改成新增一個 Reminder，不符合使用習慣，讓人很困惑，流失很多使用者。
33. Onboarding
第六個問題：我可以教而沒有教學流程嗎？
人們喜歡直覺的使用，不喜歡被當笨蛋反覆教學基本的東西。
不好的例子：NBC News 非常多頁面在教學。
好的例子：Flipboard ，當第一次使用，使用者一陣子沒有任何行為，下方會挑出一個可以滑動的提示，此時使用者滑動後就可以看到其他頁面。學習沒有任何的學習行為。
34. Idiot Boxes
最後一個問題：我是否將我的使用者當笨蛋？
不好的例子：Amazon 的 App，會在加入購物車的時候跳出 pop-up 問請問你確定要將物品加入購物車嗎？ 當選購很多物品的時候，這個 pop-up 便非常擾人。Idiot Design Pattern: 沒有足夠好的理由打斷 User flow是非常白痴的行為。後來改進為在購物車 icon 上顯示一個圓圈紅色1，讓使用者知道按下按鈕後已經放入購物車。
35. Further Reading on User Experience Design
推薦書籍
- Don’t Make Me Think: A Common Sense Approach to Web Usability (Voices That Matter)
- The Design of Everyday Things
- 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter)
推薦文章
- 52 Weeks of UX- This is not quite an article, it’s more like 52 articles where the author reflects on some of the most important points in user experience and interaction design.
- UX Design in 14 Simple Steps
- UX design tips for your app
- UX Myths
Section 6 — Designing for iOS and Android — What are the Important Differences?
36. Android vs. iOS Design
- 問題：我們是否可以用非原生（non-native）app的設計同時deploy到iOS和Android環境？
舉例, 在 iOS 環境習慣使用 tab Bar 在底部來做分頁，Android 手機通常已經有三個按鈕在頁面底部，直接使用 iOS 的設計到 Android，會出現兩條 Tab Bar 在頁面底部的狀況。有50%的 App 在下載第一次被開啟後即被刪除，我們須確保設計符合其開發環境。
37. Navigation
- iOS 和 Android 在返回鍵：
iOS 設計在左上角，Android返回鍵為一個硬體按鍵。
Android 返回鍵是根據時間軸，返回時間上的前一個頁面，但 iOS 返回是根據其階層（hierarchy）。 Android 返回鍵會回到上階層的頁面，iOS 則是返回同階層頁面。 - iOS 和 Android 在主選單按鈕（Hamburger Menu）：
Android 在 Navigation 習慣設計 Hamburger Menu 點選後選單由側邊滑出，在 iOS 習慣使用 Tab Controller 在底部，且最多五顆，超過手指會比較難按壓。
因為 Hamburger Menu 的設計常被忽略，許多設計師在 Android 改用一個定在上方的 Tab Bar 由左右滑動的設計來切換頁面，像是 Twitter 在 Android 就是採用這樣的設計。
38. The Devil is in the Details
- Title 的設計差異：
Android 習慣將 Title 文字靠左，而 iOS 設計將 Title 文字置中 - Dropdown Menu：
Android 會在 Click 之後 dropdown 選單，而 iOS 則是 sliding wheel 的形式。
39. Differences in Icon Design
- icon 設計:
從 iOS 7 開始，基於 Flat Design ，iOS 建議icon使用線型來設計，而 Android 仍舊使用塊狀來呈現
40. Flat Design vs. Material Design
早期App icon，使用相當多的3D效果及對比色和陰影，一樣是從 iOS 7 開始，iOS 建議使用 Flat Design ，減少陰影、漸層和對比色，不要從螢幕上突出，如同一張平面的紙。而 Google 的 Material Design 使用相對 iOS 更多一點 3D 感覺，比較像紙卡材質，可以藉由一點點的陰影，指示出是否為一個按鈕，在使用者體驗上可能更好一些。
41. Differences in Establishing Visual Hierarchy
- 視覺階層（Visual Hierachy）
Android 標題通常為最大，次標和內文會較小。
iOS 通常標題用字重（font-weight）區分，標題為粗體，次標為標準體，內文為細體。
42. iOS and Android Design Guidelines
- iOS Human Interface Design Guidelines
- Material Design Guidelines
建議假設要設計的環境跟自己原生使用的環境不同，直接拿一支另外一種環境的手機使用上一段時間。
Section 7 — Putting it All Together — A Step-By-Step Guide to the Mobile Design Workflow
43. Step 1: Design Patterns and Colour Palettes
- 訓練方式：
尋找題材與靈感，推薦mobile-patterns來參考知名公司的設計，以及選取Color Palette，像是在Color Hunt挑選色彩。
44. Where to find design patterns and colour palettes
挑選Pattern
挑選色彩
45. Step 2: How to Create a User Flow Diagram
User Flow Diagram 用來設計使用者的旅程，類似網頁的 site map，通常使用正方形來表示 Screen，像是Home Screen 或是登入 Screen，使用菱形來表示 Decision，像是滑行或是縮放，使用箭頭來連結 Screen 和 Decision，這個過程即為 User Flow Diagram。
在產品規劃前期，使用 User Flow Diagram 可以很輕易地快速做出改變，在出設計團和程式開發之前，建議先 sketch out 流程為先。
46. Step 3: How to Create Wireframes
Wireframe 是一種低保真（low-fidelity）的規劃，可以使用 UI Stencils （UI 用的洞洞板）和 Sketch pad （iPhone 或 Android Phone 的繪圖紙）來繪製。
我們將 User Flow Diagram 上正方形的 Screen 轉化成 Wireframe，可將流程的轉化為實體。可以免費下載像是Pop App這樣的工具來輔助快速做出簡單的 Wireframe 每一個 Decision 點擊所進入的前一個或下一個畫面。快速的做完範例。
47. Wireframing Resources
- UI Stencils’ Free Downloadable Design Templates
- Free Download of Pop App by WooMoo
iOS
Android
Windows tablet - Wireframe 教學：連結
48. Step 4: How to Create Professional Mockups
mockup 是一種高保真（high-fidelity）的圖，可使用 Photoshop / Illustrator / Sketch 或 Marvel 來作圖。建議以 Sketch 為主。
49. Tools for Creating Mockups
50. How to use Sketch (41) to Create Mockups
介紹Sketch介面操作Symbols的用法
Sketch App Sources
51. How to Use Canva to Create Mockups
介紹Canva介面操作
52. Your Turn to Create Your Own Mockups
53. Tools and Resources for Creating Mockups
製作各種螢幕使用情境示意圖的網站工具：
Websites and Tools for Creating Designed Mockups (Alternatives to Sketch)
54. Step 5: How to Create an Animated App Prototype
Marvel 和 inVision 都是用來製作 Prototype，兩者為競爭者。Priniciple只能用在Mac上，設計得很像 Sketch。Proto.io 也是另一種原型工具。建議可以從四種挑選適合自己的，推薦 Marvel 來設計簡單的原型，用 Priniciple 來製作比較複雜的互動。
55. Tools and Resources for Creating Prototypes
56. Prototyping with Keynote
介紹如何用Keynote來製作動畫
57. Protoyping with Marvel
介紹如何用Marvel來製作互動設計和Prototype
58. Your Turn to Create a Prototype
59. Example Marvel Prototype
Section 8 — Resources
60. Where to Find Free-For-Commercial use Image Assets
HD 攝影圖片
61. Where to Find Free-For-Commercial use Icons
向量圖庫
免費的商業用icons
62. How to Keep Learning and Improving
Say hello! 我是 Angel,這裏的內容如果有幫到你，希望能獲得一些拍手作為鼓勵
工作上的合作歡迎隨時透過 Mail 聯繫我 contact@aneglho.design–
Thanks for watching!
