赞助商
立即赞助

想要让对比度更明显,可以从这6方面入手

专题页设计3年前 (2021)发布 流光
3.1K 0 0

对比其实不同元素体之间的差异的外化表,差异越,对比就越明显。几乎所的设项目当中,设师总会出于各种目的营造对比,通常言,对比可以用:

  • 强调重点
  • 提高可读性
  • 创层
  • 增加视觉吸引力

很多时候对比度能够让设显得加时,今天的文章我们将会分享一些实用的方法,帮提升设中的对比度。

1、调整元素的尺寸大小构成对比

如果所设的UI界面或者插画当中,绝多数的元素都尺寸相似的,置对称的,色彩相似,那么它们一起很难创造出视觉焦点的。

增加设计比度诸多法,让元素尺寸尽可能大是最快最接。想要到这个目标,可以让某个元素更大,或者更小。用户眼睛会很自然地被这异性吸引过去,为它们是不。

如果你此刻所计的是网页,那可以让标题或者CTA标语和按钮比周围的素更大一些。更大的素会拥有更显的视觉重量,这种西可以通过对比来呈现。

下面是一战案例:

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

2、使用纹理和图案来构建对比

创造对比度高的设,本质始终还于创造差异。纹理图案这种元素,相互之间往往很的差异,设的时候可以充分利用这一点。比如可以让粗糙的纹理平滑的元素搭配一起,创造出对比度。

另,纹理本身会带有些特定属性,比如粗粝纹理能够创造复质感,微妙纹理则能够自然感受。样,不质和质感也存在异,能够创造更加独特效,另也能强化比度。

以下是一些实战案例:

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

3、通过色彩强化对比度

配色是很重要的设计技巧,同样是最容易被感知到的设计元素。色彩的色相、明暗、饱和上的差异,都够制足够对。同一种色相之,同深浅的颜色之间的对是非明显的,而我们最见的就是在黑色背景上的白色本和在白色背景上的黑色本,这种对确保了容拥有基本的可读性。

当然,实际的色彩搭配当中,对比度足够明显的配色方案会加复杂,通常言,下面基于色轮的三种色彩搭配方式能够给对比明显效果不错的配色:

  • 互补配色。色轮上处于相对位置的两种色彩,如红色和绿色。
  • 分割互补。这互补配色的变种,指的色轮相邻的两种色彩它们各自相对置的色彩,共同组的配色方案。
  • 三元互补。这指是在色轮上互相隔120度三色组成配色,比如绿色,紫色和橙色构成配色。

TripAdvisor 这网站就使用了三元互补的配色,构建对比色

想要让对比度更明显,可以从这6方面入手

最后补充一句,除了借助色轮外,还可较简单地使冷色和暖色来作为对色,构建配色方案。

想要让对比度更明显,可以从这6方面入手

4、通过留白来制造层次和对比

在设计的时,留白是组织内容的重要手段,它们能够创造够明晰的视次。比设计一个包含大量内容的页面,不同元素之间的疏密控,能让内容各自拥有不同的级,不同元素之间的留白和间距,则能够让它们拥有不同程度的吸引力。被大量留白所绕的元素,更容易吸引人的注意力。

想要让对比度更明显,可以从这6方面入手

注意 Information Highwayman 个网站是怎么借助视级来吸引用户注意力的。

想要让对比度更明显,可以从这6方面入手

距离靠近的元素让用户得它们相互之间是有关系的,而相互远离的元素种关联就降低。是留白的用。

想要让对比度更明显,可以从这6方面入手

大量的留白不仅能够营造对比,还能创造优雅大气的感。

想要让对比度更明显,可以从这6方面入手

5、充分利用字体排版来制造对比

不同的字体组和排版布局,同能够化计的对比度。不同的字体有着不同的视觉效果,给人不同的体验,可以通过理的字体组,来营造对比度。字体之间的差异要足够显著,但是在搭配使用的候,还需要足够协调,这种妙的衡需要控制。最受欢迎的搭配方式,是采用衬线体字体和非衬线体字体。诸如 Fontjoy 和 Type Connectiong 可以帮你进行字体搭配的挑选。

另外一种方法,是使用不同的字样式来创造差异,比使用斜、加粗的效果,或者使用不同的字重来进行区别。

面是案例:

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

6、使用意外的元素

如使用,些常规、意元素,能够你设计保持平衡能够创造足够比度。意元素并不是用户不希望看到东西,而是让他们感到惊讶元素。

虽然这些素难做恰好,但是也不是没有规律可供遵循。比如使用不对称的计,来破沉闷的布局,或者在中性的配色方案当中,加入一抹亮色,这都是比较典型的方案。

下面是案例:

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

想要让对比度更明显,可以从这6方面入手

结语

设的过程中,并非所的设都一次型的。当的设需足够的对比度的时候,可以按照述的方法,行调整,将对比度提升,让整设加贴合用户的需,让设发挥作用。

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

相关文章

微信的最近一次更新,小程序入口变浅了很多。最近使用的小程序,被放置在微信打开后初始页面的下拉菜单中,而且给的下拉栏空...
ui设计
提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以...
App设计
这个月来自 Prototypr 的设计工具合集,质量相当过硬了!值得一提的是,Kitze 这款浏览器荣获了「设计师和开发者最实用浏览器...
Prototypr
在经典的尼尔森十大启发式当中,「系统状态可见性」可以说是如今交互设计领域当中,最为重要的原则之一。通过向用户展现当前...
交互设计
iPhone X 发布后,很多设计师吐槽屏幕的形状。当大部分的吐槽逐渐平息下来,我依然没看到关于屏幕转角细节设计的讨论。 你...
iPhone X
一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层...
图标
编者按:不论你是UI设计师还是UX设计师,是产品经理还是营销专员,你都很想搞清楚如何影响用户行为吧?这次的文章就告诉你三...
Adam Fard
随着移动互联网的不断发展,「以移动为中心」的理念和战略也不断渗透,互联网的「短、平、快」往往使设计师们无法长时间停下...
App设计