Recommended
More Related Content
What's hot
What's hot (20)
Similar to 2018/03/03 JXUG/Ionic共催 Mobile app design合同勉強会
Similar to 2018/03/03 JXUG/Ionic共催 Mobile app design合同勉強会 (20)
2018/03/03 JXUG/Ionic共催 Mobile app design合同勉強会
- 1. マテリアルデザイン フラットデザインガイドラインを読む Japan Xamarin Users Group 福田 拳士朗 Ionic Japan User Group 桑原 聖仁
- 3. 登壇者自己紹介 福田 拳士朗（フクダ ケンシロウ） ＠Kenshiro_fukuda/Kenshiro.fukuda.9 http://bit.ly/Jre657hp 2019新卒の人間。 茨城県石岡市 出身・在住。品川までは普通列車で 約1.5H 好きなもの：Windows 10・Xamarin・クラウド・モ バイル・鉄道・Web 最近楽しかったこと：DT線で写真撮ったこと
- 4. マテリアルデザインとは 「A unified system that combines theory, resources, and tools for crafting digital experiences.」 Googleによって提唱したユーザーエクスペリエンスデザインの体系、およびそれを実現 する開発技術や手法、デザイン、試みなどの包括的呼称 とされている。 2014年6月のGoogle I/Oにて発表され、主にAndroidネイティブアプリで持ち入れられ ている。 原本元ソース：https://material.io/
- 8. マテリアルデザインの最新情報 2017年9月 オフライン上でのアクセス機能の拡張系をAndroid 8.0向けに行った Updated guidance on categorizing notifications into channels and a new messaging template Android 8向けのアイコン作成方法についても解説。 Simplified guidance on how settings are grouped, titled, and styled
- 9. マテリアルデザインーAndorid Notifications Snackbars and toasts Fingerprint Split screen Launcher icons Androidにおけるメインとして利用されつつある。このガイドラインで通知の作 り方などもサポートしている。
- 12. フラットデザイン
- 13. 登壇者自己紹介 const my_info = { Name: ‘桑原聖仁’, Twitter: ‘@kuwahara_ngv5’, GitHub: ‘k-kuwahara’, Qiita: ‘clown0082’, Workplace: ‘Yumemi, Inc.’ }
- 15. 登壇者自己紹介
- 17. フラットデザインとは
- 21. なんでこんなに流行ったの？
- 23. Modern UI （旧: Metro UI） 2011年に発表され たWindows 8にも 採用。 Microsoft社がWindows8のUIをフラット化
- 26. ＞ we understood that people had already become comfortable with touching glass, they didn’t neet physical buttons, they understood the benefits （人々がタッチスクリーンに既に慣れて、十分使いこなしているため、 物理的なボタンを模倣するようなことはもう必要ないと考えた。） 参考URL: http://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out- of-ios/ Apple社がiOSのデザインに採用
- 27. その他の採用事例
- 29. フラットデザインのメリット ➔ 柔軟性のあるフレームワーク ◆ グリッド、カード、モジュールなどと相性が良い ◆ 均一な幾何学的形状になる傾向があり、認識しやすく直感的 ➔ より大きく、より合理的なタイポグラフィ ◆ 影やその他の効果がないため、読みやすい ➔ レスポンシブデザインとの互換性 ◆ グリッドベースのレイアウト、シンプルなグラフィックス ◆ 簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置
- 30. ➔ ユーザビリティへの悪影響 ◆ 全てがフラットだと、どこがクリック可能なのか分かりにくい ◆ シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分かり辛い フラットデザインのデメリット ➔ 識別性の欠如 ◆ 狭義のビジュアルスタイルに固執することで、似たデザインになりがち ➔ 日本語には合わない
- 31. フラットデザインの今後は？
- 33. マテリアルデザインとの比較
- 34. 比較その１
- 35. 比較その２
- 36. 比較その３
- 39. 最後に…
- 40. Riot.js @Tokyo #3 開催決定！
- 41. Riot.js @Tokyo #3 開催決定！ 絶賛登壇者募集中！！
- 42. ご清聴ありがとうございました！
Editor's Notes
- ※ 公開用。No Show
- a unified system that combines theory, resources, and tools for crafting digital experiences. デジタルエクスペリエンスを作り上げるために理論、リソース、およびツールを組み合わせた統一されたシステム。 こんなサイトで使われているだとか
- モバイルの操作は基本的ですが、タッチ、ボイス、マウス、キーボードはすべて第一級の入力方法です。
- Material is the metaphor 物質的なメタファは、合理化された空間と運動システムの統合理論です。 マテリアルは紙とインクの研究に触発された触覚的な現実に基づいていますが、技術的に進歩し、想像力と魔法に開放されています。 マテリアルの表面やエッジは、実際には根本的な視覚的な手がかりを提供します。 使い慣れた触覚属性を使用することで、ユーザーはアフォーダンスをすばやく理解するのに役立ちます。 しかし、材料の柔軟性は、物理学のルールを破ることなく、物理的な世界のものに取って代わる新しいアフォーダンスを作り出します。 光、表面、および動きの基本は、オブジェクトがどのように移動し、相互作用し、空間内に存在し、互いに関連して存在するかを伝えるために重要です。 現実的な照明は縫い目を示し、空間を分割し、可動部分を示す。 Bold, graphic, intentional タイポグラフィ、グリッド、スペース、スケール、色、画像の使用など、プリントベースのデザインの基本要素は視覚的な処置を導く。これらの要素は目を楽しませるよりもはるかに優れています。それらは、階層、意味、およびフォーカスを作成します。意図的なカラー選択、エッジ・トゥ・エッジ画像、大規模なタイポグラフィ、および意図的な空白は、ユーザをその経験に浸していく大胆でグラフィックなインターフェースを作り出します。 ユーザアクションに重点を置くことで、コア機能がすぐに明らかになり、ユーザにウェイポイントが提供されます。 モーションはユーザーを原点として尊重し、強化します。主要なユーザーアクションは、モーションを開始してデザイン全体を変換する変曲点です。 すべてのアクションは単一の環境で行われます。オブジェクトは、変換や再構成が行われても、経験の連続性を損なうことなくユーザーに提示されます。 モーションは有意義かつ適切であり、注意を集中し、継続性を維持する役割を果たす。フィードバックは微妙ではっきりしています。移行は効率的ですが、共同ですherent.
- https://material.io/guidelines/material-design/environment.html
- https://material.io/guidelines/platforms/android.html
- フルー円とデザインという。