高品質のWebデザインにおける「自信」の原則

簡単な概要

こんにちは、Habrausers様。 かなり長い間、私はWebデザインに関連するHabrのさまざまな投稿、および一般的なデザインを観察してきました。 ほとんどの場合、そのような投稿の意味は、サイトの個々の要素とそのさまざまなオプションの非常に詳細な説明に帰着します-それは間違っていませんが、このトピックから何かが欠けているようです：すなわち、高品質デザインのより一般的で理解可能な原則のカバー、対応するプロファイルを所有していないユーザーでも使用できます。 この記事では、これらの基本原則の1つに焦点を当てます。







猫の下で約1.1 Mbのトラフィック。

あなたが考えるよりも少し先に始めましょう。

心配しないでください。このセクションは実際にはWebデザインに直接関係していませんが、急いでスキップしないでください。これは、後述する原則の主要なアイデアの概要を示しています。 原則自体は非常に単純ですが、その実装には特定のスキルが必要ですが、この原則を知っているデザイナーでなくても、レイアウトの品質を客観的に評価できます。



私たちは都市に住んでおり、通りに出て行くと、多くの見知らぬ人が見えます。彼らはそれぞれユニークで、急いでいるのか、急いでいないのかです。 誰もが自分の何かについて考え、誰もが自分の服を使用します。彼はこの状況に最適だと考えています。 しかし、おそらく実際よりもはるかに魅力的な人を作る1つの機能があります。 この特性は、自信、行動、行動、言葉です。 この品質は、人をより詳細に研究し、その行動と反応を観察することに興味をもたらします-これは完全に健康的な興味です。なぜなら、誰もがこの自信の理由を理解したいからです。



私はこれをウェブデザインと並行して描く自由を取ります。その結果、高品質のウェブサイトデザインの基本原則の1つが「自信」であるべきことが明らかになります。 この「自信」を測定するための基準についてお話しします。

設計の自信の兆候

この概念は非常に容量が多く、直接操作する人はほとんどいませんが、すべての自尊心のあるデザイナーは常にこの原則を念頭に置いており、時にはそれを疑わず、彼の作品の実装を常に監視しています グラフィックス自体はあまりカリスマ的ではありませんが、確かに-レイアウトは非常に高品質に見えます。 「自信」の原則には多くの兆候がありますが、考えているよりも簡単に実装できます。

階層

設計の「信頼」の最初で最も重要な兆候の1つであり、これがないと高品質のレイアウトを得ることができません。 スライダーや背景から小数点まで、サイト上にあるすべてのものは、相互に競合することなく、独自の特定の場所を持ち、情報の階層を明確に観察する必要があります。 この段落に準拠するために、さらにいくつかの狭いルールがあります。

マークアップパターン

これらのパターンは、主にレイアウトのブロック構造に関連する場合があります。 すべてのレイアウトが完全に実装されているわけではありませんが、ほとんどすべてのレイアウトはブロックに基づいて作成されます。 しかし、いずれにせよ、これらのブロックは、各ユーザーが理解できるように、必ずその場所に厳密な規則性を持たなければなりません。



以下の画像は、グリッド線が表示された正しいレイアウトの例を示しており、デザイナーはそれに沿ってこのレイアウトを実行します。

直感的なアクセス

大規模な携帯電話会社のウェブサイトで目立つ場所にあるはずの非常に重要で明白なものを探しますが、ランダムにポップアップされるさまざまな情報のすべてを掘り下げるには、多くの時間と神経がかかります。 そして、不思議に思う：このすべての場所を決定した人は、何らかの論理を使用したのか？ 時々信じがたいです。 すべてのサイトは、その目的、優先順位、提案を明確に明確にする必要があります。そうでなければ、単にその存在に意味がありません。



ユーザーがボタンやメニュー項目の名前を読むことなく、トピックについて興味のある情報を見つけられるような結果を達成する必要があります。 理想的には、サイトの機能は、対応するアイテムまたはボタンの単なる位置によって推測されるべきです-はい、これを達成することは困難ですが、常に努力する必要があります。

スペース

非常に多くの大規模なサイトでは、モニターのほぼすべてのスペースが何らかの種類のテキストまたはリッチグラフィックスを使用する状況を見つけることができます。 経験の浅いデザイナーは、すべての情報が1つのページ上にあり、ユーザーが通常どこに行く必要もないという事実によって、この状況を正当化することさえできます。 なんで？ すべてがすでにここにあり、どこにでも突っ込んでいます。 もちろん楽しいですが、これは非常に重大な間違いであり、それだけで「自信のある」デザインに対するすべての希望が完全に失われます。 著者はどこかで急いでいる、大騒ぎして、自分が何をしているのか理解できなかった、あるいは気にかけなかったという印象を受けます。



A4用紙の空白のシートを用意して、会社の活動、その特徴に関連する100の言葉を書きます。 無料のセンチメートルの紙をすべて記入し、友人やガールフレンドに見せて、「私の会社は何をしているのか、競合他社を背景にしたその機能と強みは何ですか」と尋ねます。 正しい答えが聞こえないのではないかと思いますが、最良の場合はすぐに聞こえません。友人/ガールフレンドがテキスト全体を勉強し、情報を整理するすべてのプロセスを頭の中で行う必要があるためです-これは迷惑です。 ここで別の空白のシートを取り、中央に3語（名前と2つの強み）だけを書いてください。名前は大きな活字で、強さはわずかに小さくなります-結果は驚くべきものですが、とても簡単です。 ユーザーは、何が問題になっていて、あなたがどのように違うのかをすぐに理解します-それで、タスクは完了しました。



情報の簡潔さとミニマリズムを混同しないでください。 これらは異なる概念ですが、設計開発のこの段階ではしばしば交差しますが、これは良いことです。 ただし、行き過ぎることは不要です。ユーザーに頼って会社の強みを考えてはいけません。それは多すぎます。



この原則を指定すると、テストブロック間に適切で顕著なインデントが存在することになります。 ユーザーは、インデントとフィールドのみからの類似および異なる情報のグループ化全体を理解する必要があります。 これは非常に重要です-それは視覚的な検索を数十回促進します。 テキストは「急上昇」し、大きなレンガの壁のレンガのようには見えません。



以下のサイトをご覧ください。 テキストとそのマージンの縦横比を、水平および垂直の両方で見てください。 著者はブロックを制約しませんが、ブロックが自由に呼吸できるようにします。 これにより、デザインに軽快感と「自信」が生まれます。

マスコントラスト

この機能は前の機能と密接に相互作用しますが、インデントやフィールドではなく、1つまたは別のブロックのテキストのサイズ、視覚的な質量による主題情報の分割に基づいています。 常に機能します。ページ上で見たいテキストをすべて読み、このテキストから最も重要なフレーズを選択し、重要度の低いフレーズをもう少し選択します。 そして、ほとんどの場合、残っているものは省略できます。



アイデアは、ユーザーに何を伝えたいかを明確かつ明確に示すことです。 おそらく彼はこれをまったく探していないので、最初の選択の後、彼はこれ以上読むことはないでしょう、彼は彼にさらなる内容を警告し、貴重な時間を節約してくれたことに感謝します。



選択は異なる場合があります。 これには、テキストサイズ、フォント、さまざまなスペル、行間隔などが含まれます。 しかし、ほとんどの場合、使用されるテキストのサイズです。 2つのブロックの質量の視覚的なコントラストにより、ユーザーはそれらをすばやく比較し、一方が他方から続くことを理解します。つまり、情報の明確な階層がトレースされます。 これにより、サイトでの視覚的な検索がさらに高速化されます。

色のコントラスト

この機能の意味は、「大衆のコントラスト」の意味とまったく同じですが、この場合、より効果的な手法を扱っています。 私たちの場所では、人間の目に利用できる色の可視スペクトル全体が視覚的な質量差を達成するためのより強力なツールです。したがって、これに基づいてわずかな不均衡でもユーザーを緊張や刺激に導く可能性があるため、より慎重かつ正確に使用する必要があります。



色の組み合わせについては何もお話ししませんが、レイアウトで一致しない色の使用を除外する特別なプログラムとスキーム（Photoshopのクーラー）があります。 おそらく、これはあなたが最良の組み合わせを決定するのに役立ちませんが、あなたは間違いなく明らかな間違いに対して保証されます。



色によって非常に強い、根本的に異なるブロックを生成することが望ましいという事実にのみ注意を向けます。 各ブロックを別々の色で塗りつぶしてサイトから虹を作らないでください。これは、定期的な訪問者をますます悩ませるでしょう。 色は非常に慎重かつ抑制的に機能する必要があります。 意味が近いブロックは、影やトーンでほとんど区別できません。



前の2つの画像に戻ると、これらのポイントの適用例がわかります。 最初は、作者はトーンコントラストで再生し、暗いスライダーの下の背景をはっきりと強調します。 まず、ユーザーの視線はこの領域に正確に当てられます。 2番目の画像は、フォントのサイズによる情報の重要性の分離を示しています。 まず第一に、大胆で大きなサンセリフの見出しがある暗い領域に気づきます。 さらに、ユーザーには小さい見出しが表示され、その後、テキストの残りを読むかどうかを自分で決定します。

ミュートされたコントラスト

この項目は前の項目から直接続きます。 人々の精神は、彼らが定期的に見ているものに非常に素早く慣れることになりました。 そして、他の何かがあなたの目を引くとき、人はすぐにそれに注意を引きます。 この原則に基づいて、「ミュートコントラスト」係数が作成されます。



約5年前、Webデザインでは、良いサイトは対照的であり、対照的であればあるほど良いと考えられていました。 原則として、この声明は今でも真実ですが、それに加えて、最近勢いを増している別のことが現れています。ユーザーは視覚的に高いコントラストに慣れているため、コントラストの少ないブロックをより積極的に研究したいと考えています。 言い換えれば、例えば、テキストのくぐもった色を見た人は、それが何秒間くぐもったのか、著者が私たちの目から何を隠そうとしたのかを理解するために、ほんの一瞬それをじっと見ます。 これは非常に微妙なトリックであり、色と同様に慎重に作業する必要があります。



過度に対照的なレイアウトは刺激と眼精疲労につながりますが、この手法が適切で有益な場合があります。 たとえば、一部のテキストの重要性がそれほど高くなく、デザイナーがより重要なものに重点を少し移し、重要性の低いもののトーンを消し去るという状況。 実際、これは、サイトの情報階層の重要性による方法の1つです。



ただし、ミュートされたトーンがうまく機能する別の状況があります。 背景、画像、インターフェースを含むサイト全体のトーンを消しても、同時に何かを鮮やかに強調したり、ユーザーが現在対話しているものを強調したりすると、関心が高まり、サイトはユーザーのアクションから「目覚め」、よりインタラクティブになります視覚的に。 コントラストの欠如は、どんなに奇妙に聞こえても、レイアウトの全体的なコントラストを強調することもあります。



よく使用されるミュートコントラストのレイアウトの一部を以下に示します。







これらのすべての要因は、ヒトラーを殺してサイボーグになったロボコップに直接関係しています。おっと、それを再読したとしても、それはある種のナンセンスです。 実際、それはナンセンスではありませんが、創造的な要素のためにサイトで必要な予測不可能性です。 この効果は、ユーザーと知り合った最初の数秒で、サイトに対するユーザーの態度を決定します。

予測不可能性（一意性）

インターフェースの予測不能性は許容されませんが、情報の提示方法の予測不能性により、サイトはユーザーとのまったく新しいレベルの感情的な関係になります。 この予測不能性は最初の数秒であるはずであり、これで十分です。ユーザーは存在しなければならない明確なパターンを識別できます。



言い換えれば、それはアイデアの独創性と創造性に関するものです。 今ではほとんど見られませんが、見れば、サイトが実際にどうあるべきかを理解できます。 ここには、もちろん、実際のところどこにでもあるように、多くの「しかし」とさまざまな落とし穴があります。 ただし、レイアウトを作成するこのアプローチは、たとえサイトがより技術的であっても、競合他社に比べてはるかに強力になります。 このアイテムには、デザイナーの思考の幅にすべて依存するため、より具体的な指示を追加することは困難です。 創造性は実行のテクニックとは何の関係もありません。単に存在するかしないかのどちらかであり、存在する方が良いでしょう。



それでもこのアイテムの目的を指定しようとする場合、この場合、デザイナーはユーザーの代わりに自分自身を代表し、このサイトを訪れる平均的なユーザーを代表する必要があります。 そのようなユーザーの認識と訪問時の正確な感情的な色を理解することは、この場合のみであり、それは愉快な驚きであることが判明します。 そうでなければ、驚きも判明する可能性がありますが、ほとんどの場合、それは完全に不愉快であり、逆もまた同様です-それは難しいことではありません。



予測不可能性の良い例は、以下の画像で見ることができます。 著者は、通常とは異なる情報のレイアウトを備えたWebスタジオのメインページをユーザーに提示します。 背景自体は重いグランジスタイルで作られていますが、デザインは非常に簡単に見えますが、色がくすんでいるため、この重さはメインの明るいきれいな背景で簡単に補正できます。 実行の見かけの単純さは、レイアウトに「信頼性」を追加します。

カリスマ

サイトにとってこれは何ですか？ これは、ユーザーを自分の世界に浸し、少なくとも数分間はユーザーを現実から引き離すレイアウトの機能です。 どうやってやるの？



レイアウトに少なくともある種のカリスマ性があるかどうかは、いつでも簡単かつ迅速に理解できます。 レイアウトを見て、精神的に会社の範囲を他の異なるものに変更します。 この精神的な変化の後、レイアウトがまだ「トピック内」に見える場合、これはカリスマ性に問題があることの確実な兆候です。 この段落の主な規則は、カリスマ的な香水サイトのレイアウトが衣服の販売に適さないこと、およびクレーン機器サイトが車や電子機器の販売が不可能になることです。



これは、サイトのテーマに関連する特定の方法で、デザイン要素、ボタン、インターフェースを使用することで実現されます。 何よりも、「額」ではなく直接接続されているが、潜在意識で間接的に接続されているものは連想的ですが、まだ接続されています。 これを行うには、サイトが作成されるアクティビティの分野を常によく研究し、そのポリシー、習慣、伝統を、当然のことながら理解する必要があります。



いつものように、1つの「しかし」があります。 最小限のグラフィックスで非常に軽量なデザインを使用する特定のカテゴリのサイトがあります。 遠くまで行くことはできません。これの例はHabrです。 次に、良いサイトには多くのグラフィックスが必要でなく、私はこれに同意しますが、部分的にのみ-それはすべてタスクに依存すると言います。



Habrの場合、私たちは毎日非常に多くのユーザーを受け入れ、サーバーに大量の情報を保存する社会的指向のプロジェクトを扱っています。 ユーザーはこのポータルを1日に数回訪問します。この場合、Habrはかなり幅広いユーザー向けに設計されているため、このような「軽量」デザインの使用は控えめで迷惑にならないという願望によって正当化できます。



ただし、サイトを販売する場合、このロジックは機能しません。サイトを顧客に向けているためです。 そのため、これらのサイトは多く存在し、誰もが自分の業界で最高だと考えているため、これらのサイトを覚えておく必要があります。 同社はターゲットオーディエンスを知っており、デザインと誤算することを恐れません。ソーシャルネットワーク、ブログ、または同じHabrと比較して、ウェブサイトを販売する企業のオーディエンスははるかに予測可能です。



しかし、これはサイトが「from and to」のグラフィックで詰まっている必要があるという意味ではありません。 レイアウトはカリスマ的であり、同時に最小限のグラフィックスを持つことができます-この場合、認識できないとは言えないミニマリズムを扱っています。 ルールに従うことだけが必要です。ユーザーが理解できないものをサイトに描画しないでください。しかし、そのようなサイトは巨大な空虚を「食べて」はいけません。



以下に示す船関連サイトのレイアウトは、確立された雰囲気と周囲をうまく保持し、ユーザーが自分がいるサイトを忘れないようにします。 同時に、サイトがグラフィックで飽和状態になっているとは言えません-手作りの土産船の世界にユーザーを浸すのに必要なのとまったく同じです。

パフォーマンステクニック

ここではすべてが明らかになっているので、この時点ではあまり書きません。 技術は経験を詰め込んで獲得するだけです。 これは多数のサイトにとって痛い点ですが、このトピックについてはすでに多くのことが述べられており、このトピックは本当に難しく、非常に広範囲に渡っています。 それでも、自信を持って実行するテクニックがなければ、単一のモックアップが必要な「自信」を達成することはありません。各デザイナーはこれを理解し、タイムラインでそれを考慮する必要があります。



ご清聴ありがとうございました。高品質のレイアウトを作成する際の優先事項を誰かがよりよく理解できるように私の記事がお役に立てば幸いです！