WeChatミニプログラムの設計仕様書(2) わかりやすく明確に

2. 明確に明確にしましょう

責任ある開発者として、ユーザーがミニ プログラム ページにアクセスしたら、ユーザーがどこにいるのか、どこに行くことができるのかを明確に通知する責任と義務があります。ユーザーに安全で快適な体験を提供するために、迷うことなく自由にページを移動できます。

1. わかりやすいナビゲーション、簡単に行き来できる

ナビゲーションは、ユーザーが Web ページを閲覧するときに迷子にならないようにするための最も重要な要素です。ナビゲーションは、自分がどこにいるのか、どこに行けるのか、どうやって戻るのかなどをユーザーに伝える必要があります。まず、WeChat システムのすべてのミニ プログラムのすべてのページには、WeChat が提供する独自のナビゲーション バーがあり、どこにいるのか、どうやって戻るのかという問題を均一に解決できます。 WeChat レベルのナビゲーションで一貫したエクスペリエンスを維持することで、ユーザーはミニ プログラムと WeChat を切り替えるときに新たな学習コストや使用習慣を追加することなく、WeChat 内でより統一されたエクスペリエンスとインタラクティブな認識を形成することができます。

WeChat ナビゲーション バー

WeChat ナビゲーション バーは、ナビゲーション バーの色を除いて、クライアントから直接継承されます。開発者はコンテンツをカスタマイズする必要がなく、カスタマイズすることもできません。ただし、ナビゲーション システムが合理的な方法で動作できるように、開発者はミニ プログラムの各ページ間のジャンプ関係を指定する必要があります。

WeChat ナビゲーション バーは、ナビゲーション エリア、タイトル エリア、操作エリアに分かれています。ナビゲーション領域は、プログラム ページのプロセスを制御します。現在、ナビゲーション バーは、下図に示すように、濃い色と明るい色の 2 つの基本色に分かれており、iOS と Android では表示方法が異なります。

ナビゲーション領域 (iOS)

ナビゲーション領域の操作は通常 1 つだけです。これは、前のレベルのインターフェイスに戻ります。開発者はそのコンテンツを定義できますが、スタイルは変更できません。

ナビゲーションエリア(Android)

通常、システムナビゲーションの左側にある操作は「ミニプログラムを終了し、WeChatに戻り、プログラムがバックグラウンドで実行されます」のみです。

ユーザーがミニ プログラムの 2 次ページに入るときは、ミニ プログラム自体で戻る操作を設計でき、ユーザーは Android システムに付属するハードウェアの戻るボタンを使用して前のレベルに戻ることもできることをお勧めします。

WeChat ナビゲーション バーのカスタム カラー ルール (iOS および Android)

ミニ プログラム ナビゲーション バーは、ナビゲーション バーの使いやすさを満たしながら、基本的な背景色のカスタマイズ機能をサポートしています。アイコン。次の色選択効果を参照することをお勧めします:

色選択スキームの例:

ページ内ナビゲーション

開発者は、独自の機能ニーズに応じて、ページに独自のナビゲーションを追加できます。また、異なるページ間でナビゲーションの一貫性を保ちます。ただし、携帯電話の画面サイズの制限により、ミニ プログラム ページのナビゲーションは、一般的なリニア ブラウジングのみを目的とする場合は、できるだけシンプルにする必要があり、WeChat ナビゲーション バーのみを使用することをお勧めします。

WeChat コントロール ライブラリは、開発者が選択できるタブ ナビゲーションを提供します。タブ バーをページの上部または下部に固定できるため、ユーザーは異なるタブ ページを簡単に切り替えることができます。クリック可能な領域を確保するために、タブ項目は 4 項目を超えてはなりません。 1 ページに複数のタブのセットがあってはなりません。

2. 待ち時間を短縮し、タイムリーなフィードバックを提供します

ページの待ち時間が長いと、ユーザーに不快感を与えます。WeChat ミニ プログラム プロジェクトが提供するテクノロジーを使用すると、待ち時間を大幅に短縮できます。それでも、読み込みと待機が避けられない場合は、ユーザーの待ち時間の嫌な気分を和らげるためにタイムリーなフィードバックを提供する必要があります。

スタートアップページのデザイン

ミニプログラムスタートアップも、ミニプログラムがWeChatコンテンツ内でブランドの特徴をある程度表示するページの1つです。

このページでは、ミニ プログラムのブランド特徴と読み込みステータスをハイライトします。

起動ページのロゴ ブランド表示を除き、読み込み進行状況インジケーターなど、ページ上の他のすべての要素は WeChat によって提供され、変更できません。開発者が開発する必要はありません。

ドロップダウンインジケーターエリア

すべてのWeChatミニプログラムページには、プルダウンされたときにWeChatによって設計された統一インジケーターエリアがあります。ブランド表示領域は、ブランド名と WeChat ミニ プログラム プロンプトで構成されます。目的は、ミニ プログラムに対するブランドとユーザーの製品認識を強化することです。

ドロップダウン マーク (iOS の暗い配色と明るい配色)

WeChat には、ここのマークに示されているように、テキストの色をカスタマイズできないことに注意してください。背景色をカスタマイズするときに、ドロップダウン マークの可視性を確保します。

ドロップダウン マーク (Android の濃淡の配色)

WeChat ドロップダウン プロンプトは、詐欺や不正行為を防止するために、ミニ プログラムの明確な所有者をユーザーに示すために使用されます。ここのロゴには、暗いソリューションと明るいソリューションの 2 つのセットが用意されています。開発者は、背景色をカスタマイズするときに、ドロップダウン ロゴの可視性を確保することに注意する必要があります。

ページ更新インタラクション (iOS)

開発者は、ドロップダウン インタラクションを通じて更新する必要があるページをカスタマイズできます。WeChat は、このタイプのインタラクション用の標準機能とスタイルを提供します。スタイルの点では、更新アイコンとドロップダウン アイコンの色がバンドルされており、暗いスキームと明るいスキームの 2 つのセットに分けられています。これらを使用する場合、開発者はヘッダー テキストの調和と統一性に注意を払う必要があります。ドロップダウン アイコンと更新アイコン。ただし、ユーザーがこのタイプのページでプルダウン操作を行うと、WeChat アプレット ページの標準の読み込みアニメーションが表示されます。開発者は独自のスタイルを開発する必要はありません。

開発者がページの上部にタブをデザインしていない場合、ページがプルダウン アクションを通じて更新されるように定義されている場合、読み込みステータス プロンプトのミニ プログラム ブランド表示領域がタイトル バーの下に表示されます。更新後のページの上部。

開発者は現在、この読み込み効果を定義できません。

開発者がページの上部にタブを定義し、そのタブの下にあるコンテンツ ページがプルダウン アクションを通じて更新できるように定義した場合、更新後に、読み込みステータス プロンプトのミニ プログラム ブランド表示領域がが上部のタブの下に表示され、現在のページのコンテンツのみが更新されます。現在、開発者はこの読み込み効果を自分で定義することができません。

ページ更新インタラクション (Android)

は、スタイルの点では iOS と同じですが、Android の更新アイコンとドロップダウン マークの色がバンドルされ、暗いソリューションと明るいソリューションの 2 つのセットに分かれています。開発者はヘッダーを使用する際、本文、ドロップダウン ロゴ、更新アイコンの調和に注意する必要があります。

WeChat ドロップダウンで誤った使用例をマークします

情報の可視性とページの使いやすさを確保するために、次の誤った使用例を避けてください。

ページ内ナビゲーション

WeChat コントロール ライブラリは、開発者が選択できる深いタブ ナビゲーション ソリューションと浅いタブ ナビゲーション ソリューションを提供します。ユーザーが異なるタブ ページ間を簡単に切り替えられるように、タブ バーをページの上部に固定する必要があります。クリック可能な領域を確保するために、タブ項目は 4 項目を超えてはなりません。 1 ページに複数のタブのセットがあってはなりません。

タブバーの選択状態はデフォルトで 100% の単色で、選択されていない状態は 60% の色になります。選択状態の色はカスタマイズできます。カスタムカラー選択では、タブの使いやすさ、視認性、操作性を維持してください。

ページ内読み込みフィードバック

開発者は、ミニプログラムでページコンテンツの読み込みスタイルをカスタマイズできます。ローカルで使用するか完全に使用するかにかかわらず、カスタム読み込みスタイルはできるだけ簡潔にし、読み込みプロセスをユーザーに知らせるために単純なアニメーションを使用することをお勧めします。図の例に示すように、開発者は WeChat が提供する統合ページ読み込みスタイルを使用することもできます。

モーダルローディング

モーダルローディングスタイルはページ全体を覆うため、具体的な読み込み場所や内容を明確に伝えることができないため、ユーザーに不安を与える可能性があるため、使用には注意が必要です。特定のグローバル操作を除き、モーダルを使用しないでください。

部分読み込みフィードバック

は、読み込まれたページで部分的なフィードバックをトリガーするように設計されており、より対象を絞った、ページの変更が少なくて済むフィードバック方法です。例:

フィードバックの読み込みに関する注意事項

• 読み込み時間が長い場合は、キャンセル操作を提供し、読み込みの進行状況を表示するためにプログレスバーを使用する必要があります。
• 読み込みプロセス中、アニメーション効果は維持される必要があります。アニメーション効果なしで読み込むと、インターフェースが動かなくなってしまったかのような錯覚を与えやすくなります。
• 同じページで複数の読み込みアニメーションを使用しないでください。

結果フィードバック

ユーザーが待っている間にタイムリーなフィードバックを提供することに加えて、操作の結果についての明確なフィードバックも必要です。実際の状況に応じて、さまざまな結果フィードバック スタイルを選択できます。ページ上のローカル操作の場合、操作領域で直接フィードバックを与えることができます。ページレベルの操作結果については、トースト、ポップアップ ウィンドウ、または結果ページを使用して表示できます。

ページ上の部分的な操作結果に対するフィードバック

ページ上の部分的な操作については、たとえば以下に示すように、複数選択コントロールをクリックする前後に、操作領域で直接フィードバックを与えることができます。共通コントロールについては、WeChat デザイン センターがコントロール ライブラリと WeUI コントロール ライブラリを提供しており、これらのコントロールは完全な操作フィードバックを使用して設計されています。

ページ上のグローバル操作結果 - トースト

このうち、トーストは軽量な成功プロンプトに適しており、1.5 秒後に自動的に消え、ユーザーへの影響が少なく、プロセスを中断するのに適しています。成功を強調する必要のないトピック。トースト フォームはエラー リマインダーには適用されないことに注意してください。

ページ上のグローバル操作結果 - ポップアップボックス

ユーザーに明確に知らせる必要がある操作結果のステータスについては、ポップアップボックスを使用してユーザーにプロンプ​​トを表示することができます。次のステップの操作ガイダンスが伴います。

ページのグローバル操作結果 - 結果ページ

操作結果が現在のプロセスの終了である場合は、操作結果ページを使用してフィードバックを提供できます。この方法は、操作が完了したことをユーザーに通知する最も強力かつ明確な方法であり、実際の状況に基づいて次のステップへのガイダンスを提供できます。

3. 異常は制御可能であり、解決策があります

タスクやプロセスを設計するとき、異常な状態やプロセスは簡単に無視されることが多く、これらの異常なシナリオは、ユーザーが最もイライラし、助けを必要とする場合が多いです。例外が発生した場合は、異常状態の設計に特別な注意を払う必要があり、ユーザーに必要なステータス プロンプトを表示し、解決策を通知する必要があります。

ユーザーが異常な状況で特定のページに留まり、行き場がなくなるという事態を防ぐ必要があります。 2.2で述べたポップアップウィンドウや結果ページは、異常状態の通知として使用できます。また、フォームページ、特にフォーム項目が多いページでは、ユーザーが修正できるようにエラー項目を明確に指摘する必要があります。

例外ステータス - フォームエラー

フォームはエラーを報告し、フォームの上部にエラーの原因を通知し、ユーザーに修正を促すエラーフィールドを特定します。