B2B業界のウェブサイトにおける「ページ要素間の距離」の標準についての簡単な説明

この章では、主に B2B 業界の Web サイトの Web ページのさまざまな要素間の距離について説明します。これには、テキストと画像間の距離、コンテンツと境界線間の距離、ページと画面間の距離などが含まれます。この部分は実際には単純であると同時に複雑です。通常、Web ページ、新聞、書籍、定期刊行物、テレビなどのさまざまなメディアを閲覧するときに、テキストと画像間の距離、コンテンツと境界線間の距離についても基本的な理解があるためです。さまざまな要素間の距離が広すぎたり近すぎたりする Web ページを提示すると、それを感じることができ、修正の提案を行うことができます。しかし、プロのプロダクトマネージャー、ページデザイナー、企業経営者に必要なのは、細部にまで細心の注意を払い、ページ上の各要素間の距離の不正確さに非常に敏感になり、正しい修正プランを提案することです。

1 ウェブページ上のさまざまな要素間の距離に関する基礎知識

このセクションは、以下で説明するさまざまな要素間の距離の基礎として役立ち、誰もがページ デザイン標準を本質的な観点から理解できるようになります。

A 読みやすくするために、要素間に一定の距離が必要です。これは、ユーザーの読書行動から考慮する必要があります。私たちの目がさまざまなコンテンツを見ているとき、要素間の違いを適切に区別して識別し、より良い読書体験を提供できるように、Web ページのさまざまな要素間に一定の距離が必要です。

B. さまざまな要素間のおおよその距離: これについては統一された基準を設けることは困難ですが、さまざまな Web ページ レイアウトを調査および分析した結果、一般的に 8PX ～ 20PX の間です。たとえば、ページ タイトル バー間の距離は通常 10PX、ナビゲーション ページの情報リンクと情報イラスト間の距離は通常 8PX ～ 12PX、ナビゲーション ページの情報リンクと境界線間の距離は通常 10PX 以上です。詳細は後ほど詳しく説明しますが、最低でも 5PX 以上は必要です。そうでないと、読むのが非常に大変になります。

C 空白はデザイン要件です。Web ページを開くと、ユーザーは空白が表示されることを期待します。空白は白を指すのではなく、背景色を表示することだけを意味します。背景色が白の場合、空白は白を指します。空白スペースは、読者が主要なコンテンツに注目し、階層構造をよりよく理解できるようにします。たとえば、推奨情報のタイトルの周囲には、通常の非推奨コンテンツの周囲よりも多くの空白スペースがあります。これは、これが主要なコンテンツであることをユーザーに思い出させるために、デザイナーが意図的に行っています。

D 論理的に同一のさまざまな要素間の距離も同じである必要があります。たとえば、Web ページでは、最初の画面のテキストと境界線の間の距離は 15 PX ですが、2 番目の画面でも同じである必要があります。8 PX 以下にすることはできません。同じフォーム入力ボックスの場合、入力内容を促す左側のテキストからの距離も同じである必要があります (たとえば 10 PX)。一部の入力ボックスの距離を他のボックスよりも大きくすることはできません。そうしないと、位置がずれてページが乱雑で美しさに欠けるように見えます。

2 テキストと画像の距離に関する一般的な基準

テキストと画像の距離は、いくつかの状況に分けられます。1つは、ナビゲーションページの画像と情報リンクまたは紹介の間の距離です。2つ目は、コンテンツページの画像と情報テキストの間の距離です。3つ目は、ナビゲーションページの製品画像またはキャラクター画像と情報タイトルの間の距離です。一般的な基準は次のとおりです。

A. ナビゲーション ページの画像と情報リンクまたは紹介の間の距離: 8PX ～ 10PX が適切です。この距離は大きすぎることはできません。10PX を超えると、広すぎるように感じられます。

B コンテンツ ページ上のコンテンツ イメージと情報テキスト間の距離: この距離は一般的に広くてもかまいませんが、通常は 1 行を空白のままにします。十分なスペースがあるため、20PX ～ 25PX で十分です。

C ナビゲーションページ上の商品写真または人物写真と情報タイトルの間の距離：この距離は一般的に狭く、特に縦に並べる場合は狭くすることができ、5PXも許容されます。タイトルが2行に分かれている場合、行間隔は一般的に狭く、110％〜120％が最も理想的です。

3 コンテンツと境界線の距離に関する一般的な基準

画像であれ、テキストであれ、境界線との間には一定の距離が必要です。「B2B業界ポータルサイトの設計と開発の実践研究レポート」では、ページをナビゲーションページ、コンテンツページ、機能ページの3種類に分けました。ページによって境界線からの距離は異なります。

A. ナビゲーション ページのコンテンツと境界線の間の距離: ナビゲーション ページのスペースは比較的小さいため、各場所に異なるコンテンツを分散させる必要があります。上部と左側に近いコンテンツの方が重要です。コンテンツと境界線の間の距離は一般的に 10PX ～ 15PX で、より合理的です。

B. コンテンツページ上のコンテンツと境界線の距離：十分なスペースがあるため、この距離は一般的に広く、20PXから40PXの範囲になります。SinaとAlibabaのニュースコンテンツページと境界線の距離は4OPX、Tencentは30PX、China Fashion Networkは20PXです。この調査レポートでは、20PX-30PXが最も合理的であると考えています。

C. 機能ページの操作プロンプトまたは入力ボックスと境界線の間の距離: このタイプのページはコンテンツが少なく、主にユーザーが操作するため、ユーザー登録ページ、情報公開ページなど、より多くのスペースがあります。距離は固定ではありません。スペースが多すぎる場合は、実際の状況に応じて、中央に配置し、左右の距離を同じにすることができます。

Alibaba のホームページ上のマーチャント コミュニティのスクリーンショット (スクリーンショットの日付: 2012-09-23)

図（103）に示すように、これはアリババのホームページのスクリーンショットです（この記事はレポートを書いているときに書いたもので、現在は修正されています）。コンテンツと左の境界線と上部のタイトルバーの間の距離は15PX、下からの距離は20PX、コンテンツ画像と左側のテキストの間の距離は15PX、推奨タイトルと下の紹介の間の距離は20PXです。基本的には私が述べた基準を満たしています。私がデザインする場合、コンテンツと下部の境界線の間の最適な距離は、上部の境界線からの距離と同じになります。

4 タイトルバーのテキストとタイトルバーの境界線の間の距離

タイトルバーは通常、画像とテキストで構成されています。画像は通常背景として使用され、テキストは通常​​リンクされており、タイトル名と「詳細>>」リンクに分かれています。テキストは通常​​、タイトルバーの中央に配置されます。タイトルバー名と左側の距離は通常15PX〜20PXで、「詳細>>」と右側の距離は通常15PX〜20PXです。もちろん例外もありますが、ほとんどの場合はこれに当てはまります。

ページ全体のタイトルバーのテキストと左右の端の間の距離は、乱雑にならないように統一して標準化する必要があります。異なる可能性がある状況が 1 つあります。タイトル バーのデザインがまったく異なる場合です。タイプセットのニーズに応じて、距離を異なる方法で設定する必要があります。

5. ページと上、下、左、右の間の距離

上からの距離: 0 または 5 PX にすることができます。このレポートでは、距離をまったく持たないことが最適であり、最大値は 5 PX を超えてはならないと考えています。

B. 左右の距離：現在のコンピュータはすべてワイドスクリーンですが、特に新しいコンピュータでは、1024の解像度に基づいてWebページを設計する必要があります（「B2B業界ポータルWebサイト計画実践研究レポート」でもこれを紹介しました）。ページの幅は最大1002、つまり左右の幅が10PXなので、スクロールバーはありません。左右に13PXほどの間隔を空けて、995PXがページに最適なサイズだと思います。解像度が 1024 を超えるワイドスクリーン モニターの場合、左右の間隔はモニターの幅に応じて変化します。

C. 下端からの距離: 下端のテキストとページ下部の間の適切な距離は 18PX から 30PX です。高すぎると見栄えが悪くなり、低すぎると読みにくくなります。この調査レポートでは、18PX が最も適切であると考えています。これはまさに記事の標準的な行間隔であり、最高の読書体験を実現できます。

これでこの章は終わりです。非常にシンプルですが、細部が非常に重要です。技術的な知識ではありますが、この記事の要件に従って B2B 業界の Web サイトを設計および作成するための技術を理解し、技術を導くために、技術を理解する必要はありません。

この記事の原作者：Li Xuejiang、コミュニケーション、ガイド、相談を歓迎します、QQ：1580658565。

元のタイトル: B2B 業界の Web サイトにおける「ページ要素間の距離」の標準に関する簡単な説明

キーワード: 簡単な説明、B2B、業界、ウェブサイト、ページ要素、要素間の距離、標準、この章、ウェブマスター、ウェブサイトのプロモーション、収益化