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

上网第一站

当前位置: > SEO >

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

时间:2017-09-28 09:07来源:产品100 作者:跌名 点击: 我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
如果正在创建折叠条纹的文本海报或者是把一张有明显discount字眼的产品卡片放在在线商店里,注意要使他们的视觉重量达到平衡。如果它是一个长方形,

  如果正在创建折叠条纹的文本海报或者是把一张有明显“discount”字眼的产品卡片放在在线商店里,注意要使他们的视觉重量达到平衡。如果它是一个长方形,尖头边缘应该有点其他形状。

  

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

  对于英文的纯文字的段落背景应该怎样调整?这取决于背景的视觉密度。如果背景是浅色的,可以将段落和其他文本一起突出显示。

  

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

  由于背景是浅色的,所以不会中断正常的文本流。

  

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

  一个可以应用密集背景的不同方法。下面图片中,黑色背景与其余的文本对齐,而其中的白色文本则以缩进形式放置。

  

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

  与浅色背景不同的是,黑色具有很大的视觉重量,如果目标是无缝地插入一个段落,最好是按照下图所示的方式对齐。

  

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

  对按钮和输入栏也是用相同的原理。这并不是固定模式,只是界面的视觉基础的愿景。

  

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

  左边输入栏的浅色背景可以超过输入标签和用户输入。右边缘的“Send”按钮不完全符合右边缘输入背景,从视觉角度看更深色的按钮的视觉重量更重一些。

  右边的输入栏有固定的边缘,标签要和边缘对齐,用户在文本框中的输入的内容要缩进。“Send”按钮的三角形一边要向右移动一点,这样才能和上面的矩形输入栏看起来平衡。

  

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

  对其的文本和图标按钮。看下面的按钮是以文本为中心吗?

  

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

  右边按钮用了一个小窍门,由于右边缘是三角形,将单词稍微向左移了一些。此外,像箭头一样的按钮比矩形按钮的像素宽40,但看起来却和矩形按钮是相同的。

  

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

  文本按钮不仅要水平对齐,字和背景还要垂直对齐。第一个方法是用于各种操作系统的界面,网站和应用程序。基于大写字母的字体高度(大写字母高度),等于“H”或“I”的高度。

  

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

  基本上,大写字母的上下空间要和按钮边缘相等。由于命令名通常都是在标题中写的,有更多的上半部分出头的英文字母——上半突出部分(l、t、d、b、k、h),下半突出部分(y、j、g、p)。

  

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

  另一种方法是用小写字体(也叫x高度)的高度将名字和背景对齐。在无衬线字体中,它等于字母“x”的高度。

  

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

  这个方法也很有用的,因为文本的主要视觉重量都集中在小写字母的区域。

  

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

  这些方法有什么区别吗?是有区别,但没有那么大的区别。

  

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

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