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


ページの種類で色分け。

通常、その他…黒

警告付き…赤

編集…青

ユーザーアカウント…黄

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

:i/UI/編集

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

Wikiの設定で使うか使わないかを選択。
  • -

ナビは最上部か最下部に Edit


ナビは最上部か最下部に。

グローバルナビはスクロールですぐに消えるほうが煩わしくなくて良い。

編集などといった操作をするUIは常に示されていたほうが良い。

あとでなおす Edit


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

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

ドラッグ対応チェックボックス Edit


スタイル/テーマ

プッシュボタンのラジオボタンも。

ドラッグできるチェックボックス Edit

携帯向けビュー Edit


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

目次からサブページリンク

ドラッグでチェックできるチェックボックス。

見た目をチェックボックスとは違うチェックボックスにしないと。



方法 Edit


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

ドラッグすると、マーカーで塗ったような色がつく。

1回のドラッグではONかOFFのどちらか一方の操作だけ。1回のドラッグ中にトグルはしない。最初の1つめがONかOFFか次第。

区切りタグ Edit


タグクラウドを区切り線にする。

大きさを変えると見た目がよくないので、色の強弱で。

携帯向けのビューでは圧縮 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


機能

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

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

UI/ Edit

tag:UI Edit