- 追加された行はこの色です。
- 削除された行はこの色です。
RIGHT:[[:t/UI]]
[[:t/分かりにくさ]]を解消して[[:t/分かりやすさ]]にする方法。
編集に関わるUIについては
→[[:i/UI/編集]]
----
#contents
*あとでなおす [#o55beb18]
ユーザーインターフェイスについて。
-見つめさせないこと
-ページ遷移時のアイキャッチ
NPHというわけではないので、ページを去るときに。
入力のレスポンスとして。
-アクセスキー
DOMのクラスごとにアクセスキーを。
同じキーを数回押す使い方。
-UIの遷移図を
→スタイル/テーマ
**携帯向けビュー [#m461f5a7]
サブページが実装されれば目次を表示するだけでいい。
目次からサブページへリンク。
RIGHT:[[:t/UI]] [[:t/モバイル]]
***方法 [#ne489b7d]
ユーザーエージェントで携帯かどうか判定。
RIGHT:[[:t/UI]]
**携帯向けのビューでは圧縮 [#n879090c]
-gzip圧縮
-イメージリソースを公式サイトに置いて、クライアント側キャッシュを共有
-その他静的リソースを別サイトに置いて、クライアントにクッキーの送信を要求しないように
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:[[:t/モバイル]]
**リンクにスクリーンショットを [#u23bf9be]
機能。
リンクにはてなスクリーンショットを付ける。
ブラウザー側でこの機能が有効なページでリンクにスクリーンショットを付ける拡張を。
RIGHT:[[:t/UI]] [[:t/リンク]]
**UI/ [#z9677cf1]
#ls
**[[tag:UI]] [#m09eb01f]
#lsx(tag=UI,new=true)