IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

图标设计的那些事

网易用户体验设计中心博客 2012-01-03 23:22:50 累计浏览 2,900 次
本机暂存

    原图已失效

    作为一名大学刚毕业入行不久的小菜鸟,斗胆在这里分享下我对于图标设计的一些心得体会。说的不好,还请各位看客包涵指正。 图标在我们日常生活中被广泛应用,软硬件、网页、社交公共场合无所不在。广义来说,图标就是具有指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。狭义来说,就是我们所熟悉的在计算机程序方面的应用。包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。如今图标被广泛的应用,其价值也是显而易见的。一套好的图标能够为用户直观传达所描述的物体,减轻用户的认知负担,特别是一些抽象的功能和意义。同时增添图标的精美度不仅能提升整个界面的吸引力和观赏性,还能使产品与用户产生共鸣。

    下面以制作电话本和短消息这两个图标为例。

    原图已失效

    原图已失效

    设定风格。通观整个图标设计,设定风格是基础,亦是非常重要的一步。需要对整套图标进行周全的构想,因为这一步为图标设定了一个方向,之后图标设计的造型,上色的深入展开都要以此为基础。在这里我设定的是复古做旧的风格。

    原图已失效

    绘制草图。这一步骤主要是设计图标的造型。造型在图标设计中有着决定性的影响,他直观的给用户展现其所代表的含义。而草图是最直观,最快速展现设计构思的一种方法。此时我们可以通过头脑风暴列举出一些能让用户一目了然,又贴合电话本和短消息含义的元素,同时列举的元素又要符合复古做旧的风格。因此,我选取做旧的通讯录来表示电话本,选取羽毛笔和信纸来表示短消息。在绘制草图时,要注意图标造型的统一,方向的一致性,使图标有充分的辨识度。其次要控制单个图标元素的数量与其他图标相协调,用最少的元素来表达图标的含义。不然过多的元素不仅会使图标臃肿不堪,更会使图标的含义模糊不清,难以琢磨。

    原图已失效

    原图已失效

    上色刻画。在确定造型之后,就需要对图标上色以及深入刻画。

    原图已失效

同分类推荐文章

  1. 如何写好设计文档? (2026-06-23 08:00:00)
  2. Designing With Uncertainty: How AI Supercharges Probabilistic Thinking (2026-06-16 23:00:00)
  3. The Benefits Of Cognitive Inclusion In UX Research (2026-06-10 18:00:00)

查看更多 设计 文章 →

建议继续学习

  1. 十个最容易犯的用户体验错误及规避方案 (累计阅读 79,500)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 流程管理与用户研究 (累计阅读 17,053)
  4. 30套最好的网站开发与设计中使用的小型图标 (累计阅读 12,529)
  5. 网易微博平面视觉项目执行 (累计阅读 10,034)
  6. sns视觉设计分享 (累计阅读 9,524)
  7. 图书馆的世界纪录 (累计阅读 9,508)
  8. 网站导航设计的6大分类 (累计阅读 9,298)
  9. 视觉设计前瞻实用性研究(PNVD) 第五期 (累计阅读 7,199)
  10. 给想转行做产品经理的同学 (累计阅读 6,927)