图标设计的基础知识.pdfVIP

图标设计的基础知识 图标的定义 图标就是一个符号，一个代表某个对象的符号，一个象征性的符号。 基于功能来划分图标类型 解释性图标： 这些图标是在阐明信息的图标类型。它们是用来解释和阐 明特定功能或者内容类别的视觉标记。 交互图标：这种图标在 UI 中不止是展示的作用，它们还会参与到用户交 互当中来，是导航系统不可或缺的组成部分。它们可以被点击，并且随之 响应，帮助用户执行特定的操作，触发相应的功能。 装饰和娱乐用图标：种图标通常是用来提升整个界面的美感和视觉体验， 并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望，具备有 特定的风格的外观，并且提升了整个设计的可靠性和可信度。更准确地说， 这些装饰性的图标不仅可以吸引并留住用户，并且可以让整个用户体验更 加积极。 应用图标：应用图标是不同数字产品在各个操作系统平台上的入口和品牌 展示用的标识，它是这个数字产品的身份象征。 Favicon ：Favicon 有时候也被成为 URL 图标，它是网页在网页的标签中 显示的识别性小图标，它同样代表着网页，是用户在网页和浏览器当中快 速定位的视觉识别标识。 Favicon 同样是身份识别用的图标，并且在网页 的宣传和推广以及视觉识别上都有重要的意义。 基于视觉特征来划分的图标类型 字符图标：现在的字符图标同样包含了字母、数字和图形，它们中所涵盖 的内容更加丰富。字符图标使用简化和通用的图形，当用户在使用它们的 时候，它们拥有足够的识别度和灵活的适用场景。 扁平和半扁平图标： 扁平化的图标设计比起字符图标就要复杂得多，其 中增加了色彩和其他元素的填充，比起近乎由轮廓和笔画构成的字符图标， 明显要高一个维度。然而和前者一样，扁平的图标同样专注于清晰而直观 的视觉信息传达，为用户提供一目了然的视觉内容。扁平化的图标设计最 突出的功能也就在此，在二位的平面上，不借助复杂的纹理和阴影来明了 地、视觉化地传达信息，和拟物化图标正好相对。 拟物化图标： 拟物化图标是扁平化图标的对立面，正如同当初拟物化图 标设计师常说的，它就是“抄现实”，尽量将现实世界中的形状、纹理、 光影都融入到整个图标的设计，拟真是它的特点。拟物化图标这一设计趋 势几乎是跟随着 Macintosh 的诞生和进化一步一步走过来，走到极致，然 后从 UI 设计领域开始，被扁平化设计所替代。不过，拟物化图标现在依然 广泛地运用在不同领域，尤其是游戏设计和游戏类产品的图标设计当中。 SVG 图标：SVG 图标现在越来越受欢迎，它很大程度上降低了跨平台、跨 屏幕设计的时候图标显示上的兼容性问题。 基于图像隐喻来划分的图标类型 相似图标：它是将现实世界中的物理实体给符号化，这种设计最典型的就 是用于搜索的放大镜图标，购物车图标，邮件图标等。 参考性图标： 它是使用类比对象的方式来设计的图标，比如压缩和解压 类的工具图标，常常会使用包、拉链这样的意象来传递出概念。 随意式图标 :这类图标的设计和其功能 /含义并没有关联，它们本身并不传 递出功能性的含义，依靠的是用户长时间的查看、使用，逐步习惯来熟悉 其中的含义。现在许多界面当中的“保存”按钮采用的是软盘的图标，但 是软盘实际上早已退出历史舞台，许多用户甚至都不知道软盘的存在，但 是用户会在长时间的使用过程中了解它的功能，并且在大脑中形成这样的 概念回路。 图标设计的三个关键点 1、设计一个高识别度的图标 图标需要表情达意，传达信息。一个需要让用户猜测的图标并不是一个称 职的图标。 2、尽力做到极简 找到一个能够捕捉应用程序本质的元素，并尽量以简单的形态呈现出这个 元素。然后，删除这个图标中不必要的装饰性的、冗余的内容即可。 3、在不同的背景下测试你所设计的 APP 图标 图标应当在所处的背景下清晰可见。 图标设计的规范方法 像素对齐 多用布尔运算 独特的风格 视觉大小的统一 1. 像素对齐 为什么有的人做的图标总是发虚的呢？原来是因为像素没有对齐。 我们来看左边这张图： 图片背景的网格就是我们所说的像素网格，标明红点是想告诉大家，第一 条竖线做到了像素对齐，而第二条竖线没有做到。我们没有看到二者的区 别，是因为现在是在矢量图形的环境下显示的，如果导出来图片就会变成 右边这样： 这就是图标发虚的原因，因为我们没有严格的做到像素对齐，尤其是在做 较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会 出现问题，比如说下面这种情况： 2. 多用布尔运算 在做图标