ICON图标设计优漫动游

  ICON承载了App大部分功能的引导入口,是交互设计中是相当重要的一环。  
ICON图标设计  
  ICON有一种象征意义或隐喻性,并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。  
  ICON不仅是图标这么简单,它承载了文字的含义,将文字图形化,而让人使用最少的时间来理解这个按钮的含义,ICON是审美与功能完美融合的元素。  
  一、ICON设计原则  
  1,意义明确  
  这个很容易理解,当你要做一套icon时,它首先要有自己明确的含义:  
  这个放在那里?  
  这个是干什么的?  
  这个想要传达什么含义?  
  能否让用户一眼就能看出来表达的含义,这是评判icon好坏的第一标准。  
  2,简洁  
  含义表达清楚了,接下来就是icon的表达形式,因为面积小,所以过于复杂会带有一些不必要的麻烦,比如看不清内容,含义模糊,这就要求设计师在去除冗余的细节的同时,保证icon目的和功能性,并且整体风格要和整体的视觉协调统一。  
  3,可用性  
  可以通过查找性测试和预测性测试来得到icon的可用性。  
  查找性测试:被访者需要按照任务点击图标,后台需要计算被访者在不伴随文本标签的同时,找到正确图标的操作时间,首次点击的正确率。  
  预测性测试:需要被访者推断这个图标所代表的功能,并推测点击后会发生什么。  
  4,一致性  
  当满足以上几条原则后,最后需要注意的就是所有icon的一致性,比如颜色,线条粗细,感情特征,开口等等…  
  只有保持最终的一致性,你的设计才是完整的。  
  二、ICON设计规则  
  1,基本型  
  画icon和插画一样都是由最基本的形状慢慢组装来的,界面上所有的icon都可以近似成一个基本形状,比如各个方向的长方形、圆、三角形、正方形等。  
  2,图标的大小  
  图标的大小不只是物理上的大小统一,眼睛在很多情况下都是欺骗你的,眼见未必为实。  
  比如两个物理大小相同的形状,一个圆和一个正方形。正方形总是看起来会大一些,因为填补了更多的空间。  
  所以我们需要把正方形缩小一点,才会让视觉看起来大小相同。  
  3,栅格  
  一般绘制会调出网格系统,我们为了保持图标的一致性,需要设定一些辅助的尺寸来保证视觉大小统一性  
  4,角度  
  大多数情况下,是使用45度角,或者他的倍数。  
  5,线的粗细  
  一般来说用2px或者2的倍数,必要的情况下可以用3px。  
  不要介入过多的粗细,因为会破坏一套图标的统一性和凝聚力,并且不太建议用太细的线条,除非你刻意做线性风格图标。  
  6,尺寸  
  没有太大限制,现在2424和4848是目前比较标准icon尺寸。  
  7,工具  
  工具方面推荐使用ai绘制,因为在圆角和形状切割方面有着较大的优势,sketch的简洁方便也是个不错的选择,但是在转为svg格式的时候会产生许多不必要的东西,如多余的图层、纯颜色层、蒙版等等。  
  三、ICON设计细节  
  1,拼接处断线  
  2,复杂处平衡  
  3,避免中心断线  
  4,一笔画完  
  当然如果实在不能一笔也别勉强,设计图标的时候需要考虑到使用场景及规则,所有的视觉风格应该有相关联的点,比如线条的粗细,圆角的统一,断点的统一等。  
  总结:  
  最后,功能图标和桌面上的应用图标不是一回事,比如应用图标非常需要设计师打造一枚个性十足的icon,来引起用户的注意。  
  而页面的功能icon往往是相对安静的存在,哪怕没有了也是没关系,比如抖音的底部工具栏是用文字来代替图标。  
  

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

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

相关文章

如何使用百度“云一朵”来分析PDF文件

PDF 文件是一种常见的文件格式,用于存储文档、图像和其他内容。在许多情况下,我们需要对 PDF 文件进行分析,以提取其中的信息。百度“云一朵”提供了一个 PDF 分析 API,可以帮助我们轻松地对 PDF 文件进行分析。 在本博客文章中&…

rust函数

一 、函数定义 (一)格式 使用fn关键字 fn是 function 的缩写 1.无返回值的 fn 函数名 ( [paraname: type]... ) {函数体 }参数必须声明参数名称和类型 函数定义时指定的参数叫做 形参。调用时传递给函数的参数叫做 实参。 例子 fn another_function(…

基于Java的企业人事管理系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…

进程互斥的软件实现方法,硬件实现方法以及互斥锁

1.进程互斥的软件实现方法 1.单标志法 1.算法思想: 两个进程在访问完临界区后会把使用临界区的权限转交给另一个进程。 也就是说每个进程进入临界区的权限只能被另一个进程赋予。 2.例子 因此,该算法可以实现“同一时刻最多只允许一个进程访问临界区”。 3.主要…

Polygon Mide状态模型:解决状态膨胀,而不牺牲隐私和去中心化

1. 引言 前序博客有: Polygon Miden:扩展以太坊功能集的ZK-optimized rollupPolygon Miden zkRollup中的UTXO账户混合状态模型Polygon Miden交易模型:Actor模式 ZKP > 并行 隐私 在Polygon Miden交易模型:Actor模…

定时器+按键控制LED流水灯模式+定时器时钟——“51单片机”

各位CSDN的uu们好呀,今天,小雅兰的内容是51单片机中的定时器以及按键控制LED流水灯模式&定时器时钟,下面,让我们进入51单片机的世界吧!!! 定时器 按键控制LED流水灯模式 定时器时钟 源代…

功能比较:Redisson vs Jedis

Redis最流行的两个Java客户端库是Redisson和Jedis。Redisson提供内存中的数据网格功能,支持Redis的各种分布式对象和服务。另一方面,Jedis是一个更轻量级的产品,它缺乏其他库的某些功能。 如果你正在为Redis寻找一个Java客户端库&#xf…

辅助驾驶功能开发-功能对标篇(6)-NOA领航辅助系统-上汽智己

1.横向对标参数 厂商上汽智己车型L7LS7上市时间20222022Q4方案11V5R1L+1DMS11V5R2L+1DMS摄像头前视摄像头2*(5M,长焦+广角)3侧视摄像头44后视摄像头11环视摄像头44DMS摄像头11雷达毫米波雷达554D毫米波雷达//超声波雷达1212激光雷达1*(速腾聚创M1,125线,905nm)2(速腾聚创)域控供…

【开源项目】tinyprintf 用于嵌入式系统的小型printf和sprintf库

【开源项目】tinyprintf 用于嵌入式系统的小型printf和sprintf库 简介 tinyprintf 是一个用于小型嵌入式系统的微型 printf 和 sprintf 库。这个库实际上只由两个文件 tinypprintf.c 和 tinyprintf.h 组成。 LICENSE:MIT, BSD 或者 LGPL license 项目地址&#…

微服务技术栈-Docker应用部署

文章目录 前言一、数据卷二、Docker 应用部署1、MySQL部署2、Tomcat部署3、Nginx部署4、Redis部署5、Kafka部署 总结 前言 之前文章讲到过,docker运行程序的过程就是去仓库把镜像拉到本地,然后用一条命令把镜像运行起来变成容器,接下来我们将…

数据结构与算法-(7)---栈的应用-(4)后缀表达式求值

🌈write in front🌈 🧸大家好,我是Aileen🧸.希望你看完之后,能对你有所帮助,不足请指正!共同学习交流. 🆔本文由Aileen_0v0🧸 原创 CSDN首发🐒 如…

vue 使用 创建二维数组响应数据 渲染 echarts图标

目前我遇到的情况就是用动态的二维数组数据渲染echarts图标,我们从后端收到的接口一般是个一维数组,需要手动构建并且保证响应式。接下来我做了个案例 一、案例总逻辑 1. 先创建一个vue项目 2. 添加 echarts依赖 3. 模拟数据请求,构建二维数组…

DevicData-D-XXXXXXXX勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复

引言: 在数字时代,数据安全成为一项至关重要的挑战。DevicData-D-XXXXXXXX勒索病毒(以下简称DevicData病毒)是这场战斗中的新敌人,它能够以毁灭性的方式加密您的数据,迫使您在数据和时间之间做出艰难的选择…

59. 螺旋矩阵 II

题目描述 给你一个正整数 n ,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1: 输入:n 3 输出:[[1,2,3],[8,9,4],[7,6,5]]示例 2: 输入:n …

AcWing 288. 休息时间,《算法竞赛进阶指南》,环形与后效性处理

288. 休息时间 - AcWing题库 在某个星球上,一天由 N 个小时构成,我们称 0 点到 1 点为第 1 个小时、1 点到 2 点为第 2 个小时,以此类推。 在第 i 个小时睡觉能够恢复 Ui 点体力。 在这个星球上住着一头牛,它每天要休息 B 个小…

基于SpringBoot的房屋租赁管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 屋主管理 房屋信息管理 房屋租赁公告 租用订单管理 房屋信息管理 保洁管理 房屋信息 租用订单管理 取消订单管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 互联网发展至今,无论是其理论还是…

【面试题精讲】如果一个类没有声明构造方法,该程序能正确执行吗?

“ 有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top ” 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是构造方法? 构造方法(Constructor)是一种特殊的方法&#x…

Centos 服务器 MySQL 8.0 快速开启远程访问

环境: MySQL 8.0(低版本会有些不同), Rocky Linux 9.0(CentOS) 直接上干货,相信大家看到这个文章的时候都已经安装完了。 1. 先从服务器上使用 root 进行登录(刚安装完默认只能本地…

java Spring Boot在配置文件中关闭热部署

之前更大家一起搭建了一个热部署的开发环境 但是 大家要清楚一个情况 我们线上程序运行突然内部发生变化这是不可能的。 所以 他就只会对我们开发环境有效 是否开启 我们可以通过 application配置文件来完成 我这里是yml格式的 参考代码如下 spring:devtools:restart:enabled…

OpenWrt使用Privoxy插件修改UA

OpenWrt使用privoxy修改UA 1.安装privoxy插件 SSH连接到路由器 更新插件列表 update opkg安装插件 opkg install privoxy luci-app-privoxy luci-i18n-privoxy-zh-cn重启路由器 2.配置privoxy 打开配置页面 文件和目录 访问和控制 转发 杂项 日志 编辑配置 浏览器打开 …