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

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

この記事は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はウェブサイトの収益化を支援します

推薦する

トラフィックのコンバージョン率を高めるために広告ランディングページを巧みに設計する

インターネットの発展に伴い、オンラインマーケティングは徐々に企業のマーケティングに参入してきました。...

エッジコンピューティング市場は、モノのインターネット時代において大きな可能性を秘めている

エッジ コンピューティングとは、ネットワーク、コンピューティング、ストレージ、およびアプリケーション...

インターネット業界ではすぐに成功できるものはありません。ウェブマスターはすぐに成功しようと焦るべきではありません。

もともとこの話題について話したくなかったし、私の友人の多くは決まり文句だと思うかもしれないが、同じこ...

世界で最も急成長しているドメイン名解決プロバイダートップ10:中国に4社

IDC Review Network (idcps.com) は 4 月 29 日に次のように報告し...

hostiman: ロシアの商人、VPS、サーバー、無制限のトラフィック、月額31元から

hostiman.ru は 2009 年に設立されました。公式ウェブサイトのユーザー数は 118,7...

スターバックスはクレジットカードの販売で12億ドルを稼いだ。本当に銀行なのか?

スターバックスはコーヒーを売っているだけだと思っていたら、実は金融業界にすでに参入しており、第3のス...

Blog.com の崩壊は、またもや 10 億ドルの教訓となる (パート 2)

著者プロフィール: 林俊は、CITIC Press および Blue Lion の契約ライターであり...

過去の王朝の歌を流さないでください。タイムリーな話題を使ってユーザーを獲得してください

検索エンジンのウェブページの価値判断基準について、百度研究開発部のブログ記事「インターネットページの...

検索エンジンがSEOに与える影響

中国インターネットネットワークインフォメーションセンター(CNNIC)による2008年中国検索エンジ...

フルGCとマイナーGCの違いが分からない

[[317199]]この記事では、主に JVM のさまざまな GC を紹介し、誰もがこれらの概念を明...

ソース分析からウェブサイトのプロモーション効果を判断する方法についての簡単な説明

ソース分析は統計ツールの機能の 1 つに過ぎないことは皆さんご存知だと思いますが、この小さな機能によ...

マルチエントリーパフォーマンスストレステストのキラー:ワンストップストレステストプラットフォーム OPM の背後にあるテクノロジーを明らかにする

課題アリババの「双十一」は世界的なスーパープロジェクトとなった。このスーパープロジェクトでは、フルリ...

ウェブサイト全体のアーキテクチャの観点からウェブサイトの直帰率を下げる方法を分析する

すべてのウェブサイトには対応する価値があり、ウェブサイトの直帰率はそのウェブサイトの価値を測る基本的...

チェン・シャオジョン:ハイブリッドクラウドを導入し、オープンクラウドプラットフォームを構築する

近年、クラウドコンピューティングとビッグデータの発展が加速し、国内のクラウドコンピューティング関連企...