Alibaba.comの例を使用した大規模プロジェクトの設計

多くの人がデザインについて話します：AxureまたはSketchの使用方法、サイトに含めるべき機能、製品ページを正しくデザインする方法。 もちろん、これはすべて非常に便利ですが、デザインで何が起こっているのかを完全には示していません。 インターネット上には、このレベルのプロジェクトの技術仕様の完全な例さえありません。 実際、大規模なサイトを設計するには、詳細なTKの調査、プロトタイプ作成、開発に数百時間を費やす必要があります。 この記事では、RuNetで初めて、設計のすべての段階とその結果、完全な動的プロトタイプ（150を超えるプロトタイプ）、および大きなToR（200を超える説明ページ）を示します。 世界最大の電子商取引プラットフォームAlibaba.comの類似物を設計する例により、これをすべて行います。



知識のある人々は、MVP（最小稼働製品）と何百ページものTKの害について話し始めるでしょう。 実際、この設計はMVPの作成を妨げませんが、役立ちます。 アジャイルに取り組み、MVPに移行する場合、個別に設計するか、システム全体を設計しますが、段階的に分割できます。 どんな場合でも、設計段階で何回もすべてをやり直す必要がないことが重要です。



人気の記事「 深刻なサイトの深刻なデザイン 」でデザインテクノロジーについて既に説明しました-Habréで17万回以上のビュー。 一連の記事「深刻な店舗の深刻なデザイン」もありました： パート1 、 パート2 、 パート3 、 パート4 、 パート5 、 パート6 。 この記事では、マーケットプレイスの設計について説明します。 すでに機能し成功しているサイトの類似物を作成しているため、多くの段階がないか、最小限に抑えられます。 特に、要件のコレクション、プロジェクトとクライアントの目標、対象読者とキャラクター、競合他社の研究、タスク-問題-ソリューション、マインドマップとサイト構造。 アナログをよく勉強するだけです。 原則として、利便性のために、自分でマインドマップとサイトの構造を作成できますが、それはオプションであり、この場合はそれらを使用せずに実行できます。

行動シナリオ

難しいことではありませんが、重要な段階です。 ユーザーの行動のシナリオなどが必要になります。 動的なプロトタイプと組み合わせて使用​​することで、インターフェイスとそれらの間の関係を開発するときに必然的にすり抜けるエラーを見つけることができます。 その機能と利便性をテストするには、サイト全体のエンドツーエンドのスクリプトと、個々のページごとの小さなスクリプトが必要です。



アナログを探索することでシナリオを思いつくことができるので、最も簡単です。 コピーを作成するのではなく、まだ類似しているため、オリジナルとは機能にわずかな違いがあるため、スクリプトを作成するときはこのことを忘れずに、スクリプトに独自の機能を含めないでください。

動的プロトタイプ

アナログを研究した後、プロトタイプを作成し、動的なプロトタイプを作成できます。 セクションごとに直接設計することができ、通常は多数のリンクを持つ最も重要なページとして製品カードから始まります（他のページから開始する必要がある他の種類のプロジェクトでは、Eコマースについて話している場合）。 このために、特別なAxureプログラムを使用しました。これにより、インターフェイスを設計できるだけでなく、動的プロトタイプを作成できます。これを使用しないと、設計は不完全になります。 プロジェクトは非常に大きいため、すべてのプロトタイプに番号を付けて、ネストを作成しました。 プロジェクトに何十、何百ものレイアウトがあり、そのようなネストがない場合、非常に簡単に迷子になる可能性があります。 ソースファイル自体は非常に大きいことがわかったため、ソースをいくつかの部分に分割しましたが、番号付けを保持しているため、動的なプロトタイプに移行しても、左側のページの不完全なリストと混同されないように、4つのファイルがあります。



すべてのデザイナーがダイナミクスを作成するわけではなく、独自の開発（すべての経験豊富なデザイナーが持っているダイナミクスの既製の標準インターフェイス）を使用しても、非常に面倒です。 確かに、このサイズのプロジェクトには10​​0を超えるインターフェイスが存在することを考えると、単純に静的インターフェイスを作成して完成させることは大きな仕事です。 しかし、これは単に重要な部分ではなく、優れたデザインの不可欠な部分です。 プロジェクトが大きくなるほど、接続、トランジション、ポップアップ、その他の非自明な機能が増えます。 したがって、最も経験豊富なデザイナーでさえ、すべてを念頭に置くことはできません。 動的なプロトタイプは、ユーザースクリプトを排除し、何かを忘れていないか、論理エラーがないかどうかを確認するために必要です。 スタティックのみを作成する場合、何度もデザイン、レイアウト、プログラミングをやり直し/変更します。 したがって、最初の段階でこれらすべての「バグ」をキャッチする方が、その後のリメイクに多くの時間とお金を費やすよりも優れています。



幸運なことに、ダイナミクスのインターフェイスの既製の部分だけでなく、私たちが専門とする電子商取引と市場に特化した多くの基礎もあります。 したがって、ホイールをゼロから再発明するよりも、こうしたことを行う方が簡単です。 そして、すべての開発を考慮しても、数百時間かかりました。 しかし、これは次の段階での通常の作業の鍵です。



記事の最後にダイナミクスを含むプロトタイプをレイアウトしますが、それは大きいです。 記事ではメインページのみを表示し、ダイナミクスとTKでは作業量全体を確認できます。

QA

これで、動作シナリオとともにプロトタイプの準備が整いました。 しかし、デザイナーがどのように経験したとしても、いずれにしても、彼は何かを見逃し、忘れてしまい、考慮に入れません。 これを行うために、品質管理フェーズ-QAがあります。 開発の場合、これは非常に標準的な段階ですが、設計で使用する段階はほとんどありません。 通常、レイアウトとソフトウェアはテストされますが、デザインについては考慮されません。 そして、すべてがうまくいくでしょう、しかし、私が上で書いたように、設計で犯された間違いはさらなる開発に入り、やり直される必要があります。 つまり、ミスが早ければ早いほど、プロジェクトのコストが高くなります。



品質管理方法は非常に簡単です。QAエンジニアは、広範なユーザーエクスペリエンスとドメイン知識を持ち、開発されたすべてのレイアウトを確認し、各リンクをクリックして、すべての要素を追跡します。 不明な点がある場合-デザイナーに質問します。 何かが欠けているか非論理的である場合-改訂/再設計のタスクを設定します。 インターフェイス設計の品質の内部標準が満たされていない場合、改訂のタスクも設定します。 このスペシャリストが、ミスをさらに先に進めることを許可しません。 ここで何かを見逃さず、直感的なインターフェイスを実現するために、以前に開発した同じユーザースクリプトを使用します。



後で、QAは参照条件自体を確認しますが、品質基準への準拠のため、およびすべてがToRに含まれているかどうかを確認するために、すでにこれを行っています。 このようにして、QAはこのステップに2回接続し、異なる材料をチェックします。 実践が示すように、QAはプロセスの多くの矛盾を見つけますが、出力ではプロトタイプとTKはかなりうまく機能しています。 少なくとも次の段階でのエラー、したがって変更。

参照条件

サイトとそのすべてのページの完全なプロトタイプを開発した後、技術仕様の作成を開始できます。 すべての非自明なインターフェイスレイアウトを記述する必要があります。 動的なプロトタイプがあり、すべてのボタンとリンクがクリックされますが、これでもその後の開発には十分ではないため、インターフェイスの説明が必要です。 インターフェイスの説明に加えて、ToRにはチーム全体で解決される多くの他の要件が必要です。



TKの特別な要件：

• サイトアーキテクチャ-設計者が設計
• 負荷の要件-アーキテクトとチームリーダーが取り組んでいます
• サーバーとインフラストラクチャ-システム管理者、アーキテクト、チームリーダーが作成
• 安全要件-セキュリティスペシャリストおよびチームリーダー
• SEO要件-SEOシュニックとインターネットマーケティング担当者
• 設計要件-設計者による設計
• レイアウトの要件-レイアウト設計者が取り組んでいます
• 微細分布-レイアウトデザイナー
• UML、堅牢性図-設計者とプログラマーが設計
• アクセス権の差別化-デザイナーは取り組んでいます

プロジェクトのアクセス権を持つテーブルの例：







これらはすべて、技術仕様のセクション全体です。 少なくとも1つのポイントを解決しないと、次の段階で問題が発生し、やり直す必要があります。 サイトを立ち上げた後、ある時点で落ち始めた、ハッキングされた、変更のパックがSEOに導入された、レイアウトがやり直されたなど、ほとんどの人が状況を見たと思います これはすべて、機能していない設計段階と不完全なTKの結果です。 したがって、最初に不正な実装にお金を費やし、それから損失を被り、監査と改善のための推奨にお金を費やし、最後にこの誤った実装にやり直すよりも、システムをすぐに正しく考える方がはるかに安価です。



簡単に言えば、適切な技術的タスクは、プロジェクトの成功の鍵であり、その基盤です。 作業範囲を説明するために、プロジェクトのインターフェースの説明 ： Marketplace.comインターフェースの説明を表示します 。 これは完全な技術的課題ではないという事実に注目します。 上記のブロックの多くが欠落しています。 しかし、私はさまざまな方法でさまざまなチームをやっています。特に、後の段階で上記の要件の一部に取り組んでいます。 特に、アーキテクチャはプログラミング段階で作成されており、別のドキュメントですが、設計段階でそれについて議論し、検討し始めます。そうしないと、まったく実現不可能な製品を設計することができます。 開発段階と結果を反映したドキュメントはそれほど重要ではありません。主なことはそれを忘れないことです。



もちろん、プロジェクトがすでに作成されており、上記の事項がそれで解決されていない場合-これは致命的ではありません。いつでも監査を一方向または別の方向で実施し、改善できます。 彼らが言うように、遅くなることはないよりはましだ 私たちの実践では、ほとんどすべての市場やオンラインストアに欠陥があり、それらは監査によってしばしば明らかになります。 ほとんどの場合、インターフェイスとSEOに関する問題は、このようなプロジェクトで最も重要な部分の1つです。 すべてのプロジェクトは、私が説明したものを可能な限りTKに入れるか、進化的な方法でそれらに到達します。 それとそれの両方が行われます。

Alibaba.comの設計されたアナログの例（メインページ）：

Habrは長い写真をカットするので、ダイナミクスに注目してください。



ページ：製品カード

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=1_0_0_0_items_card







ページ：サービスカード

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=2_0_0_0_service_card







ページ：お知らせ

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=3_0_0_0_obyavleniye_card_item







ページ：ホーム

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=9_0_0_0_glavnaya







ページ：ショップ

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=10_0_0_0_magazin







ページ：製品検索

»レイアウト： http : //wt9kcs.axshare.com/#g=1&p=13_0_0_0_serach_tovar







ページ：カタログ。 第3レベル

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=2_0_0_0_catalog_3uroven_items







ページ：カタログ。 第二レベル

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=3_0_0_0_catalog_2uroven_item







ページ：カタログ。 第一レベル

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=3_0_0_0_catalog_1uroven_item







ページ：カタログ。 すべてのカテゴリ

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=3_0_0_0_catalog_all_item







ページ：ヘルプセンター

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=6_0_0_0_help_center







ページ：登録。 ステップ1

»レイアウト： http : //dn4p5z.axshare.com/#g=1&p=8_0_0_0_reg_step_1







ページ：バイヤー

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=13_0_0_0_pokupatel







ページ：購入リクエスト

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=13_1_0_0_zaprosu_na_pokupku







ページ：チェックアウト

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=13_2_0_0_oformleniya_zakaza







ページ：投稿

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=13_3_0_0_soobscheniya







ページ：製品比較

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=15_0_0_0_comparison







ページ：お気に入り

»レイアウト： http : //l9d2yk.axshare.com/#g=1&p=14_0_0_0_featured







ページ：サプライヤー

»レイアウト： http : //sklpox.axshare.com/#g=1&p=13_1_0_0_postavschik







ページ：私の製品

»レイアウト： http : //sklpox.axshare.com/#g=1&p=13_3_1_0_moi_produktu_tovaru







ページ：取引

»レイアウト： http : //sklpox.axshare.com/#g=1&p=13_4_2_0_zakazu_sdelka







ページ：サプライヤーの連絡先

»レイアウト： http : //sklpox.axshare.com/#g=1&p=13_6_0_0_kontaktu







ページ：私のプロフィール

»レイアウト： http : //sklpox.axshare.com/#g=1&p=13_7_0_0_akkaunt

まとめると

この量の作業は、対象外の人を怖がらせるかもしれませんが、少なくとも一度市場や大規模なオンラインストアを設計した経験豊富なデザイナーは、すべてにはほど遠いことに気付くでしょう。 このプロジェクトでは、管理者パネルは表示しませんでしたが、これは外部Webサイトと同じくらい複雑で、個別に設計する必要があるアダプティブは表示しません（経済性のために、アダプティブはレイアウトデザイナがその裁量で行うことがよくありますが、これはあまり正確ではありません）。 具体的には、この市場は30を超えるさまざまな市場とオンラインストアを設計した専門家によって作成されたため、通信、ポップアップ、ロジックなどの要素がここで十分に開発されています。 しかし、善のためには、示されている膨大な量の作業にもかかわらず、まだ設計と設計が必要です。 つまり、このプロトタイプを「そのまま」使用して使用することはあまり適切ではありません。



多くのプロジェクトはまだ設計なしで実行し始めています。 プロジェクトマネージャーまたはデザイナーによる。 これは無限の変更と莫大なお金の浪費の道です。 私は個人的にいくつかのプロジェクトを立ち上げ、他の皆と同じように、かつてデザインなしでやろうとしました。 そのような実験の後、私はよく「安いものを買うのに十分な金持ちではない」という良いフレーズを思い出しました。このフレーズは、デザインの有無に関係なく完璧に意味があります。 一方で、行われた作業の量を知っていると、設計が高すぎるようです。 一方、設計せずに大きくて複雑なものを実行しようとすると、完成したものを作り直すために何倍ものお金と時間を費やすだけです。



PSこのプロトタイプのソースが必要な場合は、お問い合わせください。 あらゆるテーマに合わせて作り直し、完成させることができます。 連絡先はこちらにあります 。



PPS私たちの学校にはデザインコースがあります。このコースでは、次のようなプロトタイプの作成方法を教えます 。 11月に新しいグループが始まります。



PPPS新しい記事を他の記事よりも早く受け取るか、単に新しい出版物を見逃さないようにするために-Facebook、 VK 、 TwitterのSECLグループファンページを購読します。



投稿者

ニキータ・セメノフ

CEO

会社「 SECLグループ 」