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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
用户界面的阴影和海拔在现实中的表现
0.0°
2016-08-08 自译外文 经验/观点 原作者: Nick Babich 举报 3723 95 112 8



UI设计正在向极简方向发展,意思就是除去不必要的元素,将重点放在功能上。但是当功能设计成为产品是否成功的关键要素的时候,视觉细节同样很重要。

本文中,我将讲述如何运用视觉元素(如阴影)向用户传达信息。


1.从伪3D到扁平化设计:

用户的屏幕是平的,但是设计师和开发人员投入大量的创意,让他们在使用和视觉上看起来是三维的,从图形发展到现在,屏幕显示已经采用了伪3D效果(阴影,高度,突出)来帮助用户识别,并进行操作。这样的三维效果的立体感,帮助用户从视觉上判断出那些元素是可交互的:

-看起来突出的元素让它更像是能够被按的,这种通常被用作按钮。

-看起来是凹陷的元素看起来像是能够被填满的,这种通常被用作输入。


据个栗子:早在windows 95系统中,对话框就使用了阴影和高亮来显示3Dde 效果:

Image title



Skeuomorphism(软件界面设计模仿实物纹理被称作Skeuomorphism概念,苹果工业设计主管Jony Lvey已经接手iOS和OS X界面设计)是每个界面在数字空间中模仿现实生活的一种语言,我们来看看早期在iOS7之前,苹果对于app应用中的书架设计,其设计成了三维的货架和木材纹理:

Image title

苹果iOS 6的报摊。但是类似这样的伪3D图形界面让人感觉很笨重,视觉上更是分散了注意力。





2.扁平化设计:在去除阴影

每一个操作,都有一个反馈。在数字设计的世界里,扁平是针对skeumorphism的反馈。因为在屏幕上看到的永远不是真正的三维,所以为什么不去掉多余的修饰而将重点放在功能上呢?

我们在windows8界面上再来看看:

Image title


每个图标看起来都很扁平,但实际上“change PCsettings”比一个图标看起来更像标签,导致很多用户忽略了这个选项。这种元素的特殊性通常让用户误解,甚至忽略。

UI设计师让控件变得更具像化和看起来可操作性都是有一些特征的,无论特征怎么变,用户判断通常是靠这两个假设:

Image title


扁平化设计的前后,细节特征所产生的影响





3.几乎扁平的设计

最近,设计师已经开始意识到扁平化设计的可用性问题。在新的解决方案中体现的是类似于近乎扁平或者又可以称为扁平2.0的设计。在这个设计风格中,使用了微妙的阴影,高亮和层次设计,提高了UI创意的深度。

Image title



设计师已经开始意识到可用性关于平坦设计的发行并且作为结果,平坦设计更平衡的解释已经出现。新的解决方案有时候称为‘近乎平坦’或‘扁平的2.0’设计。这个设计风格基本上是平坦的,但是使用微妙的阴影、亮点和层,以便在UI中创建一些深度。




4.阴影和海拔(z轴高度)

现在的界面层次感更强,并且充分利用了z轴,这个方法将视觉引入更深。

Image title


看起来可以点击的两种不同元素:Image title

阴影有助于告诉用户层次结构,帮他们去分两个元素在某些情况下,一个明显高于另一个:Image title

如果没有点击后的立即反馈,可能让用户觉得这是不可点击的。这里的海拔高度决定了阴影的外观呈现:Image title




5.总结:

我们在设计的时候不应该过分依赖沉重的阴影,极端的高度或者是复杂的光源效果,所有这些用来分散用户注意的修饰都是不可取的。但是微妙的阴影和其他非用户界面的元素是可以融合到扁平化设计中去的,因为他们都有一个重要的价值:他们能帮助创建比较有特征的用户界面。用户喜欢干净简洁的事物,并喜欢掌控这些界面。观察这些年来最成功的交互设计师,都是那些执行最基本用户习惯操作的人。




Image title


更新:2016-08-08

收藏

95人已收藏

  • 43

    作品

  • 7567

    粉丝

  • 34

    关注

  • 设计师晋升答辩全面指南
  • UI设计中的十万个为什么(下)
  • UI设计中的十万个为什么(上)
  • 体验设计师问答(下)

    猜你喜欢

      2016-08-08 自译外文 经验/观点 原作者: Nick Babich 举报 3723 95 112 8

      用户界面的阴影和海拔在现实中的表现

      0.0°

      你确定要举报用户界面的阴影和海拔在现实中的表现

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年07月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      112
      95
      8

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

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

      登录

      手机号

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

      登录
      第三方账号登录