网站建设上传视频教程,wordpress是服务器吗,网站建设与运行的盈利收入,为什么做网站编辑ICON承载了App大部分功能的引导入口#xff0c;是交互设计中是相当重要的一环。 ICON图标设计 ICON有一种象征意义或隐喻性#xff0c;并在日常生活中经常遇到。icon代表了一些行动、事、人、真实的、虚拟的视觉符号。 ICON不仅是图标这么简单#xff0c;它承… 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往往是相对安静的存在哪怕没有了也是没关系比如抖音的底部工具栏是用文字来代替图标。
