HOME > 第4回デザイニング・インターフェイス勉強会「ページレイアウト」

第4回デザイニング・インターフェイス勉強会「ページレイアウト」

さて、第4回は「ページレイアウト」の基礎を学びます。すでにわかっていることもありますが再確認です。スライド動画

前回にもご紹介しましたが、デザイニング・インターフェース 第2版 ―パターンによる実践的インタラクションデザインを題材にした勉強会となっております。以下は、自分メモですので、動画を見ると説明が付け加えられててわかりやすいです。

4章に書いてあること
ページの意味や操作を伝達するために、ページ内でユーザの注意をいかに操るか

ページレイアウトの基礎
1. 何が重要なのか?
今デザインしているページで最も重要なものは何か?
重要度をランク付け。フォントサイズとか
背景色 コントラストの強弱
位置とサイズ ページの上部/中央/下部の位置
リズム 繰り返しの回数

重要度を表現する方法や落とし穴
人物の顔写真で人物の目と、目線の先に誘導されやすい。
広告っぽい要素は見落とされやすい。

2. 何が関係しているのか?
ある項目だけが、その仲間よりも特殊ならばどうするべきか?
一貫性を保つデザイン vs. 他と異なるデザイン を使い分けて、ページ要素間の関係を表現する。
グループ化、レイアウト、配色、順序・整列

3. 次は何を見ればいいのか?
ユーザはまずどこに目を向けたくなるのか、それはなぜか?
注目点 (Focal Point) から,より重要度の低い情報へと視線を導く
視覚的な流れ(Path Layout パスレイアウト)の作り方 → 余白を使って流れの中からあえて外してみたり、流れの最後に「これでおしまい」を置くとか

◇ ◇ ◇

ページレイアウトの基礎を13個頑張って覚えよう!
内容グループ 1~3 4~8 9~10 11~13
1. Visual Framework
視覚的なフレームワーク
色・フォント・文体と言葉遣いを全体を通して共通化する
今自分がどこのページにいるのかわかるように

2. Center Stage
中央ステージ Newfangled(ブログのような形)
重要なものを大きくレイアウトする、そうでないものは小さく

3. Grid of Equals
等分グリッド(Nikeのページなど)

4. Titled Sections
強調されたタイトル付きセクションを入れる
いまほしい情報にすぐアクセスできる

5. Module Tabs
モジュール別タブ
いま見ている情報以外のものは隠すことによって見やすくなる。

6. Accordion / アコーディオン
小さなサイドバーの中に収めたい場合など

7. Collapsible Panels
開閉可能パネル Googleマップ、Firefox Bookmark Sidebar、YouTube

8. Movable Panels
移動可能パネル iGoogle、MyYahoo!
ドラッグ&ドロップで追加削除ができるような

9. Right/Left Alignment
左側の項目を右揃え、右側の項目を左揃え(中央に集める)
視覚的に関連性を理解しやすい。

10. Diagonal Balance
対角線バランス / 左上に大きなロゴ→右下に次のアクション領域
スクロールなしで1ページに収まる場合に効果を発揮しやすい。

11. Responsive Disclosure
反応的な追加表示 / ユーザの選択したものに応じて次を表示するようなしくみ

12. Responsive Enabling
反応的なイネーブル化 / 11とは対照的で全て表示してある状態。
ここちょっと専門用語入ったりしてわかってません(あせ

13. Liquid Layout / リキッドレイアウト
どんなウィンドウサイズにも適応する。ページ内に情報が全て入る。

という感じで、過去3回分のまとめが終わりました。

カテゴリー:わーどぷれす

コメントを残す

PageTop