欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

这9个方法,帮你搭建更加高效的视觉层次

发布时间:2018:01:18 16:00:48 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1600个文字,预计阅读时间4分钟
导语
视觉层次是塑造优秀数字产品的基础,它能让内容以更加有效的方式被组织到一起,使其更容易被理解。视觉层次对于用户体验的影响很大,信息的组织架构是否清晰直观,将直接影响

  视觉层次是塑造优秀数字产品的基础,它能让内容以更加有效的方式被组织到一起,使其更容易被理解。视觉层次对于用户体验的影响很大,信息的组织架构是否清晰直观,将直接影响到整体的导航和浏览交互。

  虽然大家对于视觉层次都有基本的认知,但是在设计的过程中,要怎么做才能确保构建出合理的视觉层次呢?首先,不同的产品构建放方法肯定是不一样的,不过有一些相对通用的方法,适用于多数的情况。今天的文章就为你提供一些通用的视觉层次构建的技巧。

  1、基于你的业务目标来构建

  每个数字产品背后通常都有着明确的商业目标。为了实现这些目标,创意团队可以基于目标来确定不同元素的重要性和优先级。电商网站是就是最典型的案例,不同的元素占据不同的层次,共同达成目标。这当中,图片是最重要的视觉元素之一,,它是用来吸引用户的注意力,从视觉上鼓励用户考虑它。标题在图片之后,对产品在文字上予以描述。在此之后,借助CTA按钮为用户提供醒目的购买入口。明确的商业目标和清晰的营销方向将会为设计团队提供视觉设计的依据。

  

这9个方法,帮你搭建更加高效的视觉层次

 

  2、结合用户浏览模式来构建层次

  在以前的文章当中没少提到用户的浏览模式,其中最常见的两种浏览模式就是F型浏览模式和Z型浏览模式。

  用户在浏览新闻和博客等内容量较大的网站页面的时候,会采用F型模式来快速扫视,定位自己感兴趣的内容。用户会先横向扫视,然后视线向下移动,再横向浏览。整个视线的轨迹类似于字母F,而用户会在扫视过程中不断找到自己感兴趣的关键词或者内容。

  Z型浏览模式则主要发生在不那么复杂的页面当中,甚至于其中都不会包含太多的文本内容,用户会快速地从左到右从上到下浏览,整个视觉轨迹类似字母Z。

  了解这些用户浏览模式,你就可以根据实际状况,有意识地将关键的元素放置在用户扫视最多的节点上,引起用户的注意。

  

这9个方法,帮你搭建更加高效的视觉层次

 

  3、功能优先

  层次感这东西看起来是更偏向与美学设计,但是实际上它的功能性会显得更强一些。设计师需要确保产品用户能够清晰地使用,并且导航足以引导用户。而功能性的层次比起视觉层次要更加重要,单纯拥有了视觉层次,不足以构建高效可用的产品体验。而结构化不够明晰的界面,自然也就无法带来足够好的用户体验了。所以,在进行UI设计的时候,视觉层次的构建应该依托于功能,只有确保了功能的可用,比如导航的可用性,视觉层次才会发挥它的作用。

  4、留白同样是需要掌控的视觉元素

  首先留白不单纯只是元素和元素之间的空域。它同样是用来构建布局的视觉元素。留白的重要性在于,它可以使得被留白包围的元素被用户注意到,尤其是关键性的交互控件。通过控制留白的疏密,设计师能够让不同的元素之间的亲疏关系体现出来,而大量的留白还能让关键性的、需要强调的特定元素,醒目地呈现在用户面前。换句话来说,用好了留白,自然也就能自如地控制UI的层次感。

  

这9个方法,帮你搭建更加高效的视觉层次

 

  5、利用黄金比例

  前几天,我们撰写了一篇文章专门探讨了在UI当中使用黄金比例的方法。黄金比例是1:1.618,被认为是最具美感的视觉比例,在自然界当中几乎无处不在,而许多美丽的自然景观和生物奇观,大多都和黄金比例有着或深或浅的关联。

  许多设计师喜欢在布局框架中使用黄金比例,它能使得布局有轻重,又显得足够协调。当然,更具体的使用,可以参考这篇文章:《用好黄金比例,用协调自然的配比照亮你设计的UI》

  

这9个方法,帮你搭建更加高效的视觉层次

 

  6、使用栅格

  栅格是设计师控制布局的关键性工具之一,布局在不同的环节发挥着不同的作用,而控制视觉层次,同样有用。栅格有助于将不同的元素控制在不同的比例大小之下,保持合理的距离,控制留白。总体上,栅格对于层次的控制是非常有效的。

  7、增加色彩

  在控制视觉层次的时候,色彩所起到的作用也是不可替代的。在很多时候,色彩能够帮助用明白哪些元素是核心。在整个配色当中,色彩通常有着强弱之分。大胆的色彩诸如红色和橙色,就比相对弱一些的白色和浅灰要来的显眼,设计师常常使用醒目的颜色来高亮显示关键性的内容。

  在使用色彩构建层次的时候,关键在于层级的控制,有对比才有层次。

  

这9个方法,帮你搭建更加高效的视觉层次

 

  8、注意字体的使用

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:这5个丑出新高度的网站,为什么那么多人夸

下一篇:市场调查问卷之整体设计和把控之法

  • 18894 文章总数
  • 2305654访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信