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

6e6c7132d99fd8febb2193fd21809d20?s=47 Megumi Hano
February 05, 2020

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

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

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

6e6c7132d99fd8febb2193fd21809d20?s=128

Megumi Hano

February 05, 2020
Tweet

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のデザインガイドラインを読む

    オブジェクトベース/タスクベース・モードレス/モーダルの概念を理解する