WeUI は、WeChat のネイティブなビジュアル エクスペリエンスと一致する基本的なスタイル ライブラリのセットです。WeChat 公式デザイン チームは、ボタン、セル、ダイアログ、進行状況、トースト、記事、アクションシートなど、ユーザーの認識をより統一するために WeChat Web ページと WeChat アプレットのデザインを調整します。WeChat weui 開発チームはアイコンやその他の要素を直接使用できます。リソース コミュニティの WeUI WeChat アプレット コンポーネント ライブラリにある次の WeUI 設計仕様とテクニックは、設計者が WeUI 製品設計を迅速に開始するのに役立ちます。
埋め込み Web ページやプラグイン アプレットを含む weui のすべてのページには、右上隅に公式アプレット メニューが表示されます。開発者はコンテンツをカスタマイズすることはできませんが、weui ページのデザインスタイルに合わせてカラーマッチングの深さを自由に選択できます。インスタント デザインでは、2 色の weui WeChat アプレット コンポーネント ライブラリを無料で直接使用できます。
1. 軽い視覚
WeUI WeChat ミニ プログラムを設計するときは、インターフェイスを可能な限り簡素化する必要があります。ユーザーが初めて WeChat アプレットをクリックしたとき、煩雑なページがユーザーの最初のエクスペリエンスに影響を与えます。ページ内に記事やクレジットなどが表示される場合は、検索を弱く表示する必要があります。したがって、検索は、元の検索ボックスから右上隅のアイコンに徐々に変更される可能性があります。検索の必要がある場合、ユーザーの通常のプレビューに支障をきたすことなく検索することができます。
2. ナビゲーションバー
WeChat のナビゲーションに関する公式要件は、ナビゲーションが明確で、簡単に行き来できることです。ナビゲーションは、ユーザーが WeChat アプリケーション内で興味のあるコンテンツを確実に閲覧できるようにするためのものです。ナビゲーションでは、ユーザーがどこにいるのか、どこに移動できるのか、元のページに戻る方法をユーザーに伝える必要があります。WeChat はミニ プログラムで統一されたナビゲーション バー スタイルを提供していません。開発者はニーズに応じて WeChat アプリケーションのホーム ページとセカンダリ ページ インターフェイスのナビゲーションを設計できます。すべての二次ページの左上隅に、前のページに戻る操作を提供することをお勧めします。さらに、全画面ジェスチャを備えた多くのオペレーティング システムでは、インターフェイスの端から右にスワイプして、前のアプレットまたは WeChat ページに戻ることもできます。
3. ポップアップ設定
WeUI ページの全体的な操作結果 - アイコン ポップアップ プロンプト アイコン ポップアップ プロンプトは軽量の成功プロンプトに適しており、プロセスを中断することなく 1.5 秒後に自動的に消え、ユーザーへの影響はほとんどありません。成功プロンプトなど、強調する必要のないプロンプト。エラー プロンプトはユーザーに明確に通知する必要があるため、このフォームはエラー プロンプトには適していないことに注意してください。そのため、フラッシュ ポップアップ プロンプトには適していません。
4. ボタン
WeChat ミニ プログラムの公式ドキュメントには、デザイナーが参照として使用できるさまざまなボタンのデフォルト スタイルが記載されています。実際のプロジェクトでのボタンのスタイル、色、状態などは、実際のプロジェクトに合わせてカスタマイズできます。Web アプリケーション設計仕様、特に iOS プラットフォーム ソフトウェア設計に精通しているデザイナーにとって、Web ユーザー インターフェイス WeChat ミニプログラム設計は理解しやすいですが、WeChat ミニプログラムのプラットフォーム特性は公式設計仕様に従う必要があります。 Web ユーザー インターフェイス WeChat ミニプログラムには、多くの不完全な機能コンポーネント、機能、およびパフォーマンスをさらに改善する必要があります。
5. カラーデザイン
マッチングするときは、最初にメインカラーを選択し、次にサブカラーを決定する必要があります。製品の特性に応じて調色目標を決定します。二次色はメインカラーを補うことはありません。通常、メインカラーを選択した後、WeUI WeChat アプレットの全体的なトーンが決定されます。ただし、二次色の使用は全体のトーンに影響を与える可能性があります。色の階層を可能な限り単純化するように努めるべきです。レイヤーが多すぎると、ユーザーの視覚効果にも影響します。
6. ステータスバー
WeChat アプレットの公式ドキュメントによると、ステータス バーは各携帯電話のオペレーティング システムに従うため、ステータス バーを設計する必要はありません。たとえば、コンテンツ領域、アプレット カプセル、ステータス バーを設計する必要はありません。デザイナーは必要に応じて Android と iOS の 2 つのステータス バー コンポーネントを使用するだけで済みます。