随着扁平化1.0运用了两三年,新的扁平化2.0时代,在去年渐变流行后打破了开端,这周研究一些扁平化2018移动端设计布局趋势,整理分析了一些常用的布局形态。
不规则弧线布局
17年在很多新的设计趋势里面有种风格,一般常在页面头部采用不规则弧线几何图形的形式作为头部主视觉,区别于传统长方形,形成设计差异性,同时在不规则弧线处理上常用头图或者插画进行结合,有时候也会已线条形式出现。
上图(左图)在我的页面顶部头图采用波浪弧线设计很好的和背后森林融合,(中图)也是类似原理,(右图)在侧边栏采用插画风格。
这组音乐播放页面通用区别于传统光碟环绕采用的不规则波浪和线条来营造音乐的旋律感。
展开全文
在引导页上也可以采用这种流行线条对引导页面内容进行串联形成故事性。
除了在移动端运用,在网页和产品页面也很多采用这种风格,让产品网站看起来没有那么单调枯燥。
层叠式布局
类似谷歌材料设计通过卡片和投影感觉来营造层叠效果,长距离大范围的投影设计,投影色为按钮元素中浅色,触感呼之欲出。
上图(左图)在书籍封面上采用封面、背景和消息留这种视觉错差营造布局空间感,(中图)大的专辑封面长图和背景很好的融合,(右图)卡片滑动时候的层叠效果。
通过加大后面卡片厚度集合大投影是目前一种主流手法,包括上图(右图)的日历当天“提醒”也是卡片调出感觉,瞬间和竞品拉开差异性。
大投影除了运用在按钮和卡片上,在列表、信息流卡片上也同样适合运用。
网格偏出布局
一般文字在网格图片的空间里面偏左或偏右偏离于页面主体,或者几何图形在页面背后,又或者和页面重叠,来营造一种破形感觉。
这种风格打破网格图片局部展示,很好的在平面有序的空间里形成了视觉差异性,这种差异性往往让页面显得独特,但是需要注意页面的留白和字体的运用选择。
异形导航布局
iOS和安卓平台的规范越来越模糊,最近很多APP改版都在打破平台规范,很多APP在导航设计上出现了很多类似当年Path的创新,惊艳的交互和视觉形式。
最新的设计风向中,传统的导航tab和底部导航,传统宫格布局这种规范边界越来越模糊,用户在千篇一律的设计中对这种设计也比较能接受。
上图中(左图)顶部导航运用车的流动线条,返回按钮用的车灯形状,符合产品定位和气质,(中图)主导航采用4个流动的气泡,(右图)选择歌曲运用圆盘设计,很是新颖。
菜单设计、列表卡片设计、提示气泡、滑动删除这些操作在扁平化2.0里面都是可以被打破的。
云视差布局
利用现实生活中体验,利用手机硬件陀螺仪来做视觉空间视差,目前天猫banner是个尝试,这种运用在banner、互动游戏、地图以及未来概念设计比较多,未来AR/VR交互会很多往这个方向发展。
对角线布局
对角线布局在页面可视空间内通过对角线的连接,形成一种视角线,这种设计能和普通的设计在板式上快速拉开差异性。
slack的官网上主banner图形采用的这种设计方法,让主页更有空间感。
国外设计公司网站在主页突出他们服务也是采用类似构图方法。
Floatable官网设计采用对角线和人物层叠的形式很好的凸显的时尚感。
House Decor的后台设计很好的通过对角线布局来体现去空间感和仪式感
REECH在页面设计时候运用对角线作为深色,同时结合流动的线条凸显主营业务和速度感。
温馨提示
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请后台提交工单处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请后台提交工单!
【免责声明】:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
【关于转载】:
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。
【附】:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!
-----------------------------------------------------------------------------------------------------------
【版权声明】:
一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------
源码村资源网 » app页面布局分类(app页面布局构架图)
1 评论