ウェブデザインを実践中！ダイヤモンドブースの Web サイト再設計の経験を Alibaba デザイナーがまとめた_html/css

出典: http://www.uisdc.com/diamond-booth-redesign-share

Alimama MUX: 2015年10月末にダイヤモンドブースのオリジナルサイトのリニューアル・リニューアルが完了しましたが、今回のリニューアルでの納品実績を総合的に整理・蓄積していきます。 Alibaba デザイナーがアイデアを見つける方法/視覚的な階層を最適化する方法/カラーマッチングを選択する方法などを知りたい場合は、ぜひ参加して学んでください。

新しいバージョンのアドレスは http://zuanshi.taobao.com/ です。どなたでもクリックして閲覧していただけます。

1. 背景

ダイヤモンドブース製品の公式ウェブサイトの需要レベルでの改訂は、主に製品の方向性の部分的な変更に基づいており、製品および運用コンテンツの追加が必要です。そして豊かになった。同時に、ユーザーとウェイターのフィードバックを組み合わせて、古いバージョンに基づいてエクスペリエンスが最適化され、サイトのコンテンツ管理とメンテナンスがより便利になります。さらに、2015年のAlimamaブランドのアップグレードに伴い、ブランドコンセプトとブランドアイデンティティをWebサイトに自然に統合する必要があります。

2. 全体的なデザインの方向性

2.1 サイト全体の統一されたアイデア

すべての Alimama Web サイトには、Alimama 公式 Web サイト、その製品 Web サイト、トレーニングおよび顧客向け Web サイトが含まれます。サービスおよびその他のサービス類似サイトのサポートなどダイヤモンドブースは製品 Web サイトの 1 つであるため、共通の問題を解決するためにサイト全体の観点から設計を最適化する必要がありますが、同時にビジネスの特性に基づいて個別の問題を解決する必要があります。

Diamond Booth Web サイトの共通の問題には、サイト構造とサイトコンテンツの編成、ブランドアップグレード後の全体的なビジュアルスタイルの最適化と統一、およびサイトのワイヤレス対応計画などが含まれます。

個人的な問題には、さまざまな製品の利点を探求し、正確な創造性を通じてそれらを表示することが含まれます。さまざまな製品にはさまざまなレベルの運用コンテンツが含まれており、デザインパターンやプレゼンテーションにおいて洗練された思考が必要です。共通の問題には、ブランディングガイドライン、デザイン仕様、ページが含まれます。サイトのホームページ、製品紹介ページ、ケースの組み合わせページなど、比較的成熟した経験と蓄積のある、問題を解決するためのテンプレートが仕様に基づいて、それぞれの実際のニーズに合わせて調整されます。製品ページは、柔軟性を損なうことなく統合された、カスタマイズされたオープンプランです。 (図 2.1)

(図 2.1: サイト全体の統一したデザイン案)

2.2 商品興味点の発掘とクリエイティブ開発

として商用製品公式 Web サイトには主に 3 つの主要なコンテンツが含まれています。 1. 製品オペレーティングプラットフォームのログイン入口。古いユーザーが最も頻繁に使用するモジュールでもあります。 2. 製品の特典や詳細な紹介は、ユーザーが製品を理解するための正式な方法です。新規ユーザーに製品の使用を促し、誘導するためのメリットポイントとして機能します。定期的な更新とメンテナンスを通じて、新規ユーザーと古いユーザーがサポートを受けるのに便利です。

ダイヤモンドブースの今回の Web サイト改訂では、ログインポータルに加えて、2 番目と 3 番目のセクションについても徹底的に検討し、最適化を行いました。まずは特典ポイントの伝達について説明します。いわゆるベネフィットポイントは、ユーザーに最も印象を与える製品の価値とセールスポイントであり、正確なベネフィットポイントはユーザーの要求と非常に一致しています。

コピーライティングに関しては、ユーザーが基本的にストーリーの内容を一目で理解できるように、読みやすく覚えやすく、人気があり、簡潔である必要があります。コピーライティングは人間の言葉を話す必要があり、過去の冷たく空虚な言葉を捨てる必要があります。

クリエイティブの観点から、商品や運営との議論を重ね、ダイヤモンドブースの核となるメリットは「精密なブランドマーケティング」であると判断しました。いわゆる「精密ブランドマーケティング」とは次のようなものである。まず、ダイヤモンドブースの他の製品との差別化の最大の目玉はブランドである。ここで言うブランドとは、売り手がダイヤモンドの展示会を通じて広告を掲載し、単一の商品を宣伝するのではなく、全体的な情報を伝えることを意味します。ブランド、店舗、または特定の季節のイベントなどです。

要約すると、夜空の星はインターネット世界の無数のオンラインストアのメタファーとして使用され、ダイヤモンドはメタファーにあることが最終的に決定されました。ダイヤモンドブースを使用した後に目立つ店舗の比喩。

ホームページのバナーは、色調の点で手描きの方法を採用しており、人生志向でエネルギッシュで温かいAlimamaサイトの気質の中で、Diamond Exhibition独自のブランド気質の人間性も強調しています。

(図 2.2: スケッチ設計段階)

(図 2.3: バナーデザインの最終製品)

2.3 操作情報カテゴリページの最適化

2つ目は、運用トレーニングや情報のホスティングの最適化設計です。このタイプのページは通常 2 つのレベルに分かれています。最初のレベルはコンテンツコレクションページで、さまざまなコンテンツ情報を収集し、ユーザーが興味のある記事を閲覧して見つけることができます。 2 番目のレベルは記事の詳細ページで、ユーザーはここを注意深く読むことでヘルプを得ることができます。

最初に最適化するのは、コンテンツコレクションページの情報伝達容量を増やすことです。つまり、ページをめくったり、複数レベルのページを使用したりせずに、1 つのページに複数の記事を表示できます。ユーザーが 1 ページの閲覧でターゲットを見つけられるようにします。これにより、元のマルチレベルで混乱を招く状況がアーキテクチャレベルで最適化され、ユーザーが記事を見つけて読むステップが 2 ステップに短縮されます。 (図 2.4)

(図 2.4: 左の図は新しいデザイン、右の図は古いテンプレートのデザイン)

古いデザイン: の情報効率ページの厚みが少ないため、情報が多く、情報を分類する必要がある状況には適していません

新しいデザイン: 表示効率が向上し、優先順位の並べ替え、視覚的な階層とレイアウト、コンテンツのスケーラビリティに関する考え方が洗練されました。第 2 に、単一ページのデザインには、優先順位の並べ替え、視覚的な階層とレイアウト、将来のコンテンツのボリュームが必要です。スケーラビリティについてはさらに考慮されます。全体的な情報を豊富にしながらも、混乱を招かないようにします。「学びたい」ケースは、コンテンツの焦点と新旧ユーザーのさまざまな側面に基づいてモジュールに分割されています。同時に、コンテンツのスケーラビリティを考慮して、一部のモジュールは仮想空間を使用し、ページ内を更新して情報伝達容量を増やします。

最後に、サイトコンテンツの有効性を確保するために、古いコンテンツや期限切れのコンテンツを定期的に削除する必要があるコンテンツ管理システムを確立することをお勧めします。定期的なコンテンツの管理とメンテナンスにより、ソースからの Web サイトコンテンツの品質と有効性を確保できます。

2.4 サイト全体のワイヤレス化

15 年間のブランドアップグレードを経て、Alimama の公式 Web サイトからさまざまな製品 Web サイトに至るまで、Web サイト部分のワイヤレス化を段階的に実装してきました。それぞれのケースを通じて、私たちは経験を蓄積し、ワイヤレス適応ソリューションを改善し続けます。

最初に考慮すべきことは、ワイヤレスデバイス上でのフルサイトナビゲーションおよびログインシステムの適応です。フルサイトナビゲーションは、Alimama の公式 Web サイト、製品 Web サイト、トレーニングやカスタマーサービスなどのサービスサポートサイトを経由する Web サイトマップとして機能します。 Web サイトマップを通じて、ユーザーは Mama の公式 Web サイトからその製品やプラットフォームのいずれかにジャンプしたり、その製品やプラットフォームのいずれかから Mama の公式 Web サイトに戻ることもできます。ウェブサイトのマップは、Alimama のブランド構築の初期段階で、ユーザーに完全な理解を与える上で重要な役割と重要性を果たします。

当社のブランド構造によれば、サイト全体のナビゲーションは 1 と 2 の 2 つのレベルに分かれています。 PC モードでは、第 1 階層と第 2 階層のナビゲーションが比較的十分なスペース配置になっており、カーソルを合わせてドロップダウンメニューを表示することで、ナビゲーション内の階層関係も表示できます。

ワイヤレス側ではホバー動作が存在しないため、モバイルページでマルチレベルナビゲーションを明確かつ合理的にする方法を検討する必要があります。 H5ページのナビゲーション方法については、最終的にドロワー原則を採用し、サイト全体のナビゲーションを上部のメニュー項目に格納し、第1レベルと第2レベルをタイルで表示しました。ログインの動作原理は上記と同じです。サイト独自のレベルのナビゲーション (第 3 レベルのナビゲーション) がページ上に直接表示されるため、ユーザーは簡単に素早く切り替えることができます。 (図 2.5)

(図 2.5: 無線適応ソリューション)

2.5 軽量化と実装コストの削減

無線端末の設計プロセスでは、コンテンツを合理化しながら、読書コンテキストでの没入型アプローチを考慮しながら、ワイヤレス端末を意図的に軽量化します。

コンテンツ情報の統合と簡素化: 一部のページを PC からワイヤレスに合理化しました。運用情報カテゴリを例として、有効性に基づいてページ数の制限を設定します。古いコンテンツは、ワイヤレスシナリオのユーザーに干渉する可能性があることを考慮してください。

没入型エクスペリエンスの終了: 記事詳細ページでは、マルチレベルナビゲーションが削除され、戻る操作のみが保持され、ユーザーに没入型の読書環境が提供されます。

フロントエンドの実装コストを削減するために、ワイヤレスに適応する目的は、Alimama を理解し、ワイヤレスデバイスを介して不規則な時間に関連情報を読み取るというユーザーのニーズを解決することです。したがって、全体的な対応計画を迅速に適応させ、簡単に実行する必要があります。現在、PC とワイヤレスに対して 2 つの重要な値のみが提供されています。また、弾性のある画像は控えめに使用してください。ホームページのバナー領域などの主要なモジュールでは、キーポイントに焦点を当てるために弾性画像 (画像は異なるブレークポイント比率で階層化されています) が使用されますが、他の領域では基本的に比例スケーリング適応と適切なトリミングメカニズムが使用されます。

(図 2.6: コンテンツ情報の統合と合理化)

(図 2.7: 軽量かつ没入型)

3.ビジュアルスタイルのアップグレード

Alimama のウェブサイト全体のブランド認識システムの改善に伴い、ダイヤモンドブースの改訂は、ウェブサイト上でのブランド認識システムの実装と適用の機会となりました。したがって、この改訂デザインでは。 , フォローする画像、カラーパレット、イラスト、アイコン、フォント、その他のモジュールを含むブランドの仕様とスタイルを定義し、生命力、活力、暖かさのあるAlimamaブランドの気質を作成します。同時に、今号ではマザーマスコットも徐々に合理的にデザインに組み込まれています。

(図 3: ビジュアルスタイルのアップグレード)

3.1 標準継承

複数の製品ブランドの場合、統一されたブランドイメージとスタイル重要なのは、Alimama のオリジナルのベーシックスタイルの考え方は比較的成熟しており、何度も洗練されています。ダイヤモンドブースの再設計されたデザインは、以前の視覚的なレイアウト、グリッド、コンポーネント、モジュールなどを継承しています。通気性のあるデザイン思考は常にコンテンツが王様であり、合理的なスペースの組み合わせを通じて、情報の階層を作成し、視覚的なノイズを最大限に削減します。

3.2 ビジュアル言語のアップグレード

15 年間のブランドアップグレードにより、ウェブサイトのビジュアル言語は元の詳細にさらに基づいて、新しいブランドアイデンティティシステムのさまざまな点が統合されています。そして徐々にページデザインに実装していきます。

1 つ目はグラフィックデザインです。ページ内のグラフィックデザインの役割は、テキストの核となるハイライトを抽出し、紹介文の理解を助けることです。 (図 3.1)

コンテンツに関しては、グラフィックデザインコンテンツは、コピーライティングとより正確に一致させることができるように、1 つのコア要素と 1 つまたは 2 つの補助要素の組み合わせ方法を採用しています。

グラフィックの観点から見ると、この作品は平坦性、オブジェクトの光の模倣、一次直角度、二次真円度の原則に基づいています。

(図 3.1: グラフィックデザイン) 次に、カラーマッチングの基本原則は、ダイヤモンドブースのブランドカラーを抽出した後、全体的なブランド仕様に基づいて比較します。ブランドカラーパレットには、ダークカラー、コントラストカラー、ニュートラルカラーが選択され、Diamond Exhibitionブランドカラーパレットを形成します。トーンコントロールでは、比較的控えめで整然としたトーンが採用されています。具体的には、

ダイヤモンド展示会のブランドカラーは、寒色系の色が比較的多く含まれています (図 3.2)

中間色です。色;

コントラスト色と暗い色は視覚的な調整リズムの役割を果たすため、比較的まれです。

各画像要素には最大 2 色が含まれます。

(図 3.2: カラーマッチング)

このビジュアル言語アップグレードのもう 1 つのハイライトは、この号の改訂版に Alimama の新しいマスコット画像が組み込まれていることです。細部まで徹底的に浸透します。

(写真 3.3: マスコット公開)

4. 概要

ダイヤモンドブースのこのアップグレードと改訂により、ブランドコンセプトとブランド認知度が統合されます。古いバージョンに基づいてエクスペリエンスを最適化するために Web サイトに統合されており、サイトのコンテンツ管理と保守がより便利になります。全体的なデザインにはまだ改善の余地がありますが、実装と適用に関しては経験が蓄積されています。ウェブサイト内のブランド認識システム。同時に、プロジェクトに参加してくださった学生の皆様にも、ご協力とご支援を賜り、誠にありがとうございました。