skillup

技術ブログ

UI

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

投稿日:

今回からは単一のページレイアウトの構成の考え方やテクニックについて。

一般的な傾向として、人間の視覚上の特徴というのは下記のような傾向があげられます。

  • 人の視線は上から下、左から右へというのがディフォトの流れ
  • 視線は強い注目点に引き付けられ、次第に弱い注目点へと順次移行する
  • ユーザーが知覚するページのコンテンツの意味は、ユーザーがどこに注目するかを変化させる

レイアウトのポイント

グループ化

ある要素とある要素が近接しているとそれらは関連を表すことになる。

近接の要因

複数のものを近づけて配置すると、見るものはそれらを仲間として関連づける。

類似の要因

2つのものの形状や大きさ、色、向きが同じ場合、同種のものと関連づける

連続の要因

人間の目は小さな要素が連続していると連続的な直線や曲線を見出そうとする

閉合の要因

人間の目は輪郭のあいまいな余白や長方形などはっきり意図して書かれていない閉じた図形を見出そうとする

レイアウトのための考え方

視覚的なフレームワーク

ページを構成する基本的な色、フォント、文体、構成などをあらかじめ考えておく。

プログラムのフレームワーク同様、全体的なデザインの枠組みを考える。

中央ステージ

UIの最も重要な部分を、ページやウィンドウ内で一番大きなセクションとして配置する。その周囲に副次的なツールやコンテンツをまとめる。

タイトル付きセクション

主にリスト系の情報を陳列する際に、ここのセクションのタイトルを明示し、グルーピングする。

コンテンツを把握しやすい単位に分け、構造化する。

カードのスタック

ページ内に配置する情報が大きい場合一度に複数の情報を配置するとユーザーが混乱する。その場合、コンテンツの各セクションを別々のパネルまたはカードに配置し、一度に一枚だけ見えるように積み重ねる。タブやその他の仕掛けを用いる。

開閉可能パネル

コンテンツの各セクションを別々のパネルに配置し、ユーザーがそれぞれ個別に開閉できるようにする。

移動可能パネル

異なるツールやコンテンツセクションを別々のパネルに配置し、ユーザーがそれらを自由に移動してレイアウトを組めるようにする。

右そろえと左そろえ

2カラムのフォームやテーブルの場合、左側のラベルは右そろえ、右側の項目は左揃えにする。

対角線上のバランス

人間の自然は左上から右下に流れるため、処理の流れもこれにならう。決定系のコマンドは右下に置くことが望ましい。※ただしスクロールがない場合。

プロパティシート

2カラムまたはフォーム形式のレイアウトを用いて、このページでプロパティを編集できるようにする。

反応的な追加表示

ごく、最小限のUIから初めて、ユーザーが各ステップを完了するごとに追加のUIを表示しながら、一連のステップを実行できるようにする。ユーザーが初心者の場合に適している。

反応的なイネーブル化

大部分が使用不可になっているUIから初め、各ステップを完了するごとに使用できるようになっていく。

リキッドレイアウト

ユーザーがウィンドウをリサイズしたら、それに合わせてページのあ内容もリサイズする。

全体的なポイントとしては下記のようなことでしょうか。

  • 情報をグルーピングする
  • メインの情報とサブの情報のコントラストを付ける
  • 枝葉末節の情報は段階的、非表示出来るようにする

 

-UI

執筆者:


comment

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

関連記事

no image

CSSで背景画像の出力 ~透過編~

前回CSSで大きな背景画像のなかにhtmlを置く方法をメモしたんですが、背景画像を透過させたいときなどのメモを書いておきます。 一般的に画像の透過といえばCSSでopacity:0.6とかやれば簡単な …

no image

ユーザーの行動パターン

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

no image

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

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

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

no image

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

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

アーカイブ