この記事は、若いWebデザイナーがビューを拡大するために使用できます。
また、この情報は、プロジェクトの設計に積極的に関与しているサイトの潜在的な顧客にとって有用であり、要件のメインパッケージを収集します。
このテキストの執筆は、Webデザイナーとしての私の練習中に生じた絶え間ない議論によって促されました。 実際、顧客の気まぐれのために「ゴム製サイト」に初めて対処しなければなりませんでした。 プロジェクトの設計が完全に準備され、サイト自体が構成され接続されたとき、顧客は「なぜ拡張されないのか」と尋ねました。 ずいぶん前のことですが、この質問は4〜5か月に1回程度聞かれます。 彼らはサイトの「ゴム」レイアウトについて多くのことを話し、書きました。 彼らは、彼女が義務を負っていると言い、逆もまた同様で、彼女の間違いを使ったという。 確かに、ゴムの発生の理由がありました。 そして、この技術の使用は99％間違いであり、間違いなく不可能であると主張します。 必要な場合は、あらゆる技術を適用する必要があります。 ゴムの植字の使用のおおよその境界線の概要を説明します。
起源。
どんなデザインも問題の解決策です。美学は正しい方法で機能するはずです。 利便性。これは、特定の使用方法につながるか、標準機能などを拡張する必要があります。 レイアウト。これは、デザイナーが直接設計したWebプロジェクトの段階の1つです。 レイアウトの種類を選択して、設計者は特定の問題を解決し、どの問題を理解しようとします。
ゴムによって解決される問題を理解するには、その発生の歴史から始める価値があります。
画面（ゴム）のサイズに合わせたレイアウトを持つ最初のサイトは、640-480の解像度、800-600の解像度のアクティブな使用、1024-768の最初の代表のモニターの消失中に現れました。 640-480および800-600の領域は、情報を完全に知覚するには小さいことを認識する価値があります。 また、ナビゲーションとバナーを掛ける必要があります（当時はより効果的でした）。 サイトを水平方向に1.6倍に拡張し、少なくとも何らかの形でサイト形式をすべての人に受け入れられているA4形式に近づけます。 これは、新しい高価な「大型」モニターの所有者に大きな恩恵をもたらします。 さらに、ページ全体に要素を拡大するだけでなく、高さを減らすテキストブロックも拡大します。これにより、スクロールが削除されることがあります。 （そしてこれは30ピクセルです！）。 利点は明らかです！
「ゴム」の主なタスクは、古いモニターの所有者の尊厳を損なうことなく、コンテンツに必要なスペースを与えることです。
私たちの時代には「ゴム」レイアウトを検討しているため、現代のモニターの公園に注意を払う価値があります。 1024 x 768から2048 x 1152までの（ネットブックを忘れた場合）数学的には、2倍の差があります。これは10年も前のことです。
大型モニターと小型モニターのアスペクト比はほぼ維持されていますが、デザイナーのタスクは維持されていますか？
仕組み。
まず、スケーリングの主な方法とその機能を分析したいと思います。 それとは別に、サイトは通常水平にスケーリングされることに注意する価値があります。
1.テキストブロックは、水平方向のストレッチに適しています。 時には、サイト上のすべての情報の最大90％を運ぶことがあります（つまり、多くの情報があります！引き出せるものがあります！）。 しかし、単に無限に引き伸ばすことはできません。 私たちの注意には「忍耐」という一定のマージンがあります。 テキスト行が長くなりすぎると、読むのが難しくなり、疲れます。 理由がないわけではありませんが、新聞は約50〜55文字のテキストブロックの幅に制限を使用しています。これは、文字間隔を広げても、A4シートの幅の半分未満です。 一般に、すばやく簡単に読むための最適な長い行は45文字です。 最小値もあり、約20〜25文字です。 つまり、テキストブロックを最小値から人間が読める最大値まで2倍まで増やすことができます。 新聞のように、1つのテキストを複数の列に分割することはお勧めしません。 テキストを見るとき、上から下にスクロールして、2列目の先頭に戻るのは非常に不便だからです。 これに基づいて、テキストがページのメインブロックである場合、900ピクセルにまで拡大することはできません。 より少ない。
2.サイトのさまざまな要素間の距離。 適切なレベルのスキルがあれば、サイトのこれらの領域はスケーラブルであり、損失なしに見えます。 しかし、1つの「しかし」があります。 実際、「空のスペース」はページ上の「付属物」だけではありません。 ブロック間のギャップは非常に特定のタスクを実行します。それらは、類似したブロックを分割し、グループ化し、最も重要なものを強調します。 これらすべてのタスクは、ギャップのサイズの違いによって解決されます。 たとえば、小さなギャップで区切られたいくつかのブロックは、関連している、または同じ値を持っていると視覚的に認識されます。 それ自体の周りに多くの空きスペースがあるブロックは、おそらくページ上の主要なものである可能性があり、非常に貴重です。
ブロックのサイズの違いからのみ進む場合、それらが比例して伸びるので、どれだけストレッチするかはまったく関係ありません。 彼らは皆、彼らのタスクに対処しなければならないように思えます...しかし、その後、別の「しかし」が現れます。 事実は、ギャップにも独自の「特性」があるということです。 おそらく、デザインの領域から遠く離れた誰かにとっては、これは取るに足らないように思えますが、ダンサー、ミュージシャン、歌手の仕事を思い出させてください。 素人のダンサーはマスターと同じ動きをすることができ、初心者のミュージシャンは同じ音で演奏し、歌手は同じ歌を歌います。 私たちはその仕事を認めますが、おそらく違いを感じるでしょう。 関連するブロック間の間隔を5 mmにすると、それらは関連していると認識されますが、それらを10〜15 mmに引き伸ばすと、「相対物」を取り消せずに分離し始めます。 そして、比例してこれがページ上の最小のギャップであるという事実でさえ、状況を救いません。
「空のスペース」の性質は、ページの全体的な性質に影響を与える可能性があります。 たとえば、ゴム製のサイトは、必要な精度、安定性、および信頼性の感覚を破壊することがよくあります。 単に特定のトピックであり、デザイン、構成、美術に関する文献で十分に取り上げられているため、この問題にはあまり触れません。
3.テキストコンテンツを含むすべての種類のグラフと表。 テーブルに多くの列があり、グラフに多くのポイントがある場合、余分なスペースにより、セルの長すぎるシグネチャを見ることができます。 拡張チャートは、方向の小さな頻繁な変化をより便利に示します。 これらの特定のケースでは、ゴムが必要になる場合があります。
4.ラスターイメージを引き伸ばすと、一方向に引き伸ばすと歪みとモアレが生じます。 ただし、縦横比を維持しながら画像全体のサイズを変更できます。 または、実際のサイズを維持しながら、画像の「ウィンドウ」のサイズを変更できます。 写真サービス、デザイナーや写真家のポートフォリオなど、これらの写真を可能な限り大きなサイズで表示する必要がある場合、写真のサイズを大きくする必要があります...しかし、何らかの方法で、これには追加の技術的な複雑さが伴います。
映像 誤解される可能性はありますが、ストリームムービーウィンドウを単純にスケーリングするためのオプションはまだありません（いずれにせよ、これはリソースを大量に消費する技術です）。 原則として、これは実際のサイズのウィンドウ+フルスクリーンで映画を見る機能です。 しかし、私たちのネットワークはまだ理想からはほど遠いものであり、ビデオ形式への完全な移行について話す必要はありません。
ウィジェット、ナビゲーション。 原則として、これらは多くのユーザーの注意が向けられる要素です。 もちろん、内部コンポーネントはスケーラブルです。 しかし、設計者によって検証された比率を変更すると、多くの場合、これらのコンポーネントの可読性が失われます。 一般に、これらのコンポーネントは各ケースごとに個別に検討する必要があります;主なことは、コンポーネントを視覚的に「分割」する危険性を忘れないことです。 さて、いつものように、技術的なトリックが必要です。
純粋に芸術的な側面と情報の知覚の法則に加えて、私たちの目の「疲れ」の問題もあります。 部分的には、これはテキストブロックの衛生規則で上で説明されています。 私は数字には触れません。 簡単な例：現在のプロジェクトに関する重要な情報が背後または背後にあるシートを職場に吊るす人はほとんどいません。多くの場合、スケッチ、図、メモがモニターの周りに貼り付けられます。 目を遠ざけるほど、疲れが早くなります。 画面規模では、これはそれほど重要ではないようです。 しかし、22インチモニターの左右の端にある2つの異なる画像を見るには、すでに頭をわずかに回転させる必要があります。モニターは目だけでは動きません。 4〜5時間のネットワークサーフィンの後、ユーザーは十分な集中力を持って、ストレッチされたサイトで必要な情報を見つけるのが難しくなります。
スケーリングの主要な方法とそれらに関連付けられたコンポーネントの制限を確認した後、コンポーネント自体には単に「ゴム」の余裕がないことが多いと結論付けることができます。 もちろん、いくつかの制限は無視できますが、これはユーザーにとっての不便さ、デザインに埋め込まれた画像の損失、またはページの不当な技術的複雑さを伴うものです。
持っているもの。
10年経っても、設計者は作業スペース不足の問題を解決し、「ゴムレイアウト」を使用してそれを解決し、モニター画面上のすべての利用可能な材料を引き伸ばします。 しかし、私たちのモニターは長い間、通常の知覚のラインを超えています！ STAR WARSサガの次の続きを見るか、同じ名前のシューティングゲームをプレイすることで、これに反対することができます。 映画とゲームの絵は、私たちが人生で目で見るものに似ています。 それには多くの不必要な情報があり、私たちの視覚の最も効果的な角度でさえわずか5°です。 角度が小さくなるため、脳は不要な情報から解放されます。 すべての詳細に関心があるのではなく、全体像にのみ関心があります。 そして、想像を絶する空間は、追加の「誘惑」、つまり森の緑の塊、群衆によってのみ作成されます。これに加えて、画面の中心を最もよく認識し、端で何かを調べるのは非常に不便であるという事実に加えて、サイトのページは詳細、テキスト、発表とナビゲーション。 はい、あなたは人々がそれをすべて大画面で探すことができます。 そして、原則として、彼は見つけます。 9番目のピンを使用すると、画面の右下隅でもテキストを読むことができます。 一見小さいとはいえ、これだけは視覚と注意のさらなる努力を犠牲にして起こります。 これを、このタイプのレイアウトの開発のための余分な時間のレイアウトおよび設計作業と組み合わせます。
多くのデザイナーが、圧縮のようにコンテンツを無期限にプルできないという結論に達したことは注目に値します。 これを理解すると、「半ゴム」が生まれました。 幅900ピクセル（A4シート幅よりわずかに大きい）で情報を知覚するのに十分な快適さがある場合、どの問題を解決するために1100ピクセルに拡張する必要がありますか？ これは、最新のモニターの最小解像度でも1024ピクセルの幅に収まるという事実にもかかわらず、圧縮する必要がないことを意味します。
はい、モニターのサイズの増加に伴い、余分なスペースの問題に直面していることに同意せざるを得ません。スペースの問題は非表示にする必要があります（画面の両側に同じ白いフィールドがあります）。 ただし、このために、背景、追加のグラフィックスを使用できます。これらのグラフィックスは、セマンティックロードを実行せず、追加の注意を必要としません。 情報ブロックに触れる必要はありません。
20世紀の終わりに「活気の充電」を受け、地域に実際に問題があったとき、設計者は存在しない問題を解決し続け、すでに「教育を受けた」顧客はこれらの問題を解決することを要求します。
多くの場合、「ウェブの法則」について聞くことができますが、タイポグラフィのルールとは何の関係もないようです。 ただし、印刷会社の主なものは、印刷されたテキストの供給です。 そして、ビデオと音声がテキスト（サイトのコンテンツの50％をはるかに超える）に置き換わり、生物学的な目で見るまで、数百年にわたる印刷で得られた研究と経験を放棄するのは愚かなことです。 さらに、低解像度によるモニター上のテキストは印刷（200 dpi以上に対して72 dpi）よりもはるかに悪く、モニター自体は目の緩和に寄与しません。
知覚の問題の現実を疑う人のために、私はここで4つのテキスト配置オプションを見ることを提案します： nano.a5.ru
正当化。
ただし、ゴム製植字の使用を完全に拒否しないでください。 大きなプレゼンテーション領域が有利な場合に最適です。 たとえば、テキストコンテンツと多数の列を持つ動的に構築されたテーブルで、余分な長いセルを使用すると長いテキストを表示できます。 または、デザイナー、写真家、アーティストのポートフォリオの特定の要件により、一度に多くの作品を提出する必要がある場合、個々に集中することなく、一般的なレベルを示します。 ただし、これらは特別なケースであり、個別に検討する必要があります。
スケーラブルなレイアウトを使用するもう1つのケースがあります。これは、存在する権利についての引数を必要としません-ゴム、芸術的なデバイスとして。 しかし、この場合、ある有名な評議会は新しい形を取ります：
ラバーサイトのみを実行する=赤（緑、青、オレンジなど）のカラーサイトのみを実行します。
PS
多くの人は、「優れたデザイナーは正しいゴムを作れるはずです！」などのフレーズに出くわす必要があったと思います。 私の意見では、正しいものを選択する能力はより重要です。ゴムかどうか？
常に「ゴム」レイアウトが必要ですか？
All Articles