JS でモバイルのインタラクティブエクスペリエンスを向上させる方法

1. 即時フィードバック

ゲームをプレイしているとき、「インパクト感」という言葉をよく耳にします。私たちが行うすべての操作には、視覚的なアニメーションの変化、聴覚的な音、モバイルデバイスの振動など、非常に強いフィードバックがあるというのが一般的な認識です。

1.1 ボタンからの即時フィードバック

フロントエンドページでは、ゲームでの衝撃の感覚と同様に、ユーザーのあらゆる操作に対して即時のフィードバックが提供され、その操作が有効であり、システムがその操作を受信して内部で処理していることがユーザーに伝えられる必要があります。

たとえば、ユーザーがページ上のボタンをクリックしたとき、ボタンが押されたことを示す効果を与えるのが最適です。

ボタン:アクティブ{
  変換: translateY(4px);
}

ボタンを押したときの効果がページ全体のスタイルに合わない場合は、背景色を変更することもできます。

1.2 継続的なフィードバック

各ユーザーのデバイスモデル、ネットワーク状況などは異なります。すべてのユーザーに良好な WiFi 環境でページを操作することを要求することはできません。

ユーザーの行動によってネットワークリクエストが生成された場合には、リクエストによって返された結果に基づいてユーザーにフィードバックを提供する必要があります。この場合、ページはバックグラウンドでアクションが実行されているというフィードバックをユーザーに継続的に提供する必要があります。この効果がなければ、インターフェースが要求されている場合でも、ユーザーはクリックが効果がないと考え、応答が得られることを期待してボタンを複数回クリックすることになります。

ここで自分自身にルールを設定することができます:

ネットワーク要求があるたびに、負荷効果の継続的なフィードバックが必要です。

通常、読み込み効果は、ユーザーがトリガーしたボタン上、またはグローバルページに表示できます。各ページのスタイルに応じて選択できます。

たとえば、ページにはボタンをクリックして開く必要がある赤い封筒があります。ユーザーがボタンをクリックすると、ボタンは回転する読み込み効果を表示できます。インターフェイスが結果を返すと、赤い封筒が開かれ、特定の金額やその他の結果が表示されます。

1.3 ページの初期化

フロントエンドとバックエンドが分離されている（そして同型の直接出力ソリューションが使用されていない）現在のシナリオのほとんどでは、データのないフロントエンドページが最初に表示され、次にデータが要求され、データが返された後にページがレンダリングされます。

この状況は上記の 1.2 と同じですが、これはページに入るとすぐにトリガーされます。ここでもローディング効果を示したいと思いますが、それはタイミングの問題です。

1. まず、グローバル読み込みページが開きます。データが返されない場合、関連するアクティビティ要素は表示されません。

2. 最初に初期化されたフェイクデータまたはバックアップデータを使用して基本的なフレームワークをレンダリングし、特定の場所で読み込みエフェクトを表示してデータを要求します。データが返されたら、レンダリング用のフェイクデータを置き換えます。

これら 2 つの方法には、使用シナリオも異なります。個人的には、ページ内の要素をできるだけ早くユーザーに表示できる 2 番目の方法を好みますが、インターフェイス内のデータによってページレイアウトが大幅に変更される場合は、読み込みが完了したときにページが大規模に点滅する感じがしないように、1 番目の方法を使用することをお勧めします。

1.4 データ表示

インターフェースからデータを取得した後、通常は次の 2 つの表示状態になります。

1. データがない場合、「データなし」などのプロンプトが表示されます。

2. データがある場合は、データが正常に表示されます。

たとえば、賞品リストのデータ表示では、通常、インターフェイスによって返されるデータを受け取るためにリスト変数を初期化します。

定数リスト = () => {
  定数[リスト、setList] = useState([]);

  使用効果(() => {
    // データを設定する // setList([]);
  }, []);

  戻る （
    <div クラス名="リスト">
      {リストの長さ?(
        <div className="コンテナ">
          {リスト.マップ((項目) => (
            <div キー = {item.key}> {item.title}</div>
          ))}
        </div>
      ) : (
        <div className="nothing">データなし</div>
      )}
    </div>
  );
};

インターフェース要求プロセス中にページには何が表示されますか? 「まだデータがありません」と表示されると、ユーザーには賞品が失われたという第一印象が与えられます。しばらくすると、インターフェースはデータを返し、データを再度表示します。

ここで、非常に重要な状態である「ロード状態」を見落としていました。「データなし」もプロセスではなく結果であるため、現在データがないことをユーザーに伝えるためのものです。そのため、読み込み状態として「まだデータがありません」と表示することはできません。

定数リスト = () => {
  const [ロード中、setLoading] = useState(true);
  定数[リスト、setList] = useState([]);

  使用効果(() => {
    //データを設定する//setList([]);
    setLoading(false); // インターフェイスを要求した後、読み込み状態をキャンセルし、必要に応じて結果を表示します }, []);

  if (読み込み中) {
    戻る （
      <div クラス名="リスト">
        <div className="loading">データを要求しています...</div>
      </div>
    );
  }

  戻る （
    <div クラス名="リスト">
      {リストの長さ?(
        <div className="コンテナ">
          {リスト.マップ((項目) => (
            <div キー = {item.key}> {item.title}</div>
          ))}
        </div>
      ) : (
        <div className="nothing">データなし</div>
      )}
    </div>
  );
};

2. 行動の追跡

これを何と呼べばいいのかよく分かりませんが、一般的には、何が起こったかをユーザーに伝え、ユーザーの操作を視覚化して、ユーザーの操作行動への意識と要素コンテンツの認識を高めます。

ユーザーの行動から生じる新しいインタラクションは、現在のユーザーの行動に関連している必要があります。

2.1 ボタンをクリックしてポップアップウィンドウを開きます

ユーザーがボタンをクリックすると、ポップアップウィンドウがポップアップします。ポップアップウィンドウは、ボタンの方向または位置からページ全体の中央までポップアップできます。

ユーザーは、ポップアップウィンドウがボタンに関連していると感じます。

2.2 リスト内のオブジェクトが変更された場合

たとえば、表やリストで行 (列) が追加、変更、または削除された場合、アニメーションと背景色を使用して要素を区別し、一定時間後に通常の状態に戻すことができます。

2.3 スムーズなスライド追従

CSS プロパティを追加しないと、スクロールバー領域をスライドするときに常に遅延感が生じます。つまり、ページは指と一緒にスライドし、指を離すとページのスライドが停止します。

ここでプロパティを追加します:

体 {
  -webkit-オーバーフロースクロール: タッチ;
}

3. モバイルデバイスの持ち方を考える

携帯電話の画面がどんどん大きくなるにつれて、携帯電話を片手で持つと、大きなテンプレートは左下隅または右下隅を中心とした領域でしか移動できなくなります。そのため、下部領域でのナビゲーションや、空白領域をクリックしてポップアップウィンドウを閉じるなど、下部領域での操作が増えています。

3.1 ローリングペネトレーションを避ける

スクロール可能なページでは、ポップアップウィンドウが呼び出されます。このポップアップウィンドウの内容も比較的大きく、スクロールする必要があります。適切に処理しないと、2 つの領域が同時にスクロールすることになり、ユーザーエクスペリエンスが低下します。つまり、ローリング貫通を避けます。

ここでは、最上層のみがスクロールできるように、最下層のスクロールをロックする必要があります。ここでは原理については説明しませんが、私が使用しているコンポーネント tua-body-scroll-lock をお勧めします。このコンポーネントは、次の 2 つのメソッドをエクスポートします。

1.lock: 領域をロックします。DOM 要素が渡された場合、DOM 領域はスクロール可能であることを意味します。

2.unlock: ロックを解除します。ポップアップウィンドウが削除されたら、ロックされた領域のロックを解除する必要があります。

Reactでの使い方:

使用効果(() => {
  // 本体のスクロールをロックし、ポップアップ内のみをスクロールします // このメソッドは、スクロール可能な領域を設定する必要がある場合にのみ使用されます if (props.scrollContainer) {
    ロック(props.scrollContainer);
  }

  戻り値 () => {
    (props.scrollContainer) の場合 {
      props.scrollContainer のロックを解除します。
    }
  };
}, [props.scrollContainer]);

同時に、ユーザーがポップアップウィンドウの右上隅にある閉じるボタンに手を伸ばさないように、マスク領域にポップアップウィンドウを閉じる操作を追加するのが最適です。

3.2 ネイティブ選択タグの使用

モバイル開発では、ドロップダウンボックスにネイティブの select タグを使用する場合、iOS と Android のパフォーマンスが異なります。iOS では、ドロップダウンボックスが画面の下部に表示され、スクロールしてオプションを選択できますが、Android では、ポップアップレイヤーが画面の中央にポップアップ表示され、選択を行うことができます。

便利な場合は、実際にネイティブの select タグを使用することもできます。ただし、この方法では常にページ要素から切り離されているように感じられます。可能であれば、選択タグをシミュレートしてみてください。

4. 適切なバックアップ戦略

各ユーザーのデバイスモデル、ネットワーク状態などは異なります。ページの表示異常が発生する原因は様々です。したがって、リマインダーといくつかのバックアップ戦略を提供する必要があります。

4.1 フルスクリーンの没入型ページは閉じたままにしておく必要があります

通常、モバイルアプリで開いたページの上部には白いタイトルバーが表示されます。ただし、より没入感のある体験を提供するために、一部のアクティビティページでは白いタイトルバーと右スワイプによる終了操作が削除されます。終了するには、カスタマイズされた戻るボタンをクリックする必要があります。

たとえば、このページでは、左上隅にある戻るボタンはページ自体によってカスタマイズされています。このページは、インターフェースが正常にデータを返した後に表示される必要があります。最初は、例外が発生した場合、エラーメッセージが表示されますが、戻るボタンはありません。その結果、ユーザーはアクティビティを終了できなくなり、アプリを終了して再度開始する必要が生じます。

エクスペリエンスは非常に悪いため、ここでは、フルスクリーンの没入型ページがどのような状態であっても、プロセス全体を通して閉じられたままになるようにする必要があります。

もちろん、これはもう問題ではありません。

4.2 バックエンドが常に安定していると決して信じない

バックエンドでは「フロントエンドから来るデータは信用しない」というのがよく言われることですが、これは私たちにも当てはまります。

バックエンドが常に安定しているとは決して信じないでください。

インターフェースサービスが失敗した場合の計画を立てる必要があります。

1. ユーザーが無期限に待機することを防ぐために、リクエストインターフェイスのタイムアウトを設定します。

2. 良いヒント;

3. 条件が許せば、自動的に再試行することも、ユーザーがリクエストインターフェイスを手動で再試行できるようにすることもできます。

4. ボトムアップ戦略を使用して隠蔽する。

最初の 3 つのタイプは誰でも理解できます。インターフェースに異常があり、その後の操作を続行できない場合は、サービスに異常があることをユーザーに通知し、後で再試行できるようにする必要があります。

4 番目のタイプは、通常、同時実行性の高い抽選プロセスで発生します。再試行を求められるユーザーが増えるほど、同時実行性が高くなります。そのため、抽選に異常があった場合、「サービス異常」などの言葉を使うのではなく、ユーザーに当選しなかったことを直接伝えることができます。そうしないと、一方ではユーザーの不満を招き、他方では再試行回数が多くなってしまいます。

Baidu は春節祭の紅包配布でこれを使用しました。サーバーが短時間に高い同時実行にさらされると、ユーザーに紅包を獲得できなかったことを直接伝えます。同時に、複数の賞品を同時に配布する一部の宝くじでは、3 つの賞品を同時に配布するなど、各賞品サービスがクラッシュする準備も必要です。

1. すべてのサービスは正常であり、正常に発行されます。

2. 2つが正常の場合、左右に配置された2つの賞品のみが発行されます。

3. 1 つのサービスのみが通常の場合は、賞品が 1 つだけ発行され、中央に配置されます。

4. すべてが異常である場合、ユーザーには賞品を獲得できなかったことが通知されます。

この位置には賞品があるはずなのに実際には賞品がないことをユーザーに知らせるスペースやスロットを決して残さないでください。

4.3 遅延読み込み

遅延読み込みはよく話題になります。ここでは、画像の遅延読み込みについてのみ説明します。

ページに画像が多数ある場合は、画像の遅延読み込みを使用し、画像の読み込みが失敗する状況を考慮してください。最初に画像を読み込むための Image を作成し、読み込み後にページ内の DOM 要素に渡すことができます。それ以外の場合は、フォールバック画像を使用します。

// 画像が正常に読み込めるかどうかを判定します const loadImage = (imgUrl: string): Promise<HTMLImageElement> => {
  新しい Promise を返します ((resolve, reject) => {
    const img = 新しい画像();
    テキストファイル img.src
    （画像が完全である場合）{
      解決(img)を返します。
    }
    img.onload = () => {
      解決(画像);
    };
    img.onerror = 拒否;
  });
};

// DOM 要素が可視領域に入ったときの IntersectionObserver コールバック const targetExposeCallback = async (dom: HTMLElement) => {
  オリジナルを dom.getAttribute('data-original'); にします。
  if (オリジナル) {
    試す {
      loadImage(オリジナル) を待機します。
    } キャッチ (エラー) {
      // 1x1 画像 original = 'data:image/gif;base64,R0lGODlhAQABAAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
    }
    読み込みを設定します(false);
    dom.tagName.toLowerCase() が 'img' の場合 {
      dom.setAttribute('src', オリジナル);
    } それ以外 {
      // eslint 次の行を無効にする
      dom.style.backgroundImage = `url("${original}")`;
    }
    dom.setAttribute('data-original', '');
  }
};

同時に、一部の Huawei スマートフォンでは、画像が完全に読み込まれる前に、ひび割れた画像が表示されることがわかりました。画像に alt コメントがある場合は、alt コメントも表示されます。しばらくすると、画像が完全に読み込まれると、画像が正常に表示されます。

この場合、画像の遅延読み込みを使用したり、画像を背景画像として設定して、画像が割れるのを防ぐこともできます。