武汉北大青鸟中南软件学院
400-027-0822

设计突出视觉层次有哪些方法?

2018-04-02供稿中心: 北大青鸟武汉中南软件学院

UI设计为了显示产品特性以及突出视觉美观,设计师会运用一些小技巧来突出视觉层次感,使画面更加立体美观,在此介绍一些方法,供学员们参考。

1.基于我们业务目标

运营业务目标放在第一位,特别是在电商领域当中,视觉展示的背后都有明确的商业目标,知道你的目标是什么,优先突出显示其内容或元素,吸引用户去看去点击。

 

2.用户固定的浏览模式习惯突出视觉层次

用户最常见的两种浏览模式就是F型浏览模式和Z型浏览模式。

我们常见横向F型扫视我们感兴趣的关键词和内容。

UI设计者设计常用Z型浏览模式主要是内容少的情况下从左到右从上到下扫视。

你可以根据用户常见浏览模式,把你的视觉层次突出再浏览路径的焦点上。

 

3.功能优先

重要功能为了让用户优先使用,功能入口,功能区要摆在优先位置。

这样就有清晰的结构层次,提供高效的用户体验,清晰的导航,流畅的操作。

 

4.留白衬托视觉层次

用视觉元素与元素之间的空隙区域,来区分重要内容和类似内容。

我们把重要的控件周围空隙放的更加明显。

 

5.黄金比例视觉层次

黄金比例是1:1.618,被认为是最具美感的视觉比例

布局框架中使用黄金比例,它能使得布局有轻重,又显得足够协调。

 

6.使用栅格系统

栅格系统可以有效控制元素空隙,元素之间成规律的比例,视觉元素大小来突出视觉层次。

 

7.利用色彩来视觉层次

冷色与暖色,单色与色彩显眼区域对比都是突出视觉层次的好方法。

 

8.字体控制视觉层次

这个是最常见的排版方式突出视觉层次,利用字体的大小,字体的间隙成组,字体的颜色来区分视觉层次。

注意的是字体种类建议不要超过3个。

 

9.PC端与移动端视觉层级数

PC端展示页面信息视觉层级建议为3个,这样显得视觉元素丰富,而移动端视觉层级建议只为2个。

当我们设计PC端页面信息时,常把核心内容展示在第一位。容易吸引用户的注意力。

其次是标题与副标题

最后第三层是正文和说明内容。

移动端信息视觉层次建议仅为2个标题与正文、图片与标题、控件按钮与图片、控件与文字、两层视觉层次。

 

想要了解更多关于UI设计方面的知识,请持续关注北大青鸟中南软件学院的官方网站。如果你对我们的UI课程感兴趣,可以咨询网站的在线咨询老师,我们将尽力为您解答相关疑问。

关于我们
首页
公司简介
课程专业
师资力量
高薪就业
青鸟课程
ACCP
学士后Java
基础教育
UI设计
回到首页