表面的なウェブデザイン

表面的なウェブデザイン
<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、このサイトよりも見栄えの良いウェブサイトはたくさんあるので、具体的な理由を述べることはできません。良いと思う理由は、世界最大のサイトであり、世界レベルのデザイナーが数え切れないほどいるからです。このようなデザインは、長年の蓄積の結果です。したがって、Yahoo のデザインに共感することは、実際には権威に対する盲目的な崇拝なのです。私たちの周りには同様のウェブサイトがたくさんあります。
2004年と2005年にウェブ標準化の考え方が中国に導入されたとき、私はウェブページのコード実装を本当に気にし始めました。以前は、Fireworks と Photoshop がこれらの作業に役立っていました。知識を深めるにつれて、Web デザインは、とても軽く、エレガントで、自由で、柔軟になり得ることがわかりました。このアイデアは、テーブル レイアウトを放棄することから始まりました。今回改めてYahooのサイトを見ると、その素晴らしさが改めて実感できます。

その後、Ajax の導入により、ユーザー エクスペリエンスという用語が業界で広まり始め、Web の実践者たちは新たなブレインストーミングを開始し、Web に対する理解は見た目の良さから使いやすさへと高まりました。今回改めてYahoo!を見てみると、今まで気づかなかった細かい部分が目に見えないところで便利さを提供してくれていることに気づき、デザイナーが一生懸命考えたデザインなのだと実感します。今、私が以前 Yahoo について理解していたことを振り返ってみると、それは実に表面的なものでした。
今のところ、ユーザー エクスペリエンスに対する理解はまだ表面的です。この用語はチャーハンと同じくらい一般的ですが、実際にそれを本当に理解している人はほとんどいません。そして、私はそれがデザイン後の修正だけだと誤解していたほどです。数日前まで、「ユーザー エクスペリエンスの要素」で提案されたユーザー エクスペリエンス モデルを見ていました。このモデルでは、ユーザーのニーズ、機能、情報アーキテクチャ、ビジュアル デザインがユーザー エクスペリエンスに関係しているとされていました。この頃、ユーザーエクスペリエンスの概念が徐々に明確になっていきました。しかし同時に、Web デザインの表面的な理解も露呈してしまいます。
図を見ると問題がよくわかるはずです:
ユーザーエクスペリエンスの要素
写真から、私たちが最も気にしていたビジュアルデザインが、実は最上位レベルにあることがわかります。根底にあるユーザーのニーズ、情報アーキテクチャなどが基礎となります。基礎がしっかりしていなければ、どんなに美しいウェブページであっても、単なる装飾になってしまいます。しかし、このエリアのコンテンツは現在基本的に空白であり、利用できるのは散在した未熟な断片だけです。さらに重要なのは、これらのコンテンツは、どこにでも適用できる Web 標準の概念とは非常に異なっていることです。これらのコンテンツの存在を認識することは概念的な承認に過ぎず、他の人の方法は参考としてしか役立ちません。実際に理解を繰り返すには長いプロセスが必要であり、そうでなければ単なる空論になってしまいます。
我が国のウェブデザインと海外のウェブデザインとのギャップは、あらゆる面でかなり大きいです。しかし現時点では、最大のギャップはユーザー エクスペリエンスの最下層にあるように思われます。これには、ユーザーニーズ分析と情報アーキテクチャが含まれます。千鳥氏は、我が国と海外との格差は約 5 年だと述べました。皆さんは同意しないかもしれませんが、Case Digital Web Redesign とその 2002 年のレベルを見て、それを現在のレベルと比較すると、5 年の格差が理にかなっていることがわかります。

<<:  MySQL の高度な機能 - データ テーブル パーティショニングの概念とメカニズムの詳細な説明

>>:  Nginx 構成の実装 HTTPS セキュリティ認証

推薦する

MySQL で '%' を含むフィールドをクエリする方法の詳細な説明 (ESCAPE の使用法)

SQLのlike文では、例えば SELECT * FROM user WHERE username...

Vue-routerルーティングの使い方

目次1. 説明2. インストール3. テスト1. 説明Vue Router は、Vue.js の公式...

Docker コンテナにおける Patroni の簡単な分析

目次イメージの作成ファイル構造Dockerファイルエントリポイント関数ファイルを生成するイメージを構...

NodeJSのモジュール性に関する詳細な説明

目次1. はじめに2. 本文2.1 モジュールとは何ですか? 2.2 解決2.3、require.r...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

JavaScript で 2 次元配列を作成するためのヒント

Js での 2 次元配列の作成:まず、JavaScript は 1 次元配列のみをサポートしています...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

MySQLの誤操作後にbinlog2sqlを使用して素早くロールバックする方法の詳細な説明

序文日常の仕事や勉強では、データベースを操作するときに「不注意」によるミスを犯すことは避けられません...

MySQL UPDATE ステートメントの「典型的な」落とし穴

目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...

MySQL 5.7.10 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

メンテナンスしやすい CSS コードを書くための 5 つのガイドライン

1. スタイルシートの先頭にコメント ブロックを追加して、スタイルシートの作成日、作成者、タグ、その...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...

FlashFXP FTP クライアント ソフトウェア登録クラッキング方法

FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...

Vue はアップロードされた画像に透かしを追加する機能を実装します

この記事では、Vueでアップロードされた画像に透かしを追加する具体的な実装コードを参考までに共有しま...