如何系统的学习功能图标设计

版权申明：本文出自“水手哥”，感谢“水手哥”的原创教程分享！

我们的知识体系在不断的完善，这时候就需要我们对了解的知识进行深挖，多问自己为什么？了解背后的逻辑。这样才会更加深刻。

由于最近的工作原因对图标有了更加全方位的认知，虽然之前写过《如何绘制功能图标基础篇？》，《如何系统的学习功能图标？》这两篇文章，但里面还是缺少了理论依据和系统做图标的思维。通过不断再学习的过程中不断有了新的认知，希望和大家一起分享。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

一、图标设计原则

01、表意准确

功能图标的第一原则是表意准确，要让用户看到图标第一时间就能理解它的含义。同时，功能图标还具有通用性，符合所有的用户的使用习惯，不要试图去改变用户日积月累沉淀下来的记忆。微信底部的Tab栏，已经很多年没换过了，由于微信用户群体庞大机构复杂，牵一发而动全身，谁也不敢随便的改变用户多年积累的认知记忆。可能从美观角度还有很大发挥的空间，但是用户更多的会认为，熟悉的就是最好的。

而爱心图标在用户的认知里更多的是喜欢，当朋友在微信朋友圈发了照片或更新动态，点击爱心来表达自己的喜欢。

02、可预见性

预见性是指人对事物发展的预判和前瞻，而人对功能图标预见性的强弱取决于用户对该图标的认知强弱，当我们把绘制好的图标放入页面时我们要考虑用户是否可以很快的找到该图标？当用户找到该图标时，用户是否会很快的理解图标代表什么意思？当用户在点击图标前是否已经大约预测到点击该图标后的界面大体样式或内容？

根据上图的icon我们可以预测这是一款音乐类app的图标，因为图标有有明显的音符和音乐播放按钮等

根据上图的icon我们可以预测这是一款购物电商类app的图标，因为图标中有分类查找和购物车图标

上图中当前显示页面为店铺页面，当我们看到客服图标时能大体的想象得到点击客服图标会跳转到聊天工具的页面，这就是图标的可预见性。