ビジュアルレイアウトと画像デザインを通じてウェブサイトのユーザーエクスペリエンスを向上させる方法

現在、ウェブサイトのビジュアルレイアウトやユーザーエクスペリエンスに関するインターネット上の記事のほとんどは、海外のウェブサイトを例に挙げて海外から翻訳されたものです。海外製品は私たちのロールモデルですが、視覚的な先見性、全体的な外観、細部の面では非常に精巧で洗練されています。ただし、インターネット環境、ユーザーの使用習慣、美的習慣の面でも、中国と海外の間には大きな違いがあるため、これらの翻訳の参考価値は低くなります。

私自身もデザイナーであり、インターネット上のさまざまな側面について観察、調査、実験を行うことも好きです。多くのオンライン プロジェクトに挑戦し、多くのメリットと利益を得てきました。過去 2 年間、私は Witkey とオンライン収益プロジェクトについてさらに勉強してきました。基本的に、私はよく知られている関連ウェブサイトをすべて運営しようと努めてきました。職業病のため、ウェブサイト自体のインターフェース設計、プロセス設計などの面からウェブサイトを研究することも好きです。昨年、偶然 Duobaoqu というウェブサイトを見つけ、すぐに魅了されました。今すぐユーザー登録してください。今日は、他の収益モデルやマーケティング、ウェブサイトの他の側面については話しません。先ほども言ったように、この記事は主に私の職業病であるデザインに関するものです。私の意見では、同様のウェブサイトを見ると、Duobaoqu はインターフェースのビジュアル デザイン、UI、全体的な計画、プロセス設計、さらには画像デザインやその他の詳細の点で業界一流です。主にこの Web サイトのデザインについて、Web サイトの使いやすさ、ユーザー エクスペリエンス、コンバージョン率などのトピックを中心に説明します。さあ行こう！

1. 明確で簡潔なトップメニューのデザイン:　

明確で簡潔なトップメニューにより、ユーザーは一目でそのウェブサイトの内容を知ることができます。たとえば、Duobaoqu のトップメニューを見ると、この Web サイトではショッピング、宝探し、お金を稼ぐという 3 つのことができることがすぐにわかります。たとえユーザーが特定の機能について引き続き調査する必要があるとしても、少なくともその機能についてはすでに非常に直感的に理解しています。

これは最も重要な区分であることに注意してください。皆さんご存知のとおり、メイン事業の下にサブ事業があり、メニューについても同様です。 Duobaoqu はマウスの移動方法を使用して、基礎となる機能を直感的に表示します。

Duobaoqu には宝探しや金儲けの機能が多数あるため、それらを表示するために広い領域が必要です。おそらく視覚効果を高めるため、Duobaoqu では 60X60 の大きなアイコンが使用されていますが、メニュー領域にすべてのサブ機能を表示することができないため、右側にドロップダウン スクロール バーが追加されています。この点に関しては少し欠陥があります。前回、Duobaoqu のカスタマー サービスとやり取りしたとき、彼女はプレゼンテーション方法を変更しており、より良いプレゼンテーション効果が得られることを期待していると言っていました。

Duobaoqu の機能は実に豊富です。ウェブサイトでは、コアビジネスの表示に影響を与えずに、「+」のその他のメニューを使用しています。マウスをその上に移動すると、より豊富な機能が表示されます。メニューは目立つ位置に配置されているため、ユーザーの注目をあまり失うことはありません。プライマリーとセカンダリーのバランスが非常にうまく取れていると言えます。　

この部分も非常に巧妙で、さまざまなカテゴリの多機能コンテンツ検索とアナウンス表示機能を非常に狭いラインに統合しています。適切なドロップダウン メニューにより、多くのスペースを節約できます。

2. 簡潔で整然としたリズミカルな全体的なレイアウトと詳細:　　

フルサイズのバナー画像、スクロールスライドショーのフォーカス。ボタンにはタイトルが直接表示されるため、ユーザーは一目でタイトルを確認でき、コンテンツを表示するためにマウスを動かす必要性が減ります。使いやすさもボーナスポイント。

このようなステップバイステップと機能ガイドの図は、多くの類似のウェブサイトで見つけることができますが、Duobaoqu のデザインは優れています。シンプルで美しく、アイコンデザインの細部にまで注意を払っており、ユーザーは慎重に考え抜かれたと感じます。

左側には、最新の人気宝探し商品が表示されています。値が変わると「熱さ」アイコンの色が変わる点に注目してください。これは非常に配慮されたディテールです。右側には、ウェブサイトが推奨する最も人気のある宝探しと金儲けのアクティビティが表示されます。絵のデザイン自体は、経験豊富なデザイナーによって作られたものであることは明らかです。画像が簡潔で要点を押さえたものになっていることを確認することが重要です。シンプルで明確な情報は、ユーザーのクリックを促します。　　

ホームページのこのセクションでは、Duobaoqu ウェブサイトの 2 つの主要な機能セクションである、宝探しとお金稼ぎについて説明します。簡潔なテキストの説明の下にクリアボタンがあります。最新の関連情報が下部に動的に表示されるため、ユーザーは直感的にボタンをクリックして次のステップに進むことができます。変換とは何ですか? これが変換です。　

紹介文はシンプルに見えますが、それでもメッセージを非常に直感的に伝えています。最新の新鮮で明るい流行の写真は、ユーザーの好奇心を引き付けることができますか? 視覚的に魅力的にしてから、ビジネスを紹介するという次のステップは、最も一般的でスマートなアプローチです。シンプルですが効果的です。 Duobaoqu はこの分野の細部にも気を配っており、画像の上にマウスを移動すると、製品の詳細情報が表示されます。

列全体に広がる大きな白い要素の下に、明るい色の 3 つの個別の広告画像があることに気付きましたか。これはただの衝動的な出来事ですか? いいえ。デザインでは、白から色、全体から分割、大きなブロックから小さなブロックへのリズムを「リズム」と呼びます。インターフェースに視覚的なリズムがある場合にのみ、視覚的な疲労を解消し、ユーザーの閲覧への関心を継続的に維持することができます。簡単そうに見えますか？はい、でもうまくやるのは簡単ではありません。

コミュニティ機能は比較的重要性が低いため、Duobaoqu ではそれをウェブサイトのホームページの下部に配置しています。ユーザーが最も興味を持っているコンテンツを表示することは非常に重要です。 Duobaoqu には、「注文共有」（ユーザーが商品を受け取った後に受け取った商品を投稿する）、ユーザーの最新の「発言」（QQ の「一言発言」に似ている）、および最新の最もアクティブなユーザーが表示されます。分析してみると、注文の共有は、ユーザーが過去の注文情報を理解するように直接誘導し、ウェブサイトの完全性を示し、ユーザーが次のステップに進むように誘導する準備をすることができます。ユーザーの動向、新規ユーザーなどを表示することは、ウェブサイトの人気を示すことです。すべてのコンテンツには独自の目的があります。

多くのウェブサイトは、ウェブサイトの下部のデザインに注意を払っていません。このポジションはあまり重要ではなく、あまり注目されていないと思います。実際、あらゆる場所の細部に注意を払うことは、ユーザー エクスペリエンスを向上させる上で非常に重要です。 Duobaoquの下部に表示されるコンテンツは標準的で、類似のウェブサイトに表示されるものと似ていますが、Duobaoquはデザインにも十分な力を入れています。1. 全体的にダークグレーの色調を採用して、全体的な感覚を確保し、派手になりすぎてメインのコンテンツを覆い隠さないようにします（これは普遍的な下部であり、下部には多くのコンテンツがあるため、すべての色を使用すると、ユーザーの集中力に大きな影響を与えます）。2. 全体的に整然とした配置により、快適な視覚体験が保証されます。デザイン感覚とプロ意識が強いアイコンデザインは、ユーザーの信頼を保証します。

上記は、Duobaoqu のウェブサイトホームページのビジュアルデザイン分析です。実際のウェブサイトをご覧になりたい場合は、こちらをご覧ください。後ほど、この Web サイトの他のページのビジュアル デザインとプロセス デザインについて引き続き説明し、優れた Web サイトのビジュアル デザインがユーザー エクスペリエンスをどのように向上できるかを分析します。

（つづく）

元のタイトル: ビジュアルレイアウトと画像デザインを通じてウェブサイトのユーザーエクスペリエンスを向上させる方法

キーワード: ビジュアルレイアウト、画像デザイン、ユーザーエクスペリエンス