見出し画像

インターフェースの基本Bars ③サイドバーについて

サイドバーは、アプリレベルのナビゲーションを提供し、アプリ内のトップレベルのコンテンツコレクションに素早くアクセスできます。

サイドバーでアイテムを選択すると、特定のコンテンツに移動することができます。

たとえば、メールのサイドバーには、すべてのメールボックスのリストが表示されます。メールボックスを選択してメッセージのリストにアクセスしたり、特定のメッセージを選択してコンテンツペインに表示したりできます。

スクリーンショット 2021-01-06 16.50.41

サイドバーに正しい外観を適用しましょう

サイドバーを作成するには、コレクション ビューリストレイアウトのサイドバーの外観を使用します。

サイドバーを使ってアプリレベルで情報を整理しましょう

サイドバーは、情報階層をフラットにし、複数の情報カテゴリやモードへのアクセスを同時に提供する良い方法です。

サイドバーを使用すると、アプリの主要部分や、フォルダやプレイリストなどのトップレベルのコンテンツ コレクションへの迅速なナビゲーションが可能になります。

可能な限り、サイドバーの内容をカスタマイズできるようにしましょう

サイドバーはアプリのナビゲーションを提供するので、人々が気になるコンテンツに素早くたどり着くためのショートカットを提供するために使用することができます。

ユーザーがどの項目が最も重要かを決めることができると最高です。

サイドバーの非表示を邪魔するのはやめましょう

サイドバーを非表示にしてコンテンツのためのスペースを確保したり、内蔵のエッジスワイプジェスチャーを使ってサイドバーを再び表示したりすることができます。

デフォルトでサイドバーを非表示にしないようにしましょう。

サイドバーのタイトルをわかりやすく簡潔にしましょう

不必要で冗長な単語を省略します。

例えば、メールは各メールボックスのタイトルからメッセージという単語を省略し、フラグや下書きなどのより簡潔な用語を使用します。

サイドバー内で2つ以上の階層を露出させないようにしましょう

データ階層が2つの階層よりも深い場合は、スプリットビューインターフェースの補助列でリストビューを使用します。

次はステータスばーについてまとめます。


女性限定デザイナーコミュニティを運営中です。UIデザイン初心者で学びたい方、参加したい理由、Facebookアカウント、twitterアカウント、お名前を記載の上twitterでメッセージを頂けると幸いです。

お待ちしております!


この記事が気に入ったらサポートをしてみませんか?