56.网页设计规则#4_图标

news2024/11/25 20:30:15

使用好的图标

  1. 使用一个好的图标包,有大量的免费和付费图标包
    图标工具推荐:
    ● Phosphor icons
    ● ionicons
    ● ICONS8

  2. 只使用一个图标包。不要混合不同图标包中的图标
    在这里插入图片描述

  3. 使用SVG图标或图标字体。不要使用位图图像格式(.jpg and .png)!

  4. 调整网站个性!圆度、重量和填充/轮廓取决于版式
    什么时候去使用图标?

  5. 使用图标为文本提供视觉辅助

  6. 产品功能块使用图标
    在这里插入图片描述

  7. 使用与动作相关联的图标,并标记它们(除非没有空格或图标是100%清晰的)
    在这里插入图片描述

  8. 使用图标作为项目符号
    在这里插入图片描述

使用好图标的一些准则
9. 为了保持图标的中性,使用与文本相同的颜色,为了吸引更多的注意力,使用不同的颜色
在这里插入图片描述

  1. 不要让你的用户感到困惑:图标需要有意义,并适合文本或操作
    在这里插入图片描述

  2. 不要让图标比它们设计的更大。如果需要,把它们围成一个形状

    在这里插入图片描述

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

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

相关文章

Android 中的跨进程数据块传递

Android 的 Binder 进程间通信机制主要用于实现远程过程调用 RPC,Android 系统中进程之间的大块数据传递,如音频数据,出于效率等原因,一般不直接用 Binder 机制。Binder 库提供了基于共享内存外加 Binder 机制的跨进程文件描述符传…

每月一书(202304)《RxJava2.x实战》

[TOC] 又到了每月一书的时间,本月阅读的是技术相关书籍《RxJava2.x实战》,下面分享一下我阅读完后的体会。 主要内容 本书主要介绍了RxJava这个框架,框架版本是2.x。主要内容包含三大部分: 框架的原理和使用方法框架中各类操…

git alias

git alias 其实之前就用过一些 alias,比如说 git reflog show 就是 git log -g --abbrev-commit --prettyoneline 的 alias,一般 alias 可以存储到 git 的 config 文件,repo 等级的在 .git 下,global 的一般在 ~/.gitconfig 或者…

【flask】三种路由和各自的比较配置文件所有的字母必须大写if __name__的作用核心对象循环引用的几种解决方式--难Flask的经典错误上下文管理器

三种路由 方法1:装饰器 python C#, java 都可以用这种方式 from flask import Flask app Flask(__name__)app.route(/hello) def hello():return Hello world!app.run(debugTrue)方法2: 注册路由 php python from flask import Flask app Flask(__name__)//app…

【前端面经】JS-事件循环

什么是事件循环(Event Loop)? 众所周知, Javascript是一门单线程的语言, 单线程即同一时间只能做一件事, 但这并不意味着JavaScript在执行代码的过程中就会一直阻塞,而解决单线程不阻塞的这个机制就叫做事件循环(Event Loop), 也就是同步和异步的概念. 任务执行流程 在JS中…

PS滤镜插件-Nik Collection介绍

PS滤镜插件-Nik Collection介绍 什么是Nik CollectionNik Collection都包含什么? 什么是Nik Collection Nik Collection是一款PS滤镜插件套装,其包含了八款PS插件,功能涵盖修图、调色、降噪、胶片滤镜等方面。Nik Collection 作为很多摄影师…

redhat 安装oracle 11g

这里写目录标题 1、数据库下载和安装文档1.2、安装文档1.3、license种类解释( XE版 标准本 个人版 企业版)1.4、在安装完oracle后再创建数据库1.5、DBA的文档1.6、Automatic Storage Management Administrators Guide1.7、数据库备份恢复手册1.8、Overvi…

系统集成项目管理工程师 笔记(第15章 信息(文档)和配置管理)

文章目录 软件文档的分类(1)开发文档:描述开发过程 本身(2)产品文档:描述开发过程的 产物(3)管理文档:记录项目管理的信息 文档的质量可以分为四级(1&#xf…

03_Uboot网络命令与MMC和文件操作命令

目录 网络操作命令 ping命令 nfs 命令 tftp 命令 EMMC和SD卡操作命令 mmc info命令 mmc rescan命令 mmc list 命令 mmc dev 命令 mmc part命令 mmc read 命令 mmc write 命令 mmc erase 命令 FAT 格式文件系统操作命令 fatinfo 命令 fatls 命令 fstype 命令 …

好的代码风格,如同书法,让你的代码更加漂亮

很多初学者的代码其实都不够“漂亮”,那是因为没有养成好的编码习惯。本篇博客以C语言为例,总结一些好习惯。其实,很多习惯都是肌肉记忆,举个例子:请你写一个程序,输入2个整数并输出它们的和。有些朋友可能…

java中的\t说明

阅读前请看一下:我是一个热衷于记录的人,每次写博客会反复研读,尽量不断提升博客质量。文章设置为仅粉丝可见,是因为写博客确实花了不少精力。希望互相进步谢谢!! 文章目录 阅读前请看一下:我是…

SQLIntegrityConstraintViolationException: Column ‘create_time‘ cannot be null

概述 在使用MySQL MyBatis时遇到的问题,记录一下。 问题 在测试环境里,往MySQL数据表里插入数据时报错:SQLIntegrityConstraintViolationException: Column create_time cannot be null 表结构字段定义: create_time dateti…

【Canvas入门】从零开始在Canvas上绘制简单的动画

这篇文章是观看HTML5 Canvas Tutorials for Beginners教程做的记录,所以代码和最后的效果比较相似,教程的内容主要关于这四个部分: 创建并设置尺寸添加元素让元素动起来与元素交互 设置Canvas的大小 获取到canvas并设置尺寸为当前窗口的大…

Lesson13 IP协议

IP: 提供一种能力,将数据从A主机送到B主机的能力,但不一定会成功 主机 : 配有 IP 地址 , 但是不进行路由控制的设备 ; 路由器: 即配有 IP 地址 , 又能进行路由控制 ; 节点 : 主机和路由器的统称; 协议头格式 如何封装和解包: 定长报头 自描述字段 如何交付(分用) : 8…

Linux驱动之input输入子系统

输入子系统用于实现Linux系统输入设备(鼠标 键盘 触摸屏 游戏杆)驱动的一种框架。Linux内核将其中的固定部分放入内核,驱动开发时只需要实现其中的不固定部分(主要还是和硬件相关的部分),这和platform设备…

离散数学下--- 代数系统

代数系统 定义: 代数系统是用代数运算构造数学模型的方法。 • 通过构造手段生成,所以也称代数结构 • 代数运算:在集合上建立满足一定规则的运算系统 (一)二元运算 二元运算的定义 二元运算需要满足的两个条件&a…

【P1】Jmeter 准备工作

文章目录 一、Jmeter 介绍1.1、Jmeter 有什么样功能1.2、Jmeter 与 LoadRunner 比较1.3、常用性能测试工具1.4、性能测试工具如何选型1.5、学习 Jmeter 对 Java 编程的要求 二、Jmeter 软件安装2.1、官网介绍2.2、JDK 安装及环境配置2.3、Jmeter 三种模式2.4、主要配置介绍2.4.…

数据结构——二叉树层序遍历

数据结构——二叉树层序遍历 107. 二叉树的层序遍历 II199. 二叉树的右视图思路: 637. 二叉树的层平均值 107. 二叉树的层序遍历 II 107. 二叉树的层序遍历 II 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 。 (即按从叶子节…

心血管疾病预测--逻辑回归实现二分类

一、实现效果 实现心血管疾病的预测准确率70%以上 二、数据集介绍 数据共计70000条,其中心血管疾病患者人数为34979,未患病人数为35021。数据特征属性12个分别为如下所示:生理指标(性别、年龄、体重、身高等)、 医疗检测指标(血压、血糖、胆固醇水平等)…

【社区图书馆】PyTorch高级机器学习实战 读书感想

《PyTorch高级机器学习实战》十大特点 1. 深入全面的内容覆盖: 本书的内容深入而全面,涵盖了深度学习中的多个领域,包括自然语言处理、计算机视觉、强化学习等,并介绍了各种不同的神经网络结构和优化算法。 2. 理论和实践并重&am…