UI・画面設計

モバイルアプリの UI 構造(Bottom Navigation・5 タブ)

モバイルアプリの UI 構造(Bottom Navigation)

モバイルアプリの UI 構造。Bottom Navigation の 5 タブと、各タブの画面構成・遷移

この図は、下の 1 枚の YAML から描かれています。手で図形を動かしてはいません。

正本に書いてある決まりごと

完成デザインではなく UI 構造の正本。Bottom Navigation は画面ではなく「常にある枠」なので、どのタブでも下に居座る —— そこが Web の画面遷移と違うところ。

左が「いま選んでいるタブ」の画面、右がタブごとの中身。投稿タブだけはモーダルで、タブを切り替えずにいまの画面の上へ重なって、下からせり上がる(よくある型)。

正本(YAML)

examples/gallery/87-モバイルアプリのUI構造.zumen.yaml

同じ分野の見本