The Art of User-Interface Design

  1. デザインリサーチでゴールやタスクを把握
  2. オブジェクトとアクションに分けモデリング
  3. デザインパターンを使いながらメイキング
イラスト。ユーザー、タスクなどがアプリケーションとどうつながっているのかが描かれている。
人間とオブジェクトとアクションとアプリケーションの関係

1.人間の周囲に犬やテントといったオブジェクトがある。ディスプレイ内にもメール、写真、予定のようなオブジェクトがある。人間はゴールやタスク、ビジョンやアイデアを思い浮かべる。

2.人間が思い浮かべたゴールやタスクはオブジェクトとアクションに分けられる。

3.オブジェクトはアプリの最上位のナビゲーションへ、アクションはアクションボタンなどで表現される。

2のアクションは色々。

などがある。このうちSearch と Filter とSmart Group は検索系と言う意味で近い。Create、Import、Duplicate は新規作成系と言う意味で近い。

イラスト。色々なアクションの一覧。

わかりやすいアクションから、グループに追加のような別のオブジェクトに関連づけるもの、スマートグループのように保存された検索条件の現時点の実行結果をあたかもオブジェクトに見せるものなどもあり。

イラスト:ナビゲーションのパターン
オブジェクトを配置する際に用いられるナビゲーションのパターン

3番のデザインパターンによるメイキング。オブジェクトのオーソドックスな配置例。メインナビゲーションにはメインのオブジェクトを配置する。タブバー、ドロワーなどは色々だが、項目数が限定されていればX方向に、増えるならY方向に並べる。(タブバーはX方向だが項目数が多く表示しきれない場合に表示される more の中はY方向へ並べられる。ドロワーは元々Y方向へ並べるが、メニューを開かないと何の項目も見えない問題がある。)