WeChatミニプログラム設計仕様書(3) 便利でエレガント

3. 利便性と優雅さ

PC 時代の物理的なキーボードとマウスからモバイル時代の指に至るまで、入力デバイスは大幅に簡素化されていますが、指の操作の精度はキーボードやマウスに比べてはるかに劣ります。この変化に適応するために、開発者は設計プロセス中に携帯電話の機能を最大限に活用し、便利で洗練された制御インターフェイスをユーザーに提供する必要があります。

1. 入力を減らす

携帯電話のキーボード領域は小さく密であるため、入力が難しく、入力ミスが発生しやすいため、ミニプログラムページを設計する際には、ユーザーの入力を最小限に抑えるために、既存のインターフェイスなどを使用してください。操作が簡単なオプション コントロールにより、ユーザーの入力エクスペリエンスが向上します。

入力を減らし、インターフェースを上手に活用する

たとえば、下の図では、銀行カードを追加するときに、カメラ認識 SDK インターフェースがユーザー入力を支援するために使用されています。さらに、WeChat チームは、地理的位置インターフェイスなどのさまざまな SDK インターフェイスも公開しました (詳細については、WeChat JS-SDK を参照)。これらのインターフェイスを最大限に活用することで、ユーザー入力の効率と精度が大幅に向上し、エクスペリエンスが最適化されます。 。

インターフェイスの使用に加えて、ユーザーが手動で入力する必要がある場合は、キーボード入力の代わりにユーザーが選択できるようにしてください。一方で、呼び出しは覚えやすく、通常、ユーザーは記憶入力だけに頼るよりも限られた選択肢の中から選択する方が簡単です。その一方で、モバイルでは依然として高密度の単一キー入力が重要であると考えられています。電話のキーボードは入力エラーを引き起こしやすいです。たとえば、図では、ユーザーが検索するときに検索履歴のショートカット オプションを提供すると、ユーザーは迅速に検索し、不必要なキーボード入力を減らしたり回避したりできるようになります。

2. 誤操作を避ける

携帯電話では、指で画面にタッチしてインターフェイスを制御するため、指のクリックの精度はマウスの精度よりもはるかに低いため、必要なコントロールを設計する際には、ページ上でクリックされる場合は、十分な考慮が必要です。ホットゾーン領域により、クリック可能な領域が小さすぎたり、密すぎたりすることによる誤操作が回避されます。もともとコンピュータ画面で使用されていたインターフェースをそのまま携帯電話に移植した場合、このような問題が発生しやすくなります。携帯電話の画面解像度が異なるため、最適なクリックピクセルサイズは完全に一致するわけではありませんが、物理的なサイズに換算すると、およそ 7mm ～ 9mm の間となります。 WeChat が提供する標準コントロール ライブラリでは、さまざまなコントロールがページのクリック効果とさまざまな画面への適応を考慮しているため、設計には標準のコントロール サイズを使用または模倣することをお勧めします。

3. インターフェイスを使用してパフォーマンスを向上させる

WeChat デザイン センターは、スケッチ デザイン コントロール ライブラリと WeUI 再構築コード ライブラリを含む一連の Web 標準コントロール ライブラリを開始しました。これらのコントロールはモバイル ページの特性を十分に考慮しており、その特性を保証します。モバイル ページでのユーザビリティと操作パフォーマンス。WeChat Web 開発チームも継続的に WeChat JS-SDK インターフェイスを改善および拡張し、WeChat パブリック ライブラリを提供しています。これらのリソースを使用すると、ユーザーに高速なサービスを提供できるだけでなく、ページも改善できます。パフォーマンスの向上は大きな効果をもたらし、目に見えないユーザーエクスペリエンスを向上させます。