ウェブサイトのインタラクションデザイン：「小さな新鮮さ」スタイルの視覚的表現

「小青心」は近年人気が高まっている新しい用語です。文化現象を表現したり、ある種の音楽、文学、写真のスタイルを定義したりするために使われています。また、このスタイルを好む人々の名前にも発展しました。日々の仕事の中で、「XXXX のデザインスタイルはとても新鮮ですね...」「この色は新鮮すぎて似合わない」といったおなじみの会話をよく耳にします。

実は、ビジュアルデザイナーとして、このスタイルのビジュアルパフォーマンスについてはずっと戸惑っていました。どのようなデザインが新鮮な感じを持つと言えるのでしょうか？それは単に言葉では言い表せない感じなのでしょうか？最近の操作共有トレーニング中に、操作のクラスメートも私に、新鮮なスタイルの写真をPSするにはどうすればよいかと尋ねました。これも、この種のビジュアルデザインのパフォーマンスについて深く考えるきっかけとなりました。以下は、視覚表現レイヤーにおけるこのタイプのスタイルの重要なポイントを抽出するために私がまとめたいくつかの側面です。これらは単なる私のささやかな意見とデザインに関する洞察です。

まず、私たちが目にする「ちょっとした新鮮さ」の中で、最も特徴的または代表的な要素は何でしょうか?

この目的のために、私は「ちょっと新鮮」というタグが付いた写真を大量に見つけました。そして、このスタイルの写真には常に女性が最も頻繁に登場し、後ろ姿であろうと伝説の45度の角度であろうと、古いスーツケース、鉄道、バックパックなどの旅行の要素や、マイクロシングルカメラ、日光、独特の静物などの要素があり、撮影技術の面では、大口径、意図的な露出オーバー、逆光撮影、カジュアルなロモスタイルなどがあることを発見しました。

第二に、上記の共通要素に加えて、色ももちろん非常に重要な要素です。しかし、「少し新鮮」の文字通りの意味からすると、彼女が使用する色は完全に明るくて爽やかなのでしょうか? 私はそれと他の 2 つの派生キーワードに基づいて感情分析を行い、Colorhunter Web サイトからキーカラーを抽出し、色の変化を見つけるためにいくつかの微調整を行いました。

また、先ほどのムードボードの分析と色の抽出を通じて、「少し新鮮」な視覚色では、色の彩度が高くなく、全体の色立体モデルの観点から見ると、明度軸の最高位置より下にあり、灰色の色調をしていることがわかりました。これは、このような視覚スタイルの独特の懐かしさや悲しみの感覚をよりよく表現するためかもしれません。次の 2 つのカラー モデルを例に挙げます。

クールな色

暖色系

最後に、Web ページのデザインで私たちが遭遇する「スモールフレッシュ」なデザイン スタイルは、具体的にはどこに現れているのでしょうか。

1. 色。色面におけるこのスタイルの位置については上で述べました。これは、ユーザーが情報を取得するときに最も早く感じることができるものでもあります。

2. ページフレーム。上記の分析によると、このデザインスタイルは、ページフレームのレイアウトに空白スペースを使用したり、単純な線を使用してモジュール間の関係を分割したりすることを躊躇しません。このデザインスタイルに関して、私は個人的にDoubanとNetEase Impressionismが良い仕事をしていると思います。

3. テクスチャに関して、「リトルフレッシュ」のデザインテクスチャは軽量であるか、または単にテクスチャの使用を放棄し、クリーンで整然とした大きな色のブロックに置き換えています。

4. テクスチャなどのグラフィック要素も、グラフィック面取りやアイコンなど、シンプルでありながら細部までこだわった、できるだけシンプルな表現を使用します。つまり、デザイン スタイルは依然として製品自体の位置付けに依存し、スタイルは製品自体と一致している必要があります。

最近、落ち着かない気分になっているので、記事をいくつか書くことで心を鍛えることができます。もうすぐ休暇が近づいてきたので、これまでのデザイン経験をまとめたブログ記事を書くことにしました。私はデザインの専門家ではなく、長年デザイン界に身を置いてきたベテランです。記事の内容がうまく表現できていない部分もあるかもしれませんが、どうぞ笑って読んでください。

出典: http://www.aliued.cn/

原題: ウェブサイトのインタラクションデザイン: 「小さな新鮮」スタイルの視覚的表現

キーワード: ウェブサイト、インタラクション、新鮮、スタイル、ビジュアル、パフォーマンス、近年人気、ウェブマスター、ウェブサイトのプロモーション、収益化