スクロールとローディングのマイクロ アニメーションの作成方法
ヤコブ・ニールセン
Jakob Nielsen はデンマークのウェブユーザビリティコンサルタントであり、「Nielsen Norman Group」の創設者です。デンマーク工科大学コペンハーゲン校でヒューマン・コンピュータ・インタラクションの博士号を取得。
(ウィキペディア)
(ウィキペディア)
Jakob Nielsenのユーザビリティの原則の1つは、「システムは常にユーザーに何が起こっているのかを知らせ続けるべきである」と述べています。
Webサイトがこのルールに適合できるようにする1つの方法は、マイクロアニメーション機能を提供することです。次の 2 種類のアニメーションが追加されました。
1.カスタマイズ可能な色のページ読み込みインジケーター:「すべてが正常で、ページが読み込まれています」。
2. ページのどの部分が現在表示しているかをユーザーに通知するスクロール インジケーター。
1.カスタマイズ可能な色のページ読み込みインジケーター:「すべてが正常で、ページが読み込まれています」。
2. ページのどの部分が現在表示しているかをユーザーに通知するスクロール インジケーター。
1
ローディングアニメーションとインジケーターを追加する方法
「その他」カテゴリからページの上部にT228ブロックを追加します。
これは、読み込みアニメーションなしでページを読み込む様子です。
そのブロックを追加すると、コンテンツの読み込みがスムーズになります。
「積荷区分を表示」チェックボックスを選択し、ブロックの[設定]パネルで積荷区分の背景色を選択します。
これは、読み込みインジケーターを追加した後のページの読み込みの様子です。
このインジケータは Safari には表示されません。 Safariには独自のページ読み込みインジケーターがあります。
2
スクロールアニメーションを追加する方法
「その他」カテゴリからページの上部にT333ブロックを追加します。
ブロックの[設定]パネルで色と進行状況バーの高さを指定します。
ブロックの[設定]パネルで色と進行状況バーの高さを指定します。
