频道栏目
读书频道 > 网站 > 网页设计 > 网页设计创意书. 第4卷
1.9 响应式
2020-09-22 15:37:03     我来说两句
收藏   我要投稿

本文所属图书 > 网页设计创意书. 第4卷

本书展示了近700个顶尖网站设计示例。这些网站时而浓墨重彩、时而简洁素雅,为读者带来一场丰富的视觉盛宴。读者可以从这些优秀的作品中获得启发,博采众长,将这些作品的成功设计理念为己所用,从而设计出夺人眼  立即去当当网订购

也许现在设计师和开发人员面临的最大挑战就是把我们称之为“响应式布局”的设计狂潮理出个头绪。设计和制作在任何屏幕尺寸上都适用的网站,其难度之高简直相当于传说中英雄们所面对的挑战。因此,我真的十分希望在本节展示响应式设计的各种类型。针对响应式设计所收集的网页图片也是本书中最多的。如果能在这方面获得灵感,那将收获颇丰。仔细研究一下此处的范例,然后就会发现别人在建立作品集网站时,面临与你同样的问题时是如何解决的。

大多数响应式网站就像Michael Sevilla的作品集网站一样(图1),从大屏幕切换到小屏幕时,页面变化非常自然也比较明显。位于网格中的图片慢慢压缩,最终变成一列。导航栏也逐渐移动到了品牌标识图片的下方。这种效果给人的感觉十分自然,就好像屏幕压缩后,内容理应如此重新排列。同样的效果在Applove的网站上(图2)也能看到。在这里,原本一排排横向排列的内容随着屏幕的缩小,自然而然地逐渐排成一个竖列。我们经;峥吹秸庵掷嘈偷拇矸绞,而且我也将此视为现代网页设计中最大的一种结构模式。

回想大约十年前,网页的基本结构还只有如下几部分:清晰的页眉用来放置徽标和导航,侧边栏用来放置子导航,一个明显的内容区域,用来结束页面的页脚。那时候最常见的设计就是把一些类似“容器”的结构组合成一个整体。这些容器框定了所有内容的显示位置,所有元素都放到了容器里面,容器就像口袋一样,把所有东西都装了进去。而现在,我们发现响应式设计基本已经宣告了传统设计方式的终结。以前那些华丽的容器和盛放内容的框框,对于现在这个响应式世界的设计风格而言,简直就是一场噩梦。我们看到,取而代之的是一栏栏内容纵向排列,效果也非:。每一栏内容都可以按需自行调整,而且多个栏目可以彼此堆叠到一起。这样纵向上一栏一栏堆叠的方式已经成为当今内容结构排列的标准做法。在本节以及本书的案例中,这种排列方式会反复出现。



 


您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.8 登陆页式
下一篇:JavaScript网页动画设计
相关文章
图文推荐
排行
热门
最新书评
文章
下载
读书
特别推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 第一门户--致力于做实用的IT技术学习网站