Yamato DaiwaFrontend (2.0.0-beta.4)

AdmonitionBlock (Vue)

枠に囲まれた本文は電算化よりずっと早く、本や其の他の印刷物に使われていた。 殆ど常に此の様に重要な本文が強調されるが、備考や其の他の従的情報にもよく使われる。

ウェブサイト・アプリケーションの開発に於いては、本文が枠に囲まれる場合の種類も増え、頻度も高く成った。

  • 印刷物の場合と同じ様に、枠はウェブサイトに於いては長文の中に需要な部分を強調される為に使われる。 訪問者に強調された本文の需要度を一瞬間に判断させるには、色使いの既読が活用。 例えば、需要な部分には暖色(赤、橙、黄色)が使われ、二次的な部分には寒色(青、緑)が、無彩色(黒・灰色の枠に囲まれ、背景は白か薄い灰色)が利用される。 色に加えて、アイコンが使われる事が多い。
  • グラフィック・ユーザー・インターフェースに於いて、枠に囲まれた本文の役割が広がり、利用者達を通知する為の手段の中一つに成った。 常に数秒しか表示されていないポップアップメッセージと違って、枠に囲まれた本文がずっと表示される、但し利用者が意識的にメッセージを 非表示に出来る様にボタンが付いている事がある。 尚、通知自体と他に、利用者に反応する事を促している文と、反応行動為のボタンも追加する推薦。

枠に囲まれた本文を下記の場合に活用する推薦。

サーバーからデータ取得中エラーが発生した時
此の場合、データをもう一度取得する為のボタンを追加すると良い。
表示するデータが無い時
データが全く無い場合と、データは有るが検索結果は無い場合毎本文を用意した方が良い。 其れに依って、反応の提案も異なり、データが全く無い場合データを追加する事を提案し(其の為の権限が有ったら)、検索結果場合、絞り込み条件をリセットする ボタンを追加すると良い。
ウェブサイト・アプリケーションの利用に就いて短文の案内
新しいユーザー向けだけではなく、未だ多数であるコンピューターのリテラシーが低い利用者にとってとても重要なもの。
ユーザーに具体的な行動を促す時
例えば、貴方のウェブサイト又がアプリケーションに認証が任意な場合、アカウント登録する事を提案し、其れの利点を説明すると良い。 勿論、アカウント作成ページへのリンク用意し、登録済みの利用者達向けにログインページへのリンクを用意するべき。

逆に、下記の場合には枠に囲まれた本文は最良の選択肢ではない

  • データ送信中発生したエラーの通知
  • データ送信成功に就いてエラーの通知
  • サインイン・サインアウト通知

上記の場合だと、浮かぶメッセージ(YDFだと、Snackbarコンポーネント)の方が専用のものだ。

要約

コンポーネントのクラス
AdmonitionBlock
コンポーネントのLive template (IntelliJ IDEAファミリー結合開発環境専用正式的プラグイン)
ab-ydf
スタイル生成専用Stylusミクスイン
provideAdmonitionBlockYDF_Component
用意済みのテーマ
AdmonitionBlock.Themes.regular
標準(規定)
用意済みの幾何学的変形
AdmonitionBlock.GeometricVariations.regular
標準(規定)
AdmonitionBlock.GeometricVariations.stickyNoteLike
付箋らしい
用意済みの修飾的変形
AdmonitionBlock.DecorativeVariations.notice
備考
AdmonitionBlock.DecorativeVariations.error
エラー・重要通知
AdmonitionBlock.DecorativeVariations.warning
警告
AdmonitionBlock.DecorativeVariations.success
成功した行動
AdmonitionBlock.DecorativeVariations.guidance
案内
AdmonitionBlock.DecorativeVariations.question
質問
ローディングプレースホルダ
無し