UI

Last-modified: 2024-10-22 (火) 19:47:05
Tag: UI 実装

「UI/」で始まるページを作成

目次

関連

検索:UI

UI周辺のタグ

#tag(0,UI)

UIとは

:t/UI?

関連:フォーム

UI。
アナログ的、絶対値、無段階。

キャンバス（画面ではなく）から視線を逸らさずに操作できるようなものを。

…など。

>>>

UIを自由に配置

UI配置モードにして、ブラシのアイコンなどを拡大縮小・回転。よく使うツールを大きく、手の届きやすい位置に配置できる。
回転させても枠が動くだけで、アイコン画像は元の向きのまま。

ビューアーとして使うだけならペンタブレット不要に

スクロールとズームと複数画像の切り替えとレイヤー選択とレイヤー表示／非表示。これらをキーボードとタッチパッドで可能に。
タッチでできるならそれでいい。

長押しでヘルプかツールチップ

ポイントでは何も表示しない。代わりに長押し。

レイヤー消し、全選択カットなどの広範囲の操作では残像を残す

広範囲の編集には一瞬でも前後比較ができるように。
ユーザーが見ている画面に表示しきれない範囲の編集の場合は…？
画面端に赤い光とか、閃光を出す。

関連

UI上でユーザー設定と関連している項目に†リンク。
そこからUIとヘルプの検索結果へ。
該当箇所表示は1ウィンドウにしか関連付けられない。

設定ダイアログは対象別。機能別ではなく。

初期化

初期化（リセット）はユーザーが設定した値を適用すること。
設定値が無いときにプログラムが指定する値を適用。

使い始めに戻すにはユーザー設定を初期化してから個別のパラメーターを初期化。

ドキュメントに設定値2を保存。
ファイル保存時の値。この値に戻しやすいようスライダーのスナップとか。

ロック

ポイント、クリック、ドラッグくらいでは何も変更されないように。間違って触ったくらいでは何も変わらないとはっきりと分かるように。
操作したいUI上で始まるドラッグで円を描くとロック解除。普通に操作できる。他のUIを操作するまでロック解除状態。

UIの回転

液晶タブレット、タッチパネルをポートレートで使うときなどのために。
UIを移動、リサイズさせるUIはあるけど、回転がない。
ウィンドウのどこかに配置したハンドルをドラッグ？

モーダルダイアログ

OKだけのモーダルダイアログは不要。
自動的に消える仕組みと、作業を妨げない方法を。

すべてのモーダルダイアログにキャンバス内蔵。

「すべてにはい(Y)」「すべてにいいえ(N)」

Shift併用の「すべて」を有効に。
常用すべきではないのでサポートはこれだけ。

ダイアログにはワークフローを図示

ファイルのエクスポートなどで何をやるかわかるように。ウィザード形式？
個々のコードで対応。ウィザードのフレームワークなどは用意しなくていい。

描けないときのフィードバック

ストローク中は普通に描けるが、ストローク終了時に消える。
できれば補正完了した時点で、補正後の線だけ消したい。

範囲選択中や透明保護中、描ける部分と描けない部分が混在しているときでも描きやすいようにするため。

フォーカスフリー

フォーカスを無視。
常にアプリ全体が入力を受ける。

UIアイテムをクリック、アクティブにしてから操作…という面倒を無くす。
クリックしたら即機能するように。
ただし、アプリケーションウィンドウは別？そちらのほうが使いやすい？

ピクトグラム

文字を使わないUI。
文字入力するところ（レイヤー名などの名前入力）は絵で。

UIのコンセプト

隠しパラメーターは少なく。使うなら、分かりやすいものだけ。
例えば筆圧。線の太さに影響するから分かりやすい。

ブラシにモードを用意するといったことは分かりにくい。
それならモード別にブラシを用意するか、モード別にタブレットペンを用意してもらったほうがいい。

エラーメッセージ

「エラー」→「悲しいお知らせ」
メッセージの内容

  • 原因：なぜそうなったのか？
    • 外部での不具合、ユーザーにある原因：何をしたせいでこうなったのか？
    • 内部での不具合、直接的な原因：エラーその原因によって何が起きたのか？
  • 大きさ重大さ：このエラーはどれほど重大か？
    数段階のうちの1つ。
  • ユーザーができること：これからどうすれば良いのか？
    重大さによる。

やりやすい操作

  1. ドラッグ
  2. クリック
  3. …
  4. ダブルクリック

ダブルクリックは排除したい。
→ [hatena]ダブルクリックの代わりにジェスチャー？
キーストロークを受け付けられれば、外部のマウスジェスチャーソフトが使える。

なんでもON/OFF可能。
ダブルクリックを使えなくする代わりに、同じものを二度クリックして逆操作とする。

タブレット主体の操作で無いもの、使いにくいもの

  • ESCキー…キャンセル、モード戻しに使う。
    キャンセルなら関係のないところをダブルタップでいい。
    モード戻しは…モード変更ボタンをもう一回押す？
  • シフト系キー…Shift、Ctrl、Alt
    別のハードウェアを用意してもらう。
    タブレットのボタンを使う。
    …など。
    押し続けるものなので、専用ハードウェアが無いと。
    3キーのソフトウェアキーボードも用意できるけど、使いやすくはない。
    ON/OFFのトグル切り替え。ペンと組み合わせるのにペンで切り替えなければならない。タッチでできるなら使いやすくできるかも。
  • フルキーボード
    キー数は多いが、場所を取る上、横長の形がタブレットと競合する。
    ショートカットキーはテンキー程度に収まらないと使いにくい。少なくとも1つの作業で必要なショートカットくらいは。

クリックよりもドラッグ

対になる操作はスライダーで。

対になり、かつ段階的な操作（スライダーよりもボタンに割り当てるような操作）は1つのボタンをドラッグ。
ドラッグした方向でどちらの操作かを区別。
さらに、1ドラッグで複数回操作できるように。
右→左（戻す）→右で右に割り当てられた機能2回、右→左（戻す）→さらに左で右1回左2回（結果左1回）となるように。
見た目はスイッチのような形。
1つのスイッチに対称的な2つの機能を割り当てられる。

ファイルアイコン

ドキュメントウィンドウのアイコンをドラッグするとファイルを掴むことができる。
エクスプローラーにドロップすればファイルに保存することになる。

「選ぶ」という操作を「描く」に代える

リストからコマンドを選ぶ→ジェスチャーで実現。

描いてアイコン作成

キーボードを使わずに多様なコマンド入力をするために…

  1. シンボルを描く
  2. 描いたものがアイコン化

これでパレットを表示させずにアイコンだけ表示。
アイコン上で×印を描くまでアイコンは残る。

スライダー

スライダーは平面に。
バーは斜め。右上が+、左下が-。
ドラッグ始点に、現在値とハンドルが一致するようにバー表示。

左利きなら左右逆。利用者の属性として設定。

:t/利用者?

プルダウンメニュー

離すと閉じる。
そうでなければ使いにくい。

開いた後、ドラッグしたままスクロールバーを操作したい。

コンボボックスは紛らわしいので無いほうがいい。

ブラシの作成

ブラシを選択。
ブラシの属性を集めたり外したり。これをドラッグで。
追加した属性、追加できる属性の全てを表示するので、広い領域が必要。モーダルウィンドウで半透明にするのもいいかも知れない。

ブラシ/太さ

ブラシの太さは筆圧が標準値（設定による、描き慣れている筆圧）での太さを表示。
だからそれより太くなることもある。
最大筆圧のときの太さも表示していいかも知れない。

カーソルのブラシサイズ表示は最大値よりもその人（ユーザー）の筆圧にあわせて

普段の値は自動的にデータ収集。自動的に反映していい。（カーソル表示だけなので）

力を入れて使っていると次第に筆先が開いていく実物のブラシのような。

ペン先サイズが分かりやすいカーソル

筆圧加減とペン先サイズの対応が分かりやすくなるように。
実際に描かれる線を見ても分かるが、より筆圧とサイズの関係が分かりやすいように。

アイコン＝カーソル

アイコンとカーソルのデザインは統一。
普段目にするのはカーソルのほうなので、アイコンのデザインはカーソルに従う。
シンプルにならざるを得ない。

ブラシカーソルにインジケーター

機能してること/していないことを示す。
消しゴムが透明色しか塗っていないとき、ブラシが不透明色を塗っているときなど。
→透明色で透明色を塗っているとき、不透明色が不透明色を上書きしてるとき。

あまり目立たなくてもいい。
上書きの量が少ないなら気にならない程度に。

ブラシカーソルなし

液晶タブレットだとカーソルがないほうが快適。

型

列挙型

  • プルダウンメニュー
  • ラジオボタン
    ボタン1つずつを枠で囲む。ラベルも押せることをはっきりさせるため。
  • チェックボックス
    見た目をプッシュボタンにしたほうがいい。ラベルを含めて押せることがはっきりする。
  • ポップアップメニュー
    項目によっては一列に並べると見づらい。例えば順序関係のない項目のとき。
    方向で指示できるリングメニューができれば理想的。
  • リングメニュー
    特にコンテキスト依存のメニューで。
    ドラッグ始め…メニュー表示、ドラッグ…選択・カーソル表示、ドラッグ終了…決定
    中央はデフォルト項目か、前に選んだ項目。クリックで中央を選べるように。
    ペン用なのでリングの反転や回転は要らない。

数値型

  • スピンボタン
    排除。
    ポインターを動かさずにクリックさせたり待たせたりするのは、手を離してもポインターが動かないようなデバイス専用。
    ボタン押す→スライダー表示、のほうがいい。
  • スクロールバー
    ドラッグ中のポインターが入り込んでもフォーカスを受けられるようにしたいが、何をドラッグしているかで違ってくる。
    スクロールバーのボタンもスピンボタンと同じ。ペン入力には適さない。
  • スライダー

スクロールバー

タブレットを使用するので、クリックしたところに移動（Shift併用時と同じ、Mac式）のほうがいい。
逆にShift併用時は1ページスクロール。

あるいは表示だけ（iPhoneのような）。ナビゲーターのようなものがあればそれも不要？

スクロールバーの背景色

ドキュメントを参照。
縦軸、横軸それぞれの代表的な色にする。

スクロールバーの背景色.jpg

色で、スクロールバーがどのあたりに対応しているのか分かるように

合わせて背景クリック時にそこまでスクロール。

範囲選択

範囲選択時、メニュー表示。
選択範囲のコンテキストメニュー。

選択された範囲はレイヤーの属性

ブラシの太さ変更

ブラシを1段階太くする、1段階細くする、デフォルトの太さに、というショートカットを。

位置固定のメニュー

メニューの表示。非表示に。
特定の位置をクリックするのは面倒。

ドラッグオーバーならやりやすい。

戻る/進む

戻れるもの/進めるもの

余白

表示では必ず余白を。
ウィンドウ幅に合わせるズームでは余白を除いて倍率決定。

表示だけでなく、ドキュメントには必ず余白を付けるほうが良い。

スライダー

  • スライダーは合わせやすいように範囲を狭くする。数値入力はもっと広くていい。2つのUI。

右利き/左利き

ペンタブレットでは左右の違いが重要。右利き/左利きと深く関係する。

パラメーターは表に出さない

選択と組み合わせで設定ができるように。
数値をカプセル化。数値は細かい設定が必要なときだけ扱えばいいように。

パラメーターを色で表示

通常（既定値）では透明（ウィンドウと同じ色）。
そこから相対的に…

  • 高いと赤を濃く
  • 低いと青を濃く

不均等な配置

均一の大きさのボタンが並んでいては使いにくい。
見た目が綺麗なだけ。

落書きのボタン化ができなければ（あるいは落書き前のデフォルト設定では）よく使うものを大きいボタンに配置できるように。
操作履歴も最新のものを大きく。

ディスプレイ

アプリの状態表示用のUI

  • ステータスバー
  • タイトルバーの更新マーク(*)
  • 実際に描いてみるとツールの状態がわかる
    色、ペン先幅
  • カーソル付近

カーソル付近を活用すれば分かりやすく状態表示できる。
詳細なカーソルや、ツールの状態表示のバルーンを表示/非表示すれば。
タブペンを浮かせてのジェスチャーとかで表示、次のアクションまで表示し続ける、とか。

ツールバーを付けるなら利き手のほうに

ペン使用中だと手元になる。マウスではないので上より操作しやすい。液晶タブレットだと自分の手で絵を隠すことがなくなる。
よく使うものは利き手側、そうでないものは反対側。タブレットにあるボタンと一緒で、上下にツールバーを置くのはNG