skillup

技術ブログ

UI

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

投稿日:

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

2パネルのセレクタ

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

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

カンバスとパレット

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

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

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

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

  • 項目選択画面

代替表示

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

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

ウィザード

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

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

オンデマンド追加項目

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

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

魅力的な分岐

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

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

マルチレベルのヘルプ

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

  • Wordなどの画面

-UI

執筆者:


comment

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

関連記事

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

Bootstrapでのラジオボタンの装飾について(toggle)

ラジオボタンのようなn択式のチェックに関して、HTMLディフォルトのごついやつではなく、下記のようにボタンがへこんだものを実装したい場合の処理についてメモします。 下記のようなボタンの状態をtoggl …

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

フォームとコントロール

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

アーカイブ