Google design

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

MaterialManual creative

http://manualcreative.com/

• 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