• 技术文章 >web前端 >H5教程

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

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

    回复内容:

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

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

    另外一个例子google:
    完全的居中啊有没有,对称之美啊有没有!

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

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

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


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

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

    谷歌的首页和以前百度的首页在都坚持了这点,想想它们的页面一天要被访问多少次?能坚持下来真的不容易,当然,新版的百度首页已然成了这副X样:




    谷歌的:
    OFFICE2013的主题花纹。。。。ZUNE software的背景。。。
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:
    上一篇:HTML5实现自定义的数字键盘? 下一篇:Web App 开发使用哪种框架比较好?
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 分享HTML5虚拟键盘出现挡住输入框的解决办法• HTML5实践-三步实现响应式设计的详细介绍• HTML5边玩边学(二)-基础绘图• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 腾讯技术干货!做一个让人闻风丧胆的HTML5页面
    1/1

    PHP中文网