生産性を向上させるUIアクションのヒントIssue <!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } このドキュメントでは、UI アクションを作成/使用するためのベストプラクティスについて説明します。 UI アクションは、プロセスを簡素化し、フォームとリストでのユーザーアクティビティをガイドします。適切に設計された UI アクションを作成するには、ユーザーの視点から機能を検討し、いくつかのガイドラインを適用する必要があります。この記事では、UI アクションを設計および実装する際のベストプラクティスについて説明します。 Release<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } 全てのリリース Resolution<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } ベストプラクティスのビデオ #1：適切に設計された UI アクションを作成する。 ユーザーにとって最も可能性が高く、最も安全な選択を反映するデフォルトを使用します。プライマリアクションとセカンダリアクションが相対的な重要性を示すように適切に配置されていることを確認します。UI アクションの外観と機能がプラットフォーム全体で一貫していることを確認します。 #2：各 UI アクションに明確なアクション名を付ける。 明確で分かりやすい名前を付けます。明確なアクション名を付けることで、リストが整理され、アクションを見つけやすくなります。 #3：必要に応じて条件を適用する。 アクションの実行タイミングを制御する条件を追加します。これにより、不要な混乱を防ぎ、関連する場合にのみアクションが表示されます。 #4：ボタン、メニュー、リンクを適切に使用する。 フォームとリストでは、ボタン、メニュー、およびリンクを適切に使用します。 ボタン: 頻繁に使用するアクションに使用します。フォームごとに 4～5 個に制限します。ラベルは短くします（最大 25 文字）。リンク: ボタン名が長すぎる場合や、ボタンの煩雑さを軽減したい場合に使用します。メニュー: 管理オプションなど、使用頻度の低いアクションはメニューに配置します。 #5：ロジックにビジネスルールを使用する。 ロジックをビジネスルールに委任することで、UI アクションをシンプルに保ちます。これによりデバッグが改善され、システム内の他の場所でロジックを再利用できるようになります。 #6：スクリプトインクルードでロジックを再利用する。 複雑なロジックや繰り返しのロジックには、スクリプトインクルードを使用します。これにより、コードのスケーラビリティ、テスト性、管理性が向上します。 Related Links<!-- /*NS Branding Styles*/ --> .ns-kb-css-body-editor-container { p { font-size: 12pt; font-family: Lato; color: #000000; } span { font-size: 12pt; font-family: Lato; color: #000000; } h2 { font-size: 24pt; font-family: Lato; color: black; } h3 { font-size: 18pt; font-family: Lato; color: black; } h4 { font-size: 14pt; font-family: Lato; color: black; } a { font-size: 12pt; font-family: Lato; color: #00718F; } a:hover { font-size: 12pt; color: #024F69; } a:target { font-size: 12pt; color: #032D42; } a:visited { font-size: 12pt; color: #00718f; } ul { font-size: 12pt; font-family: Lato; } li { font-size: 12pt; font-family: Lato; } img { display: ; max-width: ; width: ; height: ; } } UI アクションの詳細： Community Live Stream - Behind the Answers - UI アクション