恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计新手必看,如何掌握光线和阴影让作品更自然,体验更好
0.0°
2018-06-13 好文转载 教程 原作者: dribbble 举报 3138 13 8 0

UI设计新手必看,如何掌握光线和阴影让作品更自然,给用户更好的体验

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


光影法则:光线来自天空


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


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

Image title


当光线从天上照下来的时候,物品的上端会偏亮,而下方会出现阴影。上半部分颜色浅一些,而下半部分深一些。

从下面打一束光到人脸上是不是看起来很渗人?UI 设计也是同理。我们的屏幕是平的,但是我们可以通过一些艺术手法让它看起来是 3D 的,在每个元素的下方加一些阴影。

Image title


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

 

没有按下去的按钮底部边缘更暗,因为没有光线照到那里。

没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模仿一个略有弧度的表面(见侧视图)。

没有按下去的按钮下方有一些细微的阴影,在放大图中看得更清楚。

按下去的按钮整体颜色都更暗了,但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上,光线不容易照到。也有人说,在现实中,按下去的按钮颜色更深,因为手遮挡住了光线。

这么一个简单的按钮就有 4 种不同的光线变化。实际上,我们可以把这种原则运用到各处。

Image title


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

 

控制面板的上边缘有一小块阴影。

“开启”滑动槽上部也有阴影。

“开启”滑动槽的下半部分,反射了一些光线。

按钮是突出的,上边缘较亮,因为是与光源垂直的,接收了大量光线,折射到你的眼睛中。

因为光线角度的问题,分割线处出现了阴影。

Image title



通常会内嵌的元素:

 

文字输入框

按下的按钮

滑动槽

单选框(未选择的)

复选框


通常会外凸的元素:

 

未按下的按钮

滑动按钮

下拉控件

卡片

选择后的单选按钮

弹出消息

等等,现在不是追求扁平化的设计吗?


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

Image title


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


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

Image title


今天对UI设计新手 开放10个UI设计免费体验学习名额

想参与的同学,添加微信:hl9700712,备注:学UI。


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

Image title


这也是我所认同的类型。用现实世界的元素来传递信息,关键在于:细微。你不能说它没有模仿现实世界,但也绝不是 2006 年的网页风格,没有纹理,没有梯度,更没有光泽。

我认为“flatty”是未来的方向。扁平化?早晚会过时的。




更新:2018-06-13

收藏

13人已收藏

  • 18

    作品

  • 18

    粉丝

  • 1

    关注

  • APP登录界面设计经验分享
  • 掌握了UI设计留白法则,新手作品也能做出高大上的感觉
  • UI设计新手技巧:掌握黑白优先法则,可以简化大量的工作量
  • 【汽车出行篇】各大名车品牌高考海报集结

    猜你喜欢

      2018-06-13 好文转载 教程 原作者: dribbble 举报 3138 13 8 0

      UI设计新手必看,如何掌握光线和阴影让作品更自然,体验更好

      0.0°

      你确定要举报UI设计新手必看,如何掌握光线和阴影让作品更自然,体验更好

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年06月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      13
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录