デザインガイドライン

ドロップゾーンに適切なスタイルを適用することは、ユーザーがドロップゾーンを使いやすく、発見可能にするために不可欠です。ドロップゾーンに一貫したスタイルを適用すると、アプリケーション内のどの要素が有効なドロップゾーンなのかが明確になります。以下の例では、ドロップゾーンが「光る」という視覚的なフィードバックを示さなければ、ユーザーはこのワークフローに気付かないでしょう。

推奨されるスタイルに従うことで、アプリケーションと Palantir プラットフォームの間でデータをドラッグする際に、一貫したユーザー体験を実現できます。これにより、ユーザー体験が分かりやすくなり、改善されます。独自のスタイルを適用すると、ドロップゾーンの状態の違いや最終的な動作について混乱を招く可能性があります。

次の概念に関するデザイン標準を提供しています。

1. ドロップゾーン： ドラッグペイロードをドロップする場所をユーザーに示します。
2. トースト： ドロップの成功または失敗に関するフィードバックを提供します。
3. ダイアログ： ドロップしたデータの送信先をユーザーが決定するための選択肢を提供します。

ドロップゾーン

有効なドロップ、無効なドロップ、読み込み中の3つの状態に応じてスタイルを適用することを推奨します。これらすべての状態で、ドラッグペイロードがドロップゾーン上にホバーしたときには、異なるスタイルを適用することを推奨します。

ドロップゾーンの状態

有効なドロップ

ドロップゾーンが現在のドラッグペイロードを受け入れる場合は、このスタイルを適用します。たとえば、ドロップゾーンが Gotham オブジェクトのメディアタイプを受け入れ、ユーザーが Gotham オブジェクトのドラッグを開始した場合は、ドロップゾーンに「有効なドロップ」のスタイルを適用します。

無効なドロップ

ドロップゾーンが現在のドラッグペイロードを受け入れない場合は、このスタイルを適用します。これにより、現在のドラッグペイロードに有効なメディアタイプが含まれていないため、そのドロップゾーンにはドロップできないことをユーザーに知らせます。たとえば、ドロップゾーンが Gotham オブジェクトのメディアタイプのみを受け入れ、ドラッグペイロードに text/html メディアタイプが含まれている場合は、ドロップゾーンに「無効なドロップ」のスタイルを適用します。

読み込み中

現在のドラッグペイロードを受け入れるかどうかを判断するために、ドロップゾーンで非同期処理を実行する必要がある場合は、このスタイルを適用します。Palantir プラットフォームでは、データのエンリッチメント中に読み込み中のスタイルが適用されます。

ドロップゾーンのスタイルの概要は以下を、推奨される色については Blueprint ドキュメント ↗ を参照してください。

小さいドロップゾーン

これらのスタイルは、タブバーやフォームの入力項目内のドロップゾーンなど、アプリケーション内の小さいドロップゾーンに適用します。

Copied!
1
2
3
4
5
6
7
8
.loading-small {
    background: rgba(143, 153, 168, 0.5); // gray3 50%
    border: 1px dashed #F6F7F9; // light-gray5
}

.loading-small-drag-hover {
    border: 1px solid #F6F7F9; // light-gray5
}

Copied!
1
2
3
.not-valid-small {
    background: rgba(18, 21, 24, 0.6); // 黒 60%
}

Copied!
1
2
3
4
5
6
7
8
.valid-small {
    background: rgba(24, 74, 144, 0.5); // blue1 50%
    border: 2px dashed #8ABBFF; // blue5
}

.valid-small-drag-hover {
    border: 2px solid #8ABBFF; // blue5
}

中程度のドロップゾーン

これらのスタイルは、オブジェクトカードなど、アプリケーション内の中程度の大きさのドロップゾーンに適用します。

Copied!
1
2
3
4
5
6
7
8
.loading-medium {
    background: rgba(143, 153, 168, 0.5); // gray3 50%
    border: 1px dashed #F6F7F9; // light-gray5
}

.loading-medium-drag-hover {
    border: 1px solid #F6F7F9; // light-gray5
}

Copied!
1
2
3
.not-valid-medium {
    background: rgba(18, 21, 24, 0.6); // 黒 60%
}

Copied!
1
2
3
4
5
6
7
8
.valid-medium {
    background: rgba(24, 74, 144, 0.2); // blue1 20%
    border: 2px dashed #8ABBFF; // blue5
}

.valid-medium-drag-hover {
    border: 2px solid #8ABBFF; // blue5
}

大きいドロップゾーン

これらのスタイルは、マップ全体など、アプリケーション内の大きいドロップゾーンに適用します。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.loading-inner-large {
    background: rgba(143, 153, 168, 0.25); // gray3 25%
    border: 3px dashed #F6F8F9; // light-gray5
    border-radius: 5px;
    color: #F6F8F9; light-gray5
}

.loading-inner-large-drag-hover {
    border: 3px solid #F6F8F9; // light-gray5
}

.loading-outer-large {
    background: rgba(143, 153, 168, 0.25); // グレー 25%
    border-radius: 5px;
}

Copied!
1
2
3
4
.not-valid-large {
    background: rgba(18, 21, 24, 0.6); // 黒 60%
    color: rgba(246, 248, 249, 0.6); // light-gray5 60%
}

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.valid-inner-large {
    background: rgba(24, 74, 144, 0.25); // blue1 25%
    border: 3px dashed #8ABBFF; // blue5
    border-radius: 5px;
    color: #F6F7F9; // light-gray5
}

.valid-inner-large-drag-hover {
    border: 3px solid #8ABBFF; // blue5
}

.valid-outer-large {
    background: rgba(24, 74, 144, 0.25); // blue1 25%
    border-radius: 5px;
}

トースト

ドロップしたデータのステータスに関する情報を伝えるために、以下のトーストを使用することを推奨します。これらのトーストは、Blueprint のトーストコンポーネント ↗ を使用して実装できます。

ドロップ後の読み込み中

転送されたデータでアプリケーションを更新する前に、ドロップしたデータの追加処理が必要な場合は、このトーストを表示します。これは、データを使用する前に、ドロップゾーンでデータのエンリッチメントが必要な場合に発生することがあります。データのエンリッチメント中は、読み込み中のトーストを表示します。

データのエンリッチメント後の有効なドロップ

ドロップが有効で、アプリケーションがドロップしたデータを使用できた場合は、このトーストを表示します。成功のトーストは750ミリ秒後に消えるようにします。

データのエンリッチメント後の無効なドロップ

ドロップゾーンが最初はドラッグペイロードを受け入れたものの、ドロップ後にデータを使用できなかった場合は、このトーストを表示します。このトーストは、ユーザーが閉じるまで表示したままにします。

ドロップした ID が多すぎる場合

ドロップゾーンが、ドロップされたメディアタイプのインスタンスを1個しか処理できない場合は、このトーストを表示します。その場合、アプリケーションはドロップしたデータの最初の項目のみを使用します。このトーストは、ユーザーが閉じるまで表示したままにします。

ダイアログ

ドロップした項目についてユーザーによる追加の判断が必要で、選択肢が2つ以上ある場合は、ユーザーがどのように操作すべきかを説明するダイアログプロンプトを使用します。ユースケースと意図するインタラクションに基づいて、ダイアログの本文をカスタマイズします。以下に例を示します。