skillup

技術ブログ

UI

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

投稿日:

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

2パネルのセレクタ

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

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

カンバスとパレット

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

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

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

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

  • 項目選択画面

代替表示

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

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

ウィザード

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

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

オンデマンド追加項目

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

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

魅力的な分岐

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

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

マルチレベルのヘルプ

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

  • Wordなどの画面

-UI

執筆者:


comment

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

関連記事

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

ページレイアウトに関して

今回からは単一のページレイアウトの構成の考え方やテクニックについて。 一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。 人の視線は上から下、左から右へというのがディフォ …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …