Maxis Kao | Oct. 26, 2016
> User First! 前端的最後⼀一塊拼圖
Maxis Kao
➔ Software Engineer at Yahoo
➔ Top Hack of Yahoo TW/JP Joint Hackday
➔ Winner of Yahoo Bot Challenge
前端⼯工程師的最後⼀一塊拼圖
• 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
“科技始終來⾃自於⼈人性”
UX
傻傻分不清UI & UX
網路上
• What is the 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
• 使⽤用者介⾯面設計師-Game UI/UX
• UI/UX 使⽤用者介⾯面設計師
• UI/UX designer(使⽤用者經驗/介⾯面設計師)
• 使⽤用者經驗設計師 UX Designer
• 使⽤用者介⾯面設計師
求職
• UX Makes Interfaces Useful
• UI Makes Interfaces Beautiful
• UX Helps Users Accomplish Goals
• UI Makes Emotional Connections
• UX Design Is Done First
• UI Design Is Done Second
• UX Design Is Done First
• UI Design Is Done Second
• UX Is Employed Across Products, Interfaces And Services
• UI Only Pertains To Interfaces
• VD 把⼥女⽣生⾐衣服做得很漂亮
• UI 把⼥女⽣生⾐衣服層次穿搭的很潮
• UX “這位正妹是賽⾞車⼿手,給我蓬蓬裙幹嘛?”
⼼心路歷程UI & UX
⿊黑暗時期拜神祭天
⿊黑暗時期
• 卯起來找神器,想⼀一次殺到終極 BOSS
• “10 個平⾯面設計⽅方法讓你的作品創意⼗十⾜足”
• 瞻仰 Dribbble / Pinterest 上⼤大神作品
城堡時代⼈人類⽂文明的重要分⽔水嶺
城堡時代
• 擁 HTML / CSS ⾃自重
• 跟 F2E 溝通
• 從 prototype 到 real code
撞牆期⽂文藝復興,哲學反思
視覺之外回到⼈人本
> Stay focused“10 Usability Heuristics for User Interface Design”
潮.貳零壹陸UI & UX
RWD
Rear Wheel Drive
Responsive Web Design⾃自適應 / 響應式 網⾴頁設計
FLAT DESIGN
Q : “什麼是⾮非扁平? ”
2006 2016
2006 2016
回到設計的本質
colorn. ⾊色彩
Color Harmonies• Analogous
• Monochromatic
• Triad
• Complementary
• Compound
• Shades
fontn. 字體
Avenir Book Britannic Bold
Title Body
LOUIS VUITTON
LOUIS VUITTONComic Sans
Futura
MICROINTERACTIONS
Feature & Detail
Dan Saffer
It's All In The Detail魔⻤⿁鬼藏在細節裡
• Communicate feedback or 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?
7 個魔⻤⿁鬼1. System status
2. Highlight Changes
3. Keep Context
4. Non-Standard Layouts
5. Calls to Action
6. Visualize Input
7. Tutorials come alive
– Jakob Nielsen
“keep your user informed about what is going on”
1. System status
“Animation will attract their attention and not let users overlook what you think is important”
2. Highlight Changes
“keep clear navigation between different pages”
3. Keep Context
“interact with uncommon layouts without unnecessary confusion”
4. Non-Standard Layouts
“keep on browsing, like, or share content, just because it’s attractive and they don’t want to leave”
5. Call to Action
“turn boring process into something special”
6. Visualize Input
“highlighting basic features for further usage”
7. Tutorials come alive!
UI & UX 先別急著打開軟體
設計流程
idea
sketch
wireframe
mockup
prototype
idea
sketch
wireframe
mockup
prototype
idea
sketch
wireframe
mockup
prototype
idea
sketch
wireframe
mockup
prototype
idea
sketch
wireframe
mockup
prototype
product
Fidelity擬真度
idea
sketch
wireframe
mockup
prototype
Low
Medium
High
Fidelity
• Sketch
• Pixate
• framer.js
• Keynote
• Flinto
⼯工具箱
framer.js
– Maxis Kao, 2015 #程序猿⿎鼓勵師
“使⽤用者都是暴⺠民”
Chat Bot
BUT悲劇還是發⽣生了
#UserFirst
“You've got to start with the customer experience and work backwards to the technology.”
- Steve Jobs
– Dan North, 2003
“Behavior-driven Development”
常⾒見問題
• 客⼾戶 要的功能沒 開發
• 開發 的功能不是 客⼾戶 要的
• 客⼾戶 和 ⼯工程師 雞同鴨講
‣ 業務:我要⼀一個計算機
1 + 1 = 2
100 + 5 = 105
99 + 1234 = 1333
12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入
‣ ⼯工程師:簡單,我⾺馬上給你!
User story• As a X - the person (or role) who will benefit
• I want Y - some feature
• so that Z - the benefit or value of the feature
Acceptance Criteria• Given some initial context (the givens),
• When an event occurs,
• Then ensure some outcomes.
A BDD example1. 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!”.
client developers
client developers
BDD
CucumberA tool for running automated tests written in plain language
.jsCucumberA tool for running automated tests written in plain language
$ npm install cucumber
‣ 業務:我要⼀一個計算機
1 + 1 = 2
100 + 5 = 105
99 + 1234 = 1333
12.6 + 5 = 18 // 做⽣生意的很喜歡四捨五⼊入
‣ ⼯工程師:簡單,我⾺馬上給你!
“不管你選擇哪⼀一條路”
Knowledge
– 朱⽴立倫, 2014 & 2015
“做好,做滿”
Maintainable千古流芳
打開編輯器
Nicholas C. Zakas
Maintainable codeshould works for 5 years without having to rewrite
- Nicholas C. Zakas
Who cares?• 公司
• 同事
• 未來的⾃自⼰己
maintainability• 直觀 • 理解 • 修改 • 擴充 • 除錯 • 測試
- C.A.R. Hoare
Code Conventions
• Code Style
• Programming Practice
Code Style• Formatting
• Comments
• Statement & Expression
• Variables, Functions, and Operators
✓ Linting tools: JSLint / JSHint / ESLint
Programming Practice1. Loose Coupling 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
1. Loose Coupling of UI Layers
• html / css / javascript 各司其職
• templating: handlebar / {{ mustache }}
2. Avoid Globals
• Naming Collisions
• Code Fragility
• Difficulty Testing function sayColor() { alert(color);
}
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); }
4. Separate Configuration from Code
• Separate configuration data from code.
function validate(value) { if (!value) { location.href = "/errors/invalid.php"; }; }
• Don’t override methods.
• Don’t add new methods.
• Don’t remove existing methods.
5. Don’t Modify Objects You Don’t Own
6. Browser Detection
• Avoid Feature Inference
• Avoid Browser Inference if (document.getElementsByTagName) { // DOM element = document.getElementById; };
if (document.all) { // IE id = document.uniqueID; };
Design Patterns嚴以律⼰己
SEO把網站放在五叉路⼝口
User Logs數字會說話
全世界最瘋狂的是新加坡
台灣全世界第⼗十⼀一瘋狂
短短三個⽉月就沒⼈人在玩了
台灣⼀一個⽉月就退燒
相關的 query 都是作弊程式
後端前端
前端開發的五⼤大挑戰
• Compatibility - 兼容性
• Interaction - 交互的複雜度
• Maintainability - 程式可維護性
• Performance - 性能
• Personal development - 個⼈人成⻑⾧長 - 張克軍 @ ⾖豆瓣前端⼯工程師
⼀一秒鐘幾⼗十萬上下
Backend
• Scalability - 規模
• Security - 安全
• Performance - 效率
• Availability - 穩定
後端開發的四⼤大課題
下⼀一個⾥里程碑
Fullstack
Thanks :P
Q / A
Top Related