ssw6618

新闻资讯

时时了解最新动态

【上海网站建设】如何巧妙提升UI设计视觉体验

2020-06-12  
UI的设计过程中,有很多技巧能瞬间提升你的设计界面,这些都是前人栽树,后人乘凉的道理,所有的技巧都是前面的人用丰富的设计经验总结出来的。
今天给大家分享一波快速提升UI设计中的视觉体验的方法:
 
一、用色彩明暗来区分层级
 
这种方法一般用在文字上,比如标题用全黑,下面的正文就需要用弱一点的浅灰色来区分,如果整个文字都是黑色,有没有层级感了。
不过不单一靠文字的明暗来区分,还有颜色、字重、等。标题的字体大,字重,关键字应该色彩鲜明。
如图:


二、巧用留白
 
以前很多人在区分两个元素的时候都喜欢用分割线,后来很多人发现其实不用,有时候留白能更好、更舒适的表达效果。
分割线如果过多,会影响视觉效果,让人觉得啰嗦,产生过多的压抑感。当然控制好留白的大小是个技术活,需要反复调试,不是一下子就调成的。
 
如图:

 
三、巧用色调
 
有时候内容区域确实内容不多,实际情况有那么多空白的地方,整个页面就单调了,但可以使用色块来强化页面的视觉,给页面增加一丝色彩。
当然色条只适用于那些很空的页面,起点缀作用,而不是主导作用。也可以使用色条来区分不同的状态。让人更加容易识别。
如图:


四、背景区分区块
 
背景区分区块也是让页面更有层级感,这种方法是能瞬间让你的页面更加高级有质感。
为了区分两个不同区块的元素,简单地使用不同的背景来进行区分。
 

五、按钮颜色区分重要性
 
每个颜色代表不同的意思,比如红色代表禁止,绿色代表通行,简单的示例,有色彩填充的按钮、幽灵按钮(无色彩填充、有边框)以及无边框无填充按钮来区分。
数情况下,对于系统有重要影响的、破坏性的或者限制性的按钮,也应该突出显示,但是可以使用红色来进行强调和警告。这个时候,相对的「非负面」的按钮则被视作为重要性较低的操作。
如图:

六、阴影代替边框
 
边框会让人产生一生拘束感,使用阴影范围要小一点,淡一点,看起来若有若无,会显得很轻松。
 
如图:


七、巧妙的使用字体
 
1. 衬线字体:Serif 本身就是衬线的意思,这样的字体字符的末尾通常是会有小的装饰性的衬线。衬线除了装饰性以外,还能强化字体的可读性。常见的衬线字体:Georgia,Times New Roman,Cambria。
 
2. 非衬线字体:也就是 Sans-Serif 字体,它相对而言更加现代,衬线被去掉之后,线条感更强,更加干净,也更加贴合数字时代的一些显示需求。常见的非衬线字体:Helvetica,Montserrat,Gotham。
 
人们通常会认为,衬线字体更加适宜长时间阅读,它也更多地运用在印刷品上。然而衬线字体的衬线和边角大多更加锐利,在一定程度上会被视作为视觉噪音。在屏幕分辨率尚且达不到要求的时代,衬线字体的显示问题很大。当然,如今屏幕分辨率提高起来之后,这个问题几乎不存在了,只是在小字号和低分辨率和小屏幕上,依然存在这个问题。
 
3. 手写字体:手写字体通常被认为是手写风格的字体,在呈现的时候,常常会有连写的笔画,更贴近传统的书写字体所呈现出来的效果。手写字体更加随意和有趣。常见的手写字体包括:Alex Brush,Great Vibes,Sofia。
 
4. 展示性字体:展示性字体是一个功能导向型的分类,通常指的是用来作为标题展示、用于海报、徽章等地方的字体,它们表现力更强,视觉特征更突出,直言不讳地说就是为了吸引用户的注意力。常见的展示性字体包括:Algerian,Curlz,Gigi,Umbra。

总结:巧妙提升UI设计视觉体验的方法有很多,总在平时积累,多看多想,加以运用。


声明:本站转载自网络,版权归原作者所有,文章所述观点并非翼好网络的观点,如有侵权请第一时间联系我们时间进行删除。翼好网络是一家正规的上海网站建设公司,欢迎前来咨询建站业务!