skillup

技術ブログ

UI

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

投稿日:

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

2パネルのセレクタ

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

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

カンバスとパレット

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

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

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

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

  • 項目選択画面

代替表示

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

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

ウィザード

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

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

オンデマンド追加項目

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

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

魅力的な分岐

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

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

マルチレベルのヘルプ

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

  • Wordなどの画面

-UI

執筆者:


comment

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

関連記事

no image

ユーザーの行動パターン

ソフトウェアデザインにおいて必要な要素の列挙 Contents1 安全な探求2 即座の喜び3 最小限での充足4 途中での方針変更5 回答の先送り6 少しずつの組み立て7 習慣化8 空間的な記憶9 展望 …

no image

boostrapでのヘッダーナビ作成

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

no image

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

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

no image

携帯のUIに関して

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

no image

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

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