skillup

技術ブログ

UI

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

投稿日:

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

2パネルのセレクタ

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

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

カンバスとパレット

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

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

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

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

  • 項目選択画面

代替表示

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

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

ウィザード

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

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

オンデマンド追加項目

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

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

魅力的な分岐

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

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

マルチレベルのヘルプ

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

  • Wordなどの画面

-UI

執筆者:


comment

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

関連記事

no image

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

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

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

no image

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

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