ページ最上部にカラーバー † Edit
編集に関わるUIについては
→編集/UI
ページの種類で色分け。
通常、その他…黒
警告付き…赤
編集…青
要ユーザーアカウント…黄

目次 † Edit
  1. ページ最上部にカラーバー
  1. 目次
    1. 関連
      1. ナビは最上部か最下部に
  2. UIとは
    1. ドラッグ対応チェックボックス
    2. ドラッグできるチェックボックス
    1. 携帯向けビュー
      1. 方法
      2. 区切りタグ
    2. 携帯向けのビューでは圧縮
      1. AutoPagerモード
    3. アイコンはモノトーンでも分かるように
      1. タイトルとURLをコピペ
      2. 最後に参照したページ
    4. 見出しごとのスクロール
      1. 日付別ページ一覧
    5. スクロールバーを豪華に
  3. :i/UI/
    1. 画面切り換え
    2. 浮き上がるUI
    3. 複数ページをまとめて扱う
    4. 一覧の効果を最大化
    5. パーマリンク/静的リンク中心
    6. 参考に
    7. ショートカットキーやHTML内のIDを重複させないため
      1. 呼び出し順
      2. 処理順
    8. iPhoneではランドスケープ時のみ2カラム表示
    9. リンクにスクリーンショットを
  • -
    これはスタイルシートと別。
    Wikiの設定で使うか使わないかを選択。

関連 † Edit

ナビは最上部か最下部に † Edit
検索:UI
ナビは最上部か最下部に。
グローバルナビはスクロールですぐに消えるほうが煩わしくなくて良い。
編集などといった操作をするUIは常に表示されていたほうが良い。

#tagcloud(0,related=UI)
 
表示中のページに関することは常時表示、他のページに関することはスクロールした（利用者が移動するためリンクを探している）ときに見えればいい。

UIとは † Edit

ドラッグ対応チェックボックス † Edit
ユーザーインターフェイスについて。
ドラッグでON/OFFできるチェックボックスが欲しい。
プッシュボタン型の。
→スタイル/テーマ

ドラッグできるチェックボックス † Edit
ドラッグでチェックできるチェックボックス。
見た目をチェックボックスとは違うチェックボックスにしないと。

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

ドラッグすると、マーカーで塗ったような色がつく。
1回のドラッグではONかOFFのどちらか一方の操作だけ。1回のドラッグ中にトグルはしない。最初の1つめがONかOFFか次第。


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

区切りタグ † Edit
タグクラウドを区切り線にする。
大きさを変えると見た目がよくないので、色の強弱で。
これを縦線にも使用。
2カラムレイアウトの区切りにする。

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

AutoPagerモード † Edit

アイコンはモノトーンでも分かるように † Edit
（塗りつぶしか線だけの）図形か文字を1つ。それを装飾してアイコンを作るように。
AutoPagerのようなのを実装するならスクロールバーを消す。
AutoPagerモードOFFでスクロールバー表示。
トンバ文字とか。

タイトルとURLをコピペ † Edit
単色ならWebフォントにもできる。
（ページ名部分をバックリンク一覧へのリンクにしないのなら）シングルクリックでページ名をコピペできるように。
内部リンクを作りやすくするため。
WebフォントにするならGoogle:SymbolSetのように単語に割り当て。
記号+単語（つまり記法）に割り当てれられればページ本文にも表われないから邪魔にならない。
HTMLのブロック要素にすれば重ね合わせもできる。

最後に参照したページ † Edit
もしWiki外へ出ても元のWikiページに戻れるように、
クライアント側データに「最後に参照したページ」のIDを残す。
クッキーがいい。

見出しごとのスクロール † Edit
概観のためのUI。
履歴すべてを残したいところだが、クライアント側のIDとサーバー側のDBで実現。（データが大きくなるので）
見出しごとの表示、「次の見出し」「前の見出し」をアクセスキーで。
ページ最後の見出しで同じキーを押すと終端という意味の表示を。(ページ終端を黄色く光らせるなど)
終端で同じキーを押すと次のページへ。(前後関係のあるページがある場合)

日付別ページ一覧 † Edit
移動量が分かりにくい。特に大きなセクションを越えたとき。
どれだけ移動したか分かりやすくするのは別のUIの役目。例えばスクロールバー関係。
章ごとのスクロール.png
日付を元にページを作る場合（日記とかブログとか）に。
作業記録にも。Wikiの沿革にも。→:沿革
  • 縦にリスト表示。縦スクロール。各項目にページへのリンクと内容の要約を。
  • 左側にカラーバー（月別）
  • ページの無い日付には空欄。カラーバーなし。
    項目間の間隔が分かるように。カラーバーと同じ効果。
  • スケール変更。1時間とか1分ごとに1項目〜1年ごとに1項目くらいまで。
  • スケールに見合った範囲のページ一覧を、1つの項目に詰め込む。＋「もっと見る」リンク。

スクロールバーを豪華に † Edit
例えばGoogle Chromeは検索した語がどこにあるかスクロールバー上で表示。強調表示のマップを作る。
これを汎用化するとスプレッドシート表示になる。
含まれるファセットを列に、行をページにして。列の中には作成日時や最終更新日時、全ページ中の相対的な更新頻度（を色で表したもの）なども。
もっと豪華にすると検索:Sublime Textのようなプレビューに。
こういうマップは常時表示のほうが分かりやすい。
画面の横幅が足りないときは細くして行頭だけの表示に。
:i/タイムラインは版を時系列順に並べるもの。

:i/UI/ † Edit

画面切り換え † 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
機能。
リンクにはてなスクリーンショットを付ける。
ブラウザー側でこの機能が有効なページでリンクにスクリーンショットを付ける拡張を。