四两拨千斤!快速改善UI视觉体验的7个小技巧

2021-02-03

有许多技能并不要求UI设计过程中有很深的设计知识,但它们却能使你的UI和网页界面看上去有显著的提升。提高设计水平、经验和技术往往可以让人少走弯路。

说来话长,下面我们具体来看一下。

一、按钮颜色突出其重要性。

当用户有多种选择时,就可以简单而迅速地设计出颜色所传达的情感,不管它是正面还是负面。

1g×1

事实上,红色和绿色按钮的颜色含义已经跨越了物质世界和数字设计领域,我们每天都可以在许多实体产品上看到类似的设计,包括交通信号灯、警示牌和实体按钮。

绿是通行,红是禁行。假如用户需要购买一个漏斗,你希望有兴趣的用户赶快点击,不要取消。

此外,如果您的网站或APP涉及多个重要性不同的交互,除了按钮将会识别出对应的文本标签内容外,还可以借助色彩填充与否进一步区分层次结构:

g.2pn

这个简单的例子中,颜色填充按钮和幽灵按钮(没有颜色填充,有边框)和没有边框的无边框无填充按钮是不同的。

而且在少数情况下,对系统有重要影响的、破坏性的或限制性的按钮也应该被突出显示,但红色可以用于强调和警告。此时,相对的“非消极”按钮被认为是不那么重要的动作:

3png

简单地说,用户用于区分按钮的核心在于感知,而不是复杂的逻辑判断,设计的基本原则就在此,但更重要的是根据情感和感知进行设计。

二、分层次用重词和明暗词。

特别是在构建文本内容的视觉层次时,有很多属性可用,而仅使用大小差异来构建这些属性则显得过于单一。

许多时候,能借助于色彩,字重,明暗来区别。我们可以把重要的文字放得更大,字体更粗,颜色更鲜明,或者用深色来呈现。

4.jpg

将这些属性结合起来建立视觉层次。

三、用留白的方法分离元素。

这两个元素互不相干,如果要把它们分开,那么使用分割线似乎是理所当然的?的确如此,但这确实是一种非常过时和笨拙的表现方式。您需要的是一种更好、更优雅、更贴近当下的表达方式。

不要简单的用分割线,而要用留白,或者用负数的空格。分割线在很大程度上是难看和难以控制的视觉噪声,相对来说留白要好得多。

5个人的g。

大多数时候,删除分隔线是一种更快的方法,当然,更多的时候,需要您适当调整留白的大小。

用分割线分隔内容不仅使浏览页面花费的时间更长,而且增加的信息噪音也会影响到整个层次。

四、用阴影代替边框。

为了突出某些元素,不必依赖描边方法。用阴影则能达到相同的效果,单独使用则会看起来更整洁。描边+阴影则会显得很混乱。

用较少攻击性的小阴影无疑会使效果更容易,而且看起来也不那么明显。

6png。

△注册表格。

五、用色条增强视觉效果。

若认为内容块过于单调,可根据您的目的加强此内容块的可视性。颜色条可以在提升视觉属性的同时,在内容区的一侧添加该块内容。

根据您想要传达的视觉体验,色条可以是单色的,也可以是渐变的。此色条也可具有良好的功能性。这一点,当然很大程度上被用在相对素数的页面上,如果页面本身已经很漂亮,那就不那么有用了。

7.jpg

例如,使用红、绿两种颜色来识别不同的状态,或使用色条识别触发的标签或控制项。

6.用背景颜色来区分区块。

事实上,同样为了区分内容块和层次,这种方法同样优雅而快捷,几乎可以说是一种毫无困难的设计技巧。

8png

要区别两块不同的元素,只需用不同的背景就可以了,从本质上讲,它采用了一种类似卡片式设计的思想——用不同的卡片对内容进行分类。

相对来说,采用不同但不太明显的色块作为背景,在保证整体干净的同时,起到了区分的作用。

七、「字」的用法。

有谁不喜欢漂亮的字体?大家当然喜欢,但字体的功用却是千差万别。从强烈的可读性文本的文本呈现到极具装饰性的视觉化字体,各种不同的字体都需要有不同的功能。

看一看几种不同的字体:

一、衬线字体:Serif本身就是衬线的意思,这种字体字符的结尾通常是装饰性较小的衬线。除了装饰性外,衬线还可以增强字体的可读性。普通衬线字体:Georgia、TimesNewRoman、Cambria。

2.非衬线字体:也就是Sans-Serif字体,相对来说比较现代,在衬线被去掉后,线条感更强、更干净,并且更符合数字时代的某些显示要求。常用非衬线字体:Helvetica、Montserrat、Gotham。

一般认为,衬线字体更适合长时间阅读,而且在印刷中也有较大的应用。但是衬线字体的衬线和边角大多比较锐利,在某种程度上可以看作是视觉噪音。当屏幕分辨率还没有达到要求时,衬线字体的显示就会出现很大的问题。现在的屏幕分辨率提高了,当然,除了小尺寸、低分辨率、小屏幕的情况下,这个问题已经基本不存在了。

三、手写字体:手写字体通常被认为是一种手写风格的字体,在呈现时,往往有连写笔画,更接近于传统书写字体的效果。手工字体更随意,更有趣。常用的书写字体有:AlexBrush,GreatVibes,Sofia。

4.展示性字体:展示性字体是一种以功能为导向的分类,通常是指用于展示标题、海报、徽章等位置的字体,这些字体更具表现力,视觉特征更突出,而且直截了当,能吸引用户的注意。常用的显示字体有:Algerian,Curlz,Gigi,Umbra。

9png

大多数情况下,网页设计只能采用衬线字体和非衬线字体两种形式,而在英文网站中,通常采用的是衬线字体+非衬线字体的搭配方式。请注意,如果字体粗细和字重不同,最好使用同一类字体。开放源码且可免费商业使用的「思源黑体」和「思源宋体」是中文设计中很常见的一种选择。

视觉设计时,我坚持用2种字体,很少用3种,而后者最多用于商业或艺术项目,如Banner和海报,以强调视觉效果。

结论。

不管你是设计师还是别的什么职业,我都希望这些小技巧能帮助你做好设计。设计常常是灵活的,基于感知的,有方法可以遵循,特别是当你仔细观察一些已有的优秀设计时,你会发现有很多这样的小提示。注意共同点,仔细体会,总结经验,你也可以。


深圳市雨火设计有限公司

地址:深圳市龙华区民治街道万众润丰创业园B栋G-04
电话:130 0667 4486
邮箱:208917726@qq.com
COPYRIGHT (©) 2020 雨火设计.