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

目次 Edit


関連 Edit

検索:UI

#tagcloud(0,related=UI)

 

UIとは Edit

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

スタイル/テーマ

携帯向けビュー Edit

サブページが実装されれば目次示するだけでいい。
目次からサブページリンク

方法 Edit

ユーザーエージェントで携帯かどうか判定。

携帯向けのビューでは圧縮 Edit

アイコンはモノトーンでも分かるように Edit

(塗りつぶしか線だけの)図形か文字を1つ。それを装飾してアイコンを作るように。

トンバ文字とか。

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

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

見出しごとのスクロール Edit

概観のためのUI

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

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

スクロールバーを豪華に Edit

例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で示。強調示のマップを作る。

もっと豪華にすると検索:Sublime Textのようなプレビューに。
こういうマップは常時示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの示に。

見出しを別の色で。リンクも別の色で。
それらの色の混み具合でテキストの特徴が分かるような。

画面切り換え Edit

フェードアウト/インだけでもいい。
クリック→全体を単色化する→フェードアウト→フェードイン→カラーリング。
単色化には1枚で全画面をカバーするフィルターのようなものがないと不可。

浮き上がるUI Edit

フォーカスを得ると浮き上がる。バルーン化。

複数ページをまとめて扱う Edit

RegExpで複数ページをまとめて指定、それらをページとして扱い、クエリーをそれぞれに与えたい。
選択された全ページで受け付けられないクエリーでもいい。適用されないだけ。

APIも。

一覧の効果を最大化 Edit

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

ユーザーの要求と(ちょうどいいビューがそこにある)実装が合致する好機。

パーマリンク/静的リンク中心 Edit

URI。
動的な(意味が変わる)リンクは使わない。
検索結果、検索ボックスの既定値、フォーカス位置、ダンプのダウンロードページのオプションなども。

参考に Edit

ショートカットキーやHTML内のIDを重複させないため Edit

テスト(重複テスト)というメソッドを用意。

呼び出し順 Edit

ページA(外)ページB(中)ページC(中)
ページD(中)

処理順 Edit

例。

  1. Aを呼び出す
  2. Bを呼び出す
    1. Cを呼び出し、テスト…OK
    2. Dを呼び出し、テスト…OK
  3. Bのテスト…NG
  4. AのテストはNG
    (下位にあるBのテストがNGなので)
  5. 結果…NG(AのテストがNGなので。それ以外のテスト結果は考慮しない)

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

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

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

iPhoneではランドスケープ時のみ2カラム Edit

リンクにスクリーンショットを Edit

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