skillup

技術ブログ

UI

アプリケーションの画面構成に関して

投稿日:

アプリケーションの画面の設計スタイルに関してよく使われるものを。

2パネルのセレクタ

リスト+選択された内容の表示

  • メールボックス内のメール
  • ウェブサイトのセレクション
  • ライブラリ内の楽曲や画像
  • データベースのレコード
  • ファイル

カンバスとパレット

作ったものを置くためのカンバスと物を作るためのパレット

  • Photoshopの操作画面
  • Wordの操作画面

1ウィンドウでのドリルダウン

単一ウィンドウ内でのアプリケーションの各ページを表示。ユーザーがメニュー項目を選択して、ドリルダウンで項目を選択する

  • 項目選択画面

代替表示

代わりの表示方法があるか。フォントサイズやウェブブラウザ、端末により別の表示方法を設定できるか

  • 印刷画面や画像の各種の表示の変更など

ウィザード

一連のタスクを設定し、実行してもらう。

  • 各アプリケーションの設定画面など。

オンデマンド追加項目

一般的な選択肢を用意し、それ以外は隠しておく

  • カラーパレット
  • 選択項目が非常に多いもの

魅力的な分岐

ユーザーの興味を引くようなコンテンツをリンクとして張っておき、外部へ誘導する

  • ニュースサイトでの単語へのリンク

マルチレベルのヘルプ

一般的なヘルプのみならず、入力補完やわかりやすいツールバーなど、ユーザーの入力を補助するもの

  • Wordなどの画面

-UI

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

フォームとコントロール

今回はフォームについて Contents1 基本原則となる考え方1.1 寛容な入力形式1.2 構造化された入力形式1.3 穴埋め1.4 入力ヒント1.5 入力プロンプト1.6 オートコンプリート1.7 …