探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置: 南京小程序开发 > 小程序资讯 > 网站制作 >
9种布局设计趋势
来源:南京小程序开发   发布时间:2018-09-26 点击:
不久之前,网页设计是印刷品的反映。列和行遵循刚性线,内容和图像锚定到固定空间。但随着HTML,CSS和JavaScript等工具的发展,布局设计的可能性也在不断发展。以下是设计师用于创建独特布局和推动新设计设计的9种实践
 
1.添加具有视差效果的深度
 
使用视差是一种给出布局设计深度的方法。分层图形,图像和文本,同时将其移动与滚动位置相结合,使布局更具动感和趣味性。这种效果的定义特征是移动前景中的内容比背景更快。
 
在Epicurrence(上图)的例子中,一个专注于户外活动的创意非会议,他们将精心设计的插图与视差相结合。请注意背景如何变大或变小,具体取决于您滚动的方向?Parallax让您感觉自己正在进入一个物理空间,而不仅仅是盯着平面屏幕。
 
Parallax是一种多功能的效果 - 这里是法国瓷器公司Jaune de Chrome,将带有文字的陶瓷图像叠加在一起,形成一种艺术和复杂的独特布局,就像他们的品牌一样。
 
2.使用重叠元素
如今,网站不再需要平整的独立盒子了。设计师将z轴与设计元素叠加在一起,意味着远离“干净”,自足的极简主义,带有文本,图像,颜色和图案层。
 
WebINTENSIVE是一家软件公司,在他们的项目页面采用三层方法,在一块图像上放置一张卡片,在一块颜色的顶部,将内容推到最前面:
 
图像上的分层类型是另一种使设计感觉不那么紧缩的方法。在这个来自品牌和设计机构Bauhem的例子中,他们对标题和正文文本使用延迟淡入效果,将它们分层叠加在单色背景图像上。这使设计不会感觉过于四四方方或基于卡片。
 
在英雄图像上浮动标题是设计师使用重叠元素的另一种方式。这是一个熟悉的设计实践,但一些网站采取了独特的方法,真正脱颖而出。
 
阿姆斯特丹环球公司采用这一基本概念并赋予其自身的灵感 他们缩小了他们的英雄形象,并将其标题文本的一部分浮动在其上,以进行创意布局设计:
 
 
3.使用偏移标题,子标题和列分解内容
并非每个版面设计都需要复杂的动画和其他装饰。简单地抵消元素和列可以保持布局不受对称的枯燥限制。
 
制药公司Alvogen使用这种交错设计方法来实现更有趣的布局:
 
4.使用水平卡布置内容
水平布局是保持设计过度拥挤的简单方法。它也适用于较小的移动屏幕,其中设计转换为相关内容的垂直滚动。
 
Hypergiant是一家为公司提供高级软件解决方案的公司,它使用横向卡片来处理一些最重要的内容:
 
这个网站关于Waangari Maatha,第一位获得诺贝尔和平奖的非洲女性,在风景照片旁边有引号:
 
免费电子书:网页设计101
掌握网页设计的基本概念,包括排版,色彩理论,视觉设计等等。
 
现在读
 
5.分屏
分屏可让您在布局中分解大块内容并最大化屏幕空间。将屏幕的每一侧专用于互补内容可以提供更强大,更统一的信息。
 
在这个例子中,食品工具包公司Ono使用带有滚动触发动画的分屏,为用户提供充满色彩和动感的体验。
 
电动自行车公司Cowboy还使用分屏,冷静,现代的摄影和简洁的复制品,告诉消费者他们的产品。
 
6.显示你的网格
 
在这个投资组合网站中,Hiro Shibata在其着陆页下方显示了网格。戏剧中有一种叫“打破第四面墙”的东西,演员直接向观众发表讲话。显示你的网格就像打破了设计的第四面墙 - 剥离布局并揭示下面的内容。
 
显示网格提醒一个页面只是仔细排列的像素。使这些指南可见水泥元素到位,使它们与它们占据的屏幕空间之间更强的凝聚力。
 
7.将标题推到后台
将标题放在后台似乎违反直觉,但不是每个设计元素都需要大喊大叫。 
 
这种趋势是一种微妙的方法,可以维持内容的影响。当与相关图像或动画组合时,标题消息不会丢失,而是会被强化。
 
以工业粉碎公司Weima为例。“碎片”隐藏在机器的旋转叶片后面,为动画提供补充和重点。
 
8.选择侧滚动
好吧,这不是一个布局的做法本身 -但它确实影响内容需要如何进行组织。要实现这一目标,需要认真规划和管理文本,图像和其他元素,以便将正确的消息传递到紧密约束的空间中。
 
Grand Image是一家定制艺术品公司,采用侧面滚动,布局精巧,使所有内容井井有条,易于阅读:
 
在这个例子中,Keus是一家背包公司,所有东西都采用横向滚动设计,并且感觉整洁。
 
9.插入滑块
这是另一种不是独一无二的布局,但它突破了设计协议,通过节省空间为设计师提供了更多的创作自由。
 
让我们面对现实 - 滑块可以很笨重。他们可以打破设计的一致性,带您走出体验。但是设计师正在改进滑块,使它们不那么突兀,同时保留它们的功能。
 
在能量饮料X先生的网站上,滑块占据了有限的屏幕空间,但避免迷失在布局中:
 
你想在哪里看到网页设计?
随着设计师变得如此有创意,很难跟上不同的独特布局方法。您注意到哪些趋势?你想看到设计师做多了什么?请在下面的评论中告诉我们!
  • 上一篇:了解SEO:如何帮助您的客户找到您
  • 下一篇:缺乏移动友好网站的三个原因是花钱
  • 最新资讯
    2019-08-16
    南京app营销和运营推广
    现在,游戏等娱乐化的产品仍是移动应用中的主要组成部分,
    2019-08-16
    南京app开发发展的三步骤
    PC端的移动化曾经一度被认为是南京app开发的未来。 所谓的
    2019-08-16
    南京APP开发的营销模式分析
    南京APP植入模式 在免费和付费南京APP这两者之间,你会更倾
    2019-08-12
    在APP开发前期 如何跟开发讲解需求
    .向程序开发人员讲解需求和细致原型,要求系统分析后任务
    2019-08-12
    南京APP外包公司如何为一个外包项目定价
    对于南京APP外包公司来说,需要有一个比较完善的需求功能列
    随机资讯
    2019-08-08
    南京APP开发多少钱
    随着时代的不断发展,技术的不断进步, 南京APP开发 发现网
    2019-08-05
    南京小程序结合教育的现状
    据公开数据显示,自2017年1月小程序正式发布以来,目前已经
    2018-09-24
    7个SEO工具用于更好的Youtube视频推广
    在今天的数字世界中,视频内容是王道。事实上,据信,到
    2018-09-20
    百度推出针对恶意内容获取的飓风2.0
    百度前几天宣布,它将发布其Hurricane算法的更新,该算法旨在
    2018-09-20
    如何完善应用程序中的首次用户体验
    不知何故,我们开始接受这样一种观念,即数字技术是解决所