优秀的设计靠8个技巧提升视觉层级

大家都知道提高视觉层级,无非就几个点,尺寸、对比、颜色、样式、分组、对称、相似等这些点,基本总结起来就是制造差异,通过差异点来突出我们想表达的信息,视觉层级它能引导我们去发现设计中重要的地方,忽略不重要的点。今天就结合一些案例来聊聊提升视觉层级在设计中是如何去运用对比来达到提升设计层级的。

打 开  VS 关 闭

页面中通过打开或关闭处理方法,对页面中需要透出给用户的信息,可以铺开呈现出来,对于不那么重要信息可以收起来,通过展开和收起的对比,通过二级页面跳转或引导到其他操作,通过这种方式来强调页面关系和节奏。

满 VS 空

一半内容满一半内容少,形式对比,形成层级落差。

▲(上图)左侧图片比较饱满,右侧文字采用正负形结合视觉稍显空来突出页面调性。

▲(上图)左侧空右侧饱满,对比强烈,让用户更懂在文字信息。

▲  同样这个app在上面留白较多,内容集中底部,页面一分为二,上半部分空,下面满,形成对比。

▲  酒杯比较满,文字底部空,形成视觉冲击整个画面更加聚焦中心。

对 称 VS 不 对 称

在页面中,通过对元素不对称,会让视觉焦点差异点突出来。

▲  偶尔在设计中运用这种不对称设计手法反而能起到更好的效果

▲  这个页面主要功能集中在左侧第一个按钮,和传统的重要功能集中在中心不同,能形成产品差异点,同时营造视觉差异性。

▲  非对称在页面中的运用

大 VS 小

通过元素大和小对比,这种直接感官方式能让我们更聚焦在大的图形上面。

面 VS 线

通过线和面之间对比,常用在按钮和标签,或者区块之间,面的按钮重于线的按钮,这个是设计中经常运用到的设计技法。

衬 线 字 体 VS 非 衬 线 字 体

字体也是种对比,如Serif and Sans-serif的对比。

有 序  VS  混 乱

有时候为了强调对比关系,在页面文字处理中采用有序排版,对于物体排布采用混乱,通过有序和混乱对比强调画面关系,最著名的例子可属苹果设计,大量采用这种有序VS混乱手法。

▲  文字居中是有序的,手机采用倾斜的营造一种对角线感觉,和文字有序排列形成呼应。

▲  同样上面两图文字部分采用的整齐左对齐方式,而一些手机,装饰氛围物品则错别排布在页面各个地方,形成对比。

▲  文字有序,氛围素材无序,对比强烈,装饰效果强。

质 感  VS  扁 平

质感的和扁平的,这个质感不一定是拟物设计,是有画面感,有色彩重量的,通过对扁平对比来强调。

对 比 技 巧 技 法 的 运 用 总 结

  • 打开 VS 关闭
  • 满 VS 空
  • 对称 VS 不对称
  • 大 VS 小
  • 面 VS 线
  • SerifVSSans-serif
  • 有序 VS 混乱
  • 质感 VS 扁平

我们的设计日记(公众号)

作者:sky

(0)

相关推荐

  • 设计师必备:提高视觉层级的9个技巧

    有效的视觉层级是产品成功的基础,能以有效的方式组织UI元素,使内容容易理解,看起来舒适整洁.视觉元素的呈现对用户体验有很重要的影响,如果组成元素能被巧妙地运用,用户就能轻松地浏览产品,和产品互动,并且 ...

  • 详情页头图设计有哪些实用技巧?

    在电商设计工作中,详情页的设计是我们不得不面对的一大难题,和普通专题页不一样,详情页设计更多的是对文案.卖点进行视觉提炼.视觉表达的过程:如何把一个产品的卖点.特色通过视觉流畅的表达给用户,减少用户阅 ...

  • 产品体验日记 | 发现优秀的设计-01期

    抖音.头条.微博这类信息流产品,核心产品指标永远是用户的浏览时长和深度,所以在产品设计的时候是无所不用其极,去吸引用户不断的刷下去,不管是算法还是UI,都在想办法吸引用户去不断地消费内容,忘记时间. ...

  • 优秀网页设计的基本原则

    一个优秀网页设计具备的一些基本原则 操作方法 01 1 .确定网页设计的内容 一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么,所有 ...

  • 21幅优秀招贴设计作品欣赏

    小编话:今天给大家带来的是来自设计派的优秀招贴设计作品欣赏.当大家设计网页的同时可以借鉴一下海报的设计,字体的设计,色彩的搭配以及独特的排版.希望大家能从中获取灵感. 原文链接:设计派

  • 国外优秀字体设计作品集

    小编:今天分享一波风格各异的英文优秀字体设计作品.一款好的字体设计能让人过目不忘,既起着传递信息的功效,又能达到视觉审美的目的,一起欣赏吧. 希望有你喜欢的字体.

  • 9种技巧提升无人机航拍飞行技术

    9种技巧提升无人机航拍飞行技术 操作方法 01 1)接受培训 培训是最有效可靠的方法.如果你想在最短的时间内掌握飞行技巧,最好向有多年驾驶经验的飞手们请教,从他们丰富的驾驶经历中获取技巧,从而极大地加 ...

  • 提升视觉营销效果:15个选择高效图像的方法(二)

    如果你在选择图像时采用了这些技巧,这一定会帮助你做好品牌建设.一定要保持真实. 09. 通过一些基本的编辑,使图像充满乐趣与生机 不要被图像本身所束缚.通过裁剪.添加文本.调整颜色等方式,你可以任意使 ...

  • 奇思妙想是如何创造出优秀网页设计

    变化无端的奇思妙想,特立独行的交互模式,独树一帜的设计手法,它们常常来自于设计师的灵光一闪.在设计项目中加入一点奇思,不仅能够提升整体设计的意境,而且常常会获得点铁成金的奇效. 不论这个奇异的点子落脚 ...