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

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

那么该如何对齐纯文本和具有背景的段落呢?这取决于背景的视觉密度。如果它很轻,可以将突出显示的段落与其余的文本对齐。



通常背景很浅时,它并不会打断正常阅读的文本流。



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



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



同样的原理也适用于按钮和输入字段。当然,这并不是绝对的。



左侧输入字段的浅色背景超出了输入信息和输入的用户名。“发送”按钮的右边缘与输入背景的右边缘没有完全对齐,因为按钮较暗,从视觉角度看,更重一些。


在右侧,输入框有黑色描边,我们将它们与标题对齐,用户名在输入框内缩进。“发送”按钮因为有三角形边缘,所以将按钮向右移动一点,以便与文本框保持平衡。



接下来,我们将进一步了解视觉对齐的方式——文本与按钮的对齐。如图,下面两个按钮虽然形状不一致,但文本看起来是居中的。



123456789共9页
联盟广告
×

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

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

标签:ui干货

相关推荐

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

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

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

×

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

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

×

充值学币 立即开通