Download as PDF, PPTX
Uploaded byMaxis Kao
User first! 前端的最後一塊拼圖
This document discusses the importance of user experience (UX) and user interface (UI) design in web development, highlighting their differences and roles. It emphasizes the need for effective communication and collaboration between clients and developers to ensure successful project outcomes. The text also touches on various design principles, tools, and best practices for creating maintainable and user-friendly applications.
![[BROCHURE] Italy Tour Project | @SlideON](https://cdn.slidesharecdn.com/ss_thumbnails/brochure8-251215152319-2805af68-thumbnail.jpg?width=640&height=640&fit=bounds)
User first! 前端的最後一塊拼圖
- 1. Maxis Kao |Oct. 26, 2016 > User First! 前端的最後⼀一塊拼圖
- 2. Maxis Kao ➔ SoftwareEngineer at Yahoo ➔ Top Hack of Yahoo TW/JP Joint Hackday ➔ Winner of Yahoo Bot Challenge
- 5.
- 7. • Development • 優化開發環境無料提升戰⾾鬥⼒力 (Oct. 19) • Front-End • 2016 前端⼯工程技術巡禮 (Aug. 10) • Web Page Performance Optimization (Aug. 31) • 2016 前端潮玩意兒 (Oct. 12) • User Experience • Data Driven UI Design (Aug. 24) • Web Knowledge • Backend
- 8.
- 9.
- 10. 網路上 • What isthe difference between UX and UI designer? • What’s the difference between UI and UX? • What type of education is needed to work professionally in UI/UX? • UI vs UX: what’s the difference? • The Difference Between UX and UI Design
- 11. • 使⽤用者介⾯面設計師-Game UI/UX •UI/UX 使⽤用者介⾯面設計師 • UI/UX designer(使⽤用者經驗/介⾯面設計師) • 使⽤用者經驗設計師 UX Designer • 使⽤用者介⾯面設計師 求職
- 13. • UX MakesInterfaces Useful • UI Makes Interfaces Beautiful
- 14. • UX HelpsUsers Accomplish Goals • UI Makes Emotional Connections
- 15. • UX DesignIs Done First • UI Design Is Done Second
- 16. • UX DesignIs Done First • UI Design Is Done Second
- 17. • UX IsEmployed Across Products, Interfaces And Services • UI Only Pertains To Interfaces
- 18. • VD 把⼥女⽣生⾐衣服做得很漂亮 •UI 把⼥女⽣生⾐衣服層次穿搭的很潮 • UX “這位正妹是賽⾞車⼿手，給我蓬蓬裙幹嘛？”
- 19.
- 20.
- 21. ⿊黑暗時期 • 卯起來找神器，想⼀一次殺到終極 BOSS •“10 個平⾯面設計⽅方法讓你的作品創意⼗十⾜足” • 瞻仰 Dribbble / Pinterest 上⼤大神作品
- 22.
- 23. 城堡時代 • 擁 HTML/ CSS ⾃自重 • 跟 F2E 溝通 • 從 prototype 到 real code
- 24.
- 25.
- 26. > Stay focused “10Usability Heuristics for User Interface Design”
- 27.
- 28.
- 29.
- 30. Responsive Web Design ⾃自適應/ 響應式 網⾴頁設計
- 34.
- 35.
- 40.
- 41.
- 42.
- 43.
- 47. Color Harmonies • Analogous •Monochromatic • Triad • Complementary • Compound • Shades
- 49.
- 54. Avenir Book BritannicBold Title Body
- 55. LOUIS VUITTON LOUIS VUITTON ComicSans Futura
- 56.
- 57.
- 58.
- 59. It's All InThe Detail 魔⻤⿁鬼藏在細節裡
- 60. • Communicate feedbackor the result of an action. • Accomplish an individual task. • Enhance the sense of direct manipulation. • Help users visualize the results of their actions and prevent errors. Details, for what?
- 61. 7 個魔⻤⿁鬼 1. Systemstatus 2. Highlight Changes 3. Keep Context 4. Non-Standard Layouts 5. Calls to Action 6. Visualize Input 7. Tutorials come alive
- 62. – Jakob Nielsen “keepyour user informed about what is going on” 1. System status
- 64. “Animation will attracttheir attention and not let users overlook what you think is important” 2. Highlight Changes
- 66. “keep clear navigationbetween different pages” 3. Keep Context
- 68. “interact with uncommonlayouts without unnecessary confusion” 4. Non-Standard Layouts
- 70. “keep on browsing,like, or share content, just because it’s attractive and they don’t want to leave” 5. Call to Action
- 72. “turn boring processinto something special” 6. Visualize Input
- 74. “highlighting basic featuresfor further usage” 7. Tutorials come alive!
- 76.
- 79.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 91. • Sketch • Pixate •framer.js • Keynote • Flinto ⼯工具箱
- 92.
- 94. – Maxis Kao,2015 #程序猿⿎鼓勵師 “使⽤用者都是暴⺠民”
- 95.
- 113.
- 115.
- 116. “You've got tostart with the customer experience and work backwards to the technology.” - Steve Jobs
- 117. – Dan North,2003 “Behavior-driven Development”
- 118. 常⾒見問題 • 客⼾戶 要的功能沒開發 • 開發 的功能不是 客⼾戶 要的 • 客⼾戶 和 ⼯工程師 雞同鴨講
- 119. ‣ 業務：我要⼀一個計算機 1 +1 = 2 100 + 5 = 105 99 + 1234 = 1333 12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入 ‣ ⼯工程師：簡單，我⾺馬上給你！
- 120. User story • Asa X - the person (or role) who will benefit • I want Y - some feature • so that Z - the benefit or value of the feature
- 121. Acceptance Criteria • Givensome initial context (the givens), • When an event occurs, • Then ensure some outcomes.
- 122. A BDD example 1.Feature: Greeting 2. 3. Scenario: Say Hello World 4. Given I have an application “Hello” 5. When I ask it to say hi 6. Then I receive “Hi, there!”.
- 123.
- 124.
- 125. Cucumber A tool forrunning automated tests written in plain language
- 126. .jsCucumber A tool forrunning automated tests written in plain language $ npm install cucumber
- 127. ‣ 業務：我要⼀一個計算機 1 +1 = 2 100 + 5 = 105 99 + 1234 = 1333 12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入 ‣ ⼯工程師：簡單，我⾺馬上給你！
- 133.
- 134. – 朱⽴立倫, 2014& 2015 “做好，做滿”
- 135.
- 136.
- 137.
- 139. Maintainable code should worksfor 5 years without having to rewrite - Nicholas C. Zakas
- 140. Who cares? • 公司 •同事 • 未來的⾃自⼰己
- 141. maintainability • 直觀 • 理解 •修改 • 擴充 • 除錯 • 測試
- 142.
- 143. Code Conventions • CodeStyle • Programming Practice
- 144. Code Style • Formatting •Comments • Statement & Expression • Variables, Functions, and Operators ✓ Linting tools: JSLint / JSHint / ESLint
- 145. Programming Practice 1. LooseCoupling of UI Layers 2. Avoid Globals 3. Event Handling 4. Separate Configuration from Code 5. Don’t Modify Objects You Don’t Own 6. Browser Detection
- 146. 1. Loose Couplingof UI Layers • html / css / javascript 各司其職 • templating: handlebar / {{ mustache }}
- 147. 2. Avoid Globals •Naming Collisions • Code Fragility • Difficulty Testing function sayColor() { alert(color); }
- 148. 3. Event Handling •Separate Application Logic • Don’t Pass the Event Object Around var handleClick = function(event) { showPopup(event); } addListener(element, "click", function(event) { app.handleClick(event); }
- 149. 4. Separate Configurationfrom Code • Separate configuration data from code. function validate(value) { if (!value) { location.href = "/errors/invalid.php"; }; }
- 150. • Don’t overridemethods. • Don’t add new methods. • Don’t remove existing methods. 5. Don’t Modify Objects You Don’t Own
- 151. 6. Browser Detection •Avoid Feature Inference • Avoid Browser Inference if (document.getElementsByTagName) { // DOM element = document.getElementById; }; if (document.all) { // IE id = document.uniqueID; };
- 152.
- 153.
- 154.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162. 前端開發的五⼤大挑戰 • Compatibility -兼容性 • Interaction - 交互的複雜度 • Maintainability - 程式可維護性 • Performance - 性能 • Personal development - 個⼈人成⻑⾧長 - 張克軍 @ ⾖豆瓣前端⼯工程師
- 163.
- 164. • Scalability -規模 • Security - 安全 • Performance - 效率 • Availability - 穩定 後端開發的四⼤大課題
- 165.
- 166.
- 167.