网站建设中最实用的扁平化2.0设计布局简析(干货)

所属分类: 网站运营 / 网站策划 阅读数: 104
收藏 0 赞 0 分享

  常用的移动端设计布局形式:不规则弧线布局、层叠式布局、网格偏出布.....

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

  1、不规则弧线布局

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

  简析:这3张作品,第一张在我的页面顶部头图采用波浪弧线设计很好的和背后森林融合,第二张图也是类似原理,第三张在侧边栏采用插画风格。

  简析:除了运用到菜单栏,播放页面,在引导页上也可以采用这种流行线条对引导页面内容进行串联,形容故事性。

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

  2、层叠式布局

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

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

  简析:卡片通过加大后面卡片厚度集合大投影是目前一种主流手法,包括图3的日历当天有提醒时候也是卡片调出感觉,瞬间和竞品拉开差异性。

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

  3、网格偏出布局

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

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

  4、异形导航布局

  平台的规范越来越模糊,最近的很多app改变在尝试去打破传统边界去做出强的差异性,很多app在导航上做出了类似菜单上,顶部导航上出现了类型path当年的创新,那种惊艳的交互和视觉形式。

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

  图1,顶部导航运用车的流动线条h,返回按钮用的车灯形状,符合产品定位和气质,图2,主导航采用4个流动的气泡,图3,选择歌曲运用圆盘设计,新颖。

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

  5、云视差布局

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

6、对角线布局

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

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

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

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

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

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

  总结

  不规则弧线布局

  常在页面头部才用不规则弧线几何图形的形式作为头部主视觉,区别于传统长方形,形成设计差异性,同时在不规则弧线处理上常用和头图或者插画进行结合,有时候也会采用线条形式出现。

  层叠式布局

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

  网格偏出布局

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

  异形导航布局

  平台的规范越来越模糊,最近的很多app改变在尝试去打破传统边界去做出强的差异性,很多app在导航上做出了类似菜单上,顶部导航上出现了类型path当年的创新,那种惊艳的交互和视觉形式。

  云视差布局

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

  对角线布局

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

  文 / sky 小密圈:sky的设计日记

更多精彩内容其他人还在看

电子商务网站转型的几个方向

为了给电子商务平台买卖双方以更大的吸引力,或许可以从企业本身的需求上得到一点启发: 第一、终端消费群体对生活品质的要求不会因为经济环境的恶化而降低标准,性价比足够高的商品仍然具有吸引力; 第二、采购商和供应商经营成本的增加必定导致终端产品价格的上涨
收藏 0 赞 0 分享

做网站内容为王

 笔者亲身经历过网站发展的过程,中国网店网从开始建立的毫无流量,毫无内容到现在逐步发展起来,感触和体会非常多,其中经历了太多太多的抉择,做网站到底是追求流量还是追求内容?亦或是追求用户?笔者用了大量的时间去思考这个问题,看着自己负责的网站一步一步的
收藏 0 赞 0 分享

互联网应该进军高端付费用户

互联网进军高端付费用户吧! --我不是不愿意付费,我需要的是能让我产生付费冲动的服务。 经常被同事们批评,老嫌弃我是高端用户,我真的很想辩解,我没进互联网这一行工作的时候,我就是高端用户了。 8年前,我就开始愿意为互联网付费。由此可见,高不高端是天生的
收藏 0 赞 0 分享

站长!其实你的思维可以更“变态”些!

按正常的理论来说,一般成功的站长,多多少少“头脑”都有点问题!也可以说比常人更“变态”!当然我说的“头脑有问题”、“变态”并不是医学上的哪些病,而是说这些成功人士一般想法和做事风格往往超出别人的想象,正是因为这样,才会有许多不同的特色成功站点出现
收藏 0 赞 0 分享

靠网站致富的梦想破灭,站长的前途在哪里?

 日赚500元,这是广大中小站长朋友们的一个不大不小的梦想。但是时过境迁,当今互联网早已非昨日之网络世界,有一些变动因素是我们不得不考虑的,日赚500元的不可行性分析笔者将主要从以下六个方面进行简要的分析。  其一,网民经验的丰富。  由于网民的经验越
收藏 0 赞 0 分享

用户体验都是从哪个角度做的

网站面向终端,用户体验的差别直接影响网站的发展。看看业界都是怎么做用户体验的。 1 豆瓣网:心灵鸡汤。它的用户体验究竟好在何处?非粉丝不能明白。如果你是个爱书人,自认为还有那么点儿与众不同的喜好,那么豆瓣很符合这样的定位。一杯清茶,伴
收藏 0 赞 0 分享

李一男2003年在港湾给开发人员培训时的语录

李一男2003年在港湾给开发人员培训时的语录: 【1】好好规划自己的路,不要跟着感觉走!根据个人的理想决策安排,绝大部分人并不指望成为什么院士或教授,而是希望活得滋润一些,爽一些。那么,就需要慎重安排自己的轨迹。从哪个行业入手,逐渐对该行业深入了解,不
收藏 0 赞 0 分享

少儿网站项目策划

一. 概述: 如果说21世纪是网络世纪,那么21世纪的教育也应该是网络化的教育。面对网络,当我们还在为网络的利弊以及是否让孩子上网争论不休的时候,Internet上的儿童网站在北美地区的普及率已经相当高,那里的孩子们在网络上已经走得很远了:小学老师给孩子布
收藏 0 赞 0 分享

个人站长建设地方网站完全手册

走到第十个年头,互联网下一步会走向何方?这是我们大家不断思索的问题。地方性网站一直是我比较感兴趣的话题,我的博客《榆林网志》里许多文章也在讨论我所在的城市的网络发展。地方网络也是我觉得中国互联网以后发展的一个趋势,也是榆林区域网络的前景所在。   
收藏 0 赞 0 分享

小型网络公司发展离不开个人站长

个人站长最大的愿望可能就是有一天自己的网站可以成为网络公司运作。但是,作为个人网站的站长,是不是也该理性的想想,那些网络公司的网站,就比个人站长的牛吗?曾经我很喜欢Mop,也很喜欢Chinaz 。是每天必上的,后来他们慢慢商业化成公司运作后,我现在只是在偶
收藏 0 赞 0 分享
查看更多