目錄
回复内容:
首頁 web前端 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 Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何將音頻添加到我的HTML5網站上? 如何將音頻添加到我的HTML5網站上? Mar 10, 2025 pm 03:01 PM

如何將音頻添加到我的HTML5網站上?

如何使用HTML5頁面可見性API檢測頁面何時可見? 如何使用HTML5頁面可見性API檢測頁面何時可見? Mar 13, 2025 pm 07:51 PM

如何使用HTML5頁面可見性API檢測頁面何時可見?

如何使用視口元標記來控制移動設備上的頁面縮放? 如何使用視口元標記來控制移動設備上的頁面縮放? Mar 13, 2025 pm 08:00 PM

如何使用視口元標記來控制移動設備上的頁面縮放?

如何使用地理位置API處理用戶位置隱私和權限? 如何使用地理位置API處理用戶位置隱私和權限? Mar 18, 2025 pm 02:16 PM

如何使用地理位置API處理用戶位置隱私和權限?

如何將HTML5表單用於用戶輸入? 如何將HTML5表單用於用戶輸入? Mar 10, 2025 pm 02:59 PM

如何將HTML5表單用於用戶輸入?

如何使用HTML5和JavaScript創建互動遊戲? 如何使用HTML5和JavaScript創建互動遊戲? Mar 10, 2025 pm 06:34 PM

如何使用HTML5和JavaScript創建互動遊戲?

如何使用HTML5通知API顯示桌面通知? 如何使用HTML5通知API顯示桌面通知? Mar 13, 2025 pm 07:57 PM

如何使用HTML5通知API顯示桌面通知?

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? 如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信? Mar 12, 2025 pm 03:20 PM

如何使用HTML5 Websockets API進行客戶端和服務器之間的雙向通信?

See all articles