5分で マテリアルデザインを読む 2015/08/08 第8回G-Study
自己紹介 名前 吉田 剛 (ヨシダ ツヨシ) 職業 フロント寄りのデベロッパー (元Flash使い) スマホUI講師 イカしてると思うブキ わかばシューター
2
4 https://www.google.com/design/spec/material-design/introduction.html
章立て
9
6. コンポーネント
7. パターン
8. ユーザビリティ
9. リソース
1. マテリアルデザイン
2. マテリアル
3. アニメーション
4. スタイル
5. レイアウト
11
各章まとめました。 ニュアンス掴んで!
あとは各自で読んで、、、
5分後に マテリアルデザインを読む 2015/08/08 第8回G-Study
13
さっそく、、 と行く前に、、
15
1. マテリアルデザイン
Material design
1. マテリアルデザイン
16
• 新しいデザインルール • 統一性・法則 • 様々な環境に適応可能 • 紙とインク
17
2. マテリアル
What is material?
2. マテリアル
18
• 新しい概念の基本物質 • 厚さ一定で層状 • 縦横のみ伸び縮みする • 色や画像は表面の模様
2. マテリアル
19
• 新しい概念の基本物質 • 厚さ一定で層状 • 縦横のみ伸び縮みする • 色や画像は表面の模様
紙
インク
21
3. アニメーション
Animation
3. アニメーション
22
• 簡潔で意味があること • 自然であること • 操作への適切な反応 • ワクワクは細部に宿る
3. アニメーション
23
• 簡潔で意味があること • 自然であること • 操作への適切な反応 • ワクワクは細部に宿る
← 第7回G-Study “動き”を作るポイント
24
http://cda244.com/2015/01/11-505/
25
8まで飛びます 4~7は後ほど
26
8. ユーザビリティ
Usability
8. ユーザビリティ
27
• アクセシビリティ • ローカライズ
28
4~7は 決まり事・ルール が続きます
4. スタイル
30
マテリアルデザインを 構成する以下要素のルール 色使い・アイコン・画像・文字・文章
32
5. レイアウト
Layout
5. レイアウト
33
色々な環境でマテリアルデザインを実現する基本ルール 単位・構造・可変 etc…
35
6. コンポーネント
Components
6. コンポーネント
36
各パーツ説明と決まり事 ボタン・テーブル・ダイアログ・ タブ・テキスト入力 etc…
38
7. パターン
Patterns
7. パターン
39
よく使われる要素や画面、シーンのパターン エラー表示・起動画面・検索・ スクロール・データ形式 etc…
41
9. 素材
Resources
9. 素材
42
制作に役立つ素材を用意しています カラーパレット・フォント・ テンプレート・アイコン etc…
45
さぁ!読もう!
ありがとうございました
47
Material Design Lite
48 http://www.getmdl.io/