那些設計時容易忽略
的事情
Front-End Developers Taiwan Party - 2
2013/10/29 @Changee中⼭山店
Weihan Hung
magic
PhD., Technology Painter @Fourdesire 四合願
Image via centralasian, CC License.
Ideas

Composition

Make it happen

Image via centralasian, CC License.
Fourdesire 四合願
2012 Aug - Present

Desiring Clicks

Plant Nanny

Doggii

Grids

First Launch

Beer Nanny

Change Taipei

N...
Application & Web

screenshots of bloglovin’

Image via Mike Rohde, CC License.
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...
Engineer as Designer
Engineers design materials, structures, and systems while
considering the limitations imposed by prac...
最重要的⺫⽬目的在於解決問題
產品必須是要拿來⽤用的
實⽤用是基礎
再來要是⽅方便好⽤用的
良好的體驗
It means something

Image via Ronald Sarayudej, CC License.
視覺上的美感

http://dribbble.com/shots/1286277-Dashboard

http://dribbble.com/shots/584188-Mobile-Coach

http://dribbble.com/sh...
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 a...
設計是⼀一個⼈人的事情嗎?
不同的⾝身分與關係

軟體⼯工程師

互動設計師

視覺設計師
後端⼯工程師
前端⼯工程師
不同的⾝身分與關係

軟體⼯工程師

互動設計師

視覺設計師
後端⼯工程師
前端⼯工程師
不同的⾝身分與關係

軟體⼯工程師

互動設計師

視覺設計師
後端⼯工程師
前端⼯工程師
不同的⾝身分與關係

軟體⼯工程師

互動設計師

視覺設計師
後端⼯工程師
前端⼯工程師
了解你的團隊與合作夥伴

http://www.flickr.com/photos/battlecreekcvb/
程式設計師在意的

• 架構乾淨
• 保持彈性
• 模組化
• 減少客製化
• 完整的設計
視覺設計師在意的

• 細節的完美
• 像素戰士 Pixel Fighter
• 色調、風格的一致性
• 視覺上的平衡與協調
• 客製化
我們都不愛變更設計

軟體⼯工程師

互動設計師

視覺設計師
後端⼯工程師
前端⼯工程師
介⾯面的特性

Image via qmnonic, CC License.
1) 介⾯面操作是⼀一個連續的過程
Tap to switch
Tap to switch

Plant Selection Tutorial

Check if need download
resource from server

Flowerpot Selection Tu...
完整的流程圖

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)
空⽩白狀態的利⽤用 (Blank Slate)
是什麼讓我想要在這裡做些什麼
Why
要怎麼做
How
什麼資料將會出現在這裡
What
空⽩白狀態的利⽤用 (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) 後端與前端的相互影響
Instagram
成就系統
Information

• Identifier
• Title
• Description
Progress

• Identifier
• Completed Percentage
我們來⽀支援 iCloud 吧

Yes
Is iCloud available?

First launch

No

Yes

Overwrite cloud

Is there data on cloud?

No

Sync with ...
我們來⽀支援 iCloud 吧

Yes
Is iCloud available?

First launch

No

Yes

Overwrite cloud

Is there data on cloud?

No

Sync with ...
5) 視覺與動態效果
昂貴的視覺效果

Shadow with Radius

Transparent Elements
昂貴的視覺效果

Text
昂貴的視覺效果
昂貴的視覺效果
昂貴的視覺效果
昂貴的視覺效果

Text
昂貴的視覺效果

Text Changed
昂貴的視覺效果

Text Changed
昂貴的視覺效果

Text Changed
昂貴的視覺效果

Text Changed
昂貴的視覺效果

Text

opaque = YES
昂貴的視覺效果

Text Changed

opaque = YES
昂貴的視覺效果
1
1
2
3
4
5
6
7

2

2

3

3

4

4

5

5

初始化

6

6

初始化

7

回收使⽤用

7

清單視圖的回收機制
昂貴的視覺效果

Shadow with no radius
動態效果
動態效果
動態效果
動態效果
動態效果

http://www.w3.org/TR/SVGCompositing/
⽤用⼿手思考
Sketching

http://www.flickr.com/photos/purecaffeine/
Learning by doing

75% Retention Rate

http://www.flickr.com/photos/wwworks/
Teaching Others

90% Retention Rate

http://www.flickr.com/photos/bobnrenee/
Enjoy it!
謝謝⼤大家
Email: magic@fourdesire.com
Facebook: Weihan Hung
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
Upcoming SlideShare
Loading in …5
×

那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2

3,451 views
3,362 views

Published on

那些設計時容易忽略的事情 - 經驗分享

Published in: Design, Technology, Sports
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,451
On SlideShare
0
From Embeds
0
Number of Embeds
1,650
Actions
Shares
0
Downloads
44
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2

  1. 1. 那些設計時容易忽略 的事情 Front-End Developers Taiwan Party - 2 2013/10/29 @Changee中⼭山店
  2. 2. Weihan Hung magic PhD., Technology Painter @Fourdesire 四合願
  3. 3. Image via centralasian, CC License.
  4. 4. Ideas Composition Make it happen Image via centralasian, CC License.
  5. 5. Fourdesire 四合願 2012 Aug - Present Desiring Clicks Plant Nanny Doggii Grids First Launch Beer Nanny Change Taipei NTU YouTube EDU
  6. 6. Application & Web screenshots of bloglovin’ Image via Mike Rohde, CC License.
  7. 7. Page-based Application
  8. 8. Behave like Applications
  9. 9. 那些設計時容易忽略的事情 (經驗分享)
  10. 10. 哪些?
  11. 11. Before asking what or which, let’s ask WHY.
  12. 12. 對於產品本質的了解程度
  13. 13. Graphic Design
  14. 14. Interaction Form Follow Function
  15. 15. 本質的不同 Application Service Game Branding
  16. 16. ⽤用在什麼地⽅方
  17. 17. Side Menu vs Tab Bar
  18. 18. 什麼樣的資訊內容
  19. 19. 給什麼樣的⼈人⽤用
  20. 20. Image via Kent Want, CC License. Image via Adrian Askew, CC License
  21. 21. 製造邏輯與使⽤用材質
  22. 22. Different Platforms
  23. 23. Different Platforms
  24. 24. There is no essential difference between the artist and the craftsman. The artist is an exalted craftsman. Walter Gropius, “Bauhaus Manifesto and Program” (1919)
  25. 25. Engineer as Designer Engineers design materials, structures, and systems while considering the limitations imposed by practicality, regulation, safety, and cost. A designer is an agent that “specifies the structural properties of a design object.” 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
  26. 26. 最重要的⺫⽬目的在於解決問題
  27. 27. 產品必須是要拿來⽤用的
  28. 28. 實⽤用是基礎
  29. 29. 再來要是⽅方便好⽤用的
  30. 30. 良好的體驗
  31. 31. It means something Image via Ronald Sarayudej, CC License.
  32. 32. 視覺上的美感 http://dribbble.com/shots/1286277-Dashboard http://dribbble.com/shots/584188-Mobile-Coach http://dribbble.com/shots/1059004-close-web?list=searches&tag=web http://dribbble.com/shots/576957-Revised-Coach-Card
  33. 33. Attractive Things Work Better Norman, D. A. (2002)
  34. 34. 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)
  35. 35. 設計是⼀一個⼈人的事情嗎?
  36. 36. 不同的⾝身分與關係 軟體⼯工程師 互動設計師 視覺設計師 後端⼯工程師 前端⼯工程師
  37. 37. 不同的⾝身分與關係 軟體⼯工程師 互動設計師 視覺設計師 後端⼯工程師 前端⼯工程師
  38. 38. 不同的⾝身分與關係 軟體⼯工程師 互動設計師 視覺設計師 後端⼯工程師 前端⼯工程師
  39. 39. 不同的⾝身分與關係 軟體⼯工程師 互動設計師 視覺設計師 後端⼯工程師 前端⼯工程師
  40. 40. 了解你的團隊與合作夥伴 http://www.flickr.com/photos/battlecreekcvb/
  41. 41. 程式設計師在意的 • 架構乾淨 • 保持彈性 • 模組化 • 減少客製化 • 完整的設計
  42. 42. 視覺設計師在意的 • 細節的完美 • 像素戰士 Pixel Fighter • 色調、風格的一致性 • 視覺上的平衡與協調 • 客製化
  43. 43. 我們都不愛變更設計 軟體⼯工程師 互動設計師 視覺設計師 後端⼯工程師 前端⼯工程師
  44. 44. 介⾯面的特性 Image via qmnonic, CC License.
  45. 45. 1) 介⾯面操作是⼀一個連續的過程
  46. 46. Tap to switch Tap to switch Plant Selection Tutorial Check if need download resource from server Flowerpot Selection Tutorial Finish Input plant’s name
  47. 47. 完整的流程圖 http://dribbble.com/shots/1240564-Wireframes
  48. 48. 不同的任務與情境 First Launch App Launch
  49. 49. 購買的流程
  50. 50. 購買的流程
  51. 51. Path Premium 購買範例
  52. 52. Path Premium 購買範例
  53. 53. Path Premium 購買範例
  54. 54. Path Premium 購買範例
  55. 55. Path Premium 購買範例
  56. 56. Line 下載貼紙
  57. 57. Droplr
  58. 58. Droplr
  59. 59. 2) 可能發⽣生各種狀況
  60. 60. 動態資訊的各種狀況 空⽩白 說⼀一句話吧 更多資訊 有資訊 沒有資訊 可以讀取更多資訊
  61. 61. 動態資訊的各種狀況 無法讀取! 你尚未連接到網路 你尚未連接到網路 只有這些 已經沒有更多資訊 沒有網路 沒有網路(刷新時)
  62. 62. 空⽩白狀態的利⽤用 (Blank Slate)
  63. 63. 空⽩白狀態的利⽤用 (Blank Slate) 是什麼讓我想要在這裡做些什麼 Why 要怎麼做 How 什麼資料將會出現在這裡 What
  64. 64. 空⽩白狀態的利⽤用 (Blank Slate)
  65. 65. 空⽩白狀態的利⽤用 (Blank Slate)
  66. 66. 網路問題
  67. 67. 網路問題 ? pt
  68. 68. 3) 變動的資訊內容
  69. 69. http://www.behance.net/gallery/NomNom/11351281
  70. 70. http://www.behance.net/gallery/Moti-Concept/10703931
  71. 71. Doggii
  72. 72. Doggii
  73. 73. Doggii
  74. 74. Doggii
  75. 75. What I learned • 希伯來文是從右到左 • 實作了 Justify、斷字與換行、以及自動 縮字型、自動高度調整。
  76. 76. Park Guides
  77. 77. Design by considering normal contents.
  78. 78. 資訊內容
  79. 79. 資訊內容 堆疊式的⽂文字顯⽰示
  80. 80. 資訊內容 我是⼀一個很⻑⾧長很⻑⾧長的地點... 截短 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地點名稱 縮⼩小字型 我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地! 點名稱 換⾏行
  81. 81. 介⾯面⽂文字
  82. 82. 介⾯面⽂文字
  83. 83. 定義⽂文字資訊的邊界
  84. 84. 4) 後端與前端的相互影響
  85. 85. Instagram
  86. 86. 成就系統 Information • Identifier • Title • Description Progress • Identifier • Completed Percentage
  87. 87. 我們來⽀支援 iCloud 吧 Yes Is iCloud available? First launch No Yes Overwrite cloud Is there data on cloud? No Sync with cloud Yes Enable iCloud? No Data available Local
  88. 88. 我們來⽀支援 iCloud 吧 Yes Is iCloud available? First launch No Yes Overwrite cloud Is there data on cloud? No Sync with cloud Yes Enable iCloud? No Data available Local
  89. 89. 5) 視覺與動態效果
  90. 90. 昂貴的視覺效果 Shadow with Radius Transparent Elements
  91. 91. 昂貴的視覺效果 Text
  92. 92. 昂貴的視覺效果
  93. 93. 昂貴的視覺效果
  94. 94. 昂貴的視覺效果
  95. 95. 昂貴的視覺效果 Text
  96. 96. 昂貴的視覺效果 Text Changed
  97. 97. 昂貴的視覺效果 Text Changed
  98. 98. 昂貴的視覺效果 Text Changed
  99. 99. 昂貴的視覺效果 Text Changed
  100. 100. 昂貴的視覺效果 Text opaque = YES
  101. 101. 昂貴的視覺效果 Text Changed opaque = YES
  102. 102. 昂貴的視覺效果
  103. 103. 1 1 2 3 4 5 6 7 2 2 3 3 4 4 5 5 初始化 6 6 初始化 7 回收使⽤用 7 清單視圖的回收機制
  104. 104. 昂貴的視覺效果 Shadow with no radius
  105. 105. 動態效果
  106. 106. 動態效果
  107. 107. 動態效果
  108. 108. 動態效果
  109. 109. 動態效果 http://www.w3.org/TR/SVGCompositing/
  110. 110. ⽤用⼿手思考
  111. 111. Sketching http://www.flickr.com/photos/purecaffeine/
  112. 112. Learning by doing 75% Retention Rate http://www.flickr.com/photos/wwworks/
  113. 113. Teaching Others 90% Retention Rate http://www.flickr.com/photos/bobnrenee/
  114. 114. Enjoy it!
  115. 115. 謝謝⼤大家 Email: magic@fourdesire.com Facebook: Weihan Hung

×