当前位置:首页 > 网站建设 > 正文内容

html引导页(HTML引导页模版)

网站建设12个月前 (01-25)435

随着扁平化1.0运用了两三年,新的扁平化2.0时代,在去年渐变流行后打破了开端,这周研究一些扁平化2018移动端设计布局趋势,整理分析了一些常用的布局形态。

不规则弧线布局

17年在很多新的设计趋势里面有种风格,一般常在页面头部采用不规则弧线几何图形的形式作为头部主视觉,区别于传统长方形,形成设计差异性,同时在不规则弧线处理上常用头图或者插画进行结合,有时候也会已线条形式出现。

上图(左图)在我的页面顶部头图采用波浪弧线设计很好的和背后森林融合,(中图)也是类似原理,(右图)在侧边栏采用插画风格。

这组音乐播放页面通用区别于传统光碟环绕采用的不规则波浪和线条来营造音乐的旋律感。

展开全文

在引导页上也可以采用这种流行线条对引导页面内容进行串联形成故事性。

除了在移动端运用,在网页和产品页面也很多采用这种风格,让产品网站看起来没有那么单调枯燥。

层叠式布局

类似谷歌材料设计通过卡片和投影感觉来营造层叠效果,长距离大范围的投影设计,投影色为按钮元素中浅色,触感呼之欲出。

上图(左图)在书籍封面上采用封面、背景和消息留这种视觉错差营造布局空间感,(中图)大的专辑封面长图和背景很好的融合,(右图)卡片滑动时候的层叠效果。

通过加大后面卡片厚度集合大投影是目前一种主流手法,包括上图(右图)的日历当天“提醒”也是卡片调出感觉,瞬间和竞品拉开差异性。

大投影除了运用在按钮和卡片上,在列表、信息流卡片上也同样适合运用。

网格偏出布局

一般文字在网格图片的空间里面偏左或偏右偏离于页面主体,或者几何图形在页面背后,又或者和页面重叠,来营造一种破形感觉。

这种风格打破网格图片局部展示,很好的在平面有序的空间里形成了视觉差异性,这种差异性往往让页面显得独特,但是需要注意页面的留白和字体的运用选择。

异形导航布局

iOS和安卓平台的规范越来越模糊,最近很多APP改版都在打破平台规范,很多APP在导航设计上出现了很多类似当年Path的创新,惊艳的交互和视觉形式。

最新的设计风向中,传统的导航tab和底部导航,传统宫格布局这种规范边界越来越模糊,用户在千篇一律的设计中对这种设计也比较能接受。

上图中(左图)顶部导航运用车的流动线条,返回按钮用的车灯形状,符合产品定位和气质,(中图)主导航采用4个流动的气泡,(右图)选择歌曲运用圆盘设计,很是新颖。

菜单设计、列表卡片设计、提示气泡、滑动删除这些操作在扁平化2.0里面都是可以被打破的。

html引导页(HTML引导页模版)

云视差布局

利用现实生活中体验,利用手机硬件陀螺仪来做视觉空间视差,目前天猫banner是个尝试,这种运用在banner、互动游戏、地图以及未来概念设计比较多,未来AR/VR交互会很多往这个方向发展。

对角线布局

对角线布局在页面可视空间内通过对角线的连接,形成一种视角线,这种设计能和普通的设计在板式上快速拉开差异性。

slack的官网上主banner图形采用的这种设计方法,让主页更有空间感。

国外设计公司网站在主页突出他们服务也是采用类似构图方法。

Floatable官网设计采用对角线和人物层叠的形式很好的凸显的时尚感。

House Decor的后台设计很好的通过对角线布局来体现去空间感和仪式感

REECH在页面设计时候运用对角线作为深色,同时结合流动的线条凸显主营业务和速度感。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://hon-tex.cn/post/82542.html

标签: html引导页
分享给朋友:

“html引导页(HTML引导页模版)” 的相关文章

邢台网站制作(邢台网站推广)

邢台网站制作(邢台网站推广)

今天给各位分享邢台网站制作的知识,其中也会对邢台网站推广进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、邢台网站网页制作、建设、设计,做网站最好最便宜的网络公司? 2、邢台网站建设公司哪家好 3、邢台心想网络科技有限公司怎么样? 4、邢台网站建设...

网站优化及推广公司(网站优化推广公司电话)

网站优化及推广公司(网站优化推广公司电话)

今天给各位分享网站优化及推广公司的知识,其中也会对网站优化推广公司电话进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、北京哪里有做网站优化的公司? 2、网站seo推广公司哪些好 3、网站优化推广公司应该注意哪些细节? 4、苏州网站优化找哪家...

武汉?网站制作(武汉网站制作案例)

武汉?网站制作(武汉网站制作案例)

今天给各位分享武汉?网站制作的知识,其中也会对武汉网站制作案例进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、武汉网站设计制作,武汉做网站多少钱 2、武汉网站建设哪家公司好 3、武汉网站建设公司哪家最好? 4、在武汉制作一个网站需要多少钱?...

手机制作3d模型的软件(手机能做3d模型的软件)

手机制作3d模型的软件(手机能做3d模型的软件)

本篇文章给大家谈谈手机制作3d模型的软件,以及手机能做3d模型的软件对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、手机上有哪些3d建模软件 2、3d建模软件哪个好 3、做3d模型的软件都有那些 ?那些擅长做人物模型? 4、有什么软件可以在手机上面做3D动画...

用dw制作个人网站(dw制作个人网站代码)

用dw制作个人网站(dw制作个人网站代码)

本篇文章给大家谈谈用dw制作个人网站,以及dw制作个人网站代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、dreamweaver怎么做一个简单的网页 2、DW怎么做个人主页 3、怎样用DW制作一个简单的网站,并且能发布到网上,详细步骤,请大师指点 4、如何...

免费3d模型库史迪仔(史迪仔图片3D)

免费3d模型库史迪仔(史迪仔图片3D)

今天给各位分享免费3d模型库史迪仔的知识,其中也会对史迪仔图片3D进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、GLTFS模型库的3D模型能免费下载吗? 2、求3d模型下载,免费的。 3、如何下载免费的3d人物模型? 4、有哪个网站可以免费下载...