icon设计 icon啥意思

金汇小助手 百科知识 2023-02-13 8 0

今天给大家聊到了icon设计,以及icon啥意思相关的内容,在此希望可以让网友有所了解,最后记得收藏本站。

icon设计是什么?

你好,icon设计就是图标设计的意思,图标对于一家公司或企业来说,是非常有必要的,

图标是与其它网站链接以及让其它网站链接的标志和门户。

2.图标是网站形象的重要体现。

3.图标能使受众便于选择。

icon应该如何设计?icon设计六大原则

icon相信大家对这个词语并不陌生,我们做设计的也会经常遇到,诚筑说在UI设计培训中到结尾的整体作品是需要自己做icon的。而关于icon设计的六原则今天诚筑说小编就给大家分享一下啦。

1.定义准确形象

icon也是一种交互模块,只不过通常以分割突出界面和互动的形式来呈现的。其中以交互式为主要运用手段。而icon对于一般起是充当指示、提醒、概括、表述等作用,所以在icon定义的时候一定要准确,非但不能模糊反而比logo的定义还要清晰。

比如:新建,添加,删除,搜索等都要遵循简洁通用这个一个基本的原则。否则用户辨识度上会导致操作成本上升的结果。通常也会造成阅读和操作的障碍。(在大同小异的基础上有自己的想法。)

2.造型完整简明

造型是icon设计的筋骨,就好象一个人是健康的还是有缺陷的。一个icon有没有美感很大程度就取决于造型是否优美和谐。

在基本外形里,通常是矩形或圆形,我们会给予它们不同的设计感觉来定义它们能表达什么。举个栗子:在大幅空白的区域,圆形icon会更适合留白排版。当大幅文字段落或执行按钮的时候,矩形icon会更合适排版。

3.表达符合的行为习惯

在表达定义的时候,首页要符合一般使用的行为习惯,UI本身的意义就在于附加到“功能”上的一个表现层,具备最直接的操作和交互的功能。我们首先不要着重华丽和精妙上面,为了icon而做icon。而往往一些产品部门相关的人员并不会在乎华丽和精美。功能性是最重要的因素。而个性色彩比较浓的游戏类或教育类界面,一般都配有文字或归属感比较强的元素来进行设计。(本来icon的本意也是图标)

4.风格表现统一

风格是一种具备独有特点的形态,具备差异化的思路和个性。在UI中通过表现不那么特立独行也是因为行为习惯问题,这也解释了想微软、苹果、谷歌可以颠覆设计原则的原因,通常一个公司或一个组织没办法去改变设计规则。

5.排版循序与位置的调整

完成基本的icon设计后,还有根据UI界面布局来进行调整icon在整个布局中的位置。这个相当重要,而对于有经验的工作人员来说,一般icon的造型,复杂程度,基本外型都会进行调整;如简单相对复杂,圆形一列中会有重叠元素,也可以会有矩形来调和。对比调和后使得icon更加易读和方便识别。切忌糊涂一片,错乱反复。

(可见icon在整体项目中的重要性)

6.使用配色的协调

给icon添加颜色是解决视觉冲击力的一种表现手段。一般赋予icon什么样的个性和使得突出重点,一般都会添加颜色。在添加颜色时首先我们可以用感觉来进行设计,思路对想法可以就行了。

这时在整体界面中一般有背景色和主导色,那么一般我们选择的icon颜色要侧重于点缀色或者着重色,而其他不太重要的icon颜色尽量选择中性的颜色,想低纯度的蓝色,因为在UI界面设计中,蓝色几乎和黑白灰并称万用色。有时候UI界面或icon整体偏暖和冷就是因为补色没有运用好。导致很刺激人的感官,这里有个小技巧,就是运用补色。

诚筑说UI设计培训,让你不再只会软件,不会设计。更有手绘icon设计哦

设计师必看图标(icon)指南

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号。对于UI而言,主要针对的就是狭义的概念,它是UI界面视觉组成的关键元素之一。 我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。

色彩 color 、 文字 Font 、 图标 icon 、 图形 shape 、 图片 image 、 空间 space ,是我们做平面设计中非常重要的 6 个元素,而对于 UI 设计而言,图标可以说是整个产品的点睛之笔,它甚至可以直接影响着一款产品的形象和气质。

显然,图标不是由界面设计师发明的。作为一种交流的对象,它们有着悠久而多样的历史,根植于古代。它们出现在地图、标志、方案、手册和许多其他信息来源中。然而,随着新技术和图形化用户界面的出现,图标经历了新的转折进步。

从历史上看,施乐公司在20世纪70年代初的时候,在功劳中提到了第一个图形化用户界面的图标:图标是在一台名为Xerox Alto的机器上实现的,这台机器非常昂贵,并没有真正普及到广大的用户。然而,这只是一个漫长的故事的开始:1981年,Xerox Star(施乐之星)发布了,它被称为第一台将图标作为界面的一部分的消费类计算机。特别是,它应用了至今为止的文件夹和垃圾箱的图标。下面是图标从80年代

表意图标(又称解释性图标)

表意符号是指原本不存在实物的符号,是在发展过程中创造的一种符号,用于表达某些特定的含义或操作行为。而且在发展过程中,这些符号逐渐继承了一些象形符号的特性,将符号本身作为「实物」并且不断演化。例如「箭头」从最初的「弓箭」已经逐步衍生为一种特定的表意符号。

交互图标

具有双向信息传递能力,不仅可以向用户传递某种信息,引导帮助用户执行特定操作,同时也允许用户向程序传递控制信息,从功能重要程度来讲,它的重要性是最高的。比如:登陆注册按钮,开关按钮,数量按钮,点赞,转发分享等都属于交互性图标。

装饰和娱乐用图标

通常是用来提升整个界面的美感,加深个性化设计风格,并不具备明显的功能性。这类图标迎合了目标受众的偏好与期望,具备有特定的风格的外观,提升用户线上体验感,迎合受众群的偏好,提升设计亲和度。装饰性图标通常呈现出季节性和周期性的特征。例如线上活动、用户等级、空页面等

应用图标

不同数字产品在各个操作系统平台上的入口和品牌展示用的标识,它是这个数字产品的身份象征。在绝大多数的情况下,它会将这个品牌的LOGO和品牌用色融入到图标设计当中来。也有的图标会采用吉祥物和企业视觉识别色的组合。真正优秀的应用图标设计,其实是结合市场调研和品牌设计的组合,它的目标在于创造一个不会让用户能够在屏幕上快速找到的醒目设计。

象形图标

ios相当长一段时间流行 “Skeumorphic设计理念”,属于超写实设计。并且认为只要有可能,在应用上增加现实的、物理的纬度,与现实越相像,操作越相同,就越容易使用户理解运作模式,接受度就越高。例如日本鼎鼎有名的富士山图标,由此说明好的设计不仅美观度高,功能性同样十分重要,特别是与旅游相关的设计,需要让人跨越语言的障碍。

隐喻图标

icon 中的隐喻元素很重要,它可以让我们一看到这个 icon 就知道是什么意思。比如,一个房子代表首页,一个叉叉代表出错或关闭。当我缩小一个 icon 时,我都会保留隐喻元素,来保证 icon 仍然可以准确传达信息。

工具图标

主要以行业类别为分类,使用范围广泛,大众或行内人士识别度高,且被长期使用。比如:建筑行业,医疗行业,化工行业等等。

混合图标

也就是前三种的结合,目的在于达到不同的视觉效果和应用结构。前段时间追波很流行的MBE粗描边风格icon就是综合图标的产物,多表达设计师个人设计风格或适用某类设计感较强的软件。

字符图标

字符图标“Glyph”一词是源自于排版领域,现在已经随着数字设计而逐步在数字设计领域扎根了,它源自于希腊语,含义为“雕刻”。在排版领域当中,符号图标通常是包含特定的含义、特定功能、可表意也可书写的类文字系统,它可以是字母,也可以是图形,有的时候甚至是两者的组合。

在这类图标设计中,比较典型的当属天气类图标了。从单个图标到组合图标,都能充分体现出来。

扁平图标

扁平图标包含线性、面型、线+面,面+面,变现方式多样,拓展性强,更个性化,年轻化一些,相同,同样设计风格的icon,在更换颜色后就能体现和传达不一样的信息。

拟物化图标

拟物化图标是扁平化图标的对立面,正如同当初拟物化图标设计师常说的,它就是“抄现实”,尽量将现实世界中的形状、纹理、光影都融入到整个图标的设计,拟真是它的特点。拟物化图标这一设计趋势几乎是跟随着Macintosh的诞生和进化一步一步走过来,走到极致,然后从UI设计领域开始,被扁平化设计所替代。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中。2.5D图标和桌面应用图标。

Windows,iOS, etc., 中文版和英文版甚至各种语言版本,在不打开菜单之前,基本上都长一样。很多图标已经能够被大多数用户快速识别,甚至成为国际通用的图标。例如Windows UI

一个图标能够表述清楚含义的时候,只需占用一个字符的位置就可以传递给用户操作信息。例如扫一扫、邮件发送成功,用文案表示需要3-4个字,英文或其它语言可能更长,而用图标代替只需要一个字符位置

支付宝右上角 + 表示更多功能,此时一个字符位置解释清楚其含义;微信下一个类似声波图标表示语音,直观易理解

进入碎片化时代和进入读图时代,几乎是相同的节奏。图片内容能在短时间内产生更大的影响力,研究表明,大脑处理图片内容的速度比文字内容快60000倍,人类大脑对图形图像的记忆也远胜于对文字的记忆。所以,在推广品牌时,图片内容可以说是一图胜千言。使用图标通过视觉引导帮助用户快速识别信息。

Tik Tok和ins没有任何文字说明情况下,我们就知道第5个标签就是个人中心

科学证明,在大脑中相对于其他感觉来说与视觉信息处理相关的脑区占统治地位,人脑对于图像的记忆远远高于文字。图标多采用几何图形,并以对称、一致的设计目标来进行设计,由于其高度浓缩的特性,图标具有更加简洁的特性,更加便于记忆。

图标最底层逻辑:线性图标、面型图标、线+面型图标、面+面型图标、2.5D图标、拟物图标。网上五花八门的图标是在这些基础上进行视觉区分,而当我们设计图标时候需要思考

1、产品视觉风格定位(行业领域)

2、图标具体应用的界面

3、产品面相的用户人群是怎样的?

先看一组不用风格的图标,由上面不同APP图标可以看出不同行业、不同场景、不同用户,图标的设计和表达方式是不一样的,所以设计前需要思考,你需要表达的设计思路和产品的定位。

1、拆解关键词及关键词联想

将需求信息中的关键词进行拆解及发散,转化为生活中常见的事物,释放它所代表的内在含义。关键词的同义词、近义词、形状相关或相关联想的物体

例如说到荣誉,马上就能想到奖杯、奖状、金牌、皇冠等。然后通过这些词联想,去找一些气质相符的图片制作情绪版,通过情绪版可以感受到产品的调性,然后从中提取一些形状和色彩做为产品图标的主要造型

2、根据关键词联想输出图形

根据上一步拆解的词语或物体,通过简单基本形状转为生活中常见图形。常用的2中方法是用AI钢笔工具(sketch贝塞尔工具)或者布尔运算进行绘制

3、根据场景输出

这里的场景可能是实际应用的场景,比如大众点评tab标签栏、功能区(品类区)、运营类图标等这些图标需要引导用户去点击,所以在视觉上更加丰富一些;而个人中心、分类区、详情页更多侧重功能上的引导,相对来说较简洁,属于二级使用场景,线型图标居多。

我们常见各个图标文章分析应该注意十几点,而这些没有规律和逻辑难以记忆,一时记住了也容易忘记。这些总结其实是从Material Design或者iOS规范中得来的。认真研究这些细节,图标制作就不难了

图标端点分为直角和圆角,我们在设计过程中要统一图标端点,保持一致的设计语言

拐角

相对于其他图形,人类的眼睛更容易识别圆角矩形而不是直角矩形,因为人在眼睛的生理构造上中央凹(fovea centralis),是视网膜中视觉最敏锐的区域)在处理圆形时最快,而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以,人眼处理圆角更容易,因为它们看起来比普通矩形更接近于圆。

圆角自身的圆形属性会给人圆润、可爱 , 更加安全、亲密的感觉。因此社交、娱乐、直播、美食等图标多会使用圆角图标

直角则会给人一种尖锐、具有攻击性的感觉,图标整体细节更多,通常出现在金融等商务属性比较强的产品。比如:36氪、金融类产品等。

倾斜角度统一

内部空间比例的不一致易导致图标视觉重点不统一。如下图左第二个图标重偏下,第四个图标重心偏上,右边是早期PP助手的标签栏图标,图标内部挖空面积占比率相同,整体视觉和谐统一。

在绘制描边图标时,要时刻注意图标的描边粗细是否统一。在 @1x 一倍图设计模式下,以 24px 为网格基准的话,常使用的图标粗细有: 1px 、 1.5px、2px、3px ,1.5的粗细对显示屏要求比较高(半个单位的路径会导致图标在最终显示时边缘模糊,不清晰)

细描边给人视觉感更加精致,粗描边相对更加粗犷,由于目前流行趋势的发展,常常也有粗描边和细描边结合的设计风格

除了保持相同的视觉权重,图标的描线宽度也应该保持一致,达到像素级统一。元素之间的最小间距,应该大于或等于描边的宽度。

苹果、谷歌、IBM,国内的阿里Ant Design都出过相关的图标网格规范,这里以谷歌的Material System 图标网格来进行说明。在24*24px图标尺寸,上下左右安全边距是2px,关键形状的四个基本形状为圆形20*20px、正方形18*18px、纵向矩形和横向矩形20*16px。通过关键形状的规则统一图标大小及位置,达到视觉的平衡

对齐像素点

清晰度(像素完美对齐)为了避免使图标失真,可以通过将X轴和Y轴坐标设置为整数来将图标定位在像素上。在使用软件AI或者sketch的时候绘制基础图形不要出现小数点和奇数,多用偶数

我们了解了 icon 的基本知识,怎样评判我们的 icon 是否合适,是否贴合整个产品呢?我们需要了解什么才是一个好的 icon 。检验标准也是基于我们绘制的标准,分别是: 识别性,规范性、整体风格与品牌感。

判断事物的价值在于它的用途是什么,图标的用途是帮助用户理解信息,所以表意准确(清晰准确的传达信息)就是图标最重要、最底层的价值,如果你设计的图标用户看不懂,即使视觉再美观也没有任何价值可言。

含义识别:是视觉语言是否替换文字语言,简言之就是让你的图标可以被用户理解,不会让用户产生歧义。常见的就标签栏指南针表示发现,房子表示首页等

视觉识别:是图标的大小,颜色,线条的粗细,这些影响影响视觉识别的因素,在具体样式中提高视觉识别性。

我们要保证图标在视觉大小的一致性,图标饱满度(正负形)、遵循同一种规律,细节统一性。这里的4点在前面绘制过程中已经写的非常详细了。

整体风格是要注意图标传达的性格与 app 的基调是否一致,每个产品因为定位,针对人群不同,整个 app 的基调也不一样,例如腾讯动漫,它的性格就是偏卡通可爱的类型,那么的图标设计上也要体现这个性格特点,尽量使用卡通圆润的方法去设计。一个广告语:复杂世界里,一个就够了,整个APP从启动图标到整体调性都是简洁干净,克制的色彩运用传达产品调性。

品牌感就是我们上面谈到的要与品牌理念相符,传达给用户的感受一致,通过吸取品牌色,提取品牌元素,采用品牌吉祥物和品牌图形的方法来提取品牌基因。我们要试着从品牌设计的角度去理解,寻找自己产品独特的品牌气质,挑选合适的技法。然后把这些元素具象化,融入在界面设计中。下面几款产品从产品名到启动图标设计高度融合。

图标可用性测试是基本规则是根据图标验证推导的

识别度:

1、用户是否能够理解图标的含义?

2、是否是用户熟悉的图标?

3、是否与其他图标含义冲突?

4、是否能通过5秒原则?

5、图标的可扩展性怎么样?

6、是否需要增加文字标签?

设计是否统一

1、视觉语言是否统一?

2、图标的设计复杂程度是否统一?

3、整体设计是否协调、统一、视觉体系高度集中?

4、图标整体配色是否统一?

品牌信息:

图标是否独特性、能否传递品牌信息?

一般情况下有 JPG、PNG、GIF、SVG 四种交付格式。其中JPG、PNG、GIF为位图,受图片本身的分辨率大小限制,无法灵活的修改尺寸。而SVG为矢量格式,支撑无损缩放。

在没有SVG前因为要考虑到适配高清设备,需要切各种倍数的图标进行适配。不过现在的开发软件及插件都自带切多倍图的功能,比如蓝湖。

JPG:兼容性强,自带背景,不支持缩放。

PNG:支撑透明格式,不支持缩放,需要注意图标四周透明区域大小。

GIF:简单的动态图标使用,透明背景时边缘会有锯齿,没有办法支持丰富的颜色。

SVG:无损缩放矢量图形、体积小,单色模式下支持开发自行修改颜色,可修改样式参数。

另外一种交付方式是将SVG格式的图标上传至类似iconfont的网站后,完成图标的交付。需要注意的是:

1、SVG不支持渐变颜色填充

2、SVG不支持描边,需要将描边转化为闭合图像

3、图标的大小相同时,需要在图标下方增加一个相同尺寸的透明方形,同图标一起导出上传

而iconfont对于图标制作要求严格,上传时需要注意查看自己的图标是否符合要求。 链接

资料来源

UI设计师想做好图标设计?请问图标历史了解过吗?

图像学的简要历史

《Icon Design Guide》

《Icon Utopia》

《the Ultimate Guide to an Interface Icon Set》

《svg图标库以及与icon font对比》

什么是好的APP icon

一个好的APP图标有利于你的应用在眼花缭乱的众多APP中脱颖而出icon设计,吸引用户的眼球icon设计,引导用户去点击,那么什么才算是好的APP icon设计呢,icon设计要注意什么?谈一下icon设计我的看法

1、icon是干吗用的

任何事物的出现都是为了解决一定的问题,所以我们先叨叨几句,了解下icon是为了解决什么问题而出现的?

这是一个菜市场,王二麻子在这条街上卖了十几年烧饼了,一直也没有其他卖烧饼的,所以人们来了市场,买烧饼必定买他家的,品质又好,大家口口相传。因为市场卖东西的比较多,王二麻子就找了块布,上面画了个圈,挂在门口方便别人找 后来来了个新的卖烧饼的胖嫂,菜市场人渐渐多起来了,为了方便大家找到他家,就做了个招牌,上书《王二麻子烧饼》,这样人们要介绍他的门面,只需说去菜市场找王二麻子烧饼就行,后来王二考虑到人们看字也比较麻烦,就找人画了个大饼的样子,点了几个点,当做是芝麻的样子。又把底色招人弄成烧饼的金黄色,自此王二麻子烧饼的品牌形象定型了,人们口口相传,去买烧饼就找那个圆圈里面有点的那个。

2、ICON的历史

从上面的小故事我们可以了解,王二麻子的招牌也就是王二麻子的icon 的发展经历了四个阶段

1、无标识或弱标示,人即品牌,多在竞争不充分的情况下

2、模糊标识,竞争相对少,只需要区分出自己与他人来即可

3、明确标识,竞争升级,既要区分出与别人的不同,又要体现自己的特色

4、抽象标识,目的是便于区分,易于理解,便于传播。 从1990起,国内兴起了设计企业VI的风潮,大家可以了解下当时的文案,对于icon设计会有帮助。

icon最重要的目的就是标识产品,易于传播

二、ICON该改怎么设计

如无特殊说明,下文中的icon指的是手机APP的icon icon是由色彩,文字和图案构成的。

1、icon怎么选择色彩

色彩icon设计:色彩之于icon最重要的作用是吸引人的目光,渲染出设定的氛围,作为产品形象输出的背景。 当人在手机APP上浏览时,翻屏动作是很快的,注意力也是发散的,这个时候,用户能关注到的只有色彩,一个大的色块在眼前划过,跟用户的眼睛造成视觉冲击,一个好的色彩搭配会吸引用户视觉停留,获取宝贵的点开的机会。那么什么样地色彩会让人停留呢。我们应该怎么选择APP对应的色彩呢?

分两种情况考虑:

1)你做的不是一个从零开始的新产品,你的公司之前已经有了在网站,在平媒的展示记录,已经有确定的品牌色,这种情况下就应当延续之前的配色,保证传播形象上的统一,让用户看到这个颜色就能联想到之前用过的产品,让用户产生联想,产生我点进去看看有啥新东西的想法,走到这一步,那么恭喜!!!吸引用户成就达成_。

2)你做的是一个新产品,那么选择色彩时可以从这几个方面考虑。 你的产品是属于什么行业的呢,行业有没有什么相对固定的颜色方案呢?如果有,那么请尽量往上靠,选择相似的颜色有利于用户对产品产生印象。如果没有那么就要从产品功能上考虑,你的产品能给用户提供什么帮助,是信息展示类的应用还是工具类应用,在这里可以参照通用的冷暖色调理论和平面设计的配色方案。 总体来说, 对色彩的要求是区别于其他产品,能烘托产品氛围,吸引人的眼睛,让用户关注到应用。

2、怎么设计icon的图案

图案是用来沟通的,是通过特定的形状,来让人们产生联想,比如红十字的图案就让用户想到医院,想到健康方面的,汽车的图案就让人想到车相关,飞机就让用户想到旅行相关的,利用这些固定行业的固定形状可以直接让用户了解产品的使用场景和功能,进而产生兴趣。

图案大体可以分三种,

一是对实际物体的抽象和引申

比如说摩拜单车的icon上的自行车图案,让人一看就知道这是和自行车相关的应用。苹果原生地图应用的图标也属于这种。

IOS操作系统升级到7。0时,还嫌弃了一波平面化图标替代拟物化图标的风潮,其实,不管是拟物化图标还是平面化图标都是对实际物体的抽象和引申。另外平面化替代拟物化是必然的,原因很简单,最开始IPHONE推出的时候,算是新事物,必须使用比较真实的拟物化图标来告诉用户每个应用是干什么的,后来用户越来越多,再进行进一步抽象升级,图标就不需要那么形象的表示事物了只需要让用户看到图标能理解到这个图标代表的是什么就可以了。

二是对行业图标的变形 例如铁道部12306的icon图案就是常见的铁路部门的示意图标,同花顺的图标是一段简单的K线让用户一看就是和故事相关的应用。

三是对文字的变形 这里有两个很牛的应用要推荐下,一个是天猫的icon,图标的上半部分就是天猫俩字,仅在猫字上面做了些许变形,认识字就知道这是干嘛的,而且还特别醒目。相比下京东的icon就有点懵了,一看之下是个狗,如果是个新用户直接一看其实是懵的,表意不明。不过,以京东现在的知名度倒是不需要care这点小事情了。

另外一个是大网易新闻,看人家图标

大红的底色上有大大的两个字网易,下面是小产品标识news。

对文字的变形还有一种情况,那就是文字加一些小修饰,既能看到品牌名,又能大约看出产品是干嘛的来。如下例:

叮当俩字强调品牌名,上面加了个小人,就做成了一个人骑着自行车的形象,用户大约了解这可能是个配送相关的应用。

3、icon上该写什么字

icon上该不该写字,写字的话要写什么字,其实和上面说的图案使用文字的论述有点关系。

图案用来沟通,文字才能精准的信息,如果我们要在icon上加文字,首先要考虑的是我们要传达的信息是什么,这个信息能不能通过我们的图标进行传达。

确定了要不要加字,就要确定加在哪个位置,其实这个一般来说都会是加在整个图标的底部。

写什么字呢,毕竟地方不大,写不了几个字,不同业务选的词和字的组合不一样,没法提出具体的建议了。来直接比较俩图标.

浦发银行信用卡APP你直接放了四个大字你也太蒙事儿了吧,中间一个大花还遮了部分字,low,脑残,无语ing

天猫上面已经夸了一遍,天猫这个icon设计里还有一个小机关,天猫两个字下面和猫头上面还有个空白区,中间还可以塞11.11,如此设计确实牛逼。

最后总结一下,icon设计时需要根据产品阶段(新产品还是已有产品),所属行业(电商、信息、游戏)的不同来选择合适的色彩(夺人眼球)和合适的图案(品牌形象)和精准的文字(信息传递)。

我们在设计ICON是一定要考虑用户浏览使用APP时,目光关注点是从大到小,从上到下来移动的。仔细体会用户的习惯才能设计出优秀的ICON。

Icon重要性论述

一个icon虽然很小,但是对于任何APP和网站都是至关重要的。它们有时看起来简单,但是需要大量的时间和精力来设计。尽管对于用户的交互很少,但依然是用户体验时的高效元素之一。做任何事情都会与用户体验相关:帮助、支持、参与、鼓励、简洁,反之就是让用户感觉到困惑、烦恼等等。它们是UI界面的基本元素。

icon的重要作用不只是网页和APP中的设计师界面设计时才会用到,在很多的文章和书籍中就提到,一些产品发布会就是在众多案例中用到的一个。在这里我将会谈谈icon的一些相关知识,以便使得更加符合这一主题。

基本上,APP或桌面上的icon都是有一种象征意义或隐喻,并在日常生活中经常遇到。从更深次的解释就是icon代表了一些行动、事、人、真实的、虚拟的视觉符号。

在许多情况下,icon能够代表文本,而这种能力使得它们在现在设计界如此的流行。如果你使用一个icon来替换原本的文字,可以有效的节省APP或网页中的互动元素的制约。因此在有些地方可以高效的重复使用。此外它能使交互变得更加迅速,因为在大多数的情况下,人们需要更少的时间来看到和理解这些icon,而不是去朗读一段文字。最后icon是作为产品在视觉表现上集审美与功能完美融合的元素。

如此多的功能,综合性的APP和网站可以是:

a、互动:即直接代表按钮,控制和相互作用的任何其它元素;

b、简洁:在视觉上解释了一些功能、类别、交互,不是互动本身的直接因素

c、装饰和娱乐性:即具有较低的功能和较高的审美能力。提供了装饰除了一般的风格,例如具有一些季节性的庆祝活动。

富有意义的: 因为前面已经提到了,icon是具有较高符号特征的元素,意味着创建icon,首先要求设计师应该界定什么是它的作用意义,并作为单独的元素和总体布局的组成部分。在谈论一种隐喻的而更朴实的东西时,最好的厨师总会说:这是放在盘中的东西,是可以食用的。根据最新的趋势分析,我们也可以得到类似的想法:当涉及到icon和界面布局在其它元素之中的时候,即把屏幕上的功能应有尽有的呈现出来。因此,在界面上之中使用任何icon都应该有它的意义和作用。没有它,一个icon只会是一个空洞的元素,在屏幕产生上产生不必要的元素的局面。

明确的: icon更加易于理解,一个icon在支持功能上的根本意义,实际上都是有意义的,除非创作者本人还没有能理解这个意思,对 icon缺乏这种透明度,就将是一种悲剧。相反,icon设计的太过于简洁,确实会加快交互的效率,但又会使用户产生迷惑,并不能最终带给用户更好的体验。

简单: 对于icon的简洁,这一直是一个值得商榷的问题。其实,设计师就认为icon就应该是简洁的,但对于哪些应该简洁,哪些不应该简洁这依然有争议。无论如何,在我们的工作室是支持任何icon都应该很简单的,它需要特定的目的和功能,设计师的工作应该遵循:在现有基础上引导icon的设计和抛弃其中任何不必要的细节,又可以设计新的形象。然而,要记住总体风格和其它元素的视觉,都应该完美的表达整个APP和网站的概念。

识别性和独特性: 为了使icon更易识别,有时需要设计人员在项目启动时,变成用户研究人员。在这段期间对现有的icon进行研究和分析,并在竞争中彻底的展开调查,以及应该如何创建更加容易的记忆和易于理解的icon。如果设计人员发现是辨认丧失其意义的主要因素,这将可以作为吸引用户作为竞争优势的第一步,以及将用户体验提供积极的特点作为用户基本要求,不会让用户有太多等待,而对于那些无法识别的icon会失去耐心。另外这里提到的icon并不是强调绝对的独特,或者创造独特的功能。但是通过一些细小的独特甚至是轻微的细节变化都可以在App Store或者android的应用商店和设备上的用户更易识别。

审美和吸引力: 可以肯定的是,记住icon的含义是一种可视化的表现,其采取的基本形状和审美倾向都是要考虑的,在视觉上的吸引力是鼓励用户进入应用的第一步,同时也是使产品有吸引力、美观和时尚的重要因素,例如coloristics其就是这方面的成功应用,对于在设计icon的外观是非常有帮助的参考。

适应性: 随着越来越多的尺寸和分辨率进入这个领域,灵活性和可扩展性在设计决策中变得越来越有效。好的icon应该是具有可读性和不同的尺寸与环境适应性的,因此在创建icon时要充分考虑的的因素。

一致性: icon和界面布局在其它的元素能感觉到和谐统一,因为它们往往会成为最重要的一个因素。例如下面的几个icon,它们遵循相同的风格、概念,对于应用一些通用的设计解决方案,支持视觉表现和交互体验,而不是去打破之间的平衡。

Sketch 进阶- Mobile App Icon 设计

Interface Guidelines: 

Google Material Design: 中文版icon设计:  

Apple Human Interface Guidelines:

Sketch新建文件里有用于 IOS icon/ Android Icon designicon设计的template, 设计第一个icon。

较老icon设计的sketch版本icon设计, 可以通过使用快捷键 “A” 打开模板icon设计, 在侧边栏里选择icon 的模板。

IOS icon generator plugin. This is a great little plugin for quickly being able to build out all of the app icons we'd need when building out mobile apps for Android and iOS. We can change the original design and go ahead and run it again and there's nota bunch of time trying to fix every single little app icon we created the first time around.

 Icon Export: Command+Shift+E Export all artboard,  and can select any of them.

icon设计的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于icon啥意思、icon设计的信息别忘了在本站进行查找喔。

评论