検索
ホームページウェブフロントエンドhtmlチュートリアルウェブデザインを実践中!ダイヤモンド ブースの Web サイト再設計の経験を Alibaba デザイナーがまとめた_html/css_WEB-ITnose

出典: 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 サイトに統合されており、サイトのコンテンツ管理と保守がより便利になります。全体的なデザインにはまだ改善の余地がありますが、実装と適用に関しては経験が蓄積されています。ウェブサイト内のブランド認識システム。同時に、プロジェクトに参加してくださった学生の皆様にも、ご協力とご支援を賜り、誠にありがとうございました。

「アリババの上級インタラクション専門家、Liu Jin による優れた記事のコレクション」

ビジュアル デザインの下書きを完成させるにはどうすればよいですか?

『ビジュアルデザインの「初稿通過」方法〜最近遭遇した落とし穴について語る〜』

見栄えの良いデザインの違いは何ですか?

「ビジュアル デザインは単に「見栄えが良い」というだけではないことを忘れないでください。"

外国のビジュアル デザインの利点は何ですか?

「アリババ インタラクション エキスパート: 外国のビジュアル デザインの何がそんなに優れているのですか?」 》

元アドレス: mux.alimama

[Ushu.com オリジナル記事投稿メールアドレス: [email protected]]

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLを超えて:Web開発のための重要なテクノロジーHTMLを超えて:Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール