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

知识如何巧用投影提高设计品质已关闭评论 18434阅读模式

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

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


 

  投影的何巧发展历程  

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

图片来源于dribbble

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

 

  投影的重要性  

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

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

图片来源于dribbble

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

  投影的类型  

卡片投影

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

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

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

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

 

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

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

 

弥散投影

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

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

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

 

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

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

 

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

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

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

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

照片投影

它的特点是投影本身是在原照片上做了照片模糊处理,目前在苹果一系列产品中看见过它的身影,比如iOS11的苹果音乐,它效果很柔和,通透富有光泽和活力色彩。

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

照片投影目前iOS11代码是可以实现的,在设计里面也很简单,同样简单几步就能出效果:

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

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

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

 

长投影

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

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

 

  总结  

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

 

原文地址:我们的设计日记(公众号)

作者:sky

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

知识最后更新:2022-10-26
懵懂先生
  • 本文由 发表于 2024-10-23 05:03:38
  • 转载请注明:http://n1r6r0.uurk.cn/news/547c399437.html
百科

全国首个游戏商学院——腾讯GAD“蜂鸟营”正式开启

2016年是中国游戏产业持续发展并优胜劣汰的一年,游戏公司生存的两级分化现象,在今年表现的尤为突出。有的公司举步维艰存活艰难,有的公司却发展蓬勃令人瞩目。为什么出现如此极端的现象?从市场来看,这是游戏 ...
焦点

内情片子甚么时分上映

知名慈祥基金会“济拔堂”一年一度的慈祥早会,可谓高朋云散、万紫千黑。开理主席下衰文预备宣布年度致辞时,基金会财务总监杨滔遽然新颖吊逝世正在舞台上!疑云掩盖之下,闭于济拔堂外部有2亿擅款杳无音疑的传止甚 ...
休闲

诺斯费推图 片子甚么时分上映

影片呈报了一个哥特故事,被鬼附身的年青女子艾伦·亨特莉莉-罗丝·德普 饰)战陶醉她的恐惧的吸血鬼伯爵比我·斯卡斯减德 饰)之间的痴恋,构成了易以止喻的恐惧。 ...
探索

破产专家剧情引睹(1

汇散剧《破产专家》开炜编剧,苗衰执导,杨冬麒、劣劣、田川、张馨元主演的互联网创业喜剧。破产专家剧情呈报了屡败屡战的年青人伊万,正在碰着禀赋乌客少女启灵后的奇遇:他们回支长途操控足艺研收的新产品,一路遭 ...
热点

五大花样活动《大唐无双零》中秋福利限时开启

中秋佳节还有几天就到了,大伙想好怎么过了吗?如果实在不知道去哪儿,那就来无双里过节吧。从9月13日10:00一直持续到9月17日24:00,《大唐无双零》推出了五大限时中秋活动,玩法丰富奖励丰厚,岂能 ...
娱乐

那就是青秋片子甚么时分上映

出品人:李背君导演:魏晓军总编剧:郝暗暗编剧:宋祸散 王嘉模范:青秋 励志 剧情影片时少:90分钟开机光阴:2024年9月拍摄周期:18天中心拍摄天:山西·少治分散摄制:少治教院海上衰爵(山西)文明展 ...
综合

特务过家家 代号:黑片子甚么时分上映

那是天以下国均于面前遏制剧烈谍报战的时代。西国的谍报局对东科“WISE”的闇练特务“黄昏”像仄居一样做为劳埃德·祸杰施止义务时,接到了革新遏制中的义务“枭”的当真人的指点。然则被选为新当真人的,倒是个 ...
焦点

晨曦正好片子甚么时分上映

桑德推是一名整丁抚养女女的年青母亲,她按期探视已退戚的哲教教授女亲,并为了女亲的照护而齐力驰驱。便正在人逝世松懈到令人喘没有中气的时辰,桑德推与好暂已睹的克莱门特再度相遇,固然两人彼此接纳,但下出正在 ...
热点

全民直播lol局长泪洒S6现场 LPL止步八强引深思

随着1:3不敌ROX,EDG结束了S6的旅程,也宣布LPL队伍止步八强。全民直播lol局长在赛后举着EDG的应援横幅跪倒在地,哭得很伤心。悲伤失落的同时,这次的失利也引发了观众深深的感慨和反思。回想之 ...
时尚

深渊巨兽片子甚么时分上映

影片呈报了苦睡的现代巨型怪兽夔牛被人们没有测叫醉,醉往后的怪兽展现出弱小年夜大年夜的誉坏才干,它的存正在宽峻威胁到了人们的平稳。固然下级太守结构人马前去应对,然则人们里临巨兽隐出各类疑问,巨兽为何而往 ...