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

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

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

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

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

推薦する

Linux の cut コマンドの説明

Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...

入力ボックスの値を取得する方法のReactの例

入力ボックスの値を取得する複数の方法最初の方法は、制御されていないコンポーネントの取得です2番目の方...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

MySQL 5.7.20 共通ダウンロード、インストール、設定方法と簡単な操作スキル(解凍版無料インストール)

早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...

MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

実行中の時計を実装するための純粋な CSS3 コード

操作効果コードの実装html <div id="ウォッチ"> <...

Alipay の Java 決済インターフェースを開発するための詳細な手順

目次最初のステップステップ2ステップ3ステップ4 Alipay 決済インターフェースへの接続に関する...

CSS3でシャトル星空のアニメーションを実現

結果: html <canvas id="スターフィールド"><...

JavaScriptはクリックトグル機能を実装します

この記事の例では、クリックして切り替える機能を実装するためのJavaScriptの具体的なコードを参...

Linuxフラッシュのインストール方法

Linuxにフラッシュをインストールする方法1. Flashの公式サイトにアクセスし、ダウンロードを...

Linux での nginx のインストール、展開、使用方法の詳細な説明

目次1. ダウンロード2. 展開3. Nginxログ関連の設定4. ファイルダウンローダーとして n...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...