图标可能是设计师设计产品组合中最重要的设计示例之一,怎么用ps做logo图标,但因为图标在页面中的尺寸很小,虽包含着很多细节,但也是经常被低估的设计示例之一。作者总结了图标设计的属性以及在图标设计中,很重要但容易被忽略的知识点,一起来看看吧。
大家好,这里是设计夹,今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小,却包含着很多细节。作为通用的视觉化语言,把握住其中的设计细节至关重要。
这次总结一下图标设计的属性以及在图标设计中,很重要但容易被忽略的知识点。
01 用法
在UI设计中,图标主要有两大类:一类是APP启动图标,每个APP独一份;另一类是系统icon,搭配文字,方便用户快速理解信息,也是这篇文章重点讲解的内容。
创建品牌、设计LOGO之前需要进行广泛的调研。考虑到在这个过程中你需要对环境和背景中所有的细节都有所掌控,在预算上就一定要留下足够的余地。此外,你的解决方案和设计方向应该基于你的客户的期望,从排版到展示方式也应该同。
02 风格
常见的图标风格有线性、面性、彩色、写实、3D等,图标的选用因页面的设计风格、图标的位置等原因会有所差异,主要的作用是反馈动作和吸引用户更多注意力。
线形/面性:最基本也是做常用的风格,广泛用在页面设计中。
彩色:通常用于反馈用户的操作或者增加用户的注意力。
3D/写实:当页面中的某哥内容需要引起用户高度注意时使用,一下抓住用户的视线。
Tips: 现在字节、百度新推出的一些年轻化产品中,有很多精致的3D写实图标,极具个性,很好地迎合了年轻用户的喜好。在扁平风格流行的当下,这样的尝试也是一种突破。
03 重量
1.这次呢,我会使用AI,使用黄金比例进行绘制一个logo。2.接下来看一下是如何使用黄金比例做出右侧的logo的样子 3.正方形内把圆形画出来这就是一个规范的黄金比例,用这里画的圆形比例,绘制出你在纸上或电脑上画好的。
相反,如果当前的页面中只有文字,信息量很少,那么更适合利用重量大的彩色甚至3D图标来增加页面的丰富性,让页面看起来更有设计感,给用户带来视觉上的愉悦,简约而不简单。
04 属性
构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等,表达式规则是统一的,以便只给观看者识别图标所需的最小更改。
描边粗细:手机上常用到的描边粗细有2px、3px、4px。2px的看起来会显得更加精致,4px的描边视觉较重,可以用在优先级较高的区域作为功能性图标,。
端点/节点:图标的端点有平头、圆头和方头,图标的节点有斜接连接、圆角连接、斜角连接,具体使用哪种样式要根据页面的情况统一设置。
圆角半径:方形的图标边角过于锋利,用户有时候看起来会不舒服,圆角图标更圆滑,相对来说更容易让用户接受。虽然圆角用的更普遍,但具体使用哪种,还是要考虑页面的整体风格再决定。
05 网格
图标的外形有圆形、方形、三角形甚至不规则形状的,所以我们很难将不同形状的图标尺寸完全统一。
06 视觉校正
利用软件对齐后,我们还需要再用眼睛确认一遍,我们可以将三角形向右移动,保证三角形的重心与圆形的重心一致,这样整个播放图标看起来会更舒服。
07 角度
设计图标时,我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视,所以大多数的图标都没有透视,看起来会更简洁。
带透视的图标会给用户营造一种空间感,可能会感到认知失调。虽然这种带透视的图标能引发用户关注,但不建议这么设计。
08 比例
图标比例通常使用8的倍数作为基准,例如8px、16px、24px和32px,以便在各种环境中进行流畅地切换。除此之外,在移动端等屏幕尺寸较小的页面中,还会使用4px的倍数,来实现多功能性。
09 清晰
一般公司的logo的设计一般有七种模式:1、根据网站的名称进行设计,一般是将中英文名称,首字母等做一下效果 2、根据公司目标,目的,面向群体等进行设计 如搞慈善基金的,logo里整个心,加点效果 3、根据标志进行设计 这个。
一个图形能说明的问题,没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义,这样反而会影响用户的操作。
10 细节
这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息,特别是对于尺寸很小的系统图标,最好只保留最基本的内容,移除多余的装饰元素。
Logo设计步骤2.要素挖掘和提升 要素挖掘是为设计开发Logo标志工作做进一步的准备。我们会依据对调查结果的分析,提炼出标志的结构类型、色彩取向,列出标志所要体现的精神和特点,挖掘相关的图形元素,找出标志的设计方向,使设计。
11 一致性
这里说得一致性,并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面,线性、面性等多种图标风格可以一起使用。
但在同一个页面场景中,执行相同功能的图标应该保持相同的样式。
正负空间的logo的设计手法难度是相比其他类型的logo要高上一些,正负形是一个相互借用,相互依靠,相互成就的一个不可分割的整体,所谓的牵一发而动全身在正负形logo中得到很好的体现。它将企业文化巧妙的融合在一起,强烈的。
12 熟悉感
一、正负反转 在平面设计里面,正负反转这一方式是非常常用的,这一方式通过正负反转所展现出来的正负形也是很有趣味的一种表现,因为正形和负形可以相互借用,依存。在设计logo的时候,建议采用这一设计方式,虽然看似只是两。
面对不同的操作系统,例如iOS和Android,同一功能对应的图标也会有差异。针对不同的系统,我们可以选用大多数用户熟悉的图标,这样用户能更快地理解图标的含义
13 最后
慢慢来比较快,希望对你有帮助!
专栏作家
本文原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自 Unsplash,基于CC0协议。
该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。