Upload
chih-cheng-wang
View
1.503
Download
2
Embed Size (px)
Citation preview
Google DesignTranslation and Intro
⺩王志誠軟體⼯工程師 !專⻑⾧長:CSS、Sass !Blog:wcc723.github.io
(設計師?)
翻譯Translation
感謝Thanks
• Charlene • Frances • Helen • Mkdodos • Till • Peter • Sheng-Bo • Xuan • Xunyi
動機Motivation
• 這是⼀一份相當優質的Design Guideline 。(沒⾒見過這麼強的)
• 跨平台的Design guideline。(幻想可以⽤用在Web上)
• 英⽂文是看⼀一分鐘,休息30分鐘的東⻄西。
• 希望引起許多⼈人的興趣。
主要技術• Hackpad
• Github
• Markdown
• GitBook
Hackpad • 管理翻譯章節不重複
• 讓翻譯者了解⺫⽬目前進度
• 公告相關事項
Github • Open Source 版本控管
• ⽀支援 Markdown
Markdown • 較易統⼀一格式
• ⽅方便易學的語⾔言
Gitbook• 核⼼心⼯工具
• Node.js
• 還可以發佈
• https://www.gitbook.io/
– 今天另外⼀一個⼯工作就是推坑
⿎鼓勵⼤大家學Git
Google Design希望⼤大家⼀一起來討論Google design
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.
Material designhttp://goo.gl/aVFhOa
Papers1. Material
2. Depth
3. Response
• Color
• Float action button.
• Depth
• Material and animation
• ink
DepthWhat if pixels didn't just have color, but also depth?
Seams
Step
Floating Actions
Depth is not ornament.
• Think in terms of element priority within z-space, not absolute position.
Shadows
• Shadows consist of two layers: a top shadow for depth and a bottom shadow for definition.
Button
Floating Action button
Raised button
Flat button
ResponseWhat if there was an intelligent material that was as simple as
paper but could transform and change shape in response to touch?
Fonts - Roboto
• The new version of Roboto is slightly wider and rounder, giving it greater clarity and making it more optimistic.
• 相較於舊版,新版變得更寬、更圓潤,提⾼高它的可識度且更活潑。
Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, light“R”
上:Helvetica Neue 下:Roboto
Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, regular
上:Helvetica Neue 下:Roboto
Helvetica Neue VS Roboto
Helvetica Neue VS Roboto
• 60pt, blod
上:Helvetica Neue 下:Roboto
Applicationhttp://goo.gl/XVQK4p
運⽤用在WEb上!?
剩多少時間
不寫Js也能體驗Google Design體驗版
Polymer• Import Template
• Tag
Demo
Thanks