大设计时代:针对超大网页布局的一些思考和建议 [Aseoe]
对于有些设计项目来说,老套的设计模式并不奏效,你需要设计的大点,要比以往设计的元素还要大,因此就非常适合采用超大网页布局。无论是采用大块大块的背景照片还是背景视频,超大网页布局的效果非常显著:极具视觉冲击力,吸引用户注意力。
但是超大网页布局有什么诀窍呢?这里我们通过案例给出一些建议。







超大网页布局最明显的好处便是具备极强的视觉冲击力(就像上图的妹子一样,想知道妹子是谁咩?私信优设哥呗)。
使用大型的界面元素或者图像,可以有效的引导用户驻足、观看、点击你的网页,超大网页布局本质上能够虚拟提升网站的功效。
视差滚动对于超大网页布局来说,非常合适,同时采用视差动和超大网页布局的网站效果非常棒,网页的每一块区域,都包含着方便用户交互的超大元素。
超大图片和视频的显示效果显著,可以作为页面的背景,也可以仅仅就是一张图像,能够营造优秀的视觉效果。这里不推荐使用一些普通的、平凡的照片作为大图,推荐使用一些异常吸引人的,效果显著的照片。
好的作品要极力展示。好的作品要配以优秀的图像和文字。大字所带来的象征性意义不只是字面上的,还能带来一种”重要“的感觉,让人难以忘记。当页面中句子比较简洁、直截了当的时候,建议使用这种超大文本的布局方式。
作品集网站就很适合采用超大设计——对于设计师、艺术家、摄影师来说,大图片很便于展示他们的作品,强调他们的视觉风格。
零售类和食物类网站也很适合采用超大网页设计,那么大的诱人图像,详细的产品细节,谁看了不动心?


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

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

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

超大网页布局设计适合使用简单的导航方式。锚导航工具就很不错。
可以自己想想,自己探索一下下面的三个问题。
导航对于网站来说有多重要?这些导航元素也需要放大吗?还是这种布局情况下,标准的导航工作起来更奏效?

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

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

这个还用说吗?我觉得理所当然,保持简约,大的元素才能突出,大的网页设计才有意义。如果有些元素非常值得”大”书特书,适合做的大一点,那么尽量保持页面简约,别让其他复杂的元素干扰了用户的视觉注意力。
跟其他设计工具一样,超大设计不是万能的,并不是适合所有的项目,而且设计起来也不是很容易。
首先,必须要有合适的超大元素来保证效果。看看上面的这些网站,他们都通过大号元素打造了视觉焦点——图像、字体、颜色块、背景图像。这就是超大设计的本质。如果没有特别合适的这种素材,那么建议不要采用超大设计。
强扭的瓜不甜,不要强迫自己使用这种设计。其实有的元素在尺寸较小的情况小比较奏效,那把它放大就不值得了。
超大网页设计的艺术在于——元素实际上尺寸很大,但浏览起来感觉上不大,主要为突出内容而服务,一种平衡的艺术。
来自:http://bbs.aseoe.com/thread-877-1-1.html
大设计时代:针对超大网页布局的一些思考和建议 [Aseoe]的更多相关文章
- 大数据时代的IT架构设计
大数据时代的IT架构设计(来自互联网.银行等领域的一线架构师先进经验分享) IT架构设计研究组 编著 ISBN 978-7-121-22605-2 2014年4月出版 定价:49.00元 208页 ...
- PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- <转载>网页设计中的F式布局
地址:http://www.uisdc.com/understanding-the-f-layout-in-web-design 网页设计中的F式布局 今天我们来重点介绍网页设计中的F式布局.传统的布 ...
- 新书发布《大数据时代的IT架构设计》
<大数据时代的IT架构设计>以大数据时代为背景,邀请著名企业中的一线架构师,结合工作中的实际案例展开与架构相关的讨论.<大数据时代的IT架构设计>作者来自互联网.教育.传统行业 ...
- PS网页设计教程XXVIII——如何在PS中创建一个干净的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- 应大数据时代而写了个磁力搜索的网页- WWW.MOVIH.COM 磁力
应大数据时代而写了个磁力搜索的网页- 索马里搜索磁力 http://www.,movih.com/ BT磁力示例网站:WWW.MOVIH.COM 采用分布式架构: JAVA系统:JBOSS7+EJB3 ...
- ECharts – 大数据时代,重新定义数据图表
ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对 ...
- 大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)
大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教 ...
- 大数据时代的技术hive:hive介绍
我最近研究了hive的相关技术,有点心得,这里和大家分享下. 首先我们要知道hive到底是做什么的.下面这几段文字很好的描述了hive的特性: 1.hive是基于Hadoop的一个数据仓库工具,可以将 ...
随机推荐
- c#中单元测试
从走进.net后发现每天有写不完的代码,有做不完的测试...人感觉都已经机械,我们需要认清自己调整好心态,问下自己是否真的喜欢编程.我的答案当然也就是我爱编码,编码给我带来了许多欢乐,每天都给我体验小 ...
- C# 中的结构类型(struct)
原文 C# 中的结构类型(struct) 简介 有时候,类中只包含极少的数据,因为管理堆而造成的开销显得极不合算.这种情况下,更好的做法是使用结构(struct)类型.由于 struct 是值类型,是 ...
- java设计模式—Adapter模式
1.核心意图: 将一个类的接口转换成客户希望的另外一个接口,从而使得原本由于接口不兼容而不能一起工作的类可以一起工作. 该模式的目标是通过一个代理(这里是Adapter),在原来的类(Adap ...
- codeforces 671B Robin Hood 二分
题意:有n个人,每个人a[i]个物品,进行k次操作,每次都从最富有的人手里拿走一个物品给最穷的人 问k次操作以后,物品最多的人和物品最少的人相差几个物品 分析:如果次数足够多的话,最后的肯定在平均值上 ...
- FZU1686 神龙的难题 dancing links 重复覆盖
分析:每次可以打一个小矩阵的怪,然后把每个怪看成一列,然后每个小矩阵看成一行,枚举左上角就行 注:然后注意总共的节点数是新图的行*列的个数,不是原图 #include<cstdio> #i ...
- WebDriver打开浏览器-java
环境:配置jdk.使用Eclipse(个人爱好),导入selenium-java-2.42.2.jar.selenium-java-2.42.2-srcs.jar.selenium-server-st ...
- Android UI -- 布局介绍(布局包括FrameLayout, LinearLayout, RelativeLayout, GridLayout)
首先介绍常用布局类 FrameLayout 最简单的布局管理器. 这个布局管理类有几个特性: 添加组件默认在左上角的. 如果添加多个组件会叠加到一起,并且都在左上角.(可以通过一gravity属性改变 ...
- [原创]使用命令行工具提升cocos2d-x开发效率(二)之CocosBuilder篇
如果你正在使用CocosBuilder或者是其他基于CocosBuilder源码改装而成的工具为你的游戏搭建场景或者UI,那你一定要看看这篇文章:) 你是否已经厌倦了无聊的手工publish操作? ...
- -lrt
在编写pthread有关的程序时,编译时老是报"undefined reference to `pthread_create'"的错误,原因是没有链接pthread相关的库,gcc ...
- Java实现在访问者模式中使用反射
集合类型在面向对象编程中很常用,这也带来一些代码相关的问题.比如,“怎么操作集合中不同类型的对象?” 一种做法就是遍历集合中的每个元素,然后根据它的类型而做具体的操作.这会很复杂,尤其当你不知道集合中 ...