上一章 颜色使用

图标使用

UX百科编辑部2024-02-01 发布
650人在学·3条笔记
收藏

图标能让用户快速理解产品意图。

App 和游戏使用各种简单图标帮助用户理解其可选取的项目、操作和模式。界面图标与 App 图标不同,后者可使用阴影、纹理、高亮标记等丰富的视觉细节来打造 App 的特色,前者通常使用精简形状和适量颜色来直截了当地传达意图。

你可以重新设计界面图标,也可以从 SF 符号中选取图标,直接照搬使用或根据需要进行自定义。界面图标和符号均使用黑色和明显的颜色来定义其形状,系统可在每个图像的黑色区域中应用其他颜色。


应用指南

  • 打造可识别且高度精简的设计。
  • 保持 App 中所有界面图标间的视觉一致性。
  • 通常使界面图标与相邻文本在线条粗细上相一致。
  • 如有必要,可为自定义界面图标添加内边距以实现视觉对齐。

在此类情况下,你可以稍微调整图标的位置,使其在视觉上达到居中。

在视觉上居中所需的调整通常非常小,但却对 App 的外观影响很大。

  • 仅在必要时才提供界面图标的已选状态版本。

虽然你可能想要使用图标颜色的区别来表示选中和未选中,但更常见的是更改图标的背景来达到这一目的。

  • 打造具有包容性的设计。
  • 在设计中仅表达必要内容。
  • 如果创建自定义的界面图标,请使用 PDF 或 SVG 等矢量格式。
  • 为自定义的界面图标提供备选文本标签。备选文本标签(或辅助功能描述)是不可见的,但可让“旁白”以语音方式描述屏幕内容,从而使视障用户的导览更简单
  • 避免使用 Apple 硬件产品的形象。如果必须显示 Apple 硬件,请仅使用 Apple 设计资源中的可用图像或代表各种 Apple 产品的 SF 符号。
650人在学·3条笔记
收藏
已学会
11人已学会
下一篇App 启动图标
一个独特、好记的图标可传达你 App 或游戏的用途和个性,还可帮助用户在 App Store 及其设备上一眼识别你的产品。 精美的 App 图标在 Apple 所有平台上都是用户体验的重要组成部分,对于每个 App 和游戏都不可或缺。 每个平台都为 App 图标定义了略微不同的轮廓,因此你不妨创作一...
本章笔记
仅看自己
logo