• 追加された行はこの色です。
  • 削除された行はこの色です。
RIGHT:[[:t/UI]]

編集に関わるUIについては
→[[UI/編集]]
→[[:i/UI/編集]]

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

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

[[検索:UI]]
*あとでなおす [#o55beb18]

#tagcloud(0,related=UI)
#br


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

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

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

→スタイル/テーマ


**携帯向けビュー [#m461f5a7]
サブページが実装されれば目次を表示するだけでいい。
目次からサブページへリンク。

RIGHT:&tag(UI,モバイル);
RIGHT:[[:t/UI]] [[:t/モバイル]]

***方法 [#ne489b7d]
ユーザーエージェントで携帯かどうか判定。

RIGHT:&tag(UI);
RIGHT:[[:t/UI]]


**携帯向けのビューでは圧縮 [#n879090c]
-gzip圧縮
-イメージリソースを公式サイトに置いて、クライアント側キャッシュを共有
-その他静的リソースを別サイトに置いて、クライアントにクッキーの送信を要求しないように

RIGHT:&tag(圧縮,モバイル);
RIGHT:[[:t/圧縮]] [[:t/モバイル]]

**アイコンはモノトーンでも分かるように [#pf0cb44c]
(塗りつぶしか線だけの)図形か文字を1つ。それを装飾してアイコンを作るように。

トンバ文字とか。

単色ならWebフォントにもできる。

Webフォントにするなら[[Google:SymbolSet]]のように単語に割り当て。
記号+単語(つまり記法)に割り当てれられればページ本文にも表われないから邪魔にならない。
HTMLのブロック要素にすれば重ね合わせもできる。


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

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

移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
&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]]
-[[†:Adobe Brackets]]
**ショートカットキーやHTML内のIDを重複させないため [#ke25abe8]
テスト(重複テスト)というメソッドを用意。

***呼び出し順 [#hb1f17bd]
|ページA(外)|→|ページB(中)|→|ページC(中)|
|~|~|~|→|ページD(中)|

***処理順 [#d27cebe8]
例。
+Aを呼び出す
+Bを呼び出す
++Cを呼び出し、テスト…OK
++Dを呼び出し、テスト…OK
+Bのテスト…NG
+AのテストはNG
(下位にあるBのテストがNGなので)
+結果…NG(AのテストがNGなので。それ以外のテスト結果は考慮しない)

テストでは下位の全IDの中に自身が持つIDが有るか調べる。
が、下位のテストがNGならそれだけでNGにしていい。結果は変わらない。

下位の全ID・ショートカット定義を扱う。
戻り値はOK/NGの区別と、下位と自身の全ID・ショートカット定義

実装ではID・ショートカット定義の他にも類するものがあっても追加できるように。


**iPhoneではランドスケープ時のみ2カラム表示 [#g9edba85]

RIGHT:&tag(モバイル);


**リンクにスクリーンショットを [#u23bf9be]
機能。
リンクにはてなスクリーンショットを付ける。
ブラウザー側でこの機能が有効なページでリンクにスクリーンショットを付ける拡張を。

RIGHT:&tag(UI,リンク);
RIGHT:[[:t/UI]] [[:t/リンク]]



**UI/ [#z9677cf1]
#ls

**[[tag:UI]] [#m09eb01f]
#lsx(tag=UI,new=true)