1. Google Design
Translation and Intro

2. ⺩王志誠
軟體⼯工程師
!
專⻑⾧長：CSS、Sass
!
Blog：wcc723.github.io
(設計師?)

3. 翻譯
Translation

4. 感謝
Thanks
• Charlene
• Frances
• Helen
• Mkdodos
• Till
• Peter
• Sheng-Bo
• Xuan
• Xunyi

5. 動機
Motivation

6. • 這是⼀一份相當優質的Design Guideline 。
(沒⾒見過這麼強的)
• 跨平台的Design guideline。
(幻想可以⽤用在Web上)
• 英⽂文是看⼀一分鐘，休息30分鐘的東⻄西。
• 希望引起許多⼈人的興趣。

7. 主要技術
• Hackpad
• Github
• Markdown
• GitBook

8. Hackpad • 管理翻譯章節不重複
• 讓翻譯者了解⺫⽬目前進度
• 公告相關事項

9. Github • Open Source 版本控管
• ⽀支援 Markdown

10. Markdown • 較易統⼀一格式
• ⽅方便易學的語⾔言

11. Gitbook
• 核⼼心⼯工具
• Node.js
• 還可以發佈
• https://www.gitbook.io/

13. – 今天另外⼀一個⼯工作就是推坑
⿎鼓勵⼤大家學Git

14. Google Design
希望⼤大家⼀一起來討論Google design

16. Goals
• 創造⼀一種設計語⾔言，融合先進技術與設計經典準則
• ⽀支援跨平臺且不同螢幕⼤大⼩小裝置的設計⾵風格
• create a visual language for our users that synthesizes the classic principles of good
design with the innovation and possibility of technology and science.
• Develop a single underlying system that allows for a unified experience across platforms
and device sizes.

17. Material design
http://goo.gl/aVFhOa

18. Papers
1. Material
2. Depth
3. Response

19. Material
Manual creative
http://manualcreative.com/

21. • Color

22. • Float action button.

23. • Depth

24. • Material and animation

25. • ink

31. Depth
What if pixels didn't just have color, but also depth?

32. Seams

33. Step

34. Floating Actions

35. Depth is not ornament.
• Think in terms of element priority within z-space, not absolute position.

36. Shadows
• Shadows consist of two layers: a top shadow for depth and a bottom shadow for
definition.

37. Button

38. Floating Action
button

39. Raised button

40. Flat button

41. Response
What if there was an intelligent material that was as simple as
paper but could transform and change shape in response to touch?

46. Fonts - Roboto
• The new version of Roboto is slightly wider and rounder, giving it greater clarity and
making it more optimistic.
• 相較於舊版，新版變得更寬、更圓潤，提⾼高它的可識
度且更活潑。

48. Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, light
“R”
上:Helvetica Neue
下:Roboto

49. Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, regular
上:Helvetica Neue
下:Roboto

50. Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, blod
上:Helvetica Neue
下:Roboto

51. Application
http://goo.gl/XVQK4p

52. 運⽤用在WEb上!?

54. 剩多少時間

55. 不寫Js也能體驗Google Design
體驗版

56. Polymer
• Import Template
• Tag

57. Demo

58. Thanks