那些設計時容易忽略 的事情
Front-End Developers Taiwan Party - 2 2013/10/29 @Changee中⼭山店
Weihan Hung magic
PhD., Technology Painter @Fourdesire 四合願
Image via centralasian, CC License.
Ideas Make it happen
Image via centralasian, CC License.
Composition
Desiring Clicks Plant Nanny Doggii Grids
Fourdesire 四合願
First Launch Beer Nanny Change Taipei NTU YouTube EDU
2012 Aug - Present
screenshots of bloglovin’ Image via Mike Rohde, CC License.
Application & Web
Page-based Application
Behave like Applications
那些設計時容易忽略的事情 （經驗分享）
哪些?
Before asking what or which, let’s ask WHY.
對於產品本質的了解程度
Graphic Design
Interaction
Form Follow Function
本質的不同
Application Service
Game Branding
⽤用在什麼地⽅方
Side Menu vs Tab Bar
什麼樣的資訊內容
給什麼樣的⼈人⽤用
Image via Kent Want, CC License. Image via Adrian Askew, CC License
製造邏輯與使⽤用材質
Different Platforms
Different Platforms
There is no essential difference between the artist and the craftsman. The artist is an exalted craftsman.
Walter Gropius, “Bauhaus Manifesto and Program” (1919)
Engineer as Designer
Engineers design materials, structures, and systems while considering the limitations imposed by practicality, regulation, safety, and cost.
Bureau of Labor Statistics, U.S. Department of Labor (2006). "Engineers". Occupational Outlook Handbook, 2006-07 Edition. Retrieved 2006-09-21. Ralph, P. and Wand, Y. (2009). A proposal for a formal definition of the design concept. In Lyytinen, K., Loucopoulos, P., Mylopoulos, J., and Robinson, W., editors, Design
Requirements Workshop (LNBIP 14), pp. 103–136. Springer-Verlag, p. 110
A designer is an agent that “specifies the structural properties of a design object.”
最重要的⺫⽬目的在於解決問題
產品必須是要拿來⽤用的
實⽤用是基礎
再來要是⽅方便好⽤用的
良好的體驗
Image via Ronald Sarayudej, CC License.
It means something
http://dribbble.com/shots/584188-Mobile-Coachhttp://dribbble.com/shots/1286277-Dashboard
http://dribbble.com/shots/1059004-close-web?list=searches&tag=web http://dribbble.com/shots/576957-Revised-Coach-Card
視覺上的美感
Attractive Things Work Better
Norman, D. A. (2002)
To be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable.
Norman, D. A. (2002)
設計是⼀一個⼈人的事情嗎？
軟體⼯工程師
視覺設計師
互動設計師
前端⼯工程師後端⼯工程師
不同的⾝身分與關係
軟體⼯工程師
視覺設計師
互動設計師
前端⼯工程師後端⼯工程師
不同的⾝身分與關係
軟體⼯工程師
視覺設計師
互動設計師
前端⼯工程師後端⼯工程師
不同的⾝身分與關係
軟體⼯工程師
視覺設計師
互動設計師
前端⼯工程師後端⼯工程師
不同的⾝身分與關係
了解你的團隊與合作夥伴
http://www.flickr.com/photos/battlecreekcvb/
程式設計師在意的
• 架構乾淨
• 保持彈性
• 模組化
• 減少客製化
• 完整的設計
視覺設計師在意的
• 細節的完美
• 像素戰士 Pixel Fighter
• 色調、風格的一致性
• 視覺上的平衡與協調
• 客製化
我們都不愛變更設計
軟體⼯工程師
視覺設計師
互動設計師
前端⼯工程師後端⼯工程師
Image via qmnonic, CC License.
介⾯面的特性
1) 介⾯面操作是⼀一個連續的過程
Plant Selection Tutorial Flowerpot Selection Tutorial
Tap to switch
Tap to switch
Check if need download resource from server
Input plant’s nameFinish
完整的流程圖
http://dribbble.com/shots/1240564-Wireframes
First Launch
不同的任務與情境
App Launch
購買的流程
購買的流程
Path Premium 購買範例
Path Premium 購買範例
Path Premium 購買範例
Path Premium 購買範例
Path Premium 購買範例
Line 下載貼紙
Droplr
Droplr
2) 可能發⽣生各種狀況
有資訊 沒有資訊
空⽩白
說⼀一句話吧
可以讀取更多資訊
更多資訊
動態資訊的各種狀況
動態資訊的各種狀況
已經沒有更多資訊 沒有網路
你尚未連接到網路
只有這些
沒有網路（刷新時）
無法讀取!你尚未連接到網路
空⽩白狀態的利⽤用 (Blank Slate)
什麼資料將會出現在這裡 What
是什麼讓我想要在這裡做些什麼 Why
要怎麼做 How
空⽩白狀態的利⽤用 (Blank Slate)
空⽩白狀態的利⽤用 (Blank Slate)
空⽩白狀態的利⽤用 (Blank Slate)
網路問題
網路問題
? pt
3) 變動的資訊內容
http://www.behance.net/gallery/NomNom/11351281
http://www.behance.net/gallery/Moti-Concept/10703931
Doggii
Doggii
Doggii
Doggii
What I learned
• 希伯來文是從右到左
• 實作了 Justify、斷字與換行、以及自動縮字型、自動高度調整。
Park Guides
Design by considering normal contents.
資訊內容
資訊內容
堆疊式的⽂文字顯⽰示
資訊內容
截短 縮⼩小字型 換⾏行
我是⼀一個很⻑⾧長很⻑⾧長的地點... 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地點名稱 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地! 點名稱
介⾯面⽂文字
介⾯面⽂文字
定義⽂文字資訊的邊界
4) 後端與前端的相互影響
成就系統
• Identifier
• Title
• Description
• Identifier
• Completed Percentage
Information
Progress
Is iCloud available?
First launch
Is there data on cloud?
Enable iCloud?
Yes
No
Yes
No Sync with cloud
Overwrite cloud
Local
No
Yes Data available
我們來⽀支援 iCloud 吧
Is iCloud available?
First launch
Is there data on cloud?
Enable iCloud?
Yes
No
Yes
No Sync with cloud
Overwrite cloud
Local
No
Yes Data available
我們來⽀支援 iCloud 吧
5) 視覺與動態效果
昂貴的視覺效果
Transparent Elements
Shadow with Radius
昂貴的視覺效果
Text
昂貴的視覺效果
昂貴的視覺效果
昂貴的視覺效果
昂貴的視覺效果
Text
昂貴的視覺效果
Text Changed
昂貴的視覺效果
Text Changed
昂貴的視覺效果
Text Changed
昂貴的視覺效果
Text Changed
昂貴的視覺效果
Text
opaque = YES
昂貴的視覺效果
Text Changed
opaque = YES
昂貴的視覺效果
1
2
3
4
5
6
7
1
2
3
4
5
6
7
2
3
4
5
6
7
清單視圖的回收機制
初始化
初始化 回收使⽤用
昂貴的視覺效果
Shadow with no radius
動態效果
動態效果
動態效果
動態效果
動態效果
http://www.w3.org/TR/SVGCompositing/
⽤用⼿手思考
Sketching
http://www.flickr.com/photos/purecaffeine/
Learning by doing
http://www.flickr.com/photos/wwworks/
75% Retention Rate
Teaching Others
90% Retention Rate
http://www.flickr.com/photos/bobnrenee/
Enjoy it!
