什么是设计中的对比?

对比是设计中的一个重要设计原则,因为对比能够有效组织界面信息,并构建设计层次,通过这样来向用户传递关键重要信息。
合理准确的运用对比原则可以有效的提高设计质感,当然如果过渡使用对比有时候也会适得其反,比如颜色对比过于强烈,反而影响了视觉阅读。

#O1.颜色对比


色相环
如上图,在色相环上,色相之间的角度大小就决定了对比的强烈程度,因此我们在选择色彩对比时候需要注意。
例如,下面这张设计图就是青绿色与紫色之间的对比,属于色相对比



上图配色色板中,分别应用色相和明度之间的对比。
#O2.形状对比

形状对比一般是有规则和无规则形状,比如上面的圆形和液态的有机图形进行组合,前者较为规整,后者往往弯曲且不对称,二者搭配使用可形成良好的对比。
那么在UI设计中的形状对比一般都是在棱角之间出现较多或者图标符号。




Google的Materials you Android 12设计语言的出现,将不同形状容器的组合在设计中,演变出多种组件容器,这样的思路,值得我们深入思考与学习,为什么我们之前就想不到这样的思路?
形状对比在产品设计中的应用有更多无限可能,现在最难的还是大家的思维限制,希望以一种开放的心态去挑战设计更多可能性。


#O3.大小对比

在UI设计中对比其实就是差异化,实现信息层次的一种方式。在使用大小对比时候,大的元素就需要更大,小的就让它更小,不能拖泥带水,不大不小。

当遇到颜色相同的版式设计,可以通过大小来做层级区分。

上图界面设计中,标题文字最大,周边运用留白,使得信息层级区分更明显。

定位图标最大化显示在地图中心区域,聚焦,引起用户的关注和留意。
好了,今天文章差不多到这,我个人觉得图形的对比用好后将是构建竞争力最有效的设计手段,突破同质化壁垒,大家下去可以多去练练,找到设计的感觉。
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务