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

news2024/9/27 19:14:31

什么是视觉层次?

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

视觉层次基础原理

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

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

文本元素的视觉层次

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

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

组件之间的视觉层次

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

在这里插入图片描述

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/496881.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode:环形链表(详解)

前言:内容包括-题目,代码实现,大致思路,代码解读,拓展问题 题目: 给你一个链表的头节点 head ,判断链表中是否有环。 如果链表中有某个节点,可以通过连续跟踪 next 指针再次到达&…

【BIM+GIS】Supermap打开BIM Revit模型的方式

Revit导出Supermap GIS格式数据的方法通常有三种:插件式导出、直接导入和标准交换格式(IFC)导出。 文章目录 一、Revit安装Supermap插件1. 安装Supermap插件2. UDB导出模型3. 打开模型二、Revit导出IFC格式1. Revit导出IFC2. Supermap导入IFC一、Revit安装Supermap插件 1. …

115-Linux_C语言访问mysql及操作数据库

文章目录 一.C语言访问mysql1.连接数据库使用的头文件和库文件2.初始化连接句柄3.连接数据库4.关闭连接5.执行sql语句6.提取结果7.获取结果集中有多少行8.取出结果集中的一行记录9.查看记录行的列数10.释放结果集占用的内存11.获取错误信息 二.连接数据库三.操作数据库 一.C语言…

Linux 中实现 ssh 免密登录

Linux 中实现 ssh 免密登录 1. 使用命令行 在控制端使用命令生成私钥密钥对,执行命令 ssh-keygen -t rsa ,一路默认回车即可,然后会在 .ssh/ 目录下生成两个文件 id_rsa 和 id_rsa.pub,如下图。 使用命令 ssh-copy-id root192.168.16.4&…

电力NLP:指令票规范识别

文章目录 任务目的想法讲解数据集介绍1电气主语2操作任务判断数据集3操作内容判断数据集4错误词数据集 解法讲解程序、数据集下载链接 任务目的 识别调度指令票(或者其它操作票)是否规范。 想法讲解 按石第2014—16号定值单投入石双西线161开关6区保护…

web三大作用域+servlet生命周期

Web三大作用域 Application ServlectContext : 作用于整个web应用,随程序的停止而失效。 使用: request.getServletContext().setAttribute("参数名","参数值");//servlet获取Application对象并传入数据 Application.g…

React antd 日期选择控件踩坑 <DatePicker> Table Ant Design ProTable

背景 需求&#xff1a;一个带日期的字段 后端接口给值时默认设置为这个日期值 不给值时就是默认状态 <DatePicker defaultValue{val} onChange{handleChange} {...props} />这里 val 是我最终从后端获取到的日期数据 可能有值可能没有值 按照官方 API 和 demo 写 应…

实验四 微程序控制器实验报告

我班算是几乎最后一个做实验的班级了&#xff0c;报告参考了一些朋友提供的数据加上一些自己的主观拙见&#xff0c;本人水平有限加之制作仓促难免有错误&#xff0c;望大家批评指正。 4.1 微程序控制器实验 一、实验目的 (1) 掌握微程序控制器的组成原理。 (2) 掌握微程…

springboot实习管理系统的设计与实现

摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而实…

一键免费部署你的私人 ChatGPT 网页应用-ChatGPT Next Web

ChatGPT-Next-Web是一款基于GPT-3.5的在线聊天机器人应用程序。它可以自动回复用户输入的消息&#xff0c;并提供有用的信息和服务。该应用程序使用了最先进的自然语言处理技术和GPT-3.5模型&#xff0c;可以生成自然流畅的文本&#xff0c;并提供准确和个性化的回复。 项目地…

(浙大陈越版)数据结构 第二章 线性结构 2.3 队列

目录 2.3.1 队列及顺序存储实现 什么是队列 概念&#xff1a; 特性&#xff1a; 队列的抽象数据类型描述 队列的顺序存储实现 解决方案&#xff1a; 2.3.2 队列的链式存储实现 2.3.1 队列及顺序存储实现 什么是队列 概念&#xff1a; 和堆栈一样&#xff0c;是一种受…

黑马点评项目导入

文章目录 开篇导读项目地址导入SQL项目架构介绍后端项目导入前端项目导入 开篇导读 亲爱的小伙伴们大家好&#xff0c;马上咱们就开始实战篇的内容了&#xff0c;相信通过本章的学习&#xff0c;小伙伴们就能理解各种redis的使用啦&#xff0c;接下来咱们来一起看看实战篇我们…

刚刚!BingChat全面开放,人人可用!

大家好&#xff0c;我是鸟哥。 如题&#xff0c;微软真是下血本。昨天毫无征兆的宣布BingChat全面开放&#xff0c;人人可用&#xff01;众所周知ChatGPT得使用门槛有多高&#xff0c;而BingChat底层调用的是GPT4.0的模型&#xff0c;这无疑是白嫖GPT4.0最简单的姿势了。鸟哥一…

阿里云服务器镜像怎么选?操作系统版本选择说明

阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文版&#xff0c;阿里云百科来详细说下阿里云服务器操作系统有哪些&#xf…

【移动端网页布局】flex 弹性布局 ④ ( 设置子元素是否换行 | flex-wrap 样式说明 | 代码示例 )

文章目录 一、设置子元素是否换行 : flex-wrap 样式说明1、flex-wrap 样式引入2、flex-wrap 样式取值说明 二、代码示例1、代码示例 : 默认情况下 flex 弹性布局子元素不会自动换行2、代码示例 : 自动换行 一、设置子元素是否换行 : flex-wrap 样式说明 1、flex-wrap 样式引入 …

统计字符串字符出现的次数

输入一个字符串&#xff0c;输出字符及相应字符出现的次数。 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅是基础那么简单…… 地址&#xff1a;https://lqp…

navicat连接云服务器mysql教程

包含navicat报错解决&#xff01; 文章目录 1 点击连接后填写相关内容2 报错解决2.1 1130 - Host XXX is not allowed to connect to this MySQL server。2.2 服务器未开启mysql端口通道 1 点击连接后填写相关内容 主机名或ip地址&#xff1a;填写服务器公网ip 用户名和密码&a…

GitHub使用(1):杂项

目录 1. ubuntu推送到github鉴权失败2. 分支重命名3. 指令升级删除分支推送到远程仓库 1. ubuntu推送到github鉴权失败 翻译下就是 remote&#xff1a;2021 年 8 月 13 日删除了对密码身份验证的支持。 远程&#xff1a;有关当前推荐的身份验证模式的信息&#xff0c;请参阅 ht…

开会记录【NiFi数据集成、AllData数据中台管理系统、RuoYi】

今天上午和下午开了个小会&#xff0c;上午说了一下Nifi&#xff0c;下午具体说了一下nifi和ruoyi。 目录 上午 下午 上午 三个人开会。 上次说的挖掘平台&#xff0c;您这边是否有技术人员对nifi比较熟悉&#xff0c;并且能够将相关功能集成到数据中台系统中。 现在结构化的…

LeetCode---回溯算法中的子集问题

78. 子集 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2]…