セカンダリーボタン

Button

目的・詳細

ボタンはアクションのトリガーとして使用されます。リンクとしても使用されますが、「何かのアクションへの入り口」として使用するのが適切です。画面内で複数ボタンが発生する際には、ボタンの優先度を踏まえて適切なボタンデザインを選ぶ必要があります。
セカンダリーボタンは プライマリーボタンの次に重要な優先度のボタンを意味します。プライマリーボタンは1画面1つを推奨としていますが、セカンダリーボタンは複数配置が可能です。画面内に複数存在してもユーザーの認知を阻害しないデザインとなっています。

SecondaryTypeA

プライマリーボタンの次に優先度の高いボタンとして使用します。プライマリーボタンと合わせて使用するシーンが多いです。 セカンダリーボタン セカンダリーボタン セカンダリーボタン セカンダリーボタン セカンダリーボタン セカンダリーボタン

SecondaryTypeB

ユーザーによって利用の有無が変わるボタンとして使用します。メモ編集、期間検索など画面内のメインの操作とは別の目的を持ったボタンという扱いです。 セカンダリーボタン セカンダリーボタン セカンダリーボタン セカンダリーボタン

SecondaryTypeC

ユーザーがメインの操作からなにかしら離脱、中止、削除などネガティブな要素を含む場合に使用します。画面内に複数配置するとユーザーにストレスを与えてしまうため本当に必要な場面以外での使用は避けるようにします。 セカンダリーボタン セカンダリーボタン セカンダリーボタン セカンダリーボタン

SecondaryTypeD

画面内でのボタンの優先度によって、ボタンの高さや幅、色を変更して使用することがあるため3パターン用意しています。色によってフォーカスや非活性の色も変わっている可能性があるため注意してください。 セカンダリーボタン セカンダリーボタン