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

1. 那些設計時容易忽略
的事情
Front-End Developers Taiwan Party - 2
2013/10/29 @Changee中⼭山店

2. Weihan Hung
magic
PhD., Technology Painter @Fourdesire 四合願

3. Image via centralasian, CC License.

4. Ideas
Composition
Make it happen
Image via centralasian, CC License.

5. Fourdesire 四合願
2012 Aug - Present
Desiring Clicks
Plant Nanny
Doggii
Grids
First Launch
Beer Nanny
Change Taipei
NTU YouTube EDU

6. Application & Web
screenshots of bloglovin’
Image via Mike Rohde, CC License.

7. Page-based Application

8. Behave like Applications

9. 那些設計時容易忽略的事情
（經驗分享）

10. 哪些?

11. Before asking what or which,
let’s ask WHY.

12. 對於產品本質的了解程度

13. Graphic Design

14. Interaction
Form Follow Function

15. 本質的不同
Application
Service
Game
Branding

16. ⽤用在什麼地⽅方

18. Side Menu vs Tab Bar

19. 什麼樣的資訊內容

22. 給什麼樣的⼈人⽤用

23. Image via Kent Want, CC License.
Image via Adrian Askew, CC License

24. 製造邏輯與使⽤用材質

25. Different Platforms

26. Different Platforms

27. There is no essential difference between the
artist and the craftsman. The artist is an exalted
craftsman.
Walter Gropius, “Bauhaus Manifesto and Program” (1919)

28. 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

29. 最重要的⺫⽬目的在於解決問題

30. 產品必須是要拿來⽤用的

31. 實⽤用是基礎

32. 再來要是⽅方便好⽤用的

33. 良好的體驗

34. It means something
Image via Ronald Sarayudej, CC License.

35. 視覺上的美感
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

36. Attractive Things Work Better
Norman, D. A. (2002)

37. 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)

38. 設計是⼀一個⼈人的事情嗎？

39. 不同的⾝身分與關係
軟體⼯工程師
互動設計師
視覺設計師
後端⼯工程師
前端⼯工程師

40. 不同的⾝身分與關係
軟體⼯工程師
互動設計師
視覺設計師
後端⼯工程師
前端⼯工程師

41. 不同的⾝身分與關係
軟體⼯工程師
互動設計師
視覺設計師
後端⼯工程師
前端⼯工程師

42. 不同的⾝身分與關係
軟體⼯工程師
互動設計師
視覺設計師
後端⼯工程師
前端⼯工程師

43. 了解你的團隊與合作夥伴
http://www.flickr.com/photos/battlecreekcvb/

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

45. 視覺設計師在意的
• 細節的完美
• 像素戰士 Pixel Fighter
• 色調、風格的一致性
• 視覺上的平衡與協調
• 客製化

46. 我們都不愛變更設計
軟體⼯工程師
互動設計師
視覺設計師
後端⼯工程師
前端⼯工程師

47. 介⾯面的特性
Image via qmnonic, CC License.

48. 1) 介⾯面操作是⼀一個連續的過程

49. Tap to switch
Tap to switch
Plant Selection Tutorial
Check if need download
resource from server
Flowerpot Selection Tutorial
Finish
Input plant’s name

52. 完整的流程圖
http://dribbble.com/shots/1240564-Wireframes

53. 不同的任務與情境
First Launch
App Launch

54. 購買的流程

55. 購買的流程

56. Path Premium 購買範例

57. Path Premium 購買範例

58. Path Premium 購買範例

59. Path Premium 購買範例

60. Path Premium 購買範例

61. Line 下載貼紙

62. Droplr

63. Droplr

64. 2) 可能發⽣生各種狀況

65. 動態資訊的各種狀況
空⽩白
說⼀一句話吧
更多資訊
有資訊
沒有資訊
可以讀取更多資訊

66. 動態資訊的各種狀況
無法讀取!
你尚未連接到網路
你尚未連接到網路
只有這些
已經沒有更多資訊
沒有網路
沒有網路（刷新時）

67. 空⽩白狀態的利⽤用 (Blank Slate)

68. 空⽩白狀態的利⽤用 (Blank Slate)
是什麼讓我想要在這裡做些什麼
Why
要怎麼做
How
什麼資料將會出現在這裡
What

69. 空⽩白狀態的利⽤用 (Blank Slate)

70. 空⽩白狀態的利⽤用 (Blank Slate)

71. 網路問題

72. 網路問題
? pt

73. 3) 變動的資訊內容

75. http://www.behance.net/gallery/NomNom/11351281

76. http://www.behance.net/gallery/Moti-Concept/10703931

77. Doggii

78. Doggii

79. Doggii

80. Doggii

81. What I learned
• 希伯來文是從右到左
• 實作了 Justify、斷字與換行、以及自動
縮字型、自動高度調整。

82. Park Guides

83. Design by considering normal contents.

84. 資訊內容

85. 資訊內容
堆疊式的⽂文字顯⽰示

86. 資訊內容
我是⼀一個很⻑⾧長很⻑⾧長的地點...
截短
我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地點名稱
縮⼩小字型
我是⼀一個很⻑⾧長很⻑⾧長很⻑⾧長的地!
點名稱
換⾏行

87. 介⾯面⽂文字

88. 介⾯面⽂文字

89. 定義⽂文字資訊的邊界

90. 4) 後端與前端的相互影響

91. Instagram

92. 成就系統
Information
• Identifier
• Title
• Description
Progress
• Identifier
• Completed Percentage

93. 我們來⽀支援 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

94. 我們來⽀支援 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

95. 5) 視覺與動態效果

96. 昂貴的視覺效果
Shadow with Radius
Transparent Elements

97. 昂貴的視覺效果
Text

98. 昂貴的視覺效果

99. 昂貴的視覺效果

100. 昂貴的視覺效果

101. 昂貴的視覺效果
Text

102. 昂貴的視覺效果
Text Changed

103. 昂貴的視覺效果
Text Changed

104. 昂貴的視覺效果
Text Changed

105. 昂貴的視覺效果
Text Changed

106. 昂貴的視覺效果
Text
opaque = YES

107. 昂貴的視覺效果
Text Changed
opaque = YES

108. 昂貴的視覺效果

109. 1
1
2
3
4
5
6
7
2
2
3
3
4
4
5
5
初始化
6
6
初始化
7
回收使⽤用
7
清單視圖的回收機制

110. 昂貴的視覺效果
Shadow with no radius

112. 動態效果

113. 動態效果

114. 動態效果

115. 動態效果

116. 動態效果
http://www.w3.org/TR/SVGCompositing/

117. ⽤用⼿手思考

118. Sketching
http://www.flickr.com/photos/purecaffeine/

119. Learning by doing
75% Retention Rate
http://www.flickr.com/photos/wwworks/

120. Teaching Others
90% Retention Rate
http://www.flickr.com/photos/bobnrenee/

121. Enjoy it!

122. 謝謝⼤大家
Email: magic@fourdesire.com
Facebook: Weihan Hung