当前位置:首页 > 网页美工设计

网页设计师必须要学习的视觉层级技巧

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

  那么,怎么做出有效的视觉层级?当然,不同的产品要求不同的方法,但仍有一些相同的方法帮助组织UI元素。接下来我会提供一些有用的技巧,关于如何为移动和web产品创建具有说服力的视觉层级。

  1、始终记住商业目标

  产品背后总有商业目标的支撑。为了达到这个目标,设计团队需要梳理出哪些UI元素更为重要,根据他们的角色排优先级,比如在电子商务网站上的所有元素各自都有他们的任务。产品图片通常是主要的视觉焦点,因为需要鼓励用户考虑购买。接下来是图片的标题,标题要解释产品是什么。然后是CTA按钮,促使用户购买产品。通过思考网站或app的商业和市场目标,设计团队能有效地优化视觉层级,让产品在一堆信息中脱颖而出。

  2、考虑浏览轨迹

  在我们之前的文章中提过,在仔细阅读网页前,人们会大致浏览下什么是他们真正感兴趣的。不同的研究,包括尼尔森-诺尔曼团队做的研究,都已表明被广泛采用的浏览模式是F型或Z型。

  F型主要是出现在有大量内容的页面或屏幕上,比如博客、新闻平台等,用户的视线是以F型浏览:首先,用户在水平方向浏览页面顶部的信息,然后往下浏览页面,再在比较窄一些的水平方向浏览页面,最后在垂直方向,阅读页面左边的信息,寻找页面段落句子的关键词。

  Z型出现在没有大量内容的文本上,或者不需要往下滑动页面。这个轨迹是像这样的:用户首先会在左上角浏览页面的标题,寻找关键信息,然后浏览到右上角,最后从左到右沿着水平方向浏览页面底部。

  了解了这两个模式后,设计师组织内容时会把核心UI元素放在最容易被看到的地方来吸引用户。

  3、易用性优先

  我们常常认为视觉层级好像只是针对审美层面,但其实不是这样的。首先,通过构建和组织视觉元素,设计师需要确保产品清晰可用,导航能起到作用。光建立在审美层面的视觉层级是不能起到有效作用的,组织结构差的用户界面会带来不好的用户体验。所以,构建视觉层级时,设计师需要考虑UI元素的功能是什么,以及它们在引导用户的过程中所扮演的角色。

  4、留白

  留白或者说负形,不仅仅是指界面元素之间的区域,它也是视觉构成的一个关键部分。留白是一种能让所有界面元素被用户注意到的工具,设计师们能用它组合或分离UI组件,以创建有效布局。而且留白有利于强调需要用户特别注意的元素,也是创建视觉层级的有效工具,需要设计师平衡使用。

不知道学什么,免费为您解答所有疑惑
姓名不能为空
手机号码不能为空

上一篇:响应式网页设计的9项基本原则

下一篇:网页设计中的css用法特点注意事项

返回首页

在线咨询

在线报名

电话报名