アプリケーションデザインの原則 / Principle of Application Design

note: https://note.com/featherplain/n/n4f1141e9c93e

キッチハイクの社内勉強会の資料です。
ソフトウェアや OOUI ( オブジェクト指向 UI ) に触れながら、アプリケーションのデザインで意識したい内容をスライド化しました。

Transcript

1. 2020.2.5(水) キッチハイク社内デザイン勉強会 アプリケーションデザインの原則
2. Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと
3. Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと
4. ライブデモあり Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと
5. 今日のゴールを確認しよう 本題に入る前に...
6. みんなどうしてる？ Figmaの使い方・UIの作り方
7. チームで知識とルールの足並みを揃えよう みんなどうしてる？ Figmaの使い方・UIの作り方
8. 足並みを揃える
9. キッチハイクのデザイン戦略部 特徴がわかるひと？
10. キッチハイクのデザイン戦略部 専門や得意分野が違うメンバーたち 特徴がわかるひと？
11. 写真撮影 サーバーサイド実装 アプリ実装 データ分析 マーケティング クリエイティブ制作 ブランディング UIデザイン UXデザイン PM PM / デザイナ デザイナ PM / エンジニア グロース デザイナ みんなの コアスキル
12. 「それ、 ググればわかるよ」 「いや、 それ当たり前じゃん」
13. 「それ、 ググればわかるよ」 専門外にとっては当たり前じゃない 「いや、 それ当たり前じゃん」
14. 知識がないと検索ワード自体が 分からないこともある 「それ、 ググればわかるよ」 専門外にとっては当たり前じゃない 「いや、 それ当たり前じゃん」
15. 今日のゴール
16. チームの当たり前にする デザインの当たり前を
17. ググれるようになる わからないことは
18. アプリケーションとしての デザイン原則 1
19. 情報構造のあり方を設計する 構造的情報デザイン レイアウト・ナビゲーションデザイン ブランドを表現して伝える 視覚的情報デザイン https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え 戦略 要件 構造 骨格 表層
20. 戦略 要件 構造 骨格 表層 https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え 情報構造のあり方を設計する 構造的情報デザイン ブランドを表現して伝える 視覚的情報デザイン
21. 戦略 要件 構造 骨格 表層 https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え 何に基づいて設計する？ 情報構造のあり方を設計する 構造的情報デザイン ブランドを表現して伝える 視覚的情報デザイン
22. 考えてみよう UIデザインとは〇〇である
23. 考えてみよう UIデザインとは〇〇である UIデザイン = ソフトウェアデザイン
24. 考えてみよう UIは何を指している？
25. 考えてみよう UIは何を指している？ デジタルプロダクトのGUI
26. スマートフォン OS 構造 骨格 表層 ハードウェア ソフトウェア アプリケーション・ソフトウェア
27. スマートフォン OS 構造 骨格 表層 デジタルプロダクトと呼ぶ領域 ハードウェア ソフトウェア アプリケーション・ソフトウェア
28. スマートフォン OS 構造 骨格 表層 ユーザーがコンピュータ上でやりたいことを 直接的に実現するソフトウェア アプリケーション・ソフトウェア
29. スマートフォン OS 構造 骨格 表層 アプリケーションソフトに動作環境を提供する ソフトウェア ユーザーがコンピュータ上でやりたいことを 直接的に実現するソフトウェア アプリケーション・ソフトウェア
30. スマートフォン OS 構造 骨格 表層 ソフトウェアが動作する機器 ハードウェア アプリケーションソフトに動作環境を提供する ソフトウェア ユーザーがコンピュータ上でやりたいことを 直接的に実現するソフトウェア アプリケーション・ソフトウェア
31. UIの設計方針 アプリケーションの振る舞い 意識しよう
32. プラットフォームが定義する仕様で決まる UIの設計方針 アプリケーションの振る舞い 意識しよう
33. uman nterface uidelines H I G
34. aterial esign M D
35. デザインされた UI をどう使うか 4. 各UIが何のためにデザインされたのか 3. デザインの原則 2. プラットフォームの特徴 1. UIデザインするうえでの基本指針
36. 陥りがちな罠
37. 見た目が何となくそれっぽい 陥りがちな罠
38. 他のアプリもそうしてるから 見た目が何となくそれっぽい 陥りがちな罠
39. 他のアプリもそうしてるから 見た目が何となくそれっぽい 陥りがちな罠
40. スマートフォン OS 構造 骨格 表層 意識しよう 適切で意味のある 構造と配置
41. キッチハイクアプリのデザイン原則 クロスプラットフォーム
42. 構造と配置はHIG・表層はMD クロスプラットフォーム キッチハイクアプリのデザイン原則
43. iOSユーザーが大多数 React Native
44. iOSユーザーが大多数 ワンソース×クロスプラットフォーム React Native
45. 日常的にiOSの世界観に触れている iOSユーザーが大多数 ワンソース×クロスプラットフォーム React Native
46. 定期的に読む習慣をつけよう HIGとMDは 本当はデザイン原則だけでも解説、 読み合わせしたかったもぐ〜。
47. 一体なんでしょう？ HIGやMDの前提になっているもの
48. bject- riented ser nterface O O U I HIGやMDの前提になっているもの 一体なんでしょう ？
49. と一体で発想され実践されている GUI 直接インタラクトできる 対象物 ユーザーの関心の を画面上に表示 OOUIとは
50. 視覚情報を用いて操作する コマンドによって操作する haracter-based ser nterface C U I haracter-based ser nterface C U I GUI CUI いわゆる 「黒い画面」
51. 音声によってインタラクトする -based ser nterface Voice U I VUI
52. 黒い画面とGoogle Home 共通点がわかるひと？
53. 黒い画面とGoogle Home 共通点がわかるひと？ タスクベースでありモーダル
54. play ok google, music. push git origin master ちなみに構文も一緒 どちらも 「やること」 が先に決まっている
55. 動詞 play ok google, music. 動詞 push git origin master ちなみに構文も一緒 どちらも 「やること」 が先に決まっている
56. 名詞 動詞 play ok google, music. 名詞 動詞 push git origin master ちなみに構文も一緒 どちらも 「やること」 が先に決まっている
57. EPARK Amazon.co.jp 保有Tポイントのお知らせ ヤマト運輸 EPARK Uber Eats 三井住友カード 受信したメール モノ コト すべてを選択する (ひとつ選択する) チェックを入れる キャンセルする どうする？ 名詞 動詞
58. EPARK Amazon.co.jp 保有Tポイントのお知らせ ヤマト運輸 EPARK Uber Eats 三井住友カード 受信したメール モノ コト すべてを選択する (ひとつ選択する) チェックを入れる キャンセルする どうする？ 名詞 動詞 GUIの本質はオブジェクト指向 「視覚的」 であることではない
59. モードレス
60. モードレス → モーダル 選択モード 選択モード 作成モード
61. キッチハイクアプリを 見てみよう
62. モードレス オブジェクト オブジェクト アクション
63. モードレス → モーダル
64. モードレス → モーダル 投稿の表示から作成・編集 という異なるアクションへの切替です。 「戻る」という指向性・概念は持ちません。 アクションを 「キャンセル」 する が正しいです ‍ ＞＜ 本当は Push 遷移ではなく モーダル遷移があるべき姿
65. 図で構造化してみる PhotoPost 投稿 名詞 オブジェクト -
66. 図で構造化してみる Pop-Up情報 ユーザー情報 投稿日時 画像 テキスト PhotoPost 投稿 名詞 オブジェクト -
67. 図で構造化してみる 削除する - Delete 編集する - Edit 作成する - New 表示する - Show Pop-Up情報 ユーザー情報 投稿日時 画像 テキスト PhotoPost 投稿 動詞 アクション - ※実際は削除できません 名詞 オブジェクト -
68. ユーザー体験に沿った情報構造を考える 3. プラットフォームの特徴を把握する 2. GUI のデザイン原則を把握する 1. UIデザインするうえでの基本指針 サービスのシステムとしてあるべき設計をする AppleやGooleのデザインガイドラインを読む オブジェクトベース/タスクベース・モードレス/モーダルの概念を理解する