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

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

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

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

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

推薦する

JavaScript はフロントエンド Web ページでカウントダウンを実装します

ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は...

MySQLでテーブルを接続するいくつかの方法

MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...

mysqlはタイムゾーン関連の問題を解決します

序文: MySQL を使用すると、時間の表示が正しくない、タイムゾーンが GMT+8 ゾーンにない、...

Docker で nginx のログレベルを調整する方法

目次はじめにNginx Dockerファイル新しい会議もっと参考文献はじめに最近、アプリケーションの...

JavaScript で localStorage を使用する方法

.NET の世界に参入したい開発者であれば、何が可能なのかを知る必要があります。 .NET Fram...

CSS3はトランジション効果を実現するためにtransitionプロパティを使用する。

物件の詳細な説明transition 属性の目的は、一部の CSS プロパティ (背景など) をスム...

同じレベルの要素で Position:fixed と margin-top を一緒に使用する場合の CSS の問題

問題の説明CSS を使用して上部の固定効果を実現したいと思います。 margin-top と pos...

MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ

SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...

MySql キャッシュ クエリの原理とキャッシュ監視およびインデックス監視の概要

クエリキャッシュ1. クエリキャッシュの動作原理クエリ ステートメントを実行する前に、MySQL は...

dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

コンテナを通じてローカル パブリック IP アドレスを取得します。ローカル IP アドレスを使用して...

MySQL でデータを削除してもテーブル ファイルのサイズが変更されないのはなぜですか?

長期間稼働しているデータベースの場合、テーブルがストレージ領域を占有しすぎるという問題がよく発生しま...

MySQL での or ステートメントの使用例

1. MySQL での or 構文の使用、および MySQL 構文で or を使用する際の注意点。 ...

WeChatアプレット開発の共通機能と使用方法のまとめ

ここでは、主に小さなプログラムの開発プロセスでよく使われる、非常に実用的な機能ポイントをいくつか整理...

Linux での Centos7 ファイアウォールの基本的な使用方法の詳細な説明

1. ファイアウォールの基本的な使い方起動する: systemctl は、firewalld を起動...

Bootstrapグリッドの垂直および水平配置の詳細な説明

目次1. Bootstrap グリッドレイアウト2. 垂直方向の配置2.1 行タグの垂直方向の配置を...