「UIデザインをはじめよう」実況まとめ

2019/04/23に株式会社gumi様で行ったデザイン講義のスライドです。 UIデザインをはじめるために必要な知識を解説しました。 (予告から内容はかなり変わりました) 続きを読む
8
ひろむ @hiromoon_428

スマホとタブレットは意外と違いがある #Xemonoデザイン講義

2019-04-23 15:19:00
ひろむ @hiromoon_428

わかる。タブレットでスカスカの画面見るとちょっと残念な気持ちになる #Xemonoデザイン講義

2019-04-23 15:19:30
ひろむ @hiromoon_428

PC ポインタを動かす マルチタスク ウィンドウの幅が可変 #Xemonoデザイン講義

2019-04-23 15:20:07
G野 @ginokentdev

デバイスごとの特性: - スマホ - 指で操作する - 届きづらい領域 - シングルタスク - 長めの長方形 - タブレット - 支えて触る - 上の方にボタン置ける - タスクは1-2 - 3:4 - PC - ポインタを動かす - 細かいことができる - マルチタスク - 可変 #Xemonoデザイン講義

2019-04-23 15:21:44
G野 @ginokentdev

定番コンポーネント26選: 1. レイアウト 2. 入力系 3. 反応系 4. 繰り返す系 5. フォーム系 #Xemonoデザイン講義

2019-04-23 15:23:58
G野 @ginokentdev

レイアウト: - ヘッダー - ナビバー - フッター - タブバー - ドロワー #Xemonoデザイン講義

2019-04-23 15:26:45
G野 @ginokentdev

入力系: - サーチバー - ツールバー - ボタン #Xemonoデザイン講義

2019-04-23 15:28:09
ひろむ @hiromoon_428

そういえばMaterial UI に トーストないな。なんでだろ? #Xemonoデザイン講義

2019-04-23 15:30:15
G野 @ginokentdev

反応系: - インジケーター (2s以上はこっち) - スピナー (2s以上NG) - ダイアログ - アラート (沢山出すのはNG) - アクションシート (下から出す, 指の届く範囲) - トースト - ツールチップ - ポップオーバー (タブレット以上のみ) #Xemonoデザイン講義

2019-04-23 15:31:32
ひろむ @hiromoon_428

横幅が狭いのでスマホでテーブルはあんまり使わない #Xemonoデザイン講義

2019-04-23 15:32:23
ひろむ @hiromoon_428

スマホでは無限スクロールの方がページャーより使われる #Xemonoデザイン講義

2019-04-23 15:34:21
G野 @ginokentdev

繰り返す系: - リスト - テーブル (スマホではNG, 横幅) - カード (同じ構造の繰り返し) - ページャー #Xemonoデザイン講義

2019-04-23 15:34:22
G野 @ginokentdev

フォーム系: - テキスト - チェックボックス (Boolean) - スイッチ (Boolean) - ラジオボタン (3択以上) - スライダー (数値を入れさせたい, 音量) - ステッパー (1ずつ, 5ずつ増やしたい) #Xemonoデザイン講義

2019-04-23 15:36:31
ひろむ @hiromoon_428

新しいUIの学習はユーザに負担なので、見慣れたものを使うのがいい #Xemonoデザイン講義

2019-04-23 15:38:46
G野 @ginokentdev

問題点: - 2重タブ - ボタン密度が高すぎる - 指から遠いところのナビ - 一覧性が高いようで低い - ウワー #Xemonoデザイン講義

2019-04-23 15:39:47
ひろむ @hiromoon_428

オリジナルUIを作る場合は、ユーザに戦略的に教え込む ゲームデザインの知見が参考になる #Xemonoデザイン講義

2019-04-23 15:41:29
G野 @ginokentdev

- 新UIの学習はユーザーに負担 - みんな知ってるキャラ(パーツ)で二次創作しよう #Xemonoデザイン講義

2019-04-23 15:41:55
G野 @ginokentdev

タブレットに対する紙の優位性: 1. はやい 2. ちぎれる 3. 広げられる 4. ネットに繋がってない #Xemonoデザイン講義

2019-04-23 15:48:07
ひろむ @hiromoon_428

紙のいいところ 「ネットに繋がってない」 #Xemonoデザイン講義

2019-04-23 15:48:44
ひろむ @hiromoon_428

紙芝居は一人ではなく、みんなでやる 人に使ってもらうことで実際にどこでうまくいかないのかを観察できる #Xemonoデザイン講義

2019-04-23 15:49:58