如何巧用投影提高设计品质

[复制链接]
优视觉 发表于 2019-11-19 10:00:49 ©版权归原作者所有,如有侵权请联系删除。
                                                                                                    内容来源于知识星球APP:我们的设计日记
ad679b88bba574f1428320976b847dfe.jpg
本周和大家聊一下设计中的投影,随着iOS13的更新后,投影一下子又重新回归我们的视线,其实投影一直是Ul界面设计很重要的一个元素,它能助于我们区分所看见的UI元素,投影在最早的时候,是运用在图标设计里面,能很好模拟出界面真实是视觉感受!
  投影的发展历程  
d81e824b55eac4bb8ba5d21537ee23ae.jpg
图片来源于dribbble▲代表着从2009年至今整个按钮的变化,可以很明显的看到,投影从最早期每个按钮有精致的渐变,圆角和阴影,到后面的扁平化所有页面全部拍平,千篇一律,于是设计师重新将新的元素与平面结合,出现了彩色投影,更加强调的材质本身的颜色。
  投影的重要性  几乎所有的设计师在扁平化处理以后对于扁平化赞不绝口,作为新的趋势,它让信息更加简洁,内容更加干净,在所有的设备上看起来很一致性,但是扁平化发展到今天我们需要去思考,没有差异性的设计真的是美的么?扁平化的设计问题在于,它让UI的层次变动困难,让用户不得不去关注你内容组件本身,看个案例:
b8a067aa62b27fe73a6fbbf1017b077c.png
图片来源于dribbble▲ 上图这个案例是我们设计师经常每天在做的,很符合当下我们的设计趋势,界面扁平的像纸片一样,虽然在界面里面运用了线来区分,但是当我们第一眼看到这个界面时候还是不知道看哪里!

de139955f0d35ec92ad73dfbc0f58834.png
▲ 然后设计师尝试在这个界面基础上去增加一些轻微的投影,明显好多了,信息被区分为三层,信息更加明确了一些,同时也是在扁平化的基础上,没有那么突兀。

f8121411da62a55f76ae03aa892e0678.jpg
▲ 上图是iOS7刚出来的时候,完全没有投影,我们仔细去看日历图标,闹钟图标,当你使用白色或者黑色背景时候,闹钟图标和日历图标,完全被背景吃掉了,是非常奇怪的一个设计,我们是希望用户快速找到他们想要的图标。

82ea9a3f5b66d338b3d2711a57fa3e15.jpg
▲ 苹果在iO8时候已经解决了这个问题,在图标四周增加一个微妙的投影,使得整个界面不会被背景吃掉,让用户更好的理解。

c74936f7a3642adae3c8c24f968686bc.jpg
▲ 前后版本效果对比,差异性就在于投影,这个设计也一直沿用到现在。

8a18c3839b7cf499d755a233e5086c01.jpg
▲ 同样的问题也出现在了苹果的地图软件,苹果有个版本地图搜索栏阴影去掉了,纯扁平了,由于地图本身就有很明亮的颜色,使得阅读起来糊在一起了,右图是苹果优化后,在导航栏底部增加了投影,让整个设计看起来更加完全清晰。

ed9e9566aa5b0e6ee96e45f17b64f072.jpg
从上述一些案例我们可以看出,微妙的投影对于增强页面的信息结构有很重要的作用,在现代界面设计中,包括最新的苹果系统及微软FluentDesign System的发布,里面大大增强了层次感,这种依赖于光特效,阴影和材质的效果,让整个效果更加符合未来的一种界面设计方向。
  投影的类型  卡片投影使用阴影突出显示两个组件之间的高程差异。阴影可以应用于多个组件,包括卡片,菜单,侧边栏和工具提示。

b23e23ed2d21b70b6e47de395fe0a9f1.jpg

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

ee426f2b1548d7d8e05b453cb022a42e.jpg
▲ 规范来源于https:/ /design.frefox.com/
弥散投影和上面卡片投影差别是,弥散投影颜色一般为物体材质本身的颜色,而不是黑白灰。
83d47605d95cf5665403398643ced4e6.jpg
▲ 图中的卡片上按钮黄色,它的投影也是物体本身的黄色透明度变化,其他案例也是类似原理。

9520416b124b4be84ac9ab3c02acd8d5.jpg
▲ 衣服的投影来源于后面背板的黄色,颜色值加深和增强。

279154fdd07fe991560ce4ebfdacf40d.jpg
这种投影的设计其实也并不难,能简单几步快速实现这个效果,下面以一个按钮在sketh里面示范:

47bb4171683958d34ada5b3e708342ab.jpg

1c8c059991a21c0ef7f8fee85ae5aa56.jpg
照片投影
它的特点是投影本身是在原照片上做了照片模糊处理,目前在苹果一系列产品中看见过它的身影,比如iOS11的苹果音乐,它效果很柔和,通透富有光泽和活力色彩。
7d4624666f811b4ec73c48d954278df4.jpg
照片投影目前iOS11代码是可以实现的,在设计里面也很简单,同样简单几步就能出效果:
015491886664850a9d0c2d43007abfb8.jpg

b5e46be37be5aad96ea23203769338ef.jpg

a04422a817eabec02637b5fc24600191.jpg

长投影这个效果记得是在12年扁平化刚流行起来的时候,可惜过了一年左右就被历史所遗忘了,现在除了偶尔在平面设计里面看到长投影运用,UI领域是很少再出现了。
49a65752a505814aaf6c79bad6850b85.jpg

  总结  关于投影的运用是需要去理性思考的,需要考虑页面场景,如果是效率形页面,可能是列表更加合适,投影的目的也不是为了界面好看而添加的,而是让用户对于信息的理解更加简单。

ca7a0b33b184fdb0b18140ef6c5bd515.jpg
记得把公号加星标,会第一时间收到通知。原创不易,如果觉得有点用,希望可以随手转发或者”在看“,拜谢。               
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 分享达人

    分享精品资源累计达到15篇
  • 推荐设计师

    优视觉推荐设计师
  • 推荐讲师

    优视觉推荐讲师

关注0

粉丝18

作品9776

发布作品
官方客服QQ

2987964658

周一至周日9:00-18:00

反馈建议

2987964658@qq.com 在线QQ咨询

扫描二维码关注我们