记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 63550|回复: 0
收起左侧

[UI教程] UI设计新手必看,如何掌握光线和阴影让作品更自然,体验更好[含7P]

[复制链接]
发表于 6 天前 | 显示全部楼层 |阅读模式
UI设计新手必看,如何掌握光线和阴影让作品更自然,给用户更好的体验

                                                        刚想转到UI设计的新手们,可以觉得ui设计其实很简单,仅只是做做图标,画画界面,但真正等你开始接触后会发现这里面学问很多,今天给大家分享一下作为UI设计新人,务必要注意的几条法则。首先是光影。
      


光影法则:光线来自天空
  


阴影能够告诉人脑我们到底在看什么样的UI元素。


这可能是学习 UI 设计时,最容易忽略却又极为重要的一点了: 光线来自天空。光线总是从天空(上方)来的,从下面照上来的光看起来会非常诡异。



当光线从天上照下来的时候,物品的上端会偏亮,而下方会出现阴影。上半部分颜色浅一些,而下半部分深一些。
从下面打一束光到人脸上是不是看起来很渗人?UI 设计也是同理。我们的屏幕是平的,但是我们可以通过一些艺术手法让它看起来是 3D 的,在每个元素的下方加一些阴影。



就拿这个按钮举例,这是一个相对“扁平化”(flat) 的按钮,但依然可以看出一些光线变化的细节:

      
没有按下去的按钮底部边缘更暗,因为没有光线照到那里。
        
没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面(见侧视图)。
        
没有按下去的按钮下方有一些细微的阴影,在放大图中看得更清楚。
        
按下去的按钮整体颜色都更暗了,但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上,光线不容易照到。也有人说,在现实中,按下去的按钮颜色更深,因为手遮挡住了光线。
  
这么一个简单的按钮就有 4 种不同的光线变化。实际上,我们可以把这种原则运用到各处。



iOS 6 有点过时了,但还是学习光线不错的案例。这张图是 iOS 6“勿扰模式”和“通知”的设置,看看上面有多少种不同的光线变化。

      
控制面板的上边缘有一小块阴影。
        
“开启”滑动槽上部也有阴影。
        
“开启”滑动槽的下半部分,反射了一些光线。
        
按钮是突出的,上边缘较亮,因为是与光源垂直的,接收了大量光线,折射到你的眼睛中。
        
因为光线角度的问题,分割线处出现了阴影。
  





通常会内嵌的元素:

      
文字输入框
        
按下的按钮
        
滑动槽
        
单选框(未选择的)
        
复选框
  


通常会外凸的元素:

      
未按下的按钮
        
滑动按钮
        
下拉控件
        
卡片
        
选择后的单选按钮
        
弹出消息
  
等等,现在不是追求扁平化的设计吗?


iOS 7 引发了科技界对于“扁平化设计”(flat design) 的追求。也就是说图标是平的,不再模仿实物而外凸或内凹,只有线条和单一颜色的形状。



我很喜欢这种干净、简洁的风格,但是我认为这种趋势不会长久。通过细微的变化模拟出 3D 的效果非常自然,不会被完全取代的。


在不久的将来,我们很可能会看到半扁平的 UI(这也是我推荐你使用的设计风格)我把它称为“flatty design”,依然非常干净简洁,但是也有一些阴影,有轻点、滑动、按下操作的提示。



今天对UI设计新手 开放10个UI设计免费体验学习名额
想参与的同学,添加微信:hl9700712,备注:学UI。


现在,Google 也在各个产品上推行他们的 Material Design,提供一种统一的视觉设计语言。Material Design 的设计指导为我们展示了它如何运用阴影表现不同的层次。



这也是我所认同的类型。用现实世界的元素来传递信息,关键在于:细微。你不能说它没有模仿现实世界,但也绝不是 2006 年的网页风格,没有纹理,没有梯度,更没有光泽。
我认为“flatty”是未来的方向。扁平化?早晚会过时的。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:PS合成暗黑系海盗人物电影海报效果
下一篇:超全的iOS12极简原生壁纸,简直美哭了!【分享】
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表