所有分类
  • 所有分类
什么是图标设计,图标在UI、交互设计界面当中起到什么作用

什么是图标设计,图标在UI、交互设计界面当中起到什么作用

图标设计(Icon Design),是设计师在入门界面设计的必经之路,图标是透过「符号」来简化文字,主要是用来指示或暗示行为,在界面设计上我们会使用大量的图标来节省空间,也可技术性的避免一些跨国语系的问题,常见的图标例如,分享、赞、搜寻、地图…等等,光听到这些...

图标设计(Icon Design),是设计师在入门界面设计的必经之路,图标是透过「符号」来简化文字,主要是用来指示或暗示行为,在界面设计上我们会使用大量的图标来节省空间,也可技术性的避免一些跨国语系的问题,常见的图标例如,分享、赞、搜寻、地图…等等,光听到这些名词,多数的人应该也能快速的联想到图标样式了吧,网络上对于图标细节的讨论很少,本篇就以界面设计常用的图标来做更深入的讨论。

图标的用途

图标就是简化的文字,作为一般使用具有指意的特性,但在界面设计上图标的指意大概有三种用途:

动作提示,例如:新增、删除、编辑、赞、分享、喜欢…等等。内容提示,例如:各种自定义的功能页面图标。状态提示,例如:新的、成功、失败、完成、已连结的…等等。

而以单一符号作为图标使用,有时无法表达复杂的讯息,因此才会使用上组合式的图标。

组合式图标

那什么是组合式的图标?组合式图标是我定义的名词,但这并不是什么新的概念,在设计图标时常常会使用到,只是没有特别被拿出来讨论,因此我对组合式图标给的定义是:「由一个主要符号与一个以上的辅助符号所组合成的图标」。例如:新增好友、删除好友、建立群组、加入购物车,或是各种资料、档案的同步状态…等等,

仔细思考,界面上所用到的组合图标,大多是对资料进行操作,而操作的方式,不外乎就是常见的电脑资料操纵指令「CRUD」(Create、Read、Update、Delete),而这些操作行为的图标形式,通常很难用单一符号来表示动作指引,所以需要辅助符号的配合使用,才能更明确表达图标讯息。

但这里会有什么细节?这篇我们要讨论一个常见却又容易忽略的问题:

「组合式图标的辅助符号的位置,是否对图标的表达会有差异?」

这个问题,许多设计师可能有发现,但大部分人都会忽略,为了让问题更容易讨论,我们先简化组合式图标,假设我们的图标只需要一个主要符号及一个辅助符号,然后举一个界面设计师常见的例子:「新增好友的图标里的加号(+),应该是要放在人像图标的左边或有边?」,这个问题很多设计师应该都有遇过,但设计师会怎么选呢?

好像是在右边,但又看过放在座边的,左边或右边有差吗?其实对用户来说差异不大,但身为设计师,这个问题就可以深入讨论,所以怎么思考这个问题?或许我们可以先从最简单的数字表达方式来讨论这个问题。

「+1」与「1+」,分别代表什么意思?从数字来看,「+1」可以是加1或是正1,加号「+」在这可以作为一个动词或是形容词来描述1,所以加号用在这里可以是动词或是形容词,但「 1+」则代表1个以上或大于1,在这里的加号就会比较像是形容词或是一个未完成的数学式,从这个简单的推想,就会发现加号在数字的左右好像有些不一样,加号在左边可以暂时将它视为比较强调变动量的概念,也包含一些动作的暗示,例如:+1、+2、-3、-4;那如果是在右边就似乎比较偏向会比较强调总量状态的概念,对于动作的暗示相对较弱,例如:100+、200+、333-、555-。了解这样的概念,再思考图标上的意义。

就以「新增好友」这个图标作为例子,到底加号要在右边或是左边?从上面的数字量表达方式来思考,如果在左边,以变量概念来看,可以解释为「新增好友」、「加一个好友」;那如果加号在再右边,以总量的概念来看的话,就是「加入好友名单」、「邀请成为我的好友」,两者概念就能看出有些不同,但用在「新增好友」这个行为,都是指一样的结果。

我们可以来看一下,常见的app,新增好友的图标是长什么样子:

不同APP,新增好友的图标差异

从上面的图就可以知道,其实加号在左边或右边都有设计师使用,所以「新增好友」的加号在左或右对一般用户来说,应该没有太大的差异,而从iOS及Android的规范来看,有加号与人像符号的组合式图标,刚好加号在左边(ios12的图标加号则是在右边),但也有在右边的案例,像是我们常用的web icon font — font-awesome,则是把加号放在人像右边。

(这边要补充说明一下,并不是所有的有加号的人像图标就是指新增好友,它也有可能是「新增使用者」)

不同平台的图标比较

新增好友这个行为或许看不出加号在左或右边的差异,那我们来讨论另一个比较量化的行为:「储值」。储值个行为,本身就是一种储量的名词,但就这个字面上的意思,是指把钱放入一个帐户内,所以是帐户里面的钱变多的意思,如果我们去搜寻关键字「add money 」、「add value」、「store money」、「save money」、「top up」等等,会发现类似概念的图标,通常会是一个钱币、钱包、猪及「+」号在右的组合式图标,用来表示储值的概念,而储值从字义上来看,是总量增加的概念,所以似乎加号在右边会比较合理。

与储值相关的关键字搜寻结果

例如钱包的图标,钱包图标可以表示为「钱包」或是「钱包的钱」,把加号放在左边会发生什么事?如果抽掉文字的辅助,感觉是不是比较偏向是新增一个新的钱包,而不是增加钱包的钱?再比较相似概念的另一个词:「加值」,这两个行为名词很像,但概念却有些不同,储值强调总量增加,加值强调增加的变量,如果要用图标来表示,加值的加号在左边似乎比较合理,但是加值的主要符号就不能用钱包或代表总量的符号来表示,所以除了加号的位置,主要图标的符号的选用也很重要。

再来比较一个主要符号量化意涵比较不明确的图标:「加入购物车」,如果加号在左,是不是比较像是新增一台购物车,而不是加入购物车?

加号左或右边是否有解读上的差异?

上面的例子,是以符号本体有量化意含的条件切入讨论,另外我们再从易用性的角度讨论,以「新增档案」为例,我们在google上搜寻「new file icon」关键字所出现的图片,通常是「文件」与「+」的组合式图标,而且多数是加号在右,但在真实使用的情境上适用吗?

考虑易用性, 在使用鼠标操作的情境下,因为大多数人惯用右手,且习惯将鼠标停留在欲点击项目的右下角,此时鼠标的位置恰好会影响图标的可以视范围,所以辅助符号的加号在右,可能就会影响到图标的整体可视性,易用性上显得较差。比较明显的例子,像是在visual studio code(程式码编辑器)的介面下,左侧的档案管理面版中,新增档案或资料夹的「+」号,出现在主要符号的左上角,仔细思考,这个图标已经很小了,如果放在右下角,鼠标可能会影响到icon的可视整体性,因此才会将「+」放置在左上角,而office的软体,也是采取加号在左的做法。

新增档案的加号,应该在左边或是右边?

透过以上的讨论大概可以了解,组合式图标的设计细节其实比想象中的多,主要符号与辅助符号的选用及位置,不仅只有考虑图标的意涵,易用性与情境也是考虑的因素,因此在设计组合式图标时,除了遵循一些常用的样式,可以试着多思考一些细节,或许会有些有趣的发现,这边也提供我所归纳出设计组合式图标设计思考方向:

选择明确的主要符号

在选用主要符号时,要了解这个符号本身可能隐含的意思,一个符号可能有多种的解读方式,论其本质,可能就会考虑到像是本篇所提到「总量」及「变量」的概念,对图标设计而言,应该还有更多可以思考概念,例如,符号本身是「可数」还是「不可数」,是「动词」还是「名词」,是「具象」或「抽象」 …等等,图标的选用正确,才能设计出有效的图标。

考量辅助符号的意涵、情境与空间限制

如同前面的内容所说的,辅助符号的位置不同,解读的意涵就会有所差异,另外操作情境与易用性也会影响辅助符号的位置,而最不好的妥协就是空间限制,因为放不下或是视觉理由。虽然这些没有一定的规则,但设计本身,就是尽量做到让每个细节都赋予意义。设计本身,就是尽量做到让每个细节都赋予意义。

文字的辅助

同一种图标可以具有多重意义, 例如:「新增好友」与「加关注」的图标,如果是要「关注(follow)」一个对象,要怎么用图标表示?如果搜寻关键字「follow」,会发现跟新增好友是一样的图标,所以为了避免混淆,通常用文字加以说明,或是用文字「+关注(+follow)」来替代图标,所以当图标使用上容易混淆用户时,用文字来替代或辅助,也是解决的方法。

考虑产品情境来简化图标

如果用户在明确的操作情境下使用APP,像是在电子信箱APP里要新增一封新的电子邮件,那只需要用「+」的图标来指引用户就够了,不须使用有加号与信封符号的组合式图标来指引用户,因此考虑产品情境来简化图标也可以降低用户对于图标的认知负载。

结纶

图标设计其实是UI界面设计里比较基础的一部分,按照惯例去设计虽然不会有太大的问题,但容易忽略掉一些可以讨论的细节,这些细节有时候很理所当然,但仔细想想并非如此,这篇文章提出组合式图标的讨论,并非提供设计的正确答案,有时候训练自己有意识去思考设计的每个细节,试着解读设计,并整理出一些设计规范,这就是建立设计系统的开始。

UI、交互设计软件领取

关注我百家号:@UI、交互设计

回复关键词:学习

即可获取软件。

本页地址:http://www.uiya.cn/27462.html; 所有素材均来自于互联网,经网友投稿后发布,仅供学习请勿商用。如有侵权,请联系 3147141550@qq.com 或 提交工单

分享海报

评论0

站点公告

 

新注册用户福利,免费领取7~90天VIP会员

点击领取

没有账号? 注册  忘记密码?