赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
2.7K 0 0

也许你是个新手设计师,也许你是个有着富开经验的开者,但是有需求让自己设计的网页和UI看来更像么一回,至少看来不是一个外行的手笔。

那么今天的文章应该能够帮到。UI的设过程中,很多技巧并不需很深厚的设知识,但它们能让的UI网页界面看起明显的提升。改设这件事,验技巧往往能让人少走弯。

闲话少叙,下面体。

1. 按钮色彩凸显重要性

在给用户提供多个选择的候,可以通过色彩所传递的情绪是积极还是消极的,来简快速地进行计。

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

实际上,红色和绿色按钮的色彩含义,已经横跨物理界和数字计领域,每在多实体产品上也能类似的计,包括交通上的红绿灯,警告标识,以及实体按钮。

绿色表示通行,红色表示禁止。如果户需要购一个漏斗,你希望感兴趣的户赶紧点击,而是取消。

另,如你网站或者 APP 涉及到要性不若干交互,除了按钮都要标识出相应文本标签内容以,可以借助色填充与否来进步区分层级结构:

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

这是个简单示例,有色填充按钮、幽灵按钮(色填充、有边框)以及边框填充按钮来区分。

而在少数情况下,对系统有重要影响的、破坏的或者的按钮,也应该突出显示,但是以使用红来进行强和警告。个时,相对的「非负面」的按钮则被视为重要低的操:

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

简而言之,际上用户用来区分按钮的核心靠的是感而非复逻辑判断,设计的基规则在上面,但是更重要的是要基情绪和感来进行设计。

2. 用字重和明暗来区分层级

尤其是在构建文内容的视级的时,用到的属很,只使用大小差异来构建就显得单一。

很多时候,可以借色彩、字重、明暗行区分。我们可以让重的文本、字体粗、色彩加鲜明,或者使用深的黑色呈。

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

综合使用这些属性构建视觉层级。

3. 用留白来隔离元素

两元素互不相关,如果将它们分隔,使用分割线似乎一件理所当然的事?当然可以,但这种方式真的非常过时且笨拙的一种呈方式。需的好、优、贴合当下的一种呈方式。

不是简地使用割线,而是使用留,或者说负空间来间隔就可以了。割线在大程度上是丑陋且难以驾驭的视觉噪音,相对而言留则好了多。

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

多数情况下,删除隔线条是比较快速的方法,当然更多的候需要你适当地调整一下留的大。

使分割线来分隔容,仅会扫视页面更长的时间,而且增的信息噪音会影响整体的层次结构。

4. 用阴影替代边框

想要凸显一些元素,并一定需要依靠描边。使阴影则可起到同样的效果,单独使则会显得更整洁。描边+阴影则会显得过于杂乱。

使用相不那么具有侵略性小阴影疑让效更加轻松,看起来也不会突兀。

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

△ 登录表单

5. 用色条提升视觉调性

如觉内容区块过于单调,可以根据你目来强化这区块视觉属性。在内容区边加上色条能够在提升视觉属性时,赋予这区块内容以情绪。

条以是单的,也以是渐变的,取决你想传达什么样的视验。个条还以具备良的功能。当,很大程度是用在相对比素的页面上的,果页面身已经很花哨,就不太用得上。

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

比使用红和绿来标识不同的状态,也以用条来标识出被触的 Tab 或者控件。

6. 用背景色区分区块

其,同样是为进行区分内容区块和级,个方法同样优雅而快速,几乎以是毫不费力的一种设计技巧

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

为了区分两个不区块元素,简单地使用不背景来进区分也可以,本质上,它采用类似卡片设计思路——用不卡片来归类内容。

相对而言,使用有差异但是不么显著的不同块来为背,在证整整洁的同时,到区分的用。

7. 「字」尽其用

谁不喜欢漂亮的字呢?当喜欢,但是字的功用其各不相同。从呈现正文的强读文,到装饰极强的视化字,各种不同的字需要应对不同的功能。

简单看看几种不同类型的字体:

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视觉体验的7个小技巧

网页设中,绝多数况下都只会使用衬线字体非衬线字体两种,英文网站当中,通常会采用一种衬线字体+一种非衬线字体的搭配方式。注意,如果不同粗细字重的字体,使用同一字体族中字体好。中文当中,源且可以免费商用的「思源黑体」「思源宋体」一设中非常常见的选择。

在进行视觉计的候,坚持使用2种字体,极少会使用3种字体,后者最多会在调视觉的商业或者艺术性项目当中使用,比如 Banner 和海报。

结语

真心期望这的巧能够帮你做出好的计,无论你是计还是其职业。多候,计是灵活的,是基于知的,有方法可供遵循的,尤其当你仔细观察一些现有的好计,会发现有多这的巧。观察共性,仔细知,总结经验,你也可以。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

很多平台的设计风格都是偏可爱类型的,尤其是用户年龄段比较低的,比如动漫类的,校园类的等等。 就在前不久,我刚刚悟出了...
可爱图标
本文我们开始讲解最后一种类型的图标 ── 启动图标。在第一章我们已经对启动图标有了基础的认识,所以下图再简单回顾一遍。 ...
入门
在之前的文章《从零开始画图标系列:线性图标设计实战演示!》中,我们已经讲解了线性图标的绘制方法,在本篇文章,我们就可...
入门
越来越多的品牌和企业开始在自家的网站和营销推广中使用吉祥物,今天的文章我们结合实例来聊一聊吉祥物的运用。 在设计的过...
ui设计
9月4日,Google 终于发布了Android 10的正式版本。此前的内测阶段它一直以 Android Q 的名字示人,无论是交互、使用体验的优...
Android 10
对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响...
App图标
弹窗现在越来越成为了个磨人的小妖精。 早年我们受够了太多不明错误弹窗的骚扰,现在又却要承受各种广告弹窗的轰炸。 我...
ui设计
针对设计师评审时常见的情况,我整理了一下关于评审的方法,希望对大家有用,可以帮大家早一点下班~ 欢迎关注作者...
ui设计