那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
16 likes3,847 views
这篇文档讨论了前端开发中的设计忽视问题，强调对产品本质的理解和用户体验的重要性。内容涵盖了设计师与工程师之间的互动以及有效的界面设计原则。通过实际案例和建议，作者提供了关于如何改善设计和用户体验的见解。
那些設計時容易忽略的事情 @Front-End Developers Taiwan Party 2
- 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.
- 10. 哪些?
- 11. Before asking what or which, let’s ask WHY.
- 12. 對於產品本質的了解程度
- 13. Graphic Design
- 16. ⽤用在什麼地⽅方
- 18. Side Menu vs Tab Bar
- 19. 什麼樣的資訊內容
- 22. 給什麼樣的⼈人⽤用
- 23. Image via Kent Want, CC License. Image via Adrian Askew, CC License
- 24. 製造邏輯與使⽤用材質
- 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.
- 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. 設計是⼀一個⼈人的事情嗎？
- 44. 程式設計師在意的 • 架構乾淨 • 保持彈性 • 模組化 • 減少客製化 • 完整的設計
- 45. 視覺設計師在意的 • 細節的完美 • 像素戰士 Pixel Fighter • 色調、風格的一致性 • 視覺上的平衡與協調 • 客製化
- 47. 介⾯面的特性 Image via qmnonic, CC License.
- 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
- 54. 購買的流程
- 55. 購買的流程
- 61. Line 下載貼紙
- 62. Droplr
- 63. Droplr
- 64. 2) 可能發⽣生各種狀況
- 71. 網路問題
- 72. 網路問題 ? pt
- 73. 3) 變動的資訊內容
- 77. Doggii
- 78. Doggii
- 79. Doggii
- 80. Doggii
- 81. What I learned • 希伯來文是從右到左 • 實作了 Justify、斷字與換行、以及自動 縮字型、自動高度調整。
- 82. Park Guides
- 83. Design by considering normal contents.
- 84. 資訊內容
- 85. 資訊內容 堆疊式的⽂文字顯⽰示
- 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
- 107. 昂貴的視覺效果 Text Changed opaque = YES
- 108. 昂貴的視覺效果
- 110. 昂貴的視覺效果 Shadow with no radius
- 112. 動態效果
- 113. 動態效果
- 114. 動態效果
- 115. 動態效果
- 117. ⽤用⼿手思考
- 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!