Webデザインの経験:ナビゲーションシステムをシンプルにする

Webデザインの経験:ナビゲーションシステムをシンプルにする
<br />友人と話し合っていたとき、フレームワークのレイヤー設計の中で最も核となるのはナビゲーション設計であるという観点を述べました。最近、外国人の同僚が「ユーザビリティの 80% はナビゲーションです!」と言っているのを目にしました。優れたナビゲーションにより、ユーザーはあらゆる情報を確実に見つけることができるからです。言い換えれば、何かに到達する可能性を提供することは、それに到達する手段を提供することよりもはるかに重要です。
私は、理解を容易にするために、ナビゲーションを 1 次元、2 次元、多次元に分けることに慣れています。1 次元は線形構造に対応し、2 次元は階層構造に対応し、多次元は無秩序な構造に対応します。少し抽象的に聞こえるかもしれませんが、実際、これらはすべてよく知られたアプリケーションです。設計の意図を説明するために例を見てみましょう。
    第 1 レベル、第 2 レベル、および第 3 レベルに限定された最も原始的な 1 対多のツリーのようなアプリケーションは、「階層化ナビゲーション」であり、これは基本的に必要な要素です。 ユーザーの行動を追跡し、Web サイト上でのユーザーのアクティビティ フットプリントを記録することを「リニア ナビゲーション」と呼び、一般にブレッドクラムと呼ばれます。 管理システムの背景では、ホームページに追加された階層構造間のリンクは「順序なしナビゲーション」と呼ばれ、一般的にショートカットとして知られています。

2次元構造がある程度複雑になると、必然的にナビゲーションの深さが過剰になり、ユーザーが目的地に到達するのが難しくなります。この時点で、他のソリューションの包括的な実装を検討する必要があります。具体的な設計は次のようにまとめることができます。
何もない状態から何かある状態への蓄積プロセスでは、現在スケジュールできるすべてのリソースが消費されます。
多いものから少ないものへと順序付けし、タスクを分解して主要なタスクと二次的なタスクの手がかりを見つけ、それらを再編成するプロセス。
Flickr の改訂を振り返ると、最初のいくつかの重要なナビゲーションの変更ではバージョン コードが変更されており、Flickr がナビゲーション システムを非常に重視していることがわかります。同時に、ベータ版とガンマ版のアップグレードも私のアイデアに対応しています。ヘッダー ナビゲーション フラグメントを参照してください。
ナビゲーションシステムを薄くする
ナビゲーションシステムを薄くする
見たいものをすべて見ることができるのがベータ版の特徴です。アルファ版から継続的に機能が追加されていますが、この間にタスク分解の調整も行われています。しかし、当然ながら、量が多すぎると調整が複雑になります。 Gamma の特徴は、欲しいものは何でも手に入るが、選択するか否かの権利はユーザーに返されるという点です。
ユーザーエクスペリエンスの観点から説明すると、Beta はユーザーの認知体験を満足させ、十分に楽しくて便利です。一方、Gamma はユーザーの操作体験を向上させ、プレイしやすく使いやすいものになっています。よく比較してみると、豆班の改訂の痕跡が似ていることが分かります。
運用データがあれば、問題を簡単に明らかにすることができます。例えば、北京の交通は、北京をN個の小エリアに分割し、エリア間では地下鉄や都市鉄道などの高速交通機関を利用し、各エリア内ではバスなどの低速交通機関を利用するのが理想です。同時に、地下鉄や都市鉄道とバス停が垂直・水平に一体化しています。こうすることで、バス路線の大規模な交差を極力避けることができ(フラット構造)、受動的な圧力緩和ではなく、能動的な防止を実現できます。
資本は再建できないが、製品は完全に再建できるという事実に直面しています。

<<:  Docker で MySQL マスターとスレーブをデプロイする方法

>>:  CSS マルチカラムレイアウトソリューション

推薦する

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

CSS継承方法

次の背景画像を持つ div があるとします。 次の反射効果を作成します。 方法はたくさんありますが、...

Windows で複数の MySQL インスタンスを実行する方法

序文Windows では、各インスタンスに適切なパラメータを使用してコマンド ラインから複数の My...

Ubuntu 19でdockerソースをインストールできない問題を共有する

主要な Web サイトと個人的な習慣に従って、Docker ソースを追加するには次の方法を使用します...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文JS の this ポインターは、初心者にとって常に頭痛の種でした。今日は、これが地面に落ちたと...

MySQLでページングクエリを実装する方法

SQL ページング クエリ:背景会社のシステムには、構成管理用のプラットフォーム、いわゆる CRUD...

Dockerコンテナでyumを呼び出すときのエラーの解決方法

dockerfile またはコンテナ内で yum を実行すると、エラーが報告され、ソースが見つかりま...

MySQL データベースの基礎: 基本コマンドの概要

目次1. ヘルプ情報を使用する2. データベースの作成、削除、表示3. データベースに接続する4. ...

js Promise同時制御メソッド

目次質問背景アイデアと実装質問次のように、同時実行 Promise の数を制御するメソッドを記述する...

Node.JS で悪天候のリアルタイム警報システムを構築する

目次序文:ステップ1: 無料の天気予報インターフェースを見つけるステップ2: 天気予報インターフェー...

MySQL 8.0.13 のインストールと設定のグラフィックチュートリアル

Msyqlデータベースのインストール、参考までに具体的な内容は次のとおりです。 ①ブラウザでhttp...

Vue の高度な使用方法チュートリアル 動的コンポーネント

目次基本的な説明AST 解析レンダリング機能通常コンポーネントと動的コンポーネントの比較ファクトリ関...

HTML減量 HTMLタグを合理化してWebページを作成する

HTML4 についてHTML (XHTML ではありません)、MIME タイプは text/html...

MySQL トランザクション分離レベルの表示と変更の例

トランザクション分離レベルを確認するMySQL では、'%tx_isolation%'...

Mysqlマスタースレーブ同期の実装原理

1. MySQL マスター/スレーブ同期とは何ですか?マスター データベースのデータが変更されると、...