如何使用投影技巧来提高UI界面品质(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:UI中国   作者:雪笛灵漪

关键词

▲ 同样的问题也出现在了苹果的地图软件,(左图)地图底部的阴影去掉了,纯扁平了,导致地图和导航栏粘在一起。(右图)是苹果优化后,在导航栏底部增加了投影,让整个设计看起来更加清晰。

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

从上述一些案例我们可以看出,微妙的投影对于增强页面的信息结构有很重要的作用,在现代界面设计中,包括iOS11及微软Fluent Design System设计语言,运用投影、光特效、阴影材质增强了层次感,让整个设计加符合未来的设计方向。

投影的类型

前面分析了投影在现代界面中的回归,那我们可以看看投影到底有几种类型:

● 卡片投影

使用阴影突出显示两个组件之间的高程差异。阴影可以应用于多个组件,包括卡片,菜单,侧边栏和工具提示。

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

▲ 一般投影会区分几个不同的区间,从小到大,分为小中大,根据实际场景来选择不同的投影深度

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

▲ 规范来源于https://design.firefox.com/

● 弥散投影

和上面卡片投影差别是,弥散投影颜色一般微物体材质本身的颜色,而不是黑白灰。

▲ 图中的卡片上按钮黄色的投影也是物体本身的黄色透明度变化,其他案例也是类似原理。

如何使用投影技巧来提高UI界面品质,PS教程,思缘教程网

 收藏