内容紹介
モバイルアプリで最適なUXを実現するためのUIパターン集!
モバイルアプリのUIパターンを手軽に参照できるリファレンスの第2版。デザイントレンドの変化に対応して全面改訂。主要なプラットフォームで動くモバイルアプリの画面例を1,000点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する87個の基本パターンと7個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。掲載UIパターン:ナビゲーション、フォーム、テーブル、検索、並べ替え、フィルター、ツール、グラフ、誘導、ソーシャル、フィードバック、アフォーダンス、ヘルプ、アンチパターン
このような方におすすめ
iPhone、Androidほかスマートフォン向けアプリ開発者、Web開発者、インタラクティブデザイナー、ゲーム開発者、開発プロジェクトにかかわるすべての利害関係者(デザイナー、開発者、マネージャー、営業、顧客)
目次
詳細目次
監訳者まえがき
序文
まえがき
第1章 ナビゲーション
1.1 主要なナビゲーションのパターン(永続的)
1.1.1 Springboard(スプリングボード)
1.1.2 Cards(カード)
1.1.3 List Menu(リストメニュー)
1.1.4 Dashboard(ダッシュボード)
1.1.5 Gallery(ギャラリー)
1.1.6 T ab Menu(タブメニュー)
1.1.7 Skeuomorphic(実物に似せる)
1.2 主要なナビゲーションのパターン(一時的)
1.2.1 Side Drawer(サイドドロワー)
1.2.2 T oggle Menu(トグルメニュー)
1.2.3 Pie Menu(パイメニュー)
1.3 補助的なナビゲーションのパターン
1.3.1 Page Swiping(ページのスワイプ)
1.3.2 Scrolling T ab(スクロールタブ)
1.3.3 Accordion(アコーディオン)
第2章 フォーム
2.1 Sign In(サインイン)
2.2 Registration(登録)
2.3 Registration with Personalization(パーソナライズされた登録)
2.4 Multi-Step(複数のステップ)
2.5 Checkout(購入)
2.5.1 ヒント1:サインイン、登録、ゲストとしての利用
2.5.2 ヒント2:フローをシンプルに
2.5.3 ヒント3:ショートカットで時間を節約
2.5.4 ヒント4:エクスプレスチェックアウト
2.5.5 ヒント5:Webについては忘れる
2.6 Calculator Form(計算フォーム)
2.7 Search Form(検索フォーム)
2.8 Long Form(長いフォーム)
第3章 テーブル
3.1 Basic T able(基本的なテーブル)
3.2 Headerless T able(ヘッダーのないテーブル)
3.3 Fixed Column(固定された列)
3.4 Overview plus Data(概要とデータ)
3.5 Grouped Row(グループ化された行)
3.6 Table with Visual Indicator(視覚的インジケーターを含むテーブル)
3.7 Editable T able(編集可能なテーブル)
第4章 検索、並べ替え、フィルタリング
4.1 検索のパターン
4.1.1 Implicit Search(暗黙の検索)
4.1.2 Explicit Search(意図的な検索)
4.1.3 Search with Auto-Complete(オートコンプリート付き検索)
4.1.4 Dynamic Search(動的な検索)
4.1.5 Scoped Search(対象を限定した検索)
4.1.6 Saved, Recent, and Popular Search(保存された検索、最近行った検索、よく行われる検索)
4.1.7 Search Form(検索フォーム)
4.1.8 Search Result/View Result(検索結果 /表示結果)
4.2 並べ替えのパターン
4.2.1 Onscreen Sort(画面上での並べ替え)
4.2.2 Sort Overlay(並べ替えのオーバーレイ表示)
4.2.3 Sort Form(並べ替えフォーム)
4.3 フィルタリングのパターン
4.3.1 Onscreen Filter(画面上でのフィルタリング)
4.3.2 Filter Overlay(フィルタリング設定のオーバーレイ表示)
4.3.3 Filter Form(フィルタリングフォーム)
4.3.4 Filter Drawer(フィルタリングドロワー)
4.3.5 Gesture-Based Filtering(ジェスチャーに基づくフィルタリング)
第5章 ツール
5.1 T oolbar(ツールバー)
5.1.1 iOS
5.1.2 Android
5.1.3 Windows Phone
5.1.4 コンテキストごとのツールバー(全 OSで利用可能)
5.2 T oolbox(ツールボックス)
5.3 Call to Action Button(アクションボタン)
5.4 Inline Action(インラインアクション)
5.5 Multi-State Button(複数の状態を表すボタン)
5.6 Contextual T ool(コンテキストごとのツール)
5.7 Bulk Action(アクションの一括実行)
5.8 Lock Screen Control(ロック画面でのコントロール)
第6章 チャート
6.0.1 ヒント1:基本を学ぶ
6.0.2 ヒント2:シンプルに
6.0.3 ヒント3:「ここで算数クイズです」
6.0.4 ヒント4:ツールを知る
6.1 Chart with Filter(フィルタリング機能付きのグラフ)
6.2 Interactive Timeline(インタラクティブなタイムライン)
6.3 Data Point Detail(特定の点の詳細)
6.4 Drill Down(階層型の操作)
6.5 Overview plus Data(概要とデータ)
6.6 Interactive Preview(インタラクティブなプレビュー)
6.7 Dashboard(ダッシュボード)
6.8 Zoom(ズーム)
6.9 Sparkline(スパークライン)
6.10 Integrated Legend(埋め込まれた凡例)
6.11 Threshold(境界値)
6.12 Pivot T able(ピボットテーブル)
6.13 まとめ
第7章 チュートリアルと誘導
7.1 チュートリアルの原則
7.1.1 ルール1:文字を少なく
7.1.2 ルール2:最初に全部見せない
7.1.3 ルール3:やりがいを与える
7.1.4 ルール4:利用を通じて学習を強化する
7.1.5 ルール5:ユーザーの声を聞く
7.2 誘導のパターン
7.2.1 Tip(ヒント)
7.2.2 Persistent Invitation(永続的な誘導)
7.2.3 Discoverable Invitations(発見型の誘導)
7.3 番外編:誘導(歓迎の心)
7.3.1 歓迎のエクスペリエンスの段階的改善
7.3.2 まとめ
第8章 ソーシャル
8.1 Social Registration(ソーシャルな登録)
8.1.1 MapMyFitnessと We Heart Itの比較
8.2 Connecting(つながり)
8.3 Following(フォロー)
8.4 Profile(プロフィール)
8.5 Group(グループ)
8.6 Gamification(ゲーミフィケーション)
第9章 フィードバックとアフォーダンス
9.1 フィードバックのパターン
9.1.1 Error Message(エラーメッセージ)
9.1.2 Confirmation(確認表示)
9.1.3 System Status(システムの状態)
9.2 アフォーダンスのパターン
9.2.1 T ap(タップ)
9.2.2 Swipe/Flick(スワイプ /フリック)
9.2.3 Drag(ドラッグ)
第10章 ヘルプ
10.1 How-T o(ハウツー)
10.2 User Guide/Help System(ユーザーガイド /ヘルプのシステム)
10.3 F AQ(よくある質問)
10.4 Feature T our(機能紹介のツアー)
10.5 T utorial(チュートリアル)
10.6 Contextual Help(コンテキストごとのヘルプ)
10.7 Capture Feedback(フィードバックの収集)
第11章 アンチパターン
11.1 Novel Notion(新しいだけのアイデア)
11.2 Needless Complexity(不必要な複雑さ)
11.3 Metaphor Mismatch(メタファーの不一致)
11.3.1 コントロールの不一致
11.3.2 アイコンの不一致
11.3.3 ジェスチャーの不一致
11.3.4 メンタルモデルの不一致
11.4 Idiot Box(愚かなダイアログ)
11.5 Chart Junk(無駄なグラフ)
11.6 Oceans of Button(無数のボタン)
11.7 Square Peg, Round Hole(丸い穴に四角いくぎ)
11.8 番外編:モバイルでのサインアップとサインインに見られるLet Them Peeアンチパターン
参考資料
索引
続きを見る