ページ最上部にカラーバー Edit


編集に関わるUIについては

→:i/編集/UI[?]

ページの種類で色分け。

通常、その他…黒

警告付き…赤

編集…青

ユーザーアカウント…黄

目次 Edit

  • -
    これはスタイルシートと別。

    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


機能

リンクにはてなスクリーンショットを付ける。

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