UI设计中的视觉表现技巧(5)

来源:网络   作者:热心网友   发布时间:2017-10-08    浏览次数:562

关键在于,右边的按钮将里面的文本向右移动了一些,因为右边是三角形的。除此之外,箭头状按钮的宽度增加了40px,这样看起来与矩形按钮的视觉重量相等。



文本按钮不仅有水平对齐方式,而且还有单词和背景的垂直对齐方式。这里讲的的第一种方法适用于各种操作系统、网页和应用程序的界面。它是基于大写字母 ( 即Cap-height ) 高度的对齐方式,等于H或者I的高度。



一般来说,大写字母的升部和降部与按钮边缘的距离是相等的。这不是没有根据的,因为命令行通常是用标题字写的,英文中有更多的升部字母,(l,t,d,b,k,h),而不是降部字母(y,j,g, p)。



另一种方法是使用一个小写字母 ( 即x-height ) 的高度来对齐文本和背景,在无衬线字体中,它与字母“x”的高度相等。



这种方法其实也行得通,因为文本的视觉重量主要集中在小写字母的区域中。



虽然这些方法各有不同,但实际运用中并没有多大的差别。



接下来将比较更多的例子。左侧的“Cancel”和“OK”(频繁使用到的按钮)显然更适合用Cap-height方法,因为“Cancel”没有降部,“OK”都是大写字母。而右侧中只有“Sync”按钮适合用x-height方法,因为它有上下突出的部分;“Cancel”和“OK”用此方法的话就放会显得太高了。



123456789共9页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6713.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通