最初の部分の概要：契約クライアント、独自のCRM-kiの再設計、Googleマテリアルスタイル、馴染みのある生息地、視聴者-経験豊富なITスペシャリスト。 誰も最初の部分と他の部分に触発されていない-私はあなたを猫に招待します。
ちなみに、Figmaを使用する場合は 、 既製の設計システムに注意することをお勧めします 。 フリーランサーが1か月あたりの注文を増やすのに役立ち、プログラマーは自分で美しいアプリケーションを作成できます。また、チーム作業用の既製の設計システムを使用して、チームが「スプリント」スプリントをすばやくリードできます。
また、深刻なプロジェクトがある場合、当社のチームは、ベストプラクティスに基づいて組織内に設計システムを展開し、Figmaを使用して特定のタスクに合わせて調整する準備ができています。 Web /デスクトップ、および任意のモバイル。 また、React / React Nativeにも精通しています。 Tへの書き込み： @kamushken
一般的に、あなたが思い出すように、私は完了したタスクとして次の写真をクライアントに公開し、回答を待ち始めました。
まず、 第一章の懐疑論者に感謝したいと思います。 私はこのプロジェクトの説明を2か月延期しています。 今、私は継続する追加の動機を持っています：私は私の決定を議論するだけでなく、あなたの疑念を払拭しなければなりません。
注意深い読者は、上記のスクリーンショットに間違いがあることに気づきました。 そしてこれは素晴らしい！ この画面はテストタスクの結果にすぎないことを忘れないでください。 この画面はシステム全体ではありません。 このレイアウトは、ユーザーの問題を解決するものではなく、何らかの最適なシナリオを提供します。 これは単なる「テスト」であり、検証のために潜在的なクライアントにテーブルで提供されます。 これは、ランダムに選択された古いシステムの画面を1つ復元することに基づいています。 原則として、この段階では、UIデザイナーがクライアントのタスクではなく、独自の推測に基づいて一部の要素/ブロック/セクションの値を設定することがあります。 これは許容範囲であり、重要ではありません。 さらに、原則として、設計者は、信仰や希望に支えられて、クライアントからのフィードバックを期待しています。
元のスクリーンショット（当時のシステムの外観）を見てみましょう。 このセクションは、テストタスクとして提案された5つから選択されました。
すぐに私を驚かせたのは、デフォルトのブートストラップ、豊富な入力フォーム、プラグアンドプレイです。 ところで、後で、「通知」ブロックがテストタスクで一般的に誤って解釈されることが判明しました。 システム内のクライアントの場合、これらは実際にこのタスクに関連付けられたタスクです！ おっと、まったく別の方法でそれらを設計しました...実際、テスト実行の段階で、この誤解は誰も気にしませんでした。 適切なクライアントは、これがまだ「ソリューションの提案」の段階ではないことを理解しています。 これは、「アプローチを示す」と呼ばれる将来の共同作業の「前」段階にすぎません。 したがって、「通知」が下にぶら下がっている理由を以前に尋ねた人は、落ち着きます...通知はまったくありません。
だから、私は観測を注文します：
デフォルトのブートストラップ。 デフォルトは個人のニーズに合わせた調整を提供できないため、これはクライアントが避けたいものです。 クライアントは通常、「今ではこのように実装されており、曲がっていることを理解していますが、少し違うようにしたい」と言っています。
入力フォームの豊富さ。 最初の章で、「非常に盛り上がっていることが判明した」と考えた人たちにとって、最悪の事態はこれからだと言います。 はい、これはChronosシステムの特異性です。各トランザクションに付随する多くのパラメーターがあります。 捨てるものはありません。 あなたはスクロールに頼ることができないため、タスクは視覚的に楽しいものではありません。
Vkladochnost。 これはシステム要件です。 Performance Labの従業員は、多くのトランザクションとクライアントを同時に実行する必要があることが多いため、それらすべてを最小限のクリックで利用できるようにする必要があります。 任意のタブを閉じることができ、左側のメニューの任意のセクションをクリックすると、新しいタブが生成されます。
そのため、会社のアナリストと協力しました。アナリストは、結局のところAndroidを好んでいたので、始めました。 アナリストは、ユーザーの要件、行動シナリオ、および問題を完全に知っていました。 彼と交流することは喜びでした。 インターフェースの設計者は、ユーザーに非常に好奇心と注意を向けるべきであり、アナリストが行動に関するすべてのデータのセットをすでに持っている場合、プロセスはより効率的に移動します。
取引
「トランザクション」セクションは、 販売ファネルという形の標準的なアプローチです。 会社の場合、顧客管理には約10段階があります。 「寒い」から「暖かい」、そして最終的には「熱」は成功した販売です。 CRM「クロノス」のこのセクションの目的は、特定の各段階でのトランザクション数を理解し、キャッシュ量を提示し、関係する従業員を示し、必要に応じて期限切れのものを強調することです。
私は現在のすべてのトレンドに従って仕事を始めました：豊富なインデント、空気の充満、そして要素のための狭いスペースなし：
その過程で、Googleマテリアルルールで提供される色に基づいて、販売のすべての段階で新しい配色を提案しました（これらのルールに従って色を選択するための便利なリソースです）。
だった
になっています
（「コールド」からセールまで、最後に不快感-取引が失敗した場合は赤、凍結した場合は灰色）
すべてのトランザクションに関する情報を表形式で表示するために、次のビュー切り替えモード（クリックによる）が提案されました。
各トランザクションは、カードの形式で提示されました。
各トランザクションの情報の送信順序は次のとおりです。最初にトランザクションの量に焦点を当てる必要があり、2番目に重要な人物がその責任を負い、その後でのみトランザクションの名前と説明を行います。 垂直の省略記号アイコンの後ろに、追加機能（保存、エクスポート、共有、ただしそれ以上の機能は必要ありません）を隠すことができます。
「目」アイコンをクリックすることで、表示パラメーターを含むポップアップを呼び出します。特定の取引段階のみを表示したり、特定の人（顧客、KAM、プリセールス）のみの取引を表示したりできます。
もちろん、右下隅にある放棄された宙ぶらりんの孤独なフローティングボタン（忘れない場合はGoogleガイドに従っています）に言及するのを忘れることはできません。 新しい取引を作成するのに役立ちます...
最初の問題
古き良き伝統によると、クライアントは最初にいくつかの重要な情報を「忘れた」。 つまり...「ところで、ここではシステムユーザーの80％がラップトップを使ってオフィスを走っています。 そして、それらはすべて1366x768の解像度です。 すべてのレイアウトをこの画面サイズに「ギャッシュ」しましょう。」 Lolstooo？！ 1300の解像度が実行されていたとき、世界はマテリアルデザインもしっかりしたインデントも、インターフェイスの「空気感」の概念も知りませんでした。
このタスクは、6段階のトランザクションをすべてのコストでこの許可に入れるように設定されました。 はい、すべての要素を押して、各ステージで4枚のカードが見えるようにします。 まあ、まあ！ 第一に、レイアウトの高さを現実的なラップトップの高さ768にカットする必要があり、第二に、カードの4行目を導入する必要があります...「開放感」に別れを告げます。 しかし、これらはシステムの機能に対する要件です。 アナリストは彼が何を言っているかを知っているので、私は現れた制限に従って行動しなければなりません。
最初の決定
モバイル版が計画されている場合、それに対して個別のアプローチがあることを確信しました。 すぐに言ってやった：
良いニュースは、左側のメニューを最小化できることです。それにより、より広い画像が表示されます。
表示パラメータセクションも絞り込んで補足する必要がありました。 なぜなら 「突然」特定の期間のトランザクションをフィルタリングおよび表示したいときに、特定の通貨範囲にあるシナリオがあることが判明しました。
（視覚的な例では、2人の顧客、2つのプリセールス、2つのKAMの人々もフィルタリングされました）
おそらくそれがどのように始まったのかを示すことは不必要ではないでしょう...もちろん、このスクリーンショットはクライアントが1920ピクセルの幅の画面から撮影したもので、より多くの情報を表示できます：
次号では、表形式のビューと「Chronos」CRM内のフォームとの相互作用について説明しました...