目次
回复内容:
ホームページ ウェブフロントエンド H5 チュートリアル 设计网页时如何考虑多余空白区域?

设计网页时如何考虑多余空白区域?

Jun 07, 2016 am 08:44 AM

就像这样的表单,左右两边均是空白,好难受啊。
我不是处女。
有心想给添加点别的,但是这个页面确实很简单,比如登录/注册/填写详细资料等等页面。
特别是现在人们的屏幕越来越大,那么他看到的空白是越来越多。。。。。。。

回复内容:

让你难受的不是留白,知乎也留白,google也留白,baidu也留白,为什么他们留白就爽了,你留白就不爽了?

因为你没有找到合适的对齐方式以及对齐的线!
举个例子:
知乎的: 设计网页时如何考虑多余空白区域?
大量空白也很好看对不对!
设计网页时如何考虑多余空白区域?主要内容居方框的左边线对齐,少部分按钮居右对齐,形成2条基准线,然后整体居中让左右两边的留白大小一致,整洁干净死理性。

另外一个例子google:
设计网页时如何考虑多余空白区域?完全的居中啊有没有,对称之美啊有没有!

最后一个例子:
设计网页时如何考虑多余空白区域?中间的内容块的对齐线,既不是黄金分割也不是中轴,所以就感觉整个脑袋偏到左边去了。
不过偏了也没关系,如果内容够长的话,你也可以偏得更极端一点,例如:
设计网页时如何考虑多余空白区域? 不要为了留白而留白,留白是要服务于内容的,只有当主体内容有一定充盈度的时候留白才有意义,才能更加突出主体内容。
题主所举的例子,主要问题出在表单本身由于缺乏色彩难以产生足够的视觉重量,恰恰这个时候表单区域与背景在视觉上又是没有任何界限的(表单内心OS:想要和你融化在一起,融化在银河里),所以才让你看了不舒服。

知道问题所在,解决方案就比较简单了,参考以下两种。
1. 比较偷懒的做法:如果表单比较单调,加个框框与背景区分出来吧。
比如这样:
设计网页时如何考虑多余空白区域?比如这样:
设计网页时如何考虑多余空白区域?再比如这样:
设计网页时如何考虑多余空白区域?注意,此法不可滥用,否则俗气程度爆表。

2.有一定难度的做法:运用色彩与对比,让用户在心理上把表单内容从背景中剥离、突出出来。
比如这样:
设计网页时如何考虑多余空白区域?再比如这样:
设计网页时如何考虑多余空白区域?

另,国内各电商一般是怎么做的呢?旁边加大面积活动广告。对此不评价好坏,成年人只看利弊对吧。 我有个很奇怪的想法。
能不能设计两条鱼吐泡泡在大片的空白里游来飘去。
我知道没什么用。
我就是想想觉得很开心。

问题来了,假如我要学交互基础,我要做什么功课。 可以试试直接把这个表单放在一个悬浮窗上,或者可以像大多数网站一样 放在右侧 然后其他部位是足够大的其他内容,比如qq邮箱的登录页,也可以参考yeah.net的登录页,很简洁。 我觉得有些空白很舒服,让你可以专注在某一个功能模块上。我既然来注册的,我就专注在注册这件事情上。 往死里加广告 题主这种人,为了自己爽,不顾产品品质。 广告位出租 网页和App中的留白可以让重要的内容和功能更加醒目,营造一种平静和安宁的视觉感受,同时使一个网页或者App显得更加凝聚和高效

谷歌的首页和以前百度的首页在都坚持了这点,想想它们的页面一天要被访问多少次?能坚持下来真的不容易,当然,新版的百度首页已然成了这副X样:
设计网页时如何考虑多余空白区域?



谷歌的:
设计网页时如何考虑多余空白区域? OFFICE2013的主题花纹。。。。ZUNE software的背景。。。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

H5プロジェクトの実行方法 H5プロジェクトの実行方法 Apr 06, 2025 pm 12:21 PM

H5プロジェクトを実行するには、次の手順が必要です。Webサーバー、node.js、開発ツールなどの必要なツールのインストール。開発環境の構築、プロジェクトフォルダーの作成、プロジェクトの初期化、コードの書き込み。開発サーバーを起動し、コマンドラインを使用してコマンドを実行します。ブラウザでプロジェクトをプレビューし、開発サーバーURLを入力します。プロジェクトの公開、コードの最適化、プロジェクトの展開、Webサーバーの構成のセットアップ。

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? Mar 13, 2025 pm 08:00 PM

この記事では、ビューポートメタタグを使用してモバイルデバイスのページスケーリングを制御し、最適な応答性とパフォーマンスのために幅や初期スケールなどの設定に焦点を当てています。

H5ページの生産とはどういう意味ですか? H5ページの生産とはどういう意味ですか? Apr 06, 2025 am 07:18 AM

H5ページの制作とは、HTML5、CSS3、JavaScriptなどのテクノロジーを使用したクロスプラットフォーム互換のWebページの作成を指します。そのコアは、ブラウザの解析コード、レンダリング構造、スタイル、インタラクティブ機能にあります。一般的なテクノロジーには、アニメーションエフェクト、レスポンシブデザイン、およびデータ相互作用が含まれます。エラーを回避するには、開発者をデバッグする必要があります。パフォーマンスの最適化とベストプラクティスには、画像形式の最適化、リクエスト削減、コード仕様などが含まれ、読み込み速度とコード品質を向上させます。

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Mar 18, 2025 pm 02:16 PM

この記事では、Geolocation APIを使用してユーザーの場所のプライバシーと許可を管理し、アクセス許可を要求するためのベストプラクティスを強調し、データセキュリティを確保し、プライバシー法を遵守することについて説明します。

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? Mar 13, 2025 pm 07:51 PM

この記事では、HTML5ページの可視性APIを使用して、ページの可視性を検出し、ユーザーエクスペリエンスを向上させ、リソースの使用量を最適化します。重要な側面には、メディアの一時停止、CPU負荷の削減、視認性の変化に基づいて分析の管理が含まれます。

H5ページの生産には継続的なメンテナンスが必要ですか? H5ページの生産には継続的なメンテナンスが必要ですか? Apr 05, 2025 pm 11:27 PM

H5ページは、コードの脆弱性、ブラウザー互換性、パフォーマンスの最適化、セキュリティの更新、ユーザーエクスペリエンスの改善などの要因のため、継続的に維持する必要があります。効果的なメンテナンス方法には、完全なテストシステムの確立、バージョン制御ツールの使用、定期的にページのパフォーマンスの監視、ユーザーフィードバックの収集、メンテナンス計画の策定が含まれます。

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? Mar 18, 2025 pm 02:17 PM

この記事では、HTML5ドラッグアンドドロップAPIを使用してインタラクティブなユーザーインターフェイスを作成し、要素をドラッグ可能にし、キーイベントを処理し、カスタムフィードバックを使用してユーザーエクスペリエンスを強化する手順を作成する方法について説明します。また、aへの一般的な落とし穴についても説明します

H5ページの生産に適したアプリケーションシナリオ H5ページの生産に適したアプリケーションシナリオ Apr 05, 2025 pm 11:36 PM

H5(HTML5)は、マーケティングキャンペーンページ、製品ディスプレイページ、企業プロモーションマイクロウェブサイトなどの軽量アプリケーションに適しています。その利点は、クロスプラットフォームと豊富な対話性にありますが、その制限は複雑な相互作用とアニメーション、ローカルリソースアクセス、オフライン機能にあります。

See all articles