ui设计中图标的风格有哪些

装修宝典03

ui设计中图标的风格有哪些,第1张

ui设计中图标的风格有哪些
导读:ui设计中图标的风格有哪些应用。目前的图标是基于ios系统进行的设计,在应用中,通常是以一系列的图标集为主。一套app的图标大小有很多种,但是它们只保留了一个标题,图标的样式主要有下面的几种一、图标的文字使用1 在app界面中图标与文字的关

ui设计中图标的风格有哪些应用。目前的图标是基于ios系统进行的设计,在应用中,通常是以一系列的图标集为主。一套app的图标大小有很多种,但是它们只保留了一个标题,图标的样式主要有下面的几种一、图标的文字使用1 在app界面中图标与文字的关系大小关系一般在app界面中,只有文字作为图标的文字信息和辅助元素,才能在一定程度上传递app界面信息。2 文字作为图标的组成部分,字体具有较强和艺术性,同时字体在app界面中使用也占有较大的比重。以日常生活中可以用到的日常词汇为主,字体多以手写体为主。3 图形为主体的标题形式很多,但最终呈现出来的效果一般是符合app界面的目的的。

题中所指的创意图标是icon么?我的理解是页面中的icon,不知理解是否正确。

在icon设计上最重要的是功能理解,之后将功能转化为图形化的内容,icon要有较高的辨识度,方便用户在看到icon时就可快速理解该功能是用来做什么的。比如“银行卡”的icon,一般都会画一张卡片来表示。

视觉风格而言,现阶段应用的App中,icon的表达类型可以分为下图几种:

1、扁平化面状icon;

2、25D立体型icon;

3、线性icon。

当然还有其他风格的icon,但基本是在这3种情况下延展而来的。

就icon而言,最重要的是要符合页面风格,也就是说,所有的icon风格都需要统一(支付宝的icon我记得以前应该是扁平化面状icon,但目前貌似有部分改动,应该还在迭代中,所以目前风格不是很统一)。

最后推荐一个网站:

iconfont(百度搜索阿里图库就可以找到,logo是一个小骷髅),里面有很多icon,微博账号可直接登录,可以下载svg格式的文件。

C4d怎么设计海报

C4d怎么设计海报1、使用圆形工具画出一个大大的海螺,我们用蓝色到白色的渐变填充这个圆弧的路径。2、使用圆圆工具画出一条直径为2的圆环路径,我们用蓝色的渐变填充这个圆形,让蓝色的渐变呈现出蓝白渐变的效果。3、我们用橙红色的渐变填充海螺的上边缘路径,用网格工具点击一下橙色的渐变,让橙色的渐变呈现出蓝色的渐变。4、使用圆形工具画出这个蓝色的圆球上面的一个三角形路径并填充一种粉红色到**的渐变。5、使用圆形工具画出一个小型咖啡杯的底座中的半圆形路径并填充一种粉红色的渐变。6、继续用灰白色的渐变填充这个咖啡图标的暗区路径。祝你设计出美丽又满足的咖啡杯。使用这[杯。6>1的渐变填充,使用默认色值#000。

学C4D以后可以做什么工作?

学C4D以后可以做在动漫设计与 *** 岗位群,从事影视动画设计 *** 、游戏美术设计、影视包装,以及与动漫形象有关的衍生产品的创意与开发等工作。

需要熟悉动漫产品设计生产流程、标准及技术实现手段,掌握动漫专业理论知识,具备动漫产品前期设计、内容 *** 、后期合成的综合 *** 能力,从事影视动画和游戏产品 *** 等工作的高素质技术技能人才。

学C4D职业能力:

1、具备对新知识、新技能的

学习能力

和创新创业能力,对新知识、新技能的学习能力和创新创业能力。

2、具备动画项目“创意执行”能力,掌握

数字艺术

、动画基础知识,了解编导与制片基本知识,掌握动画创意设计 *** 的主要 *** 。

3、具备三维模型 *** 能力,具备动画角色与场景设计、

分镜

设计、原画和中间画的创意设计与表达能力。

4、具备二维

动画 ***

能力。

5、具备影视特效设计与后期 *** 能力。

6、掌握动漫领域主流设计软件的使用 *** 。

7、掌握动画运动规律基本知识,具备实现动作设计的能力。

8、了解动漫

产品设计

生产流程及标准。

UI设计师为什么要懂插画设计和C4D?

UI设计师为什么要懂插画设计和C4D

随着互联网的深入发展大家对以前的纯视觉表达方式出现了视觉疲劳。插画作为一种视觉形象化的手段,不仅可以有效的表达文案意思,同时还能给到大家艺术美感。

在应用中,插画在UI中应用主要体现在app引导页、空状态、节日运营启动页、商业海报、Banner等。它已经成为2019年更流行的一种视觉表达方式。同时,对于UI设计师而言,竞争越来越激烈,掌握插画设计和C4D提升自己的职业竞争力

UI设计师为什么要学C4D

C4D在UI设计中最主要解决电商详情页和创意海报,随着流量越来越便宜,目前电商宝贝的展示由以前传统的展示慢慢往视觉展示过渡,未来随着5G技术的普及网速越来越快,视频展示必然成为主流。

以上就是UI设计师学习插画和C4D的原因分析,所以,想从事此行业的小伙伴们,你们一定要考虑清楚之后再行动,不能盲目的跟从别人的脚步,先看看是不是适合自己才是关键。更多相关资讯,请关注本平台。

有哪些ui图标设计的历史发展关键点UI图标设计的历史使得有效的文本替换成为可能。一些研究表明,使用易于识别和清晰的图标可以大大提高界面导航的可用性。对人类来说,视觉信息的处理速度比文本信息快得多。然而,另一方面,图标需要传达一个相对清晰的概念。任何轻微的误读都可能对整体体验造成极大的伤害。因此,图标的选择应该经过仔细的测试,以达到良好的平衡,并被目标受众所接受。

众所周知,图标和徽标不是界面设计师创造的概念。它们的存在可以追溯到人类文明的起源。在漫长的历史长河中,早期用来传达信息的图标已经演变成系统的文字。在地图、图画书、壁画和建筑等多种多样的地方,仍然有代表和传达特定概念的图标和标志。

随着技术的发展,计算机诞生了,显示器为图形界面铺平了道路。20世纪70年代,施乐公司在其位于帕洛阿尔托的研究所生产了之一台具有图形界面的计算机,被称为施乐Alto。这个昂贵的概念从来没有被公众看到过,但是它的继任者xeroxstar在1981年推出时,是计算机历史上的一个重要里程碑。施乐Alto给史蒂夫·乔布斯和比尔·盖茨的灵感引发了计算机历史上最著名的一场战役:苹果对微软,Windows对Macintosh。当然,这些是后来的。

有哪些ui图标设计的历史发展关键点施乐Alto发布了大量的图标设计,其中文件夹和垃圾桶的图标设计是此后图标设计中最为人熟知和接受的设计理念。

在UI图标设计的历史上,Macintosh系统是图形界面历史上不可避免的里程碑。1991年,苹果发布了麦金塔电脑的之一个彩色图标设计。在黑白界面时代,图标可以包含比以往任何时候都多的信息,新的风格使它在传递信息方面明显更好。

此后,越来越多的图标以灵活而强大的数字技术出现,并根据不同的需求发展成不同的分支和风格。许多操作系统和工具开始预制系统图标。基于各种需求,越来越多的自制和重新设计的图标出现在我们的视图中。图标有很多种,我们可以用不同的方式来划分

ui图标设计的历史发展关键点哪些?UI图标设计的历史使得有效的文本替换成为可能。一些研究表明,使用易于识别和清晰的图标可以大大提高界面导航的可用性。对人类来说,视觉信息的处理速度比文本信息快得多。

图标,是一种图形化的标识,它有广义和狭义两种概念,广义指的是所有现实中有明确指向含义的图形符号,狭义主要指在计算机设备界面中的图形符号。对于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设计领域开始,被扁平化设计所替代。不过,拟物化图标现在依然广泛地运用在不同领域,尤其是游戏设计和游戏类产品的图标设计当中。25D图标和桌面应用图标。

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

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

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

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

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

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

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

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

2、图标具体应用的界面

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

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

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

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

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

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

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

3、根据场景输出

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

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

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

拐角

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

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

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

倾斜角度统一

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

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

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

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

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

对齐像素点

清晰度(像素完美对齐)为了避免使图标失真,可以通过将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对比》

一图标功能

图标是Web和App设计中的点睛之笔,既能辅助文字信息的传达,也能作为信息载体被高效地识别,并且图标也有一定的装饰作用,可以提高界面设计的美观度。

二图标类型

关于图标的类型目前并没有很权威的分类,我根据图标的用途将其分为两大类:「功能型图标」和「展示型图标」。

1功能型图标

一般来说,凡是UI界面中,用户可以点击的图标均可看成是功能型图标,该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是iOS系统中的底部标签栏,以及MaterialDesign中侧滑菜单选项的左侧。某些列表或卡片内的图标也属于功能型图标,但这类图标往往代表一个功能,而底部标签栏图标往往代表一个页面或板块。2展示型图标

相比功能型图标,展示型图标更加具有「设计感」,是独特的、有内涵的以及具备辨识度的。一般来说,展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等。

三图标风格

图标的设计风格有很多种,例如:线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等,我对其中常见的几种作下简要的介绍。

1线性图标

线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练,具有一定的想象空间,且不会对界面产生太大的视觉干扰。

2面性图标

面性图标可以简单理解为对线性图标的填充,但面性比线性更加稳重和扎实,对色彩的传达也清晰明显。

3线面结合图标

线面结合图标典型代表是「MBE风格」图标,其设计特点是采用了粗描边线和偏移的填充面相结合,灵动而鲜明。粗线条起到对画面的绝对分割,突显内容、表现清晰。