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

by はのめぐみ / Megumi Hano

Slide 1

Slide 1 text

2020.2.5(水) キッチハイク社内デザイン勉強会アプリケーションデザインの原則

Slide 2

Slide 2 text

Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと

Slide 3

Slide 3 text

Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと

Slide 4

Slide 4 text

ライブデモあり Figmaの使い方とデザインデータ 4. スタイルとFigma 3. コンポーネントとFigma 2. アプリケーションとしてのデザイン原則 1. 話すこと

Slide 5

Slide 5 text

今日のゴールを確認しよう本題に入る前に...

Slide 6

Slide 6 text

みんなどうしてる？ Figmaの使い方・UIの作り方

Slide 7

Slide 7 text

チームで知識とルールの足並みを揃えようみんなどうしてる？ Figmaの使い方・UIの作り方

Slide 8

Slide 8 text

足並みを揃える

Slide 9

Slide 9 text

キッチハイクのデザイン戦略部特徴がわかるひと？

Slide 10

Slide 10 text

キッチハイクのデザイン戦略部専門や得意分野が違うメンバーたち特徴がわかるひと？

Slide 11

Slide 11 text

写真撮影サーバーサイド実装アプリ実装データ分析マーケティングクリエイティブ制作ブランディング UIデザイン UXデザイン PM PM / デザイナデザイナ PM / エンジニアグロースデザイナみんなのコアスキル

Slide 12

Slide 12 text

「それ、ググればわかるよ」「いや、それ当たり前じゃん」

Slide 13

Slide 13 text

「それ、ググればわかるよ」専門外にとっては当たり前じゃない「いや、それ当たり前じゃん」

Slide 14

Slide 14 text

知識がないと検索ワード自体が分からないこともある「それ、ググればわかるよ」専門外にとっては当たり前じゃない「いや、それ当たり前じゃん」

Slide 15

Slide 15 text

今日のゴール

Slide 16

Slide 16 text

チームの当たり前にするデザインの当たり前を

Slide 17

Slide 17 text

ググれるようになるわからないことは

Slide 18

Slide 18 text

アプリケーションとしてのデザイン原則 1

Slide 19

Slide 19 text

情報構造のあり方を設計する構造的情報デザインレイアウト・ナビゲーションデザインブランドを表現して伝える視覚的情報デザイン https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え戦略要件構造骨格表層

Slide 20

Slide 20 text

戦略要件構造骨格表層 https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え情報構造のあり方を設計する構造的情報デザインブランドを表現して伝える視覚的情報デザイン

Slide 21

Slide 21 text

戦略要件構造骨格表層 https://note.com/usagimaruma/n/nee69529402f6 @usagimaru OOUI・オブジェクトベースなUIデザインに取り組むための心構え何に基づいて設計する？情報構造のあり方を設計する構造的情報デザインブランドを表現して伝える視覚的情報デザイン

Slide 22

Slide 22 text

考えてみよう UIデザインとは〇〇である

Slide 23

Slide 23 text

考えてみよう UIデザインとは〇〇である UIデザイン = ソフトウェアデザイン

Slide 24

Slide 24 text

考えてみよう UIは何を指している？

Slide 25

Slide 25 text

考えてみよう UIは何を指している？デジタルプロダクトのGUI

Slide 26

Slide 26 text

スマートフォン OS 構造骨格表層ハードウェアソフトウェアアプリケーション・ソフトウェア

Slide 27

Slide 27 text

スマートフォン OS 構造骨格表層デジタルプロダクトと呼ぶ領域ハードウェアソフトウェアアプリケーション・ソフトウェア

Slide 28

Slide 28 text

スマートフォン OS 構造骨格表層ユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア

Slide 29

Slide 29 text

スマートフォン OS 構造骨格表層アプリケーションソフトに動作環境を提供するソフトウェアユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア

Slide 30

Slide 30 text

スマートフォン OS 構造骨格表層ソフトウェアが動作する機器ハードウェアアプリケーションソフトに動作環境を提供するソフトウェアユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア

Slide 31

Slide 31 text

UIの設計方針アプリケーションの振る舞い意識しよう

Slide 32

Slide 32 text

プラットフォームが定義する仕様で決まる UIの設計方針アプリケーションの振る舞い意識しよう

Slide 33

Slide 33 text

uman nterface uidelines H I G

Slide 34

Slide 34 text

aterial esign M D

Slide 35

Slide 35 text

デザインされた UI をどう使うか 4. 各UIが何のためにデザインされたのか 3. デザインの原則 2. プラットフォームの特徴 1. UIデザインするうえでの基本指針

Slide 36

Slide 36 text

陥りがちな罠

Slide 37

Slide 37 text

見た目が何となくそれっぽい陥りがちな罠

Slide 38

Slide 38 text

他のアプリもそうしてるから見た目が何となくそれっぽい陥りがちな罠

Slide 39

Slide 39 text

他のアプリもそうしてるから見た目が何となくそれっぽい陥りがちな罠

Slide 40

Slide 40 text

スマートフォン OS 構造骨格表層意識しよう適切で意味のある構造と配置

Slide 41

Slide 41 text

キッチハイクアプリのデザイン原則クロスプラットフォーム

Slide 42

Slide 42 text

構造と配置はHIG・表層はMD クロスプラットフォームキッチハイクアプリのデザイン原則

Slide 43

Slide 43 text

iOSユーザーが大多数 React Native

Slide 44

Slide 44 text

iOSユーザーが大多数ワンソース×クロスプラットフォーム React Native

Slide 45

Slide 45 text

日常的にiOSの世界観に触れている iOSユーザーが大多数ワンソース×クロスプラットフォーム React Native

Slide 46

Slide 46 text

定期的に読む習慣をつけよう HIGとMDは本当はデザイン原則だけでも解説、読み合わせしたかったもぐ〜。

Slide 47

Slide 47 text

一体なんでしょう？ HIGやMDの前提になっているもの

Slide 48

Slide 48 text

bject- riented ser nterface O O U I HIGやMDの前提になっているもの一体なんでしょう？

Slide 49

Slide 49 text

と一体で発想され実践されている GUI 直接インタラクトできる対象物ユーザーの関心のを画面上に表示 OOUIとは

Slide 50

Slide 50 text

視覚情報を用いて操作するコマンドによって操作する haracter-based ser nterface C U I haracter-based ser nterface C U I GUI CUI いわゆる「黒い画面」

Slide 51

Slide 51 text

音声によってインタラクトする -based ser nterface Voice U I VUI

Slide 52

Slide 52 text

黒い画面とGoogle Home 共通点がわかるひと？

Slide 53

Slide 53 text

黒い画面とGoogle Home 共通点がわかるひと？タスクベースでありモーダル

Slide 54

Slide 54 text

play ok google, music. push git origin master ちなみに構文も一緒どちらも「やること」が先に決まっている

Slide 55

Slide 55 text

動詞 play ok google, music. 動詞 push git origin master ちなみに構文も一緒どちらも「やること」が先に決まっている

Slide 56

Slide 56 text

名詞動詞 play ok google, music. 名詞動詞 push git origin master ちなみに構文も一緒どちらも「やること」が先に決まっている

Slide 57

Slide 57 text

EPARK Amazon.co.jp 保有Tポイントのお知らせヤマト運輸 EPARK Uber Eats 三井住友カード受信したメールモノコトすべてを選択する (ひとつ選択する) チェックを入れるキャンセルするどうする？名詞動詞

Slide 58

Slide 58 text

EPARK Amazon.co.jp 保有Tポイントのお知らせヤマト運輸 EPARK Uber Eats 三井住友カード受信したメールモノコトすべてを選択する (ひとつ選択する) チェックを入れるキャンセルするどうする？名詞動詞 GUIの本質はオブジェクト指向「視覚的」であることではない

Slide 59

Slide 59 text

モードレス

Slide 60

Slide 60 text

モードレス → モーダル選択モード選択モード作成モード

Slide 61

Slide 61 text

キッチハイクアプリを見てみよう

Slide 62

Slide 62 text

モードレスオブジェクトオブジェクトアクション

Slide 63

Slide 63 text

モードレス → モーダル

Slide 64

Slide 64 text

モードレス → モーダル投稿の表示から作成・編集という異なるアクションへの切替です。「戻る」という指向性・概念は持ちません。アクションを「キャンセル」するが正しいです ‍ ＞＜本当は Push 遷移ではなくモーダル遷移があるべき姿

Slide 65

Slide 65 text

図で構造化してみる PhotoPost 投稿名詞オブジェクト -

Slide 66

Slide 66 text

図で構造化してみる Pop-Up情報ユーザー情報投稿日時画像テキスト PhotoPost 投稿名詞オブジェクト -

Slide 67

Slide 67 text

図で構造化してみる削除する - Delete 編集する - Edit 作成する - New 表示する - Show Pop-Up情報ユーザー情報投稿日時画像テキスト PhotoPost 投稿動詞アクション - ※実際は削除できません名詞オブジェクト -

Slide 68

Slide 68 text

ユーザー体験に沿った情報構造を考える 3. プラットフォームの特徴を把握する 2. GUI のデザイン原則を把握する 1. UIデザインするうえでの基本指針サービスのシステムとしてあるべき設計をする AppleやGooleのデザインガイドラインを読むオブジェクトベース/タスクベース・モードレス/モーダルの概念を理解する