小扣子

图标是规划师是每天都会用到的,可是图标运用场景,图标类型,什么时分用什么类型图标,今天和咱们共享下。这是一篇实用文,主要是解说图标的运用以及图标的类型,规划师们可以Mark下来,以防今后要用到哦。

 

图标是什么 

图标广义上是指有指示效果的标志,也可以说图标是一种“视觉言语”, 经过图形表达出所代表目标的含义、特征以及信息;图标现已融入了咱们的日子,它可以快速协助人们定位以及作出相应的决议,比方商场、洗手间、进出口等指示牌、路上交通提示的标志等等,所以图标不止是咱们界面中才会用到。

 

图标的效果 

UI规划中,图标可以引导指示用户,图文并茂、生动形象的协助用户快速的抵达“目的地”,使得人机交互更简略;别的,还可以节约空间、增强界面美感。

 

图标运用场景 

1.运用商铺

也便是手机桌面上的体系图标以及不同运用的图标,可以看出从前期的拟物化到现在的扁平化,图标可以形象的表达出对应的功用以及代表的运用,协助以及引导用户快速进入对应的APP。

 

2.功用进口

一般放在APP第一屏的方位,可以将APP的中心功用、或许用户常用的进口直观的展示给用户,别的还可丰厚界面,比方3-4个颜色(颜色类型多简略形成界面杂乱花哨)突变的底色结合实色的面性图标,让界面充满活力。

 

常见的有APP中导航部分,一般是4-5个,最多10个,这儿不宜放太多,从视觉上,会形成界面拥堵,影响漂亮;

从产品的角度上讲,这儿的iCON一般各大功用进口,可以呈现出APP的主要功用,用户可以快速找到功用;这儿图标除了引导导航效果,还能在大促时分做营销气氛。

中心进口操作,如微博的发微博,闲鱼的发布,中心“加号”,含义清楚,传达给用户的信息是点击可增加修改内容,点击之后对应弹出界面呈现出中心的“买搁置”等3个功用进口;iCON不只仅含义明晰,一起要能承载对应的交互功用。

 

3.情感染

在一些直播软件里边,图标能很好的传递出气氛,协助商业转化,图标在这儿起到效果非常大,许多时分渠道的收入就和这些图形规划有关。

 

Same的频道称号前加上不同润饰的iCON,界面更风趣,愈加契合年青用户喜爱,图标在这儿承载不止是功用,也是情感的传递。

 

4.空白页面

当APP呈现网络欠好、加载状况、界面反常等等的时分;必定程度上会阻止用户影响用户运用APP;这时咱们可以运用插图或许图标作为配图合作案牍正确的、明晰的、直观的表达出当时的状况;结合情感染规划与用户发生心情上的共识。

 

5.弹窗

APP中有不同类型的弹窗,是不行短少的组成部分;同理iCON作为配图注入情感染规划,风趣生动的弹窗不只削减用户的“厌恶感”还能增强互动、鼓舞用户完结引导提示功用。

 

6.引导页

一般状况,用户会火急的想要进入到运用内部,因而会快速滑动界面,所以想要在几秒钟内让用户发生形象,好的配图可以不只仅需求精确到位的展示出APP更新内容以及产品特征,还要让用户简略捉住要害点。

 

图标风格类型 

图标的风格可以简略的分为线形图标、面形图标、线面结合的图标,可依据不同场景以及产品的调性去灵敏运用。

 

线形图标:由线条来组成的图形,没有填充色;界面中比较常用的常见,线的规划全体视觉感触比较轻量化。

 

面形图标:形状是填充色,可用作功用进口,或许一些职业进口,图标填充为主,合作五颜六色运用。

线面结合:线条和填充的形状组合,元素相对丰厚。细节比较多,运用场景也比较灵敏。

 

规划Tips  

在规划图标的时分,首要提取产品的调性、面向的用户集体、与之APP界面相契合的规划风格;依据APP的定位挑选心爱的、 生动的、风趣味性的、具有亲和力的(可以挑选带圆角的、笔画柔软的图标、双色或许多色的) ;仍是慎重的、安全的、牢靠的(直角的、笔画健康的、单色的)

马蜂窝提取了LOGO下面的弧度运用在了每一个iCON上包含下划线,品牌基因运用的特别好在iCON上面贯穿了整个APP。

网易蜗牛则是用了面性的iCON,领读的小书本、 书桌的小桌子都很深入形象的传达出这是一个阅览的APP。

 

一些趋势 

突变色运用、双颜色多颜色叠加或许组合运用,颜色方面不再是单一的色。

细小的交互动效的运用,动画中融入情感染规划,让人机交互更风趣,不再是停止状况;(比方QQ 、 优酷、爱奇艺、土牛、标签栏切换时分的icon加入了动效规划)

3个iCON切换的时分图标的表情视野跟着改换,(就好像当时是我兄弟体现呢,咱们得看着支持下~是不是很风趣味性呢~) 谈天创空中语音一栏的iCON可特别留心“表情”iCON的允许, QQ这儿的iCON也运用了突变色。

 

总结 

1.图标可以简略理解为一种人们都读懂的言语,也是界面必不行少的元素之一,因而图标必需求具有一下几点:可识别性、唯一性、统一性、吸引力等等。

2.iCON的界面很重要的元素,它的体现形式多样化;不同图标有自己性格特征,需求依据咱们用户,产品特征,以及规划趋势结合去界说风格。

3.图标运用场景多;可运用与APP的体系图标、APP空状况、APP弹窗、APP引导页、APP界面导航、APP加载动画。正确的运用可以提高产品统一性,打造产品风格主张。

 

原文地址:咱们的规划日记(大众号)

作者:曼曼

转载请注明:明升m88.com网 » 免费图标有许多,便是为了不必画吗?瞎扯!

登录保藏
 
你或许喜爱的:
用人的言语·为人规划用人的言语·为人规划
UI规划命名办法及常用控件共享UI规划命名办法及常用控件共享
为什么颜色很重要为什么颜色很重要
网格的根底网格的根底
按钮标准系列 - 「按钮尺度」的规划详解按钮标准系列 – 「按钮尺度」的规划详解
干货 | 怎么构建UI组件规划标准干货 | 怎么构建UI组件规划标准
“保藏、喜爱、重视”有啥差异?“保藏、喜爱、重视”有啥差异?
Get!怎么快速做潮流插画风LOGOGet!怎么快速做潮流插画风LOGO
数据可视化在移动端的运用数据可视化在移动端的运用
四步搞定底部导航动效(下篇)四步搞定底部导航动效(下篇)