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

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 コメントも表示されます。しばらくすると、画像が完全に読み込まれると、画像が正常に表示されます。

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

5. 結論

モバイル開発のプロセスでは、常に複数のソリューションが存在します。ユーザーの視点からもっと考えれば、製品のインタラクティブな体験をより良くすることができます。

上記は、JS がモバイル インタラクティブ エクスペリエンスを向上させる方法の詳細な内容です。JS がモバイル インタラクティブ エクスペリエンスを向上させる方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScriptエクスペリエンスの非同期性に対するより良いソリューション
  • Vue.js初体験 Chromeプラグイン開発記録
  • WordPress での JavaScript 読み込みエクスペリエンスを最適化するいくつかのプラグインの紹介
  • Nodejsの初期体験
  • JavaScript はテキスト ボックスのテキストエリアの単語カウントを実装してユーザー エクスペリエンスを向上させます
  • Javascript ライブラリのトップレベルオブジェクト名のユーザーエクスペリエンス分析
  • JS+CSSで実装されたインタラクティブな体験フォームページ
  • ユーザーエクスペリエンスを満たすWebフォーム効果のjs検証
  • JavaScript を使用してユーザーエクスペリエンスを向上させる

<<:  Linux は、Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決します

>>:  Linux システムが VMware にインストールされているかどうかを確認する方法

推薦する

Ubuntu での Subversion (SVN) の詳細なインストールと設定

ソフトウェア開発者であれば、Subversion に精通している必要があります。 Subversio...

Vue echarts は水平棒グラフを実現します

この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

ページネーションの例とベストプラクティス

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

CentOS7.5にHarbor1.7をインストールして設定するプロセス全体

1. 必要なパッケージをダウンロードする wget -P /usr/local https://st...

JavaScriptのモジュール性を理解する方法

目次1. ブラウザのサポート2.エクスポートモジュールのエクスポート3. モジュールをインポートする...

docker で PostgreSQL データベースをインストールして永続化する方法

Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...

SQL文でのgroup byの使用について簡単に説明します

1. 概要Group by は、by の後の規則に従ってデータをグループ化することを意味します。いわ...

Mac VMware Fusion CentOS7 静的 IP 構成チュートリアル図

目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...

JavaScript で最も高速なループはどれですか?

どの for ループまたは反復子がニーズに適しているかを知ることで、アプリケーションのパフォーマンス...

Centos6.5 の rpm パッケージから mysql5.7 をインストールするときに発生する初期化エラーの解決策

1. rzをサーバーにアップロードして解凍する rz [root@mini2 アップロード]# ta...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

Linux の netstat コマンドの詳細な紹介

目次1. はじめに2. 出力情報の説明3. netstatの共通パラメータ4. netstatネット...

経験豊富な人が、プロフェッショナルで標準化されたMySQL起動スクリプトの開発方法を紹介します。

シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...