Webデザイン: スクリプト素材でユーザーエクスペリエンスを再構築

Webデザイン: スクリプト素材でユーザーエクスペリエンスを再構築
<br />原文: http://blog.rexsong.com/?p=1166
ウェブサイトをデザインする人の主な経歴は、コンピューターサイエンスを学ぶ人とアートを学ぶ人の 2 つです。基本的に、コードを書ける人はデザインを理解しておらず、デザインできる人はコードを理解していません。このパターンは今日まで変わっていないようです。コンピュータサイエンスを学ぶ学生の中には、独自の美的センスを持っていて、見栄えの良いウェブサイトを作れる人もいますが、芸術を学ぶ学生は一般的にコードを理解するのが難しいと感じています。私はかつて、友人の家庭教師をするために望京CAFA寮に行ったことがあります。
フォーラムは技術の促進に重要な役割を果たしてきました。2003 年、私は Blue Classic の古い投稿を毎日読んでいました。2004 年と 2005 年は、主に Wuyou Script と China XML Alliance にいました。ChinaUI には技術的なコンテンツがあまりないと思いますし、私はアーティストではありません。
Wuyou ForumのモデレーターであるYueeyingさんは、すでに本を出版しています。時が経つのは早く、誰もがより速い進歩を遂げています。スクリプトを使って注目を集める<br />Webデザインを始めた頃、幸運にもページを完成させることができました。インターネット上の作品に影響を受け、次第に目を引く様々な特殊効果を追求するようになりました。なぜなら、私はそれが本当にクールだと思ったし、実際、2001年当時、脚本を書ける人は高給取りだったからです。
当時、私はさまざまな製品サイトを訪問する際に、華やかなデザインや派手なスクリプトに頼っており、シンプルさという概念を持っていませんでした。その後、インターネットが成熟するにつれて、「目を引くサービス」を提供する技術系ウェブサイトが自然と多く誕生し、心優しい人たちがインターネット上のさまざまな奇妙なものをカテゴリー別に整理しました。私たち愛好家は、自分のサイトで使用できる適切なものがないか毎日探しています。
私がかつてやっていたのは、各ステーションのさまざまな生鮮品をじっくりと見て、お気に入りを使って整理し直すことでした。最も典型的なのは「XX 最もよく使われる Javascript のクラシックテクニック」という記事で、シンプルで使いやすく、効果抜群のスクリプトが数十個リストされています。わからなくても簡単に使えます。このコードが何に使われるかを覚えておけば大丈夫です。2002年に流通したようです。材料はデザインの価値を低下させる<br />材料を使用する目的は、効率的な運用と大量生産を実現することですが、必然的にデザイン品質の低下と均質性の深刻な問題につながります。当時は、あらゆるデザインウェブサイトでクリスタル風のボタンや韓国風のグラフィック装飾が多数見られました。
より迅速な生産とより直感的な顧客の選択を可能にするために、韓国、ヨーロッパ、アメリカのスタイルのテンプレートが多数作成されています。インターネット上にはスクリーンショットやテンプレートを転売するビジネスマンが多数存在します。彼らはこれで少しの利益を得ている一方で、デザイン業界に大きな損害を与えています。
美しい素材って、一度観るのはいいけど、何回か観ると飽きてしまうものが多いです。一番困るのは、みんなが持っているものなので、どこから見ても見慣れた作品なので、あっという間に風のように通り過ぎてしまうことです。まるで当時のウェブマスターの風の強い日の突風のようです、ハハ。
2003 年以来、一部のネットユーザーが、インターネット上の優れた Web サイトのスクリーンショットを収集して整理したスクリーンショット ライブラリを公開しています。その後すぐに、同様のサービスに特化したウェブサイトが登場し、ほぼ同時期に海外でもショーケースサイトが数多く登場しました。復興革命<br />そのとき初めて、以前の本に書かれていた「div を使いすぎるのはお勧めできません」というのはデタラメだということに気付きました。学ぶには、より成熟した作品を研究するのが一番です。そのとき初めて、私はウェブサイトのインターフェースデザインの概念的な紹介を受け、少なくとも構造、表現、動作について知ることができました。
最も重要なことは、コードをリファクタリングしながらデザイン スタイルの変更を促進することだと私は考えています。海外のウェブサイトがなぜいつも簡潔なのか気づき始めました。 CSS で書かれたページがなぜ簡潔なのでしょうか?ウェブサイト再構築の発展を促進したのはWeb2.0だと考える友人もいます。
コード リファクタリングを行う学生は、基本的に標準化からミニマリズム、そして柔軟性へのプロセスを経ていきます。前回、ExtJS コードを解析したところ、その効果は素晴らしかったのですが、構造が非常に複雑で、CSS だけで 50 万を超えるサイズになっていました。ユーザーエクスペリエンスに続いて、専門フォーラムで最も話題になったトピックは、基本的にソフトウェアに関連するUIとGUIになりました。たとえば、ChinaUIもこの文脈で設立され、後のUIGardenもその1つです。彼らが言ったことは私には理解できないか、非常に単純で奇妙に思えました。ウェブとグラフィックの作業はまったく異なる概念であることに気づいたので、WUI を提案しましたが、誰も注目しませんでした。
GUI が得意な学生は、Web 開発が得意ではないかもしれません。どちらも目的はコミュニケーションですが、グラフィックはグラフィックのデザインに重点が置かれ、Web は情報のデザインに重点が置かれます。これまではWebベースの製品しか扱ったことがなかったので、この点だけでも十分面倒です。
修行者として一番痛感するのは、蓄積が足りず、毎回頭を悩ませて対処しなければならないということです。さらに、国内のインターネット業界におけるデザインの理想主義の追求には、粘り強い精神が必要です。

<<:  JS、CSS スタイルのリファレンスの記述

>>:  MySQLのkillがスレッドをkillできない理由

推薦する

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...

MySQL 接続クエリを本当に学びましたか?

1. 内部結合クエリの概要内部結合は、アプリケーションで非常に一般的な結合操作であり、通常はデフォ...

ARM64アーキテクチャでmysql5.7.22をインストールするプロセス全体

MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...

JQueryセレクターの詳細な説明

目次基本的なセレクター:レベルセレクター:属性セレクター:フィルターセレクター:フォーム属性セレクタ...

MySQL InnoDB アーキテクチャの概要

目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...

行の高さと垂直方向の配置についての深い理解

いくつかの概念行ボックス: インライン ボックスを囲むボックス。1 つ以上の行ボックスが積み重ねられ...

JSプロトタイプとプロトタイプチェーンについての簡単な説明

目次1. プロトタイプ2. プロトタイプポインタ: __proto__要約する1. プロトタイプJa...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

HTML でのフォームとフォーム送信操作に関する情報のコレクション

ここでは、フォーム要素とフォーム送信に関する知識を紹介します。フォーム要素フォーム要素の DOM イ...

protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル

protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...

MySQL の「特殊キーが長すぎます」の解決策

目次解決策1解決策2テーブルを作成するときに、興味深い問題に遭遇しました。「指定されたキーが長すぎま...

WeChat アプレットのカスタム スクロール ビューのサンプル コード

ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...