第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

50个小技巧提升用户界面的视觉效果

时间:2017-09-28 09:07来源:产品100 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
眼睛是人体一个很奇怪的器官,因为它总是会对我们说谎。但如果你了解了人类视觉的感知特性,你就可以构建人性化的设计。类型设计师不仅可以利用视觉技巧创建刻度且平衡的字体,也有

  眼睛是人体一个很奇怪的器官,因为它总是会对我们说谎。但如果你了解了人类视觉的感知特性,你就可以构建人性化的设计。类型设计师不仅可以利用视觉技巧创建刻度且平衡的字体,也有利于帮助界面设计师创建人机沟通。

  测量视觉大小

  400像素的正方形和400像素的圆哪一个大?从几何的角度来看,圆和正方形的宽度和高度是相同的。但看完下面的图片我们会发现正方形比圆所占的视觉重量多。视觉重量相关的词语很适合来描述视觉效果

  如果你不相信已经画好的图形,下面是对应的数字指导版本。

  

50个小技巧提升用户界面的视觉效果

  看看下面的正方形和圆形图片在视觉重量中是否相等?

  

50个小技巧提升用户界面的视觉效果

  对我而言,很明显是相等的。因为我将圆形的直径增加了50像素,所以很难说其中的哪个图形所占比重大。

  

50个小技巧提升用户界面的视觉效果

  发生这一情况的原因是,我将第一个例子(400像素的正方形和圆)和第二个例子(400像素的正方形,450像素的圆)分别重叠了。注意下面的正方形超出圆的‘a’区域,圆超出正方形的‘b’区域。左边的圆形破坏了整个正方形,使得正方形中还包括了4个边;右边的圆形和正方形是平衡的,它们都不包含彼此,每个图形中都有4个碎片。

  

50个小技巧提升用户界面的视觉效果

  为了在视觉上与正方形保持平衡,可以用菱形或三角形来实现相同的效果。相比较它们应该更宽、更高,这样与正方形的面积才会相似。根据区域的方法可以很好地完成简单的形状。

  

50个小技巧提升用户界面的视觉效果

  如何在界面中使用这一特点呢?举例来说,当你创建一组图标时,最重要是让它们平衡,所以图标没有太过突出或是太过微小。如果将图标直接放在正方形区域中,会看起来更大。

  

50个小技巧提升用户界面的视觉效果

  建议让视觉上的小图标重量超过的图标本身区域,让视觉上较有重量的图标与图标之间的区域留一些空间,以此来修正不同形状的图标重量。

  

50个小技巧提升用户界面的视觉效果

  一些真实的视觉上平衡的图标。

  

50个小技巧提升用户界面的视觉效果

  图标区域总是大于图标本身的原因是仅允许非凡块区域看起来不小于方块图标。

  

50个小技巧提升用户界面的视觉效果

  最简单的测试是用模糊的图标来检测视觉平衡。如果图标变成或大或小相似的斑点,它们的视觉比重就是相同的。

  

50个小技巧提升用户界面的视觉效果

  但有些时候我们也会用现有的图形,比如,作为分享和喜欢按钮的社交网络商标。Facebook和Instagram的图标都是方块状的,而Twitter是用一只鸟的剪影来代表的,Pinterest是由一个环绕的“P”代表的。这就是为什么Twitter和Pinterest的图标会大一点,以至于它们和Facebook和Instagram的图标看起来是平衡的。

  

50个小技巧提升用户界面的视觉效果

  视觉平衡的另一个例子是放置在文本框的圆形按钮。如果按钮直径与文本框的高度相等,从我们视角看到的按钮会比文本框小一些,但如果放大一点按钮直径,整体看上去就会更加平衡。

  

50个小技巧提升用户界面的视觉效果

  但如果改变按钮风格,放大直径将不是必需的。下面图片的按钮和文本狂都是80像素高,由于临近文本框的按钮有黑色填充,所以右边按钮的重量平衡会更好些。

  

50个小技巧提升用户界面的视觉效果

  谨记:

  视觉重量是指从人们的视角看到的意义上的物体大小,并不一定和像素大小相等。

  圆形、菱形、三角形和其他非方块图形,这些类似方形的图形为了达到视觉平衡需要再放大一些。

  为了达到视觉平衡,图标区域要保留一些空间。这对设置图标是至关重要的。

  2.不同形状的一致性

  视觉一致性是视觉平衡主体和视觉比重现象的逻辑延续。下面的条纹看起来是否是一样长?

  

50个小技巧提升用户界面的视觉效果

  就像素而言,答案“是”。但一眼看上去下面的条纹会比上面的条纹更短一些。

  

50个小技巧提升用户界面的视觉效果

  再看另一张图片上的两条条纹,有什么改变吗?

  

50个小技巧提升用户界面的视觉效果

  对较低的条纹应用了视觉补偿。允许尖头增加20像素超过上面的条纹长度,这个补偿尖头之间的差距,使两条条纹的视觉相等。

  

50个小技巧提升用户界面的视觉效果

  下面是一些更加复杂的不同形状的条纹例子。

  

50个小技巧提升用户界面的视觉效果

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕