• 追加された行はこの色です。
  • 削除された行はこの色です。
RIGHT:&tag(UI);

編集に関わるUIについては
→[[ページ/編集/UI]]

*目次 [#y2b6e1a7]
#contents
----
#lsx(new=true);

*関連 [#o1748456]
#lsx(tag=UI,new=true,except=^UI(/.*)?$)

[[検索:UI]]

*UI周辺のタグ [#i1180fbd]
#tag(0,UI)


*UIとは [#n6ede718]
RIGHT:[[:t/UI]]

ユーザーインターフェイスについて。

-見つめさせないこと
-ページ遷移時のアイキャッチ
NPHというわけではないので、ページを去るときに。
入力のレスポンスとして。
-アクセスキー
DOMのクラスごとにアクセスキーを。
同じキーを数回押す使い方。
-UIの遷移図を

→スタイル/テーマ


**見出しごとのスクロール [#z3931d28]
概観のためのUI。

見出しごとの表示、「次の見出し」「前の見出し」をアクセスキーで。
ページ最後の見出しで同じキーを押すと終端という意味の表示を。(ページ終端を黄色く光らせるなど)
終端で同じキーを押すと次のページへ。(前後関係のあるページがある場合)

移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
&ref(:Image/章ごとのスクロール.gif);


&ref(:Image/章ごとのスクロール.png);
**スクロールバーを豪華に [#m05d49ad]
例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で表示。強調表示のマップを作る。

もっと豪華にすると[[検索:Sublime Text]]のようなプレビューに。
こういうマップは常時表示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの表示に。
**画面切り換え [#p50aaa70]
フェードアウト/インだけでもいい。
クリック→全体を単色化する→フェードアウト→フェードイン→カラーリング。
単色化には1枚で全画面をカバーするフィルターのようなものがないと不可。
**浮き上がるUI [#q01c1f52]
フォーカスを得ると浮き上がる。バルーン化。
**複数ページをまとめて扱う [#hefe559c]
RegExpで複数ページをまとめて指定、それらをページとして扱い、クエリーをそれぞれに与えたい。
選択された全ページで受け付けられないクエリーでもいい。適用されないだけ。

APIも。
RIGHT:[[:t/API]]


**一覧の効果を最大化 [#ab801c3c]
検索結果でページ複数選択→まとめて削除など。
一覧が現れる場面ではまとめて同じ操作をしたいことが多い。

ユーザーの要求と(ちょうどいいビューがそこにある)実装が合致する好機。
**パーマリンク/静的リンク中心 [#t5387a79]
URI。
動的な(意味が変わる)リンクは使わない。
検索結果、検索ボックスの既定値、フォーカス位置、ダンプのダウンロードページのオプションなども。


**参考に [#h0eb7fb1]
[[クリエイターのためのライフハック | マイナビニュース>http://news.mynavi.jp/column/lifehack/index.html]]