020-29815005
预约专线时间:09:00-23:59

图标设计概念及发展

新闻来源:本站 日期:2021-07-19
本文将对图标进行系统的介绍,篇幅所限,本文只针对图标设计中最重要的设计概念和发展为主
    1.1定义图标。

    符号,也叫icon或Picoto,是计算机世界对真实世界的比喻和概括,代表了软件产品中的功能和操作。

    作为一种国际性的通用语言,图标随处可见,例如,在商场导览中的收银台图标、出口图标、洗手间图标等,也可以是日常手机中使用的App图标,如微信、电话、短信等。事实上,图标的形式很多,它可以应用在许多场景中,而且表现方式非常丰富,有线、面、拟物等等。

    简单来说,用户界面设计中常见的图标大致可分为两大类,第一类我们称为「标志性图标」,第二类是手机上的应用启动图标;第二类是我们称之为“功能图标”,通常出现在App或网站上,用来指导功能指示或操作。

    1.2图标的重要性。

    就UI设计而言,图标的设计可以说是整个产品的点睛之笔,它甚至可以直接影响到一款产品的形象和气质。许多用户界面中的图标几乎都是本页面的核心支撑,它直接影响到产品的视觉体验和产品调性。其优点如下:

    全球性:Windows,iOS,etc.,中文版和英文版,甚至所有语言版本,在没有菜单之前,基本上是长的;

    节省空间:如果能用一个图标把意思表达清楚,就不需要使用文字了,例如用一个“叉”表示“关”;

    快捷定位:图标可以使人以其独特的形状或颜色快速定位功能;

    环境定位:例如小型飞机的图标单独显示不确定是什么,但在收件箱中,它就会被认为是发件箱。

    1.3起源。

    图示的发展过程实际上有些类似于中文、英文等语言的发展,大体分为两个阶段:

    实体→符号;符号→新的符号。

    看看一个小例子:

    左侧的这件东西被称为软盘,可能很多人都没有见过(其实我也没有),保存图标就是把一张“软盘”符号化后形成的图形,“软盘”是保存图标的实体。但是,随着时间的流逝,人们逐渐把长期接触的符号本身视为一种新的实体,在大家眼中,它已不再是具体事物的抽象符号,而是直接作为实体使用,即使其实体已淡出历史,但人们仍习惯于使用这个符号。

    我们知道,图标、标识都并非界面设计者创造的概念,它的存在可以追溯到人类文明诞生之初,在漫长的历史长河中,用于传达信息的早期图标逐渐发展成系统的文字,而在各种地方,如地图、书籍、壁画、建筑等,也有代表和传达特定概念的图标和标志。

    伴随着科技的发展,计算机诞生了,显示设备的出现,也为图形界面的诞生铺平了道路。上世纪70年代,施乐在帕罗奥托的研究机构中诞生了第一台具有图形界面的计算机——著名的“XeroxAlto”。这个昂贵的概念机最终没有进入公众视野,但其后续型号施乐之星于1981年问世,并成为计算计算历史上的重要里程碑,而XeroxAlto对乔布斯和比尔盖茨的启发更是引发了计算机历史上最著名的一场战争:苹果VS微软,WindowsMacintosh。这些当然是后话。


设计


    1.4拟物图标。

    80年代,要做具象(拟物),却由于象素和功能的局限而不能实现,因此,越具象越好。1995年电脑显卡的显示能力发生了革命性的变化,而Photoshop5.0的发布,这一消息正好让多年来一直在为图形和UI设计而焦躁不安的人们不能立刻上天(终于可以施展拳脚)。从win95开始,到osx/win7这十多年是UI拟物化不断发展和不断发展的阶段。显示技术也是飞速发展的十年,从640×480、800×600、1024×768、1920×1080/1920×1200、4k屏幕,再到retina屏,平面显示技术能达到的水准,基本已经是人眼能感受到的极限。

    在还不熟悉电脑的情况下,用户的需求就是“搞清楚这个东西到底在干什么”,是用户体验的核心。拟物化图标和界面为用户提供了诸如回收站、音乐、电脑、文件夹等导航,使用户能够与真实事物直接联系起来,并能更快地理解这些程序或文件的作用。包含立体按钮引导用户点击,用户可通过联想,更快速地了解操作/交互方式。它能降低用户的学习成本,缩短学习周期,使用户更快地适应电脑的使用,弄明白这玩意儿到底是干嘛的。

    Apple的Macintosh系统在图形界面发展历史上是一个不可忽视的里程碑。1991年,苹果在Macintosh上首次发布彩色图标设计。与之前的黑白界面相比,图标所能包含的信息量要大得多,全新的风格使其在信息传递功能方面有了明显的提升。

    但随着ICON的发展,拟物图标也存在一些问题,华丽的视觉元素在用户使用的初期,也许能起到赏心悦目的装饰作用,但久而久之,这就会成为用户获取信息的一种干扰。现在人们对各种常规的交互方式也早已了如指掌,用户的需求也从“把这玩意弄明白”变成了“高效快捷更舒心的使用”。方便用户使用成为用户体验的核心。

    而且,事实上,人们所熟悉的东西是非常有限的,而且APP的创新是不断进行的,很多产品本身在现实世界中没有参照物,因此也决定了拟物图标必然被扁平化取代。

    1.5平板。

    由iMac引导到iPhone的拟物图标更是开启了一个华丽的图标设计时代。仿物时代的盛行也带来一些问题:仿物图标的纹理、光影等会分散用户的注意力,形成“视觉噪音”。因此UI设计者开始探索更新的表现形式,设计界面上的图标。比如微软领导的Metro风格图标设计和Google引导的长投影式图标设计。不管怎样,在那一年中,微软让Metro和扁平化都赚了不少眼球,甚至一看到扁平就会想到Metro。

    与拟物化更接近真实的物质世界不同,扁平化就是通过抽象、简化、符号化的设计元素,将真实对象简化为抽象元素。

    在2013年,苹果发布了iOS7,开启了仿物变平面的风潮。iOS7对整个界面的图标、按钮、字体、信息层次等各个方面进行了扁平化的设计。Apple的这一系列动作打破了扁平化风格的潮流,并最终推动了整个手机端的平面设计。

    所以,为什么苹果公司在坚持多年的拟物化设计风格后,曾经作为该风格的引领者和受益者,为什么突然转向,并热情地拥抱平面设计?会不会因为我们的视觉疲劳?原因很简单,1、由于使用了Retina屏,屏幕清晰支持更多的细节化;2、当具象化逐渐达到极致,当大师们发现具象化已不再有挑战时,便开始尝试从其他角度表达;3、高度的拟物在一定程度上降低了学习成本,但提高了辨识成本。

    总而言之,平面设计已经成为一种更受欢迎的二维设计风格。各元素边界清晰,使用了更多的色块、符号化图形和无衬线修饰字体,界面更整洁、简洁。采用这一设计风格的好处是能够更简单、直接地展示信息和事物,将各种干扰信息的弱化,减少认知障碍的产生。

    尽管平面化的好处很多,也适合当前科技发展的需要,但缺点也是明显的。例如表达形式过于抽象,缺少情感的传达,而事实上发展到今天的平面设计确实也在不断地优化~使自己更适应时代的发展。此外,还有一点叫做“审美疲劳”。如果你一直盯着简单的东西,久而久之就会越来越烦人,你会越来越想看那些色彩斑斓的东西。反过来也一样同时也显示出UI新趋势再次向“内容突出”的本质靠拢,即“认知简约”。或许在整个世界都被平复之后,拟物化的设计就会变得更加引人注目?近来流行的“新拟”风格就是最好的证明。

    1.6微型扁平仿制品。

    因为平面化的表现形式单一,同质化严重,缺乏个性,图标逐渐向微平型轻拟物方向发展。比拟物风格不会有太多复杂的视觉元素,又和平面式的风格有着更丰富的情感内涵,所以现在界面上,在比较小的区域,我们用平平的图标或者线形图标,在面积比较大的区域,我们会使用添加渐变甚至轻纹理的图标。

    1.7"新模拟样式图标。

    Apple在WWDC2020上有一个重大新闻:macOS将与iOS统一步调,从X86平台迁移到ARM平台,在macOS11上迭代。这个20年一遇的Mac版本被称为BigSur。

    macOSBigSur是第一个将“新拟物”设计投入大规模商业应用的操作系统,可以看作是“新拟物”在实用化道路上的首次胜利。值得注意的是,在BigSur的外观设置中,有一个叫做“自适应强调色”的选项。Apple让开发者来指定主题色,这是否意味着新一代的应用程序会有更丰富的光影效果呢?

    “新拟物”设计的精髓就是巧妙地使用了光线。通过将光效捏在“平面”和“拟物”之间,创造出一种全新的视觉体验。

    与传统拟物不同的是,“新拟物”虽然把符合物理法则的光影效应引入界面,但是它模拟的物质却是自然界中不存在的。换言之,“新拟物”是对虚拟物体使用真实光线,“拟物”则是还原特定光照下真实物体的效果;

    围绕这一风格的可能性将会有爆炸性的发展,因为整个设计界将不得不考虑新的拟物风格,以及这种新的数字空间设计理念如何能够合理地应用在用户界面设计和功能上,将会取得更大的突破。和以前一样,第三方应用程序将会比苹果更加大胆和快速地推出这种风格,而这正是我们真正开始释放新拟物优势的时候。