你所在的位置: 首页 > 正文

如何系统学习功能图标

2019-08-21 点击:728

每个人都是产品经理,我想昨天分享

由于最近的工作原因,图标有了更全面的了解。虽然我写了《如何绘制功能图标基础篇?》《如何系统的学习功能图标?》这两篇文章,但仍然缺乏理论基础和系统思考。通过在不断学习新知识的过程中不断学习,我希望与大家分享。

image.php?url=0Mr2XYeoPb

图标设计原则

功能图标的第一个原则是表意文字是准确的,以便用户可以在第一时间理解图标的含义。同时,功能图标也是通用的,符合所有用户的使用习惯,不要试图改变用户随时间积累的内存。

微信底部的标签栏多年没有改变。由于微信用户群和整个机构的复杂性,多年来没有人敢改变用户积累的认知记忆。从美学的角度来看可能会有很大的发挥空间,但用户会更多地思考,熟悉是最好的。

image.php?url=0Mr2XYhRUp

爱情图标更像是用户的认知。当朋友在微信圈中发送照片或更新时,点击爱情表达他们的最爱。

image.php?url=0Mr2XY4gxc

可预测性是指人们事物发展的预判和预见,人们对功能图标可预测性的可预测性取决于用户对图标的认知力度。当我们将绘制的图标放入页面时,我们必须考虑用户可以快速找到图标吗?

当用户找到图标时,用户是否能够快速了解图标的含义?当用户在点击图标之前单击图标后预测了界面的大致样式或内容?

根据上面的图标,我们可以预测这是一个音乐应用程序的图标,因为该图标具有明显的音符和音乐播放按钮。

根据上面的图标,我们可以预测这是购物电子商务应用的图标,因为该图标具有类别搜索和购物车图标。

image.php?url=0Mr2XYMFFN

在上图中,当前页面是商店页面。当我们看到客户服务图标时,我们可以粗略地想象点击客户服务图标将跳转到聊天工具的页面,这是图标的可预测性。

(1)尺寸统一

图标的主流尺寸为16×16,24×24,32×32,48×48,64×64,96×96,128×128,192×192,256×256,512×512,1024×1024。

(2)甚至规则

周期表中的两个相邻元素具有偶数个原子序数,并且地壳中的平均含量通常大于奇数元素的含量。对于相同的元素,具有偶数质量的同位素在地壳中的平均含量大于相邻奇异同位素的平均含量。

这是根据分析的实际数据分析地壳中元素和同位素的规则之一。它被称为偶数规则。

UI界面设计基本符合偶数原则。

在图标设计中,主要有两种声音,4的倍数和8的倍数.48之间的争斗不仅反映在图标大小的规格中,而且反映在Sange系统的规格中。

那么你如何根据强大的基础来决定是使用4的倍数还是8的倍数?换句话说,它是ios的规格还是材料设计的规格?

image.php?url=0Mr2XYYs58

(3)ios规范4的倍数

iPhone上最小的点击区域,官方推荐是44px×44px。

为什么ios 4的倍数?因为Apple改变了游戏规则,当你习惯用px物理像素来定义大小的大小时,Apple突然推出了改变普通屏幕物理尺寸的视网膜屏幕。在不同的屏幕(正常屏幕与视网膜屏幕)上,由css像素呈现的大小(物理尺寸)是相同的,除了与一个css像素相对应的物理像素的数量不一致。

在正常屏幕中,一个css像素对应于一个物理像素(1: 1);在视网膜屏幕中,一个css像素对应于四个物理像素(1: 4)。

image.php?url=0Mr2XYjQnY

(4)规格材料设计的8点网格

材料设计创建一个8点的网格作为一个单元,所有元素大小都是8的倍数。有些屏幕很难适应这个系统,例如iPhone6的375×667尺寸,但解决方案也很简单。

保持衬垫和尺寸的尺寸。保证金符合规则,剩余空间可以填充块元素。如果某些元素的大小是奇数,则无关紧要,只要它们可以使整个规则符合这组规则。

(5)Digital 8反汇编分析

加法和减法:2 + 2 + 2 + 2=8; 2 + 3 + 3=8; 2 + 6=8; 3 + 5=8; 4 + 4=8乘法和除法:2×4=8次幂:2的3次幂等于8比例关系:2/8=1/4; 3/8; 4/8=1/2; 5/8; 6/8=3/4的

(6)金螺旋/斐波那契序列

Fibonacci序列系列是序列1,1,2,3,5,8 .

数学上,Fibonacci数以递归方式定义:

F0=1

F1=1

FN=F(N-1)+ F(N-2)

(N>=2,n∈N*)

为什么Google的Material设计和Ant设计都有一个每单位8点的网格。根据上面的一些数学方法,Fibonacci序列中的1/2/3/5/8数量占很大比例。

取第2列+6=8,你可以继续反汇编成1 + 3 + 1 + 3=8,但是2: 6=1: 3;同样的原因2×4=8,但是2: 4=1: 2,Fibonacci序列中精细分解的数字与Fibonacci序列一致,这意味着满足黄金比例。

最后的结论是8的倍数是主要的,4的倍数是补充的;除非你设计的应用程序只需要适应ios系统,你可以使用4的倍数,当你需要适应ios系统并适应Android系统时。在选择8的倍数时,不设计两套适合ios和Android的界面是一个不错的选择。

image.php?url=0Mr2XYH08O

(7)颜色均匀性

选择颜色时,图标应尽量不超过4种颜色,每个图标的颜色匹配需要根据相应的行业背景进行匹配。红色等色彩心理可以用于美食,而橙色则用于食品中以代表甜味。绿色代表食物,指的是健康的绿色产品等。

image.php?url=0Mr2XYWgoP

(8)统一风格

该样式已在《如何系统的学习功能图标?》中进行了总结。直角图标和圆角图标将添加到相应的图标样式中。最好不要添加两种样式,很容易弄乱,不简洁,主要和次要都是未知的。

在整个产品或系统中,可以使用两种或三种不同类型的图标来区分它们。

image.php?url=0Mr2XYj9Fx

(9)图标设计规范

圆角规格:外圆角半径 - 线宽=圆角半径

image.php?url=0Mr2XYbtAE

外圆角半径:圆角半径约为整个图标尺寸的十分之一

image.php?url=0Mr2XYxG1A

(10)图标的物理平衡和视觉平衡

image.php?url=0Mr2XYUbqP

为什么我们在相同大小的区域中绘制正方形,圆形和三角形,尽管它符合统一的物理尺寸规范,但它看起来看起来不平衡?

此点的材料设计为标准化图标提供了一个很好的解决方案。

image.php?url=0Mr2XYAMUL

image.php?url=0Mr2XYP8v0

方形18dp * 18dp;圆直径20dp尺寸的规格

image.php?url=0Mr2XYsTN4

垂直矩形20dp * 16dp;水平矩形16dp * 20dp

image.php?url=0Mr2XYvETi

使用Google系统图标规范

绘制的图标可以实现视觉平衡

image.php?url=0Mr2XYBUhI

打破规则:当视觉平衡和身体平衡发生冲突时,我们应该优先考虑视觉平衡。在上图中是微信的界面图标。仔细观察后,我们发现地址簿的图标超出了物理尺寸,但整个图标可以在界面中实现视觉平衡。

因此,我们可以在绘图过程中打破规则,这是每位优秀设计师应具备的。

(11)图标网格系统

在主流图标绘图中,线性图标的大小为1px,2px,3px。所以我们使用图标网格系统使用8的倍数,已经在8号反汇编中找到,8的倍数非常适合1px,2px,3px大小。

在双视图中使用48 * 48px的大小,并使用24 * 24px大小在双视图中绘制图标。

image.php?url=0Mr2XYNufZ

image.php?url=0Mr2XYBwXq

空间呼吸感:绘制图标时,我们不仅要确定图标的大小,还要确定图标的内部呼吸。它被称为正面和负面形状。图标的负空间也是常规的。材料设计中的呼吸基于2px。画出来。

通过字体词感受线性图标权重:

image.php?url=0Mr2XYDna8

从浅到厚的字体大小将给人一种轻松和平静的感觉。无论中文还是西文,文字越精细,可读性越强。文字越厚,可见度越高。

image.php?url=0Mr2XYWtdl

线性图标的大小为1px,2px,3px,4px。可以看出,图标厚度的变化为人们提供了不同的视觉体验。具体方法取决于接口的内容。最好的方法是验证厚度更适合当前界面。

对于2x大小约3px,对于3x大小为4.5px,将存在0.5px的问题。这方面的技术已经实现,当然,最好使用svg矢量格式。例如,上图中的爱情图标,弧线肯定是小数点问题,因此使用svg矢量格式是最佳选择。

0.5px edge

image.php?url=0Mr2XYcKKl

比较几种在高清屏幕上绘制0.5px的方法 - 您可以将宽度和高度边框直接设置为0.5px,将box-shadow的垂直偏移设置为0.5px,使用线性渐变线性渐变,并使用transform。 scaleY(0.5)方法,使用SVG方法。

最后,我发现SVG方法的兼容性和效果是最好的,所以在视口为1的情况下,可以使用SVG绘制0.5px,如果视口的缩放比率不是1,则直接绘制1px 。

0.5px侧。

图标是可点击的和标志性的。可点击性将是三种状态:点击前,点击后和点击后。主流底部选项卡将在单击之前使用线性图标,在单击并单击之后使用面部图标;还有颜色可以区分。

image.php?url=0Mr2XY6iVA

效果来加载和删除好的图标。

image.php?url=0Mr2XYvP6q

image.php?url=0Mr2XYGCOL

图标的功能分类

通过图标,您还可以细分为动作图标,警报图标,内容图标,设备图标,文件图标,编辑图标,导航图标,通知图标,社交图标,切换图标等.

为什么我们很少去系统区分图标的设计,更多的原因可能是我们做的C-end产品,图标的类型和数量相对较小,当我们接触到B-end产品时,由于B端产品的业务,与复杂性相对应的图标数量也增加了,为了更好地管理图标,有必要更详细地设置分类。

image.php?url=0Mr2XYwsgk

图标命名约定

为什么用英语标准化图标?因为我们使用的整个系统都是基于英语开发,所以设计师业务的下游主要是前端工程师。如果我们无法标准化每个图标,肯定会增加前端的工作量。如何提高合作效率也应该是设计师的用户体验。范围。谷歌翻译的英文翻译基本没有问题。

切割表以模块为前缀,例如:module_category_function_status.png

模块:登录页面(登录)公共(常见)要求a(需要)要求b(需求)发现(发现)消息(消息)my(me)类别:导航栏(nav)菜单栏(tab)按钮(btn)icon (图标)背景图像(bg)默认图像(def)功能:菜单(菜单)返回(返回)关闭(eidt)消息(消息)删除(删除)状态:选中(选中)不指向(禁用)按下正常图标上网

image.php?url=0Mr2XY63fB

在app产品中,以Meituan应用程序为例,整个产品中的图标使用了多种样式。主页金刚区域图标是主页流量分布的重要分支,视觉设计是吸引用户的眼球做更加华丽,而在标签中列导航图标和内页的功能图标需要设计得更简洁。

当我们绘制图标时,金刚区域主页的复杂图标将分别绘制。其他系统需要绘制两种样式的线。为了更好地适应页面,我们将在Sketch中使用Symbol系统。图标。

image.php?url=0Mr2XYOgwC

以爱情图标为例。我们使用Symbol在线上绘制两组图标。图标的颜色可以添加黑色和白色灰色+主色。可以有警告橙色/成功绿色/删除红色等。后续复制也非常方便。

image.php?url=0Mr2XYhIor

创建图标库和颜色库。每次有新图标和新颜色时,只需一个符号即可管理产品中的图标库。

团队:

目前,团队协作根据图标功能上传到草图插件工艺,方便团队其他成员一起使用。

下游设计 - 前端开发:

为了便于前端开发工作,我们需要根据上述规范命名我们自己的图标。

前端开发的主流实践是将图标转换为字体,将其上传到团队共享的图标网站,让前端开发工程师通过输出svg矢量格式的图标直接调用它。

国内主流平台是iconfont。如果导出草图创建的图标,则会在illustrator软件中重新安装svg格式以绘制1024的大小并上载到项目中。

所有路径都需要扩展为面部图标,多色图标不支持代码后修改颜色,单色图标可以在以后支持自定义图标颜色。

总结

在设计过程中,我们提高了对设计的理解,知识体系不断完善。在这个时候,我们需要深入了解我们所知道的知识,并问自己为什么?理解它背后的逻辑。这将更加深刻。

材料0.5px方:收藏报告投诉

攀枝花新闻门户 版权所有© www.dgnuodiwujin.cn 技术支持:攀枝花新闻门户 | 网站地图