中国设计网:如何巧用投影提高设计品质

设计资讯
发布日期
2020-04-20 15:43
发送

本周和大家聊一下设计中的投影,随着iOS11的更新后,投影一下子又重新回归我们的视线,其实投影一直是Ul界面设计很重要的一个元素,它能助于我们区分所看见的UI元素,投影在最早的时候,是运用在图标设计里面,能很好模拟出界面真实是视觉感受!


 

  投影的发展历程  

图片来源于dribbble

▲代表着从2009年至今整个按钮的变化,可以很明显的看到,投影从最早期每个按钮有精致的渐变,圆角和阴影,到后面的扁平化所有页面全部拍平,千篇一律,于是设计师重新将新的元素与平面结合,出现了彩色投影,更加强调的材质本身的颜色。

  投影的重要性  

几乎所有的设计师在扁平化处理以后对于扁平化赞不绝口,作为新的趋势,它让信息更加简洁,内容更加干净,在所有的设备上看起来很一致性,但是扁平化发展到今天我们需要去思考,没有差异性的设计真的是美的么?扁平化的设计问题在于,它让UI的层次变动困难,让用户不得不去关注你内容组件本身,看个案例:

图片来源于dribbble

▲ 上图这个案例是我们设计师经常每天在做的,很符合当下我们的设计趋势,界面扁平的像纸片一样,虽然在界面里面运用了线来区分,但是当我们第一眼看到这个界面时候还是不知道看哪里!

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

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

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

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

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

从上述一些案例我们可以看出,微妙的投影对于增强页面的信息结构有很重要的作用,在现代界面设计中,包括最新的苹果系统及微软FluentDesign System的发布,里面大大增强了层次感,这种依赖于光特效,阴影和材质的效果,让整个效果更加符合未来的一种界面设计方向。

  投影的类型  

卡片投影

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

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

▲ 规范来源于https:/ /design.frefox.com/ 弥散投影

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

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

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

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

照片投影

责编:春林
THE END

本文标题:中国设计网:如何巧用投影提高设计品质
本文链接:https://www.chinadesignw.com/sjzx/1154.html

相关热点

10月22-23日,第28届中国(深圳)国际礼品及家居用品展览会(秋季展)即将在深圳国际会展中心举办,作为最具影响力的礼业顶级盛会,本届展会携手产业上下游4000+展商继续逐浪前行、斩获...
设计资讯/ 2020-09-11
聚焦设计价值 深耕设计师生态圈 躺平设计家平台拥有超1000万全球注册设计师,遍布200多个国家与地区,并与全球5万个商家建立了深度合作。 躺平设计家以免费、简单、高效的3D设计工...
设计资讯/ 2020-09-07
首届福佑文玩乐淘节今日开幕 上海福佑文玩城今天举行首届福佑文玩乐淘节开幕仪式。 本次文玩乐淘节邀请到了全国各地500多位文玩藏家齐聚福佑,并特设六场专业的主题活动:海上...
设计资讯/ 2020-09-03
9月1日是全省中小学开学的日子,江北设计小镇正式启用的金陵中学浦口分校迎来了首个开学日。 据了解,金陵中学浦口分校是江北设计小镇为提高教育水平和办学质量,新引进的公办...
设计资讯/ 2020-09-02
8月28日,同裳@东方 2020大浪杯中国女装设计大赛暨十周年颁奖盛典在深圳大浪时尚小镇盛大举行。星光璀璨,万众期待,最终18号选手杨岳凭借作品《拾荒者的乐趣》突出重围,一举夺...
设计资讯/ 2020-09-01
以升级住房消费健康绿色建筑为主题的第十六届国际绿色建筑与建筑节能大会暨新技术与产品博览会(以下称:绿建大会)2020年8月26至27日在苏州国际博览中心完美收官。2005年至今,绿建...
设计资讯/ 2020-09-01

相关推荐

3