• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • 想让图标更精致?先掌握这11个容易忽略的设计细节!

  • 表哥 2022-06-05 17:25:59 收藏
  • 文章标签: 图标 页面 用户
  • 大家好,这里是设计夹,今天为大家分享的是「图标设计细节」。图标在页面中的尺寸很小,却包含着很多细节。作为通用的视觉化语言,把握住其中的设计细节至关重要。

    之前有分享过关于图标设计的文章:

    5000+干货!从4个方面掌握图标设计的基础知识

    Hi,小伙伴们,Q 什伍最近花了两周时间,整理了这篇关于图标设计的文章解析,分享给大家。

    阅读文章 >

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

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

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

    风格

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

    1. 线形/面性:最基本也是做常用的风格,广泛用在页面设计中。
    2. 彩色:通常用于反馈用户的操作或者增加用户的注意力。
    3. 3D/写实:当页面中的某个内容需要引起用户高度注意时使用,一下抓住用户的视线。

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

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

    如何从零开始完成一套3D图标设计?来看大厂的实战案例!

    背景QQ 游戏中心经过设计改版之后,我们重新设定了整体的世界观——多彩的游戏宇宙。

    阅读文章 >

    重量

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

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

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

    属性

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

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

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

    网格

    图标的外形有圆形、方形、三角形甚至不规则形状的,所以我们很难将不同形状的图标尺寸完全统一。

    这个时候网格就起到很关键的作用,有了网格相当于提前将图标限定范围,在网格范围内根据图标的重量和重心灵活调整大小,这样会让不同形状的图标看起来更统一。

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

    视觉校正

    由于设计软件的局限性,虽然有些图形已经居中对齐,但有时候还需要进行视觉校正。

    最典型的图标案例是“播放”图标,利用设计软件对齐中间的三角形后,会发现三角形的位置看起来偏左。

    利用软件对齐后,我们还需要再用眼睛确认一遍,我们可以将三角形向右移动,保证三角形的重心与圆形的重心一致,这样整个播放图标看起来会更舒服。

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

    角度

    设计图标时,我们的第一反应是不带透视的二维图形。因为我们观看手机的视角都是平视,所以大多数的图标都没有透视,看起来会更简洁。

    带透视的图标会给用户营造一种空间感,可能会感到认知失调。虽然这种带透视的图标能引发用户关注,但不建议这么设计。

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

    比例

    图标比例通常使用 8 的倍数作为基准,例如 8px、16px、24px 和 32px,以便在各种环境中进行流畅地切换。除此之外,在移动端等屏幕尺寸较小的页面中,还会使用 4px 的倍数,来实现多功能性。

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

    清晰

    图标的设计要使用用户能够快速理解的且最简洁的元素。图标的尺寸通常很小,要尽可能做到对用户友好,可以使用一些简单的隐喻设计,但含义不能过于复杂。

    一个图形能说明的问题,没必要再添加多余的图形。复杂的图标可能需要花费用户很长时间才能理解它们的含义,这样反而会影响用户的操作。

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

    细节

    这一点和刚才说到的图标清晰道理一样。图标最重要的目标是快速传递信息,特别是对于尺寸很小的系统图标,最好只保留最基本的内容,移除多余的装饰元素。

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

    一致性

    这里说得一致性,并不是指一个产品中所有页面都只能使用一种图标风格。一个产品有很多页面,线性、面性等多种图标风格可以一起使用。

    但在同一个页面场景中,执行相同功能的图标应该保持相同的样式。

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

    熟悉感

    面对不同的操作系统,例如 iOS 和 Android,同一功能对应的图标也会有差异。针对不同的系统,我们可以选用大多数用户熟悉的图标,这样用户能更快地理解图标的含义

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

    最后

    以上就是常用却容易忽略的图标设计细节,希望通过这些内容能帮助你对图标设计有更深的认识。

    欢迎关注作者微信公众号:「Clip设计夹」

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

    本篇来源:优设网

    原文地址:https://www.uisdc.com/11-icon-design-details

    评论
    Artlist模板 广告