Pepabo Design

Navigation Drawer

Dictionary

役割と種類

モバイルや小型タブレットなどの小さな画面かつ横方向の画面遷移が必要で、優先順位が低い遷移先がBottom Navigationに収まらない場合に使用します。ドロワー形式のナビゲーションに遷移先が表示され、内部はHeader、Bodyで構成されます。

BodyにInteractive Listを持ち、タップするとInteractive List Itemが示す最上位の遷移先に移動します。

アカウント切り替えなどに使用できる柔軟なスペースです。

Body

Interactive Listを設置して横方向の画面遷移を促します。

いつ使うべきか / 使わないべきか

モバイルや小型タブレットなどの小さな画面かつ横方向の画面遷移が必要で、優先順位が低い遷移先がBottom Navigationに収まらない場合に使用します。

Bottom Navigationを使用したほうがよい場合

モバイルなどの小さな画面でかつ遷移先オブジェクトが5つまでに収まる場合は、Bottom Navigationのみを使用してください。

Side Navigationを使用したほうがよい場合

アプリケーションのどこからでもアクセスできる必要がある最上位の遷移先が3つ以上あるかつ、デスクトップまたは大型タブレットの場合にはSide Navigationを使用してください。

Interaction

スクロールする

垂直方向にスクロールできます。コンテンツがNavigation Drawerの高さよりも長い場合は、コンテンツをNavigation Drawer内でスクロールできます。その場合、Headerは固定するかどうか選択できます。

Style

外観

Header

fixed

true / false

HeaderをFixedにすることができます。

ステート

Body内部のステートはInteractive Listに準じます。

注意点

Badgeの使用について

Interactive ListのItemのアイコンや画像の右上にBadgeを配置できます。Badgeには、通知数などの動的な情報を表示できます。

状態に応じてInteractive ListのItemを削除したりDisabledにしない

Navigationはなくなったり、場所が変わったり、使用できる場合と使用できない場合があると、一貫性がなくなり、ユーザーが予測しづらくなります。すべてのItemを常に有効にし、遷移先にコンテンツがない場合は適切なEmpty Stateを用意します。