社長BLOG

HOUOU UI研究#2 スマートフォン

スマートフォンのUI研究

今回つくりこんだのはこの6点。

詳しく見たい方はモックアップの詳細にアクセスを。

取り組んだ部分の特徴を紹介する。

１列目

◆１列目

最上位ナビはスマートフォンの全ページで表示する。
・メニューを呼び出すロゴマーク
・通知センター表示
・投稿ボタン

の3つで構成する。
ボタンを押した場合は、画面を遷移する形ではなく、
ダイアログ形式で一時的に上に、既存の画面の上にかぶさってくるような操作感覚になる。

◆かぶさるイメージ１MENU

◆かぶさるイメージ２通知センター

◆かぶさるイメージ３投稿

投稿画面だけは、ちょっと機能が違うので、かぶさるというよりも、
移動して投稿が終わったら元の画面に戻ってこられる。という感じになる。

２列目

２列目も共通のデザインにしている。
ホーム、フレンド、コミュニティの基本情報を示す。
◆コミュニティ、フレンドの基本情報

１，２列目の組み合わせで、UIに共通性とリズムを持たせる。

◆共通性のリズム

メンバーページ

メンバーページは、履歴書のように基本情報を写真できっちり見せるようにする。
更新性の高いタイムラインなどのコンテンツは、１件のみ表示として、リンク先で閲覧できるようにしてみた。

◆メンバーページ（フレンド）

グループも全く同一のページ構成にする
◆グループページ（コミュニティ）

通知センター

通知センターはポップアップタイプにしてみた。
◆ポップアップ型通知センター

実際にクリックして動作を確認してみると、導線がおかしい部分が確認できる。
balsamiqモックアップツールは最高だ。

最新記事

アーカイブ