ウェブサイトのユーザー エクスペリエンス デザイン: 「興味深い」ナビゲーション デザイン

ウェブサイトのユーザー エクスペリエンス デザイン: 「興味深い」ナビゲーション デザイン

この記事はBaidu UEOから転載したもので、著者は@豆豆酱-です。ナビゲーションは Web デザインに不可欠な要素です。Web サイトの訪問者が必要なコンテンツを素早く見つけられる手段です。

ナビゲーションにより、Web サイトの階層が整理されて明確になり、ユーザーが情報を簡単に見つけて管理できるようになります。同時に、ナビゲーションは Web ページの上部中央、視覚的な中心領域に配置されます。適切な機能的役割を維持しながら、優れたナビゲーション デザインは Web デザイン全体の最後の仕上げとなります。

デザイナーが Web デザインのレイアウトや全体的な計画を立てる際には、ナビゲーションは常に重要な要素となります。私たちは次のことを考えます:

ナビゲーションはどのような形式をとりますか?

ウェブサイトの構造を整理し、情報を効果的に配信する機能を最大限に活用できますか?

ページ全体のデザイン スタイルを補完し、一致させることができますか?

機能性に影響を与えずに、創造的に磨き上げ、Web サイトの特徴を反映できますか?

卓越性は、Web デザイン全体の重要な部分になり得るでしょうか?

それでは、デザイナーが多くの時間と労力をかけて作成したナビゲーション デザインをいくつか紹介し、簡単に分析してみましょう。

ナビゲーションのデザインは、Web サイトの基本的なカテゴリ、属性、特性に基づいて作成されます。

ここでは、明確な特徴、ユーザーの位置付け、製品、ブランドの特徴を備えた、非システム、ポータル、その他のタイプのブランドおよび特別な Web サイトをいくつか選択しました。これらのウェブサイトでは、ナビゲーション デザインは、一般的な水平方向の長いナビゲーションや垂直方向のナビゲーションを打破し、より有意義で、面白く、遊び心のあるものにします。デザイナーがデザインの創造性と思考を存分に広げることができる「ちょっと面白い」ナビゲーション デザインです。

A. マテリアル クラス、ナビゲーションにテクスチャを追加します。

マテリアル ナビゲーションは、ナビゲーションを洗練し、ナビゲーションに意味を追加するために最も一般的に使用されるデザイン手法です。これは、特別な方向性とユーザー重視の Web サイト設計においてデザイナーが広く使用する手法です。

この高速、シンプル、直接的な設計方法により、製品の特性と設計者の創意工夫を素早く表現できます。さらに、マテリアルベースのナビゲーション デザインでは、ナビゲーションの基本形式を崩す必要がないことが多く、ナビゲーションの機能性とページ レイアウトの整然とした状態を維持できます。

そのため、Web ページ プロトタイプの固定された構造と位置の範囲内で、製品の特性を柔軟に表現できます。デザイナーは内部の素材を自由に彫刻できるため、さまざまな意味を持つナビゲーションを作成し、ページ全体の小さなハイライトにすることができます。

B. スキューモーフィズムにより、ナビゲーションが単なるナビゲーション以上のものになります。

ページを Web サイトの製品の世界に没入して統合されているように見せるにはどうすればよいでしょうか。そのためには、ユーザーの視覚体験によって、製品の機能の存在を実際に感じさせる必要があります。

現時点では、通常の固定されたナビゲーションでは、ページのデザインニーズを満たすことはできません。

商品写真がどれだけ魅力的でも、雰囲気に合わない冷たいナビゲーションでは、人々を失望させるだけでなく、ページの雰囲気を台無しにしてしまいます。そのため、ますます多くのデザインがナビゲーションを新鮮なタッチにして、Web ページや製品の雰囲気を引き立て、高めています。擬人化されたナビゲーションはカメレオンのようなものです。さまざまな配置の Web ページ デザインでは、環境の特性を捉えて適応し、環境の一部になります。

スキューモーフィック ナビゲーションは、引き出し、布切れ、木など、思いつくものなら何でも構いません。確立されたルールをすべて破り、長い正方形である必要はなく、均一なレイアウトである必要もありません。スキューモーフィック ナビゲーションは、デザイナーの独創性を極限まで高めることができます。

このようなナビゲーション デザインは、Web ページ全体で別のレベルの機能性を実現し、ユーザーの製品に対する視覚的な認識を高めるのに役立ちます。製品の詳細情報を見る前に、製品が何をするのか、どのようなスタイルなのか、どのような追求をしているのかを把握できます。ナビゲーションを単なるナビゲーション以上のものにしましょう。

C. シェイプカテゴリー、ナビゲーションデザインの形状を変更します。

ナビゲーションがどのようなものか尋ねられた場合、ほとんどの人はすぐにいくつかの基本的な形状とスタイル、つまり上部の水平バーと側面の垂直バーを思い浮かべるでしょう。高さ、重さ、色、素材が異なっていても、ほとんどのナビゲーションは基本的な境界を超えることはありません。

では、ナビゲーションは形状の「ルール」に従う必要があるのでしょうか? 答えは間違いなく「いいえ」です。ユーザーはナビゲーションの「ルール」に慣れていますが、代替ナビゲーション デザインは間違いなくユーザーに新しい視点を提供します。ナビゲーションは「規制なし」にすることもできるのです。

では、ナビゲーションのフォーム デザインを自由に変更することは可能なのでしょうか? 答えは「いいえ」です。デザイナーは、ナビゲーションの基本的な属性と用途を常に覚えておく必要があります。そうすることで、ナビゲーションがページ デザインにおける中核的な役割から切り離されることがなくなります。

斬新なデザインコンセプトと製品ニーズを持つ大胆なデザイナーであれば、大幅な調整を加えてナビゲーション デザインの形状を変更してみるのもよいでしょう。

D. 融合型、「調和のとれた進歩」ナビゲーション設計!

活発で攻撃的でスポットライトを浴びたがるナビゲーターもいれば、控えめで調和を重視するナビゲーターもいます。

一部の Web ページ デザインでは、需要指向により、製品のメイン コンテンツを強調するために、ナビゲーションをある程度弱める必要があります。

では、デザイナーはナビゲーション デザインのこの部分をどのように選択すればよいのでしょうか。単にテキストをリストするだけでしょうか。それとも、隅にあるナビゲーションを放棄するべきでしょうか。どうすれば、弱められたナビゲーションでもデザイン感覚を維持し、メイン コンテンツを強調できるでしょうか。

このとき、ナビゲーションの処理と設計は、デザイナーの全体的な状況と細部に対する制御をよりよく反映することができ、部分は全体に従うが、乱暴に扱われるのではなく、ちょうど良いものになります。弱体化はデザインが必要ないことを意味するものではなく、調和は隠れたり消えたりすることを意味するものではありません。

多くの優れたデザイン作品では、このような状況に対処する際に、通常、ナビゲーションと Web ページのメイン背景を適切に統合します。色のつながり、スタイルの感覚、背景画像の関連付け、ワイヤーフレームなど、さまざまな側面から処理してデザインすることができます。ナビゲーションを、あたかも本文の一部であるかのように自然に表示しますが、同時に、ナビゲーションを控えて、メインコンテンツに視覚的な焦点を当てるようにします。したがって、機能性は完全に維持され、ページ全体と「連携」できます。

E. 拡張カテゴリ、ナビゲーション デザインの可能性が広がります。

デザインは絶えず進化しています。ユーザー エクスペリエンスの向上、ユーザー意識の拡大、製品ニーズの多様化、デザイナーのコンセプトの継続的な探求と更新により、ナビゲーション デザインの可能性はますます広がると確信しています。次の新しいデザイン形式は、あなたと私の間で生まれるかもしれません。ナビゲーション デザインの研究と探求がさらに進むことで、ユーザーにまったく新しい視覚的および使用上のエクスペリエンスがもたらされます。

オリジナルリンク: 「興味深い」ナビゲーション デザイン http://ueo.baidu.com/?p=917

元のタイトル: ウェブサイトのユーザー エクスペリエンス デザイン: 「興味深い」ナビゲーション デザイン

キーワード: ウェブサイト、ユーザー、体験、興味深い、ナビゲーション、この記事は、Baidu、UE、ウェブマスター、ウェブサイトのプロモーション、収益化から転送されています

<<:  リンクを含むブログ記事を取得するためのいくつかの重要なポイント

>>:  Discuz! Allianceはウェブサイトの収益化を支援します

推薦する

マースマーケティングリサーチインスティテュート | Tik Tok、仮想IPの新たな楽園か?

2018年最もホットなプロジェクト:テレマーケティングロボットがあなたの参加を待っていますバーチャル...

OpenStack における稀だが便利な操作

[[207647]]序文私は 2013 年に OpenStack の作業を開始し、Pike バージョ...

Green Radishアルゴリズムの第2世代アップグレード後の外部リンク構築への対処方法

緑大根アルゴリズムは主に外部リンクの最適化を目的としており、ザクロアルゴリズムはウェブサイトのオリジ...

権威を失わずにウェブサイトのキーワードを調整するためのガイドの簡単な分析

多くのウェブマスターが、ウェブサイトのキーワードを変更したら検索エンジンによって順位が下がってしまっ...

呉俊:モバイルインターネットの次のチャンスは誰にあるのか?

著者: ウー・ジュン コンピューター科学者、Google プリンシパル エンジニア、『The Wav...

本当のネットワークマーケティングとは何ですか?

インターネット マーケティングは、特定のマーケティング目標を達成するための主な手段としてインターネッ...

ウェブサイトの最適化SEOの考え方の重要性について話す

ウェブサイトの SEO 最適化のプロセスでは、優れた SEO アイデアは、より多くのテクニックよりも...

ソーシャルショッピングガイドがタオバオを喜ばせ、不安にさせるのはなぜか?

1. アリババの「エコシステム」約4年前、アリババの上級管理職は「電子商取引エコシステム」の構築に着...

業界のウェブサイトから効果的なキーワードを合理的に抽出する方法

みなさんこんにちは。私はHongtu Internetです。数日前、エンジニアリング情報ネットワーク...

キーワードが突然100位まで落ちてしまったらどうすればいいか

このキーワードはもともと上位20位以内にランクインしていましたが、一夜にして100位以下に落ちてしま...

ブランドマーケティングプロモーションの3つのステップ:セールスポイント、解釈、制作を洗練させる!

ブランド構築は長いプロセスです。長いプロセスではありますが、方法が適切でなければ、100年かけて構築...

301リダイレクトについての説明

301 リダイレクトとは、あるドメイン名から別のドメイン名にジャンプすることを指します。同じドメイン...

SEO作業の悩みを解消する方法

ショートビデオ、セルフメディア、インフルエンサーのためのワンストップサービス人生において、どんな仕事...