页面设计没有空间感?试试这些方法!

这几个设计技巧,让你的页面有“深度”!在页面设计的过程中,增加页面的视觉深度,意味着增加空间感和纵深感,可以创造沉浸式体验。以下五种方法可以有效提升页面的视觉纵深感——

页面设计没有空间感?试试这些方法!

1、光感+投影

最近流行起来的一种 UI 设计风格,是一种新拟物风格(New Skeuomorphism),也是拟物风格 2.0 版本,被称作 Neumorphism,通过运用光线和阴影,塑造立体感和空间感:

页面设计没有空间感?试试这些方法!

by Michal Malewicz

这种设计风格并不难做,设计元素主要有三个部分组成:1 个背景+ 2 个投影。通过改变这三部分的颜色和大小等参数来达到不同的视觉效果:

页面设计没有空间感?试试这些方法!

通常情况下,界面的空间感都可以通过统一的光感和投影得到很好的表现:

光感:统一的光源具有视觉导向性,可用来突出主要元素

投影:不同的投影在颜色和大小之间有细微的差别,可以自然平滑的创造出多个视觉层次

页面设计没有空间感?试试这些方法!

by Alison Danis in Daily UI Challenge

2、遮挡布局

在排布页面元素时,适当地运用遮挡布局,使主题文字和图案相互穿插遮挡,打破原有的轮廓和边界,使内容产生前后叠压的关系,以此营造层次感。

案例1:艺术信息分享网站 DICE,官网页面使用的不断变化的抽象动态图形和文字相互叠压,产生错落感;同时背景的霓虹渐变色与抽象图形的颜色产生明度对比,营造页面的空间感:

页面设计没有空间感?试试这些方法!

Homepage

案例2:课程分享网站 DesignCode,首屏的边缘线设计很巧妙,上下起伏的波浪效果与图标和按钮产生有趣的叠压和遮挡关系,自然的体现出空间层次:

页面设计没有空间感?试试这些方法!

https://designcode.io

3、添加遮罩层

我们常用的黑色透明遮罩层,是一种非常有效的空间营造手法。尤其是当最上层的主体内容是不规则图形,并添加一些三维表现和动态效果,这种空间感会更为强烈。

案例1:最常见到的黑色透明遮罩,可以明确的拉开主题内容和背景之间的距离,形成通透的空间感:

页面设计没有空间感?试试这些方法!

案例2:DesignCode 网站的注册页面在用户注册成功后,会制造出礼花的视觉动态效果,清晰明艳的礼花与白色遮罩层后的模糊背景之间产生出了很强的空间距离感:

页面设计没有空间感?试试这些方法!

https://designcode.io

4、滚动视差

我们曾在文章:解锁丨超级炫酷的滚动视差设计,其实并不难!中为大家详细的介绍了滚动视差页面的设计方法。通过控制页面上位于不同图层的元素的运动速度、距离、位置与方向,让二维平面上的物体呈现出三维立体的空间感,打造沉浸式浏览体验。

案例1:Apple 的官网使用了大量的滚动视差设计手法,使页面内容呈现的方式炫酷多样。如下方 Airpods Pro 的介绍页面,从多层次和多维度的视觉效果更好的进行产品展示:

页面设计没有空间感?试试这些方法!

https://www.apple.com

案例2:Beer Camp 网站按照页面导航将内容划分为几个层级,依靠鼠标滚动,沿着透视线平滑缩放页面,连接起每一层级的信息,实现一镜到底的空间进深:

页面设计没有空间感?试试这些方法!

http://2011.beercamp.com

5、三维表现

使用 2.5D 或者 3D 透视绘制元素的立体效果,是最直接的三维空间表现方式。我们曾在文章:解锁丨2.5D 插画的绘制技巧! 中详细介绍过 2.5D 插画的设计方法和设计原则。在使用三维表现手法时,镜头对焦的控制尤为重要,恰当的焦距设定可以更加突显空间感。

案例1:红极一时的益智游戏“纪念碑谷”通过 2.5D 的表现方式让用户直观的感受到页面深度。结合背景的雾气、水波等环境,营造出神秘的沉浸式空间体验:

页面设计没有空间感?试试这些方法!

纪念碑谷

案例2:华为云在“828企业上云节”的页面,使用 3D 元素设计,背景的模糊处理加强了视觉层次,通过透视和变焦增强了场景带入感,提升了页面空间感:

页面设计没有空间感?试试这些方法!

https://activity.huaweicloud.com

6、视觉对比

通过页面元素的大小、明暗和虚实等对比,让用户目光聚焦于目标主体,潜移默化的形成视觉感受上的差异,拉开视觉纵深感。

案例1:下方产品的开屏页面虚化的背景和主体形象之间有强烈的对比效果,用虚化背景突出视觉焦点,产生距离感:

页面设计没有空间感?试试这些方法!

案例2:丹麦建筑事务所 BIG 的官网,将做过的建筑案例以 icon 的形式按年份排列展示,鼠标移动到图标上面,图标会放大,同时也会显示出项目的具体信息,产生一种近大远小的空间感:

页面设计没有空间感?试试这些方法!

7、切换动效

恰当的动效应用,不仅能够丰富页面的交互元素的视觉效果,也有助于提升整个页面的逻辑感和空间感。

下方的 App 中的内容切换动效,运用翻折的切换效果,充分的表现出页面的纵深感:
页面设计没有空间感?试试这些方法!

业界动态

数据产品的新思考

2020-8-27 8:45:02

业界动态

七夕霸气上线,奈雪让你直呼“好椰”!

2020-8-27 9:02:24

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索