Webインタフェース
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* 原則 [#d0e435fd]
-直接的なインタフェースを作ろう ... そこに出力のある限り...
-軽快さを心掛けよう
-1ページで完結させよう
-インビテーションを仕掛けよう
-トランジションを利用しよう
-すばやく反応しよう
* 直接的なインタフェース [#sd04d6b8]
** ドラッグ&ドロップ [#j81ea551]
-[[気になる瞬間マトリクス:http://designingwebinterfaces.c...
* 軽快さを心掛けよう [#cbf30d6d]
** コンテンツ連動型ツール [#h416aff1]
-常時表示型ツール
--アクションを喚起したいときに使う
--重要度によって、置き場所と大きさを変える
-ロールオーバー表示型ツール
--ユーザがオブジェクトの上でマウスポインタを止めたときに...
--ロールオーバーしない限りツールの存在に気付かないため、...
--ユーザが必ずマウスポインタを重ねるところで使うと良い
-トグル表示型ツール
-段階的表示型ツール
--放射状メニュー([[Songza:http://songza.org/]])... 曲名...
---このメニューを使い続けているユーザなら、手の動きを覚え...
---メニュー項目間の距離の近さと、ターゲットの大きさのおか...
--mutton ... menu + button
---ロールオーバーするとハイライトされ、押すとメニューを開...
---ドロップダウン用の矢印をクリックするとコマンドが現れる
-サブメニュー
--ブラウザの右クリックメニューがあることを考慮する
--右クリックの代わりにマウスを1秒以上長押ししたときにサブ...
* 1ページで完結させる [#ke87d1f0]
** オーバーレイ [#gf3eb6b9]
-ライトボックス効果
--注目させたい部分以外を暗くして目立たせる
--ユーザが別のモードに入っていることを強調するときに使う
-詳細表示用オーバーレイ
--ロールオーバーで起動するときは、表示する前にわずかな間...
--簡単に消去できるようにしておくこと(マウスポインタを外...
--[[事例(Netflix):http://www.netflix.com/BrowseSelectio...
** インレイ [#a4a3ac7f]
-ダイアログ用
--ページ自体に直接コンテンツを挿入
--[[事例(My Yahoo!):http://my.yahoo.com/]] ... 「Change...
-リスト用
--アコーディオン
---リスト中に一度に1枚だけパネルを開く
** バーチャルページ [#n7d49d4f]
-バーチャルスクロール
-インラインページング
-スクロール型ページング
-バーチャルパンニング
-ズーム型ユーザインタフェース
** プロセスフロー [#c68e5cde]
-インタラクティブページ型プロセス
-インラインアシスタンス型プロセス
-ダイアログオーバーレイ型プロセス
-コンフィギュレータ型プロセス
-非インタラクティブページ型プロセス
* インビテーションを仕掛けよう [#za426766]
** 静的インビテーション [#m1d1fd5e]
** 動的インビテーション [#qc637e85]
* トランジションを利用しよう [#d788dc08]
** 明度/濃度の増減 [#l96fbec0]
** 展開/折り畳み [#v6b139e6]
** 回復型フェード [#b6c52283]
** アニメーション [#p269fb44]
** スポットライト [#ha175c60]
** スライドイン/スライドアウト [#u548eb64]
** フェイスプレート [#i89ce310]
** フリップ [#z1d21e4d]
** カルーセル [#vbc6af2a]
* すばやく反応しよう [#jb112649]
** オートコンプリート [#jfd92dc6]
** ライブサジェスト [#oc0e05fb]
** ライブサーチ [#h95a47b4]
** 絞り込み検索 [#n2063ff3]
** ライブプレビュー [#edb230b0]
** 段階的表示 [#b5486f3c]
** 進行状況表示 [#z0627611]
** 自動リロード [#f00f0e81]
* 参考書籍 [#b1ffb65c]
-[[Designing Web Interfaces:http://designingwebinterfaces...
--[[画像:http://www.flickr.com/photos/designingwebinterfa...
終了行:
* 原則 [#d0e435fd]
-直接的なインタフェースを作ろう ... そこに出力のある限り...
-軽快さを心掛けよう
-1ページで完結させよう
-インビテーションを仕掛けよう
-トランジションを利用しよう
-すばやく反応しよう
* 直接的なインタフェース [#sd04d6b8]
** ドラッグ&ドロップ [#j81ea551]
-[[気になる瞬間マトリクス:http://designingwebinterfaces.c...
* 軽快さを心掛けよう [#cbf30d6d]
** コンテンツ連動型ツール [#h416aff1]
-常時表示型ツール
--アクションを喚起したいときに使う
--重要度によって、置き場所と大きさを変える
-ロールオーバー表示型ツール
--ユーザがオブジェクトの上でマウスポインタを止めたときに...
--ロールオーバーしない限りツールの存在に気付かないため、...
--ユーザが必ずマウスポインタを重ねるところで使うと良い
-トグル表示型ツール
-段階的表示型ツール
--放射状メニュー([[Songza:http://songza.org/]])... 曲名...
---このメニューを使い続けているユーザなら、手の動きを覚え...
---メニュー項目間の距離の近さと、ターゲットの大きさのおか...
--mutton ... menu + button
---ロールオーバーするとハイライトされ、押すとメニューを開...
---ドロップダウン用の矢印をクリックするとコマンドが現れる
-サブメニュー
--ブラウザの右クリックメニューがあることを考慮する
--右クリックの代わりにマウスを1秒以上長押ししたときにサブ...
* 1ページで完結させる [#ke87d1f0]
** オーバーレイ [#gf3eb6b9]
-ライトボックス効果
--注目させたい部分以外を暗くして目立たせる
--ユーザが別のモードに入っていることを強調するときに使う
-詳細表示用オーバーレイ
--ロールオーバーで起動するときは、表示する前にわずかな間...
--簡単に消去できるようにしておくこと(マウスポインタを外...
--[[事例(Netflix):http://www.netflix.com/BrowseSelectio...
** インレイ [#a4a3ac7f]
-ダイアログ用
--ページ自体に直接コンテンツを挿入
--[[事例(My Yahoo!):http://my.yahoo.com/]] ... 「Change...
-リスト用
--アコーディオン
---リスト中に一度に1枚だけパネルを開く
** バーチャルページ [#n7d49d4f]
-バーチャルスクロール
-インラインページング
-スクロール型ページング
-バーチャルパンニング
-ズーム型ユーザインタフェース
** プロセスフロー [#c68e5cde]
-インタラクティブページ型プロセス
-インラインアシスタンス型プロセス
-ダイアログオーバーレイ型プロセス
-コンフィギュレータ型プロセス
-非インタラクティブページ型プロセス
* インビテーションを仕掛けよう [#za426766]
** 静的インビテーション [#m1d1fd5e]
** 動的インビテーション [#qc637e85]
* トランジションを利用しよう [#d788dc08]
** 明度/濃度の増減 [#l96fbec0]
** 展開/折り畳み [#v6b139e6]
** 回復型フェード [#b6c52283]
** アニメーション [#p269fb44]
** スポットライト [#ha175c60]
** スライドイン/スライドアウト [#u548eb64]
** フェイスプレート [#i89ce310]
** フリップ [#z1d21e4d]
** カルーセル [#vbc6af2a]
* すばやく反応しよう [#jb112649]
** オートコンプリート [#jfd92dc6]
** ライブサジェスト [#oc0e05fb]
** ライブサーチ [#h95a47b4]
** 絞り込み検索 [#n2063ff3]
** ライブプレビュー [#edb230b0]
** 段階的表示 [#b5486f3c]
** 進行状況表示 [#z0627611]
** 自動リロード [#f00f0e81]
* 参考書籍 [#b1ffb65c]
-[[Designing Web Interfaces:http://designingwebinterfaces...
--[[画像:http://www.flickr.com/photos/designingwebinterfa...
ページ名: