通知を受け取る

UiPath Apps

UiPath Apps ガイド

ユーザー エクスペリエンスに関する一般的なガイドライン

はじめに

最初のアプリケーションの設計を開始したばかりで、デザイン エクスペリエンスがまだない場合は、アプリの設計方法に関するヘルプとガイダンスが必要になる場合があります。このページでは、アプリの構築に使用できる実用的な情報を提供します。

サンプル ファイル

You can download a predefined sample file that contains elements that you can use in your design to create useful, usable, and user-friendly web applications. Open the sample file in Apps Studio and copy-paste the elements needed for your design.

1850

最初のデザインを開始する

最初のアプリケーションを構築する前に、作業の計画を立てておくことをお勧めします。まず、以下のことについて考えてみます。

  • アプリケーションのコンテキストは何ですか?
  • ユーザーは誰ですか?ユーザーの目標、職業、または専門は何ですか?
  • 典型的な状況、または最も頻繁に発生するケースは何ですか?
  • アプリケーションの成功度をどのように測定しますか。
  • アプリケーションに期待されるプラスの効果は何ですか?

プランを作成したら、仲間と簡単にレビューして何らかの変更を加えることもできます。その後、次の手順へと支障なく進むことができます。

  1. 低頻度のシナリオとエッジ ケースを分析して、他のケースを評価します。それらを書き留めて、優先順位を付けます。
  2. 最適な結果を達成するための最適なメディアまたは形式を定義します。この手順では、ページ、Web サイト、または 1 つのページから開始するいくつかのウィザードが必要かどうかを、もう決めることができます。
  3. 競合他社の製品を調査し、特定して、それらの長所と短所を評価します。類似の問題へのアプローチ方法を評価します。
  4. アプリケーションの大まかなプロトタイプを作成します。同僚とプロトタイプについて検討することで、最適なソリューションに到達することができます。
  5. プロトタイプをテストし、フィードバックを収集します。より的確なフィードバックと改善策を得るために、プロトタイプを潜在的なユーザーと共有することをお勧めします。
  6. アプリケーションの最終バージョンの設計を開始します。

デザインの原則

使いやすいユーザー フレンドリーなアプリケーションを作成するには、多くの設計原則に従う必要があります。最適なユーザー エクスペリエンスを実現するためには、少なくとも以下の 2 つの原則に従ってください。

一貫性

  • 可能なかぎり同じフォントとレイアウトを使用します。
  • ユーザー エクスペリエンスを向上させるために、アプリケーションのページ全体でデザインの一貫性が保たれるようにします。

シンプルさ

  • ジョブの実行に必要な要素のみを使用します。
  • デザインには必要以上の要素が含まれないようにしてください。
  • すべてを明確にし、ユーザーが検索する必要がある重要な情報を見逃さないようにします。

色の使用は、アプリケーションのデザインを作成する上で非常に重要です。最適なユーザー エクスペリエンスを実現するためには、以下のガイドラインに従ってください。

  • 同じ種類の要素については、アプリケーション全体で一貫して同じ色分けを使用します。
  • 必要な場合以外は、交通信号機の色は使用しないようにします。エラーには、警告には黄色またはオレンジを使用し、進捗が順調であることを伝えるにはを使用することができます。
  • 色分けのみで情報を表そうとしないでください。色の付いたオブジェクトの横に、テキスト形式の情報を必ず追加してください。

📘

ヒント

コンテンツと背景のコントラストが十分に高くなるような、最大のコントラストを実現する色を見つけます。そうすれば、弱視または色覚異常のユーザーも、テキストや非装飾画像を判読しやすくなります。

配置

要素の配置は、成功するデザインを作成するための重要なステップです。要素の位置がきちんと揃っていることを確認してください。
[スタイル] タブで要素を横方向または縦方向に簡単に配置できます。

254

以下に、要素の例と作成手順を示します。

337
StepAction
1Open your already existing application or start a new one.
2Add a new container to your design with the following properties:
Layout: horizontal, top, left
Size: width - 100%, height - auto or blank
3Add a container inside the first one with the following properties:
Layout: horizontal, bottom, left
Size: width - 40%, height - auto or blank
4Add a label control inside the container with the following properties:
Text: Label
5Add a second label inside the container with the following properties:
Text: *
Style: color - #c2320c
6Add a new container inside the main one with the following properties:
Layout: vertical, left, top
Size: width - 60%, height: auto or blank
7Add a textbox inside the container with the following properties:
Hint text: Hint text
8Add a label inside the same container under the textbox with the following properties:
Text: This field is required
Other properties: hidden
Style: color - #c2320c

📘

注:

エラー メッセージが非表示で、エラーが発生した場合にのみ表示されることを確認します。

上記の手順を実行すると、構造と要素は次の画像のようになります。

240 617

4 か月前に更新

ユーザー エクスペリエンスに関する一般的なガイドライン


改善の提案は、API リファレンスのページでは制限されています

改善を提案できるのは Markdown の本文コンテンツのみであり、API 仕様に行うことはできません。