对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局。无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉冲击力,吸引用户注意力。

但是超大网页布局有什么诀窍呢?这里我们通过案例给出一些建议。

大的好处

joes

eone-time

crema-coffee

lrxd

riskeverything

thewhig

超大网页布局最明显的好处便是具备极强的视觉冲击力(就像上图的妹子一样,想知道妹子是谁咩?私信优设哥呗)。
使用大型的界面元素或者图像,可以有效的引导用户驻足、观看、点击你的网页,超大网页布局本质上能够虚拟提升网站的功效。

视差滚动对于超大网页布局来说,非常合适,同时采用视差动和超大网页布局的网站效果非常棒,网页的每一块区域,都包含着方便用户交互的超大元素。

超大图片和视频的显示效果显著,可以作为页面的背景,也可以仅仅就是一张图像,能够营造优秀的视觉效果。这里不推荐使用一些普通的、平凡的照片作为大图,推荐使用一些异常吸引人的,效果显著的照片。

好的作品要极力展示。好的作品要配以优秀的图像和文字。大字所带来的象征性意义不只是字面上的,还能带来一种”重要“的感觉,让人难以忘记。当页面中句子比较简洁、直截了当的时候,建议使用这种超大文本的布局方式。

作品集网站就很适合采用超大设计——对于设计师、艺术家、摄影师来说,大图片很便于展示他们的作品,强调他们的视觉风格。

零售类和食物类网站也很适合采用超大网页设计,那么大的诱人图像,详细的产品细节,谁看了不动心?

建议:将网页设计的”大”一点

mixd

mollyandmepecans

并不是页面中的每个元素、每一部分都必须大。巧妙的搭配和组合更为重要,这样才能达到最好的视觉冲击。

kinhr

聚焦图像

大图像必须清晰、深刻、传递强烈深刻的信息。如果你的网站出售一些商品,那么这些商品的图像必须清晰。如果网站是关于食物,那么尽可能多的展示出食 物、菜品的细节。最好的大图网页设计既能保持色彩的缤纷多样,又能保持整个页面的可读性。因此必须选取一流的图片,尽量避免使用图片库中的图片,因为你在 用这种图片,别的公司可能也在用,只有独一无二才能保证吸引力。

eshbeata

设计优美的字体

如果手头没有合适的、优秀的大图,那么可以考虑一下字体设计,可以使用一些超过85磅的字体,新奇的字体也能带来极强的视觉冲击。试着将字体与色彩结合,逐渐调整,以达到最好的效果。

holler

尽量使用标准的导航方式

超大网页布局设计适合使用简单的导航方式。锚导航工具就很不错。
可以自己想想,自己探索一下下面的三个问题。

导航对于网站来说有多重要?这些导航元素也需要放大吗?还是这种布局情况下,标准的导航工作起来更奏效?

skewedicons

正确用色

用色要具有冲击力,要和整体一致。因为一切元素都变大了,因此色彩的区域也变大了。色彩必须配合好其他元素更好的工作,通过色彩来创造视觉上的对照和强调。

smokeybones

一定的效果限制

尽量限制一下超大网页设计的效果,比如动效、视差滚动等等,如果效果太多,用户会感到太繁琐。最好只添加一种页面特效。

themetrust

保持简约

这个还用说吗?我觉得理所当然,保持简约,大的元素才能突出,大的网页设计才有意义。如果有些元素非常值得”大”书特书,适合做的大一点,那么尽量保持页面简约,别让其他复杂的元素干扰了用户的视觉注意力。

不是每个设计项目都适合采用超大设计

跟其他设计工具一样,超大设计不是万能的,并不是适合所有的项目,而且设计起来也不是很容易。

首先,必须要有合适的超大元素来保证效果。看看上面的这些网站,他们都通过大号元素打造了视觉焦点——图像、字体、颜色块、背景图像。这就是超大设计的本质。如果没有特别合适的这种素材,那么建议不要采用超大设计。

强扭的瓜不甜,不要强迫自己使用这种设计。其实有的元素在尺寸较小的情况小比较奏效,那把它放大就不值得了。

超大网页设计的艺术在于——元素实际上尺寸很大,但浏览起来感觉上不大,主要为突出内容而服务,一种平衡的艺术。

来自:http://bbs.aseoe.com/thread-877-1-1.html

大设计时代:针对超大网页布局的一些思考和建议 [Aseoe]的更多相关文章

  1. 大数据时代的IT架构设计

    大数据时代的IT架构设计(来自互联网.银行等领域的一线架构师先进经验分享) IT架构设计研究组 编著   ISBN 978-7-121-22605-2 2014年4月出版 定价:49.00元 208页 ...

  2. PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  3. <转载>网页设计中的F式布局

    地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...

  4. 新书发布《大数据时代的IT架构设计》

    <大数据时代的IT架构设计>以大数据时代为背景,邀请著名企业中的一线架构师,结合工作中的实际案例展开与架构相关的讨论.<大数据时代的IT架构设计>作者来自互联网.教育.传统行业 ...

  5. PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  6. 应大数据时代而写了个磁力搜索的网页- WWW.MOVIH.COM 磁力

    应大数据时代而写了个磁力搜索的网页- 索马里搜索磁力 http://www.,movih.com/ BT磁力示例网站:WWW.MOVIH.COM 采用分布式架构: JAVA系统:JBOSS7+EJB3 ...

  7. ECharts – 大数据时代,重新定义数据图表

    ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...

  8. 大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)

    大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教 ...

  9. 大数据时代的技术hive:hive介绍

    我最近研究了hive的相关技术,有点心得,这里和大家分享下. 首先我们要知道hive到底是做什么的.下面这几段文字很好的描述了hive的特性: 1.hive是基于Hadoop的一个数据仓库工具,可以将 ...

随机推荐

  1. Jquery AutoComplete的使用方法实例

    jquery.autocomplete详解 语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项 ...

  2. ramdisk作为根文件系统的配置

    ramdisk作为根文件系统的配置 http://wenku.baidu.com/link?url=oKj45hKtIANfoVzmoFAmWEvESHiqgWysxPASelpzaXk35gWb1I ...

  3. VS2010 Chromium编译

    推荐使用Windows 7及以后系统,最少8G内存,预留出50G磁盘空间 搭建Visual Studio 2010开发环境 1.安装Visual Studio 2010专业版或者旗舰版 2.安装VS2 ...

  4. 在中国Windows Azure服务中创建应用程序的一些不同之处

    Azure 中的托管服务由一个应用程序(用于在托管服务中运行)和 XML 配置文件(定义托管服务的运行方式)组成.托管服务同时使用服务定义文件 (.csdef) 和配置文件 (.cscfg).有关详细 ...

  5. hadoop cdh 4.5的安装配置

    春节前用的shark,是从github下载的源码,自己编译.shark的master源码仅支持hive 0.9,支持hive 0.11的shark只是个分支,不稳定,官方没有发布release版,在使 ...

  6. jquery chart plugin

    jquery flot http://www.jqueryflottutorial.com/ jquery jqplot http://www.jqplot.com/ highcharts中文网 : ...

  7. HW6.27

    import java.util.Scanner; import java.util.Arrays; public class Solution { public static void main(S ...

  8. linux oracle10g安装

    同样适合11g哦,亲; 一.安装系统 首先安装Linux系统,根据Oracle官方文档的建议,在机器内存小于1G的情况下,swap分区大小应该设置为内存的2倍大,若内存大于2G则swap分区设置为与内 ...

  9. 转:SQL Server 批量插入数据的两种方法

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  10. rank() | dense_rank() | row_number() over(PARTITION BY sex order by age desc ) 的区别

    1.row_num() over()函数:根据某个字段排序后编号1,2,3.. select *,ROW_NUMBER() over ( order by majorid) as numfrom St ...