編集に関わるUIについては
編集/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

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