あなたが普段記入している中で、最も複雑なものは何ですか？アンケートや文書情報入力でしょうか？膨大な数のフィールドや多様な構造を持ち、入力に時間がかかるフォームの場合、どのようにデザインすればより良い体験になるでしょうか？、長いフォームのデザインのヒントをご紹介します。
直面する問題
1.操作が複雑で高機能；
私はあなたが法的な契約書や他の文書を見てきたかどうかわからない、いくつかのバスケットよりも、以下も厚いスタックを持っている、同様の文書は、オンライン構造であれば、基本的な情報の入力を完了するには、フォーム必要事項を記入するためにマンパワーの膨大な量を費やすにバインドされていると同時に、エントリの時間に起因することは確実ではない、プロセスが明確ではないので、また、フォームの完成を制限します。
2.プロセスが長く、面倒；
いくつもの異なるフォームが相互に関連しあっているため、フォームに記入する際、情報の確認のために何度も往復し、チェックと記入を並行して行う必要があり、操作が煩雑になります。
3.より多くのフィールドとより多くの関連項目；
ほぼすべてのフィールドに対応する項目があり、各ラジオフィールドの項目が異なれば内容も異なります。 同時に、フィールドの数が多いため、階層が明確に区切られておらず、フィールドに記入する人が方向を見失って混乱する可能性があります。
ソリューション
1.コンテンツのグループ化とステップバイステップの完了；
業務内容の分類に従って、色、間隔、フォントサイズ、カードの階層などを合理的に使用して情報を分類します。
2.データの損失を避けるためにリアルタイムで保存し、タスクの中断を避けるためにドラフト機能を提供します；
3.分野のグループ化、図式的構造、リンク用語のメタファー；
4.情報は自動的に取り込まれ、時間の節約になります；
一般的にフォームある機能と連動しており、複数のポータルに情報を入力することになるので、長いフォームを入力する場合、システムから自動取得できるデータであれば、それに対して自動入力することができ、ビジネスシーンに応じて修正・更新させるかどうかを判断することができます。
5.情報の誤入力を防ぐため、二次編集機能を提供します；
非承認フローに含まれる一般的な長いフォーム、無制限に二次編集させることができますが、承認フローに含まれる場合は、ビジネスシナリオに応じて編集回数を制限するか、編集ルールを制限する必要があります。
6.複数人での共同編集機能の提供；
同時に、情報の紛失や編集ミスを防ぐために、同じフォーム一人だけが同時に編集できるように制限し、送信後に他の人が編集できるようにする必要があります。
7.リアルタイム検査
フィールド入力ルールのフロントエンドリアルタイム校正、情報交換ルールのバックエンド統一校正。
たとえば、デジタル入力ボックスの検証、電話番号の検証、ID番号の検証のために、フロントエンドでリアルタイムで完了する必要があります、マウスがフォーカスの領域外または次のフィールドへの位置決めでは、エラーを記入するように促され、そうすることの目的は、その後のリビジョンの数を減らすために、長いフォームでは、エラーを記入する統一されたプロンプトが災害になります。
保存をクリックし、次のステップを入力するか、情報を送信をクリックすると、入力された情報を検証するためにバックエンドとデータを交換する必要があり、一致しない場合は、エラーが表示され、対応するエラーフィールドを上から下に検索します。
8.ガイダンス機能の記入
様々な方法でフォーム完成を導くこと。
プロセスの開始時に、フォームのビジネス目的、おおよその所要時間などを簡潔に述べます；
プロセスを埋める、最後までどこに間違って行くユーザーを教えていないことを覚えて、重要な情報は、場所にプロンプトが表示されなければならない、そうでなければ、一度エラーは、以前の作業が失われます；
記入が終わったら、次のステップに誘導するか、リストに戻ります。
9.詳細ページでは、情報の階層にも注意が必要です。
明確な構造。つまり、ページ内のすべてのコンテンツを頭でっかちに積み上げるのではなく、情報を上手に分類し、同時にページの階層計画にも気を配るということです。
クイックナビゲーションの設定フォームが長くて複雑な場合、それに対応する詳細ページも複雑で長くなってしまうので、ページの右側または上部に合理的なショートカットナビゲーションを設定する必要があります。
最後に：小さなディテール、大きな経験
1.素早くトップに戻れるボタンを設置；
もしあなたのページが長く、グループブラウジングナビゲーションがない場合、一番上に戻るボタンを設定する必要がありますが、グループブラウジングナビゲーションがあり、ホバータブの一番上にある場合、一番上に戻るボタンを使用することはお勧めしません。
2.グルーピングモジュールのロールアップ、ロールアウト機能の提供；
あるモジュールに様々な情報が混在している場合、単純なモジュールのグループ化ではその複雑さに対応できなくなるので、ページの複雑さを合理的に減らすことができる高頻度かつ情報量の多いモジュールを片付ける必要があります。
3.ステップは、情報の完成度を示します；
ステップバーは、純粋にステップインジケータとして、またはナビゲーション完了インジケータ領域として使用することができます。
4.重要な説明文は、可能な限り後退させずに表示すべきです；
フィールドの数が多いフォームに記入する場合、フォームの内容を読んで記入するのも時間と労力がかかります。もしすべてのヒントがプロンプトに隠されている場合、一般的に、ユーザーは確認しに行きませんが、ヒントを一つずつ確認しに行くと、ヒントを確認するためにクリックしたり、カーソルを合わせたりするステップが一つ増え、多くの時間が無駄になります。フィールドに直接表示してください。
5.製品内のコンポーネントが標準化されていること；
バックエンド製品では、コンポーネントの統一の仕様について、よく知られている設計原則でなければなりません、それはプラットフォームの設計コンポーネントのすべての種類であるかどうか、または各企業独自の設計コンポーネントは、製品設計の統一性と仕様を維持するために、果たすべき重要な役割を持っている、どのように統一のコンポーネント仕様の詳細については、Ant Designまたは他の設計言語であるかどうか、定義方法のコンポーネントに網羅的であるため、私はここで製品設計の理由のより高いレベルまたは深いレベルを教えています。なぜなら、Ant Designでも他の設計言語でも、コンポーネントを定義する詳細な方法があるからです：
コンポーネントの標準化は、時間と労力を節約するためだけでなく、ユーザーが使用する過程で認知統一と行動統一を達成することができるようにするため、高頻度の操作の後、インターフェイスのプロセスやコンポーネントのスタイルは、ユーザーの頭の中に大まかに固定的な印象を形成しているため、同じ種類のプロセスの操作では、ユーザーはより大きなコントロールの感覚を持つことになります、ちょうど想像してみて、あなたが人事関連のプロセスを操作している場合、コンテンツのパフォーマンス部分を記入しに行く、あなたは確かにここがエラーの場所ではないことを感じるだろうし、それが同じシステムであるかどうかさえ疑う、現在の会社の管理システムのほとんどは、何度も縫合されています。想像してみて、もしあなたが人事関連のプロセスを操作し、コンテンツのパフォーマンスの部分を埋めるために、非常に異なるインターフェイスやポップアップウィンドウを発見した場合、あなたは、これはどこのエラーではないことを感じる必要があり、さらにはこれが同じシステムであることを疑う、パッチの数の後、会社の管理システムの大半は、内部ジャンプロジックは非常に感動されている、インターフェイスのスタイルもカラフルですが、それの使用は、開始する方法はありませんし、深く戸惑いを感じます。
したがって、インターフェイスのスタイルからスペーシングのサイズに至るまで、製品設計の標準化と統一は最も基本的で不可欠な原則であるべきです。
6.大規模な情報入力で、内部では段階的に入力するフォームがあり、外部では分割して入力するフォームがあります；
複雑なフォームに対して、あなたは主な問題を解決する必要がある方法やページのデザインを埋めるためではなく、情報の階層と分割の構造は、この問題を解決するために、基本的にビジネスの問題を解決し、同じの一般的な使用とフォームの残りの部分です。
複雑さを減らすというのは、ページ上の情報を減らすということではなく、デザイナーが合理的に情報を分割することで、視覚的な複雑さやプロセスの複雑さを減らし、現在のシナリオに対する「最善の解決策」を実現するということです。
結語
インターネット情報技術の深い発展に伴い、複雑さを避けることはできませんが、私たちは皆、シンプルなデザインを尊重していることを知っていますが、それは視覚とスタイルの定義に過ぎず、むしろ情報の定義ではなく、私たちが住んでいる世界は複雑であり、業界はさらに複雑であり、情報の複雑さは日々増加しており、情報の複雑さに対処したいと考えています。
、デザイナーは、ビジネス、B 360ライン、海のように深いライン、パートナーに密接に関連している法律の複雑さから法律を求める必要があることを思い出し、一緒にゆっくりとそれを育成。
