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

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

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

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

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

推薦する

Jsモジュールパッケージのエクスポートの使用法と違いにはインポートが必要

目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...

パーティクルダイナミックボタン効果を実現するCSS

オリジナルリンクhttps://github.com/XboxYan/no…ボタンは、おそらく We...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...

JavaScriptの擬似配列と配列の使い方と違い

擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...

MySQL 構成 SSL マスタースレーブ レプリケーション

MySQL5.6 SSLファイルの作成方法公式ドキュメント: https://dev.mysql.c...

MySQLクエリトランザクション処理へのノード接続の実装

目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...

CSS で順序付きリスト項目と順序なしリスト項目のスタイルを設定する方法

順序なしリストでは、順序なしリストのシンボルは各リストの前に表示されるドットです。順序付きリスト o...

Vue はクリックフリップ効果を実現します

参考までに、vueを使用してクリックフリップエフェクトを簡単に実装します。具体的な内容は次のとおりで...

CentOS 6.4 で rpm を使用して MySQL をオフラインでインストールする

rpmインストールパッケージを使用してmysqlをオフラインでインストールします。参考までに準備:公...

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...

jsを使用してシンプルなカルーセル効果を実現する

この記事では、シンプルなカルーセル効果を実現するためのjsの具体的なコードを参考までに紹介します。具...