设计网页时如何考虑多余空白区域?
就像这样的表单,左右两边均是空白,好难受啊。
我不是处女。
有心想给添加点别的,但是这个页面确实很简单,比如登录/注册/填写详细资料等等页面。
特别是现在人们的屏幕越来越大,那么他看到的空白是越来越多。。。。。。。
回复内容:
让你难受的不是留白,知乎也留白,google也留白,baidu也留白,为什么他们留白就爽了,你留白就不爽了?因为你没有找到合适的对齐方式以及对齐的线!
举个例子:
知乎的:

大量空白也很好看对不对!

另外一个例子google:

最后一个例子:

不过偏了也没关系,如果内容够长的话,你也可以偏得更极端一点,例如:

题主所举的例子,主要问题出在表单本身由于缺乏色彩难以产生足够的视觉重量,恰恰这个时候表单区域与背景在视觉上又是没有任何界限的(表单内心OS:想要和你融化在一起,融化在银河里),所以才让你看了不舒服。
知道问题所在,解决方案就比较简单了,参考以下两种。
1. 比较偷懒的做法:如果表单比较单调,加个框框与背景区分出来吧。
比如这样:



2.有一定难度的做法:运用色彩与对比,让用户在心理上把表单内容从背景中剥离、突出出来。
比如这样:


另,国内各电商一般是怎么做的呢?旁边加大面积活动广告。对此不评价好坏,成年人只看利弊对吧。 我有个很奇怪的想法。
能不能设计两条鱼吐泡泡在大片的空白里游来飘去。
我知道没什么用。
我就是想想觉得很开心。
问题来了,假如我要学交互基础,我要做什么功课。 可以试试直接把这个表单放在一个悬浮窗上,或者可以像大多数网站一样 放在右侧 然后其他部位是足够大的其他内容,比如qq邮箱的登录页,也可以参考http://yeah.net的登录页,很简洁。 我觉得有些空白很舒服,让你可以专注在某一个功能模块上。我既然来注册的,我就专注在注册这件事情上。 往死里加广告 题主这种人,为了自己爽,不顾产品品质。 广告位出租 网页和App中的留白可以让重要的内容和功能更加醒目,营造一种平静和安宁的视觉感受,同时使一个网页或者App显得更加凝聚和高效
谷歌的首页和以前百度的首页在都坚持了这点,想想它们的页面一天要被访问多少次?能坚持下来真的不容易,当然,新版的百度首页已然成了这副X样:

谷歌的:


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

This article explains how to create and validate HTML5 forms. It details the <form> element, input types (text, email, number, etc.), and attributes (required, pattern, min, max). The advantages of HTML5 forms over older methods, incl

This article explains how to embed audio in HTML5 using the <audio> element, including best practices for format selection (MP3, Ogg Vorbis), file optimization, and JavaScript control for playback. It emphasizes using multiple audio f

The article discusses using viewport meta tags to control page scaling on mobile devices, focusing on settings like width and initial-scale for optimal responsiveness and performance.Character count: 159

The article discusses managing user location privacy and permissions using the Geolocation API, emphasizing best practices for requesting permissions, ensuring data security, and complying with privacy laws.

The article discusses using the HTML5 Page Visibility API to detect page visibility, improve user experience, and optimize resource usage. Key aspects include pausing media, reducing CPU load, and managing analytics based on visibility changes.

This article details creating interactive HTML5 games using JavaScript. It covers game design, HTML structure, CSS styling, JavaScript logic (including event handling and animation), and audio integration. Essential JavaScript libraries (Phaser, Pi

The article explains how to use the HTML5 Drag and Drop API to create interactive user interfaces, detailing steps to make elements draggable, handle key events, and enhance user experience with custom feedback. It also discusses common pitfalls to a

This article explains the HTML5 WebSockets API for real-time, bidirectional client-server communication. It details client-side (JavaScript) and server-side (Python/Flask) implementations, addressing challenges like scalability, state management, an
