首页 前端知识 62.网页设计规则#8_视觉层次

62.网页设计规则#8_视觉层次

2024-08-07 00:08:22 前端知识 前端哥 142 141 我要收藏

什么是视觉层次?

  1. 视觉层次是关于确定设计中哪些元素是最重要的。
  2. 视觉层次是为了吸引人们的注意力关注这些最重要的元素。
  3. 视觉层次是关于为用户定义一个“路径”,引导他们浏览页面
  4. 我们使用位置、大小、颜色、间距、边框和阴影的组合来建立元素/组件之间有意义的视觉层次。

视觉层次基础原理

  1. 将重要元素放置在页面顶部更接近的位置,以获得更多关注。
  2. 明智地使用图像,因为它们会吸引很多关注(较大的图像会获得更多关注)。
    在这里插入图片描述

3. 空白创造分离,所以策略性地使用空白来强调元素。

文本元素的视觉层次

4.对于文字元素,使用字体大小、字体粗细、颜色和空白来表达重要性。
在这里插入图片描述

5.我们应该去强调那些文本元素?标题、子标题、链接、按钮、数据点、图标等
a. 我们也可以去强调那些不太重要的文本,例如标签和一些辅助信息之类的东西

组件之间的视觉层次

6.使用背景颜色、阴影或边框(或多种)来强调重要组件。

在这里插入图片描述

7.尝试通过降低组件B的重要性来强调组件A超过组件B。
8.需要强调什么组件?推荐语、号召行动区段、高亮区段、预览卡片、表单、定价表、表格中的重要行/列等。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14939.html
标签
HTML5 CSS3
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!