UI设计全书(全彩)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.1 图标按钮设计概述

图标和按钮是具有明确指代意义的图形,它们存在于智能设备的界面中。一般来说,图标为软件标识,而按钮则为功能标识。图标和按钮是生活中各类实物的缩影,是UI设计中重要的组成部分。

3.1.1 图标按钮的起源

谈到图标按钮的使用和发展,可以追溯到1970年符号学创建的初期。图标的广义概念是指人类使用符号来传达意义,包括文字、讯号、密码、文明符号、图腾、手语等。

而我们这里所说的图标按钮指的是计算机或智能手机屏幕上表示命令、程序的符号和图像,称为“图标”或“按钮”。

◎ UI图标的由来

图标设计是方寸艺术,应该着重考虑视觉冲击力,其需要在很小的范围表现出软件的内涵,所以很多图标设计师在设计图标时使用简色等,做出许多精彩的图标。如图3-1所示为精美的软件图标设计。

图3-1

◎ 按钮的起源

软件按钮设计应该具备简洁明了的图示效果,能够让用户清楚地认识按钮的功能,并产生功能关联反应。群组内的按钮应该具有统一的设计风格,功能差异较大的按钮应该有所区别,如图3-2所示。

图3-2

3.1.2 图标按钮的分类

图标按钮作为界面中不可或缺的元素,在长久的发展中形成了自己的一套分类方法,下面是图标按钮的几大类别。

? 解释性图标按钮:它们是用来解释和阐明特定功能或者作为内容类别的视觉标记,如图3-3所示。

图3-3

知识补充

在某些情况下,图标按钮并不是直接可交互的UI元素,有时也会有辅助解释其含义的文案。同时,它们还常常作为行为召唤文本的视觉辅助元素而存在,以提高信息的可识别性,用户会借助这些解释性图标来获取信息。

? 交互性图标按钮:这种图标在UI中不止是展示的作用,它们还会参与到用户交互中来,是导航系统不可或缺的组成部分。它们可以被点击,并且随之响应,帮助用户执行特定的操作,触发相应的功能,如图3-4示。

图3-4

? 装饰性和娱乐性图标按钮:这种图标通常是用来提升整个界面的美感和视觉体验,并不具备明显的功能性,但是,它们同样重要,这类图标迎合了目标受众的偏好与期望,具备特定的风格,提升了整个设计的可靠性和可信度,如图3-5所示。

知识补充

装饰性图标不仅可以吸引并留住用户,并且可以让整个用户体验更加积极。装饰性图标通常呈现出季节性和周期性的特征。

图3-5

? 应用图标:应用图标是指不同数字产品在各个操作系统平台上的入口或品牌展示用的标识,是该数字产品的身份象征,如图3-6所示。

图3-6

? 知识补充

在大多数情况下,应用图标会将品牌的Logo和品牌用色融入到图标设计当中,也有的图标会将吉祥物和企业视觉识别色进行组合。真正优秀的应用图标设计,其实是将市场调研和品牌设计相结合,其目标在于创造一个让用户能够在屏幕上快速找到的醒目设计。

? 字符图标:字符图标“Glyph”一词源自排版领域,含义为“雕刻”,现在已经逐步在数字设计领域扎根了,如图3-7所示。

图3-7

? 知识补充

最初,字符图标指的是读者和作家约定俗成的符号,字符合集中所包含的各种图形。在排版领域中,符号图标通常包含特定的含义、特定的功能,可表意也可书写的类文字系统,它可以是字母,也可以是图形,有的时候甚至是两者的组合。