note: https://note.com/featherplain/n/n4f1141e9c93e
キッチハイクの社内勉強会の資料です。 ソフトウェアや OOUI ( オブジェクト指向 UI ) に触れながら、アプリケーションのデザインで意識したい内容をスライド化しました。
2020.2.5(水) キッチハイク社内デザイン勉強会アプリケーションデザインの原則
View Slide
Figmaの使い方とデザインデータ4.スタイルとFigma3.コンポーネントとFigma2.アプリケーションとしてのデザイン原則1.話すこと
ライブデモありFigmaの使い方とデザインデータ4.スタイルとFigma3.コンポーネントとFigma2.アプリケーションとしてのデザイン原則1.話すこと
今日のゴールを確認しよう本題に入る前に...
みんなどうしてる？Figmaの使い方・UIの作り方
チームで知識とルールの足並みを揃えようみんなどうしてる？Figmaの使い方・UIの作り方
足並みを揃える
キッチハイクのデザイン戦略部特徴がわかるひと？
キッチハイクのデザイン戦略部専門や得意分野が違うメンバーたち特徴がわかるひと？
写真撮影サーバーサイド実装アプリ実装データ分析マーケティングクリエイティブ制作ブランディングUIデザインUXデザインPMPM / デザイナ デザイナ PM / エンジニアグロース デザイナみんなのコアスキル
「それ、ググればわかるよ」「いや、それ当たり前じゃん」
「それ、ググればわかるよ」専門外にとっては当たり前じゃない「いや、それ当たり前じゃん」
知識がないと検索ワード自体が分からないこともある「それ、ググればわかるよ」専門外にとっては当たり前じゃない「いや、それ当たり前じゃん」
今日のゴール
チームの当たり前にするデザインの当たり前を
ググれるようになるわからないことは
アプリケーションとしてのデザイン原則1
情報構造のあり方を設計する構造的情報デザインレイアウト・ナビゲーションデザインブランドを表現して伝える視覚的情報デザインhttps://note.com/usagimaruma/n/nee69529402f6@usagimaruOOUI・オブジェクトベースなUIデザインに取り組むための心構え戦略要件構造骨格表層
戦略要件構造骨格表層https://note.com/usagimaruma/n/nee69529402f6@usagimaruOOUI・オブジェクトベースなUIデザインに取り組むための心構え情報構造のあり方を設計する構造的情報デザインブランドを表現して伝える視覚的情報デザイン
戦略要件構造骨格表層https://note.com/usagimaruma/n/nee69529402f6@usagimaruOOUI・オブジェクトベースなUIデザインに取り組むための心構え何に基づいて設計する？情報構造のあり方を設計する構造的情報デザインブランドを表現して伝える視覚的情報デザイン
考えてみようUIデザインとは〇〇である
考えてみようUIデザインとは〇〇であるUIデザイン = ソフトウェアデザイン
考えてみようUIは何を指している？
考えてみようUIは何を指している？デジタルプロダクトのGUI
スマートフォンOS構造骨格表層ハードウェアソフトウェアアプリケーション・ソフトウェア
スマートフォンOS構造骨格表層デジタルプロダクトと呼ぶ領域ハードウェアソフトウェアアプリケーション・ソフトウェア
スマートフォンOS構造骨格表層ユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア
スマートフォンOS構造骨格表層アプリケーションソフトに動作環境を提供するソフトウェアユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア
スマートフォンOS構造骨格表層ソフトウェアが動作する機器ハードウェアアプリケーションソフトに動作環境を提供するソフトウェアユーザーがコンピュータ上でやりたいことを直接的に実現するソフトウェアアプリケーション・ソフトウェア
UIの設計方針アプリケーションの振る舞い意識しよう
プラットフォームが定義する仕様で決まるUIの設計方針アプリケーションの振る舞い意識しよう
uman nterface uidelinesH I G
aterial esignM D
デザインされた UI をどう使うか4.各UIが何のためにデザインされたのか3.デザインの原則2.プラットフォームの特徴1.UIデザインするうえでの基本指針
陥りがちな罠
見た目が何となくそれっぽい陥りがちな罠
他のアプリもそうしてるから見た目が何となくそれっぽい陥りがちな罠
スマートフォンOS構造骨格表層意識しよう適切で意味のある構造と配置
キッチハイクアプリのデザイン原則クロスプラットフォーム
構造と配置はHIG・表層はMDクロスプラットフォームキッチハイクアプリのデザイン原則
iOSユーザーが大多数React Native
iOSユーザーが大多数ワンソース×クロスプラットフォームReact Native
日常的にiOSの世界観に触れているiOSユーザーが大多数ワンソース×クロスプラットフォームReact Native
定期的に読む習慣をつけようHIGとMDは本当はデザイン原則だけでも解説、読み合わせしたかったもぐ〜。
一体なんでしょう？HIGやMDの前提になっているもの
bject- riented ser nterfaceO O U IHIGやMDの前提になっているもの一体なんでしょう？
と一体で発想され実践されているGUI直接インタラクトできる対象物ユーザーの関心の を画面上に表示OOUIとは
視覚情報を用いて操作するコマンドによって操作するharacter-based ser nterfaceC U I haracter-based ser nterfaceC U IGUICUIいわゆる「黒い画面」
音声によってインタラクトする-based ser nterfaceVoice U IVUI
黒い画面とGoogle Home共通点がわかるひと？
黒い画面とGoogle Home共通点がわかるひと？タスクベースでありモーダル
playok google, music.pushgit origin masterちなみに構文も一緒どちらも「やること」が先に決まっている
動詞playok google, music.動詞pushgit origin masterちなみに構文も一緒どちらも「やること」が先に決まっている
名詞動詞playok google, music.名詞動詞pushgit origin masterちなみに構文も一緒どちらも「やること」が先に決まっている
EPARKAmazon.co.jp保有Tポイントのお知らせヤマト運輸EPARKUber Eats三井住友カード受信したメールモノ コトすべてを選択する(ひとつ選択する)チェックを入れるキャンセルするどうする？名詞 動詞
EPARKAmazon.co.jp保有Tポイントのお知らせヤマト運輸EPARKUber Eats三井住友カード受信したメールモノ コトすべてを選択する(ひとつ選択する)チェックを入れるキャンセルするどうする？名詞 動詞GUIの本質はオブジェクト指向「視覚的」であることではない
モードレス
モードレス → モーダル選択モード 選択モード 作成モード
キッチハイクアプリを見てみよう
モードレスオブジェクトオブジェクトアクション
モードレス → モーダル
モードレス → モーダル投稿の表示から作成・編集という異なるアクションへの切替です。「戻る」という指向性・概念は持ちません。アクションを「キャンセル」するが正しいです ＞＜本当は Push 遷移ではなくモーダル遷移があるべき姿
図で構造化してみるPhotoPost投稿名詞オブジェクト -
図で構造化してみるPop-Up情報ユーザー情報投稿日時画像テキストPhotoPost投稿名詞オブジェクト -
図で構造化してみる削除する - Delete編集する - Edit作成する - New表示する - ShowPop-Up情報ユーザー情報投稿日時画像テキストPhotoPost投稿動詞アクション -※実際は削除できません名詞オブジェクト -
ユーザー体験に沿った情報構造を考える3.プラットフォームの特徴を把握する2.GUI のデザイン原則を把握する1.UIデザインするうえでの基本指針サービスのシステムとしてあるべき設計をするAppleやGooleのデザインガイドラインを読むオブジェクトベース/タスクベース・モードレス/モーダルの概念を理解する
featherplain
hirokazu_oda
misty_marsden
delyinc
atamaplus
takumma
toshiharutakemoto
yusuke109
onlinesalon
misaaa09
takanorip
mixil
securecat
edds
eitanlees
frogandcode
jmmastey
denniskardys
chrislema
jennybc
geeforr
myddelton
bkeepers
lara
sstephenson