广告区域
当前位置:
首页 > 设计 > 网页设计 > 想让图标更精致?先掌握这11个容易忽略的设计细节!

想让图标更精致?先掌握这11个容易忽略的设计细节!

想让图标更精致?先掌握这11个容易忽略的设计细节!

大家好,这里是设计夹,今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小,却包含着很多细节。作为通用的视觉化语言,把握住其中的设计细节至关重要。

这次总结一下图标设计的属性以及在图标设计中,很重要但容易被忽略的知识点。

在 UI 设计中,图标主要有两大类:一类是 APP 启动图标,每个 APP 独一份;另一类是系统 icon,搭配文字,方便用户快速理解信息,也是这篇文章重点讲解的内容。

想让图标更精致?先掌握这11个容易忽略的设计细节!

风格

常见的图标风格有线性、面性、彩色、写实、3D 等,图标的选用因页面的设计风格、图标的位置等原因会有所差异,主要的作用是反馈动作和吸引用户更多注意力。

  1. 线形/面性:最基本也是做常用的风格,广泛用在页面设计中。
  2. 彩色:通常用于反馈用户的操作或者增加用户的注意力。
  3. 3D/写实:当页面中的某个内容需要引起用户高度注意时使用,一下抓住用户的视线。
想让图标更精致?先掌握这11个容易忽略的设计细节!

Tips: 现在字节、百度新推出的一些年轻化产品中,有很多精致的 3D 写实图标,极具个性,很好地迎合了年轻用户的喜好。在扁平风格流行的当下,这样的尝试也是一种突破。

重量

简单的线性图标重量轻,看起来更简约,不会给页面带来太大的视觉负担。比如当页面中已经有很丰富的图片和内容,那么更适合选用简约的、重量轻的线性/面形图标,防止页面过于杂乱。

相反,如果当前的页面中只有文字,信息量很少,那么更适合利用重量大的彩色甚至 3D 图标来增加页面的丰富性,让页面看起来更有设计感,给用户带来视觉上的愉悦,简约而不简单。

想让图标更精致?先掌握这11个容易忽略的设计细节!

属性

构成图标的元素包括描边的粗细、端点的方圆、圆角的大小、色彩的轻重等,表达式规则是统一的,以便只给观看者识别图标所需的最小更改。

想让图标更精致?先掌握这11个容易忽略的设计细节!
  1. 描边粗细:手机上常用到的描边粗细有 2px、3px、4px。2px 的看起来会显得更加精致,4px 的描边视觉较重,可以用在优先级较高的区域作为功能性图标,。
  2. 端点/节点:图标的端点有平头、圆头和方头,图标的节点有斜接连接、圆角连接、斜角连接,具体使用哪种样式要根据页面的情况统一设置。
  3. 圆角半径:方形的图标边角过于锋利,用户有时候看起来会不舒服,圆角图标更圆滑,相对来说更容易让用户接受。虽然圆角用的更普遍,但具体使用哪种,还是要考虑页面的整体风格再决定。
广告区域
广告区域

Loostrive洛米原创wordpress主题演示站!更多主题请前往www.loome.net

想让图标更精致?先掌握这11个容易忽略的设计细节!:等您坐沙发呢!

发表评论

表情
还能输入210个字