交互软件界面图标设计规范指南

2021-12-01 06:47:35

阅读 11262次标签：图标设计软件界面设计作者： anyi

界面图标设计一般应用在软件设计当中。不论在交互式方式上，还是在视觉体验上的要求都比较高。对于界面图标，人们首先就是感官认识，对初始印象要求比较好。那么，通常在界面图标设计方面有哪些比较规范的要求，在图标的可识性，差异性上又有哪些具体的要求呢?下面小编为您详细的介绍。
在软件界面设计中，首先让人想到是交互设计与视觉设计，然而渗透于这两者之间的还有图标设计。为什么说图标设计是渗透于交互设计与视觉设计两者之间呢？首先图标是视觉效果的一部分，图标的整体设计、细节绘制都会影响到整个界面的视觉好坏，毋庸置疑视觉的设计在图标设计中占有重要的一部分；同时，图标主要的作用在于让用户快速地熟悉该软件的功能，减少软件使用的阻力，提高工作的效果，所以交互设计也是图标设计的一个重要部分，而且是一个不可或缺的设计环节。按钮图标在软件界面中有着举足轻重的地位。一套图标不仅需要整体的风格一致，而且还需要与界面整体的风格相匹配，不同的界面风格需要特定的图标与之配套，才可以达到界面的和谐。一套图标的好坏，不仅要做到视觉上的和谐，而且还要做到使用上的方便明了，这正是图标设计最出彩的地方。如何才能设计出“和谐而不乏出彩”的图标，以下是我们在图标设计中需要注意的要点：

一、图标的尺寸与格式
1、图标的格式。一般的图标格式有以下几种：PNG，GIF，JPG，ICO。
1）PNG：无损压缩格式，支持透明，兼顾图像质量和文件大小，但是PNG格式在网页中，IE6.0或者之前的所有版本浏览器，不支持透明和半透明。
2）GIF：网页图片常用格式，支持透明，优点是压缩的文件小，支持GIF动画，缺点是不支持半透明，透明图标的边缘会有锯齿，要解决此问题，必须进行图标的边缘像素化处理。???3）?JPG：有损压缩，优点是文件小，图像颜色丰富，缺点是不支持透明和半透明
3）ICO：WINDOWS系统的按钮图标文件格式，支持多通道透明，支持32位真彩色，可以通过Icon?Workshop等软件，进行ico格式与其他格式的相互转换。
2、图标的尺寸。图标的尺寸有很多，但是一般在Ｃ/Ｓ或Ｂ/Ｓ架构系统界面使用的有以下三种：16*16像素，通常应用于一级工具栏或二级工具栏；24*24像素，通常应用于一级工具栏；32*32像素，通常应用一级工具栏和主菜单。
二、图标的风格
顾名思义图标，在软件的界面上是以图的形式出现，所以图标给人的第一感觉是视觉。图标要给人一种漂亮的感觉、一种和谐的感觉、一种专业的感觉，这需要做到“一套图标一个风格”。往往在图标的设计中，我们过多的在图标精细上进行设计，忽略了图标的整体感觉。很多设计师都知道一个软件的图标需要统一一个风格，但是真正实现起来也并非一件简单的事情。
让我们借鉴一下Autodesk公司在图标设计中是如何统一图标的风格的。
1.制定一个多元素叠加的规则，如叠加元素的位置、是否描边、是否投影等。
2.制定一套基础的色调，这是使一套图标达到色调一致的根本方法。
3.确定光源方向，制定整体的受光效果，如反光、投影等。
4.制定一些细节的规范，如描边、虚线效果等。
可以看出：图标的统一风格需要从细节抓起，一套数量越多的图标，其设计中偏离整体的风格的机会越大，所以对于此类图标的设计，制定图标风格的规范是一个必不可少的环节。以下这一套是我们CASS9.0的图标，基于CAD2010平台设计的一套图标，借鉴了Autodesk公司图标设计的方法，在这套图标的设计上有了一定的突破，在风格的统一上有了一定的提升。
三、图标的表现形式
图标设计中需要考虑的可用性和易用性，在图标的表现上有复杂度和精细度。下图体现了这两者的关系：图标的可用性和易用性随着设计的复杂度和精细度的增高会达到一个峰值，然后就随之而下降，换言之，图标设计的复杂度和精细度并不是越高越好，而需要一定的把控，使得图标的可用性和易用性达到最理想的状态。
图标的表现形式除了单个元素，还有两个或若干个元素的组合。一般来说两个元素以上的图标是不推崇的，因为图标元素的多少也相当于图标的复杂程度，与图标的易用性息息相关。图标元素包含太多，使用者接收图标信息的过程越复杂，图标使用的阻力也更大，违背了图标设计的根本原则。
四、图标的可识别性
著名设计师拉迪夫·苏特纳在《大容量信息整合的设计》一书中曾写过这样一句话：“设计被认为是一个过程，它的极致就体现在增进理解的本质上。”一个图标的好坏，除了是否好看以外，还有是易用性的考虑——是否容易准确地让用户理解到它所想表达的意思。换而言之，我们看到一个图标，就可以清晰明白这个图标的意思，这是图标设计的一个根本，一个再精美的图标，如果失去了它辅助使用的作用，就相当于失去了图标设计的灵魂。
这是某软件的一套常规功能的图标，就针对图标的可识别性来说，这是一个成功的例子。图标的元素形态虽然很简单，但是它恰恰达到图标最根本的目的，使用者不用太多的思考就能看懂图标的含义，识别出不同图标的意思。
一套图标要做到不乏出彩之处，首先就要立足图标设计的根本：如何让枯燥的文字转化成图形语言，如何让使用者清晰明了地完成每一个操作，减少软件使用的阻力，才是图标设计中首要解决的问题。
五、图标的差异性
如果说图标的可识别性更多的是针对单个图标而言，那么对于若干个功能各异而放置于界面同一区域的图标来说，差异性就是该类图标要注意的问题。
以下这套图标非常精细，也很有质感，但是从图标差异性来说，这是一套失败的作品。6个橙黄色的文件图标，一眼看过去几乎一样的，必须仔细看才能看出图标的差别，因而在使用中产生了一定的阻力，不符合图标易用性的原则。
以下是Adobe?Photoshop?CS3的图标，这套图标可以说是图标差异性的典范。每个图标都有一定的差异性，而且又能有很好的表达相应的操作，简单而又显得精细，使用者不需要过多的思考就能很快的找到自己需要的操作。
一套出彩的图标，需要表现出图标的差异性，这一要点也是立足于使用者的角度进行图标的设计，漂亮而不实用的图标只是华而不实，图标的视觉不是不重要，只是比其更重要的是如何把图标的含义表现出来。
图标设计首先需要“两个基本点“，图标的可识别性和差异性；然后需要“两手抓”，一手抓图标的表现形式，一手抓图标的整体风格。这样才能更好展现出软件界面图标“和谐而不乏出彩”的魅力。
按钮图标设计的要求看来还是比较高的，但是，归咎起来也比较的具体。从上面的一些方面下手，仔细的研究，充分的细化学习，相信也会达到理想的效果。一门好的技术，离不开的是长期的摸索，悉心的研究。

一品威客网汇聚了数百万专业的LOGO设计、VI设计、商标设计、按钮图标设计、字体设计等优秀威客人才，只要您在网站发布任务需求，就能够吸引众多威客给您献上最好的创意服务。