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できない理由

推薦する

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

mysqlサーバーは--skip-grant-tablesオプションで実行されています

MySQLサーバーは--skip-grant-tablesオプションで実行されているため、このステー...

Vue の一般的な問題と解決策の概要 (推奨)

Vue に限定されず、他の種類の SPA プロジェクトにも当てはまる問題がいくつかあります。 1....

VUEをベースにしたシンプルな学生情報管理システムの実装

目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

JS ES の新機能: 拡張演算子の紹介

1. スプレッド演算子スプレッド演算子は 3 つのドット ... で、複数の引数 (関数呼び出しなど...

MYSQLクエリデータの結果に自動的に番号を付ける方法

序文実際、クエリ中に結果に番号が付けられるこのような状況に遭遇したことは一度もありません。同僚が転職...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

入力テキストボックスの入力実装プロパティを無効にする

今日は、開発でよく使われる、非常に便利な HTML タグをいくつかまとめてみたいと思います。これらの...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

CSS3 のメディアクエリと rem レイアウトを組み合わせてモバイル画面に適応

CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...

Linux ファイルとユーザー管理の実践

1. /etc ディレクトリ内の、文字以外の文字で始まり、その後に文字と任意の長さのその他の文字が続...

jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおり...

Centos7 esxi6.7 テンプレートの実際のアプリケーションの詳細な説明

1. Centos7.6システムを作成し、システムを最適化する1. NetworkManagerをオ...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...