发布时间：2023-11-30 分类： 电商动态
在有限大小的移动界面上，小图标可以更轻松有效地表达意义，并为用户提供正确和友好的指导。因此对于UI设计师来说，每天都无法用图标彼此相爱。让我们总结一下，如何使我们的设计图标清晰，符合标准。
一. 如何表意清晰：画什么?
1. 在不同的场景选择不同的风格
目前，在主流应用中，大多数图标使用相对简单的平面设计风格。这些图标中的一些由线组成，一些由面组成，一些由线组成。下面我将主要举例说明360App中的一些图标。
主页的第一部分是主要业务的第一级条目，第二部分是第二级条目，即各种小工具。在第一级入口处，我们选择了颜色构面图标，并在反白图形上添加了一些纹理，以使这组图标更加突出。下面的辅助条目的图标比级别的主条目弱，因此我们选择使用纯色的不同透明度的面来形成这些图标。
左侧列表中的图标用作显示功能，而不是条目，因此我们都使用线圈+颜色面的小图标;图片的右侧是帐号页面，在这个场景中我们更喜欢用户注意订单的状态，也就是写一个角落的号码，所以图标就成了一行，整个页面会更清爽。
2. 相同的功能要选择相同的元素
虽然图标可以在不同的页面和场景中以不同的样式表示，但是当它们表示相同的功能时，请记住使用相同的可视元素，然后设置当前页面的样式。这可以保持App中图标元素的统一性并降低用户的学习成本。例如，出现在不同页面上的与CPF相关的图标使用相同形状的小型建筑物。
3. 对于功能型icon来说，最好选择用户熟悉的icon元素
对于app中的操作功能，上述内容被无数产品重复使用，并且已经建立了图标。除此之外，还有“放大镜=搜索”，“小房子=主页”等，用户已经巧妙地接受了这些图标。意思是，没有学习成本，因此有必要使用这些熟悉的元素。
4. 对于入口或展示型icon来说，我们要选择主要的元素，表意要简洁，可以适当联想
在这些例子中，您是否必须为“信用卡分期”画一张卡？你必须为“近银行”划一银行吗？您是否必须为“互联网贷款评级”提取在线贷款？我们将分析具体情况并做一些关键词。选择。 “附近银行”作为工具的功能是定位而不是强调银行本身，所以我最终选择了定位符号来表达这个功能。假设要设计的入口被“附近的银行”+“附近的购物中心”+“附近的加油站”等替换，则主要功能在搜索中变成不同的地方。在这种情况下，我们将选择吸引银行和购物中心。和加油站。例如，“CPF查询”和“社会保障查询”都是查询。 “招聘报告”和“收入和费用报告”是报告。同样，我们无法为全屏查询功能输入绘制放大镜。在报告的入口处，绘制了一份报告。为了简洁和专注，我们在这里选择合并相似的项目，强调每个功能与其他点不同。
我们想要表达的内容很多时候并不具体。这时，我们可以做出适当的关联来绘制相关对象。例如，“CPF”非常抽象，但它与房子有关; “簿记”是一种行为，但“书”是一种东西，所以它更简单，更贴心。
5. 附上文案：表达足够准确，消除理解上的差异
我们以Airbnb的app底部图标为例。他们选择了一个非常有趣的小叶子图标。当没有副本描述时，千位用户中必须有一千个哈姆雷特，每个人都会有自己的理解。因此，图标是辅助表达式，文本是标准答案。除了公众完全熟悉的图标外，另一个最好附上相应的副本，以避免用户理解错误。
6. 进行可用性测试
用户可以准确理解使用的图标吗？用户需要猜测并尝试吗？用户可以记住这些图标吗？如有必要，您应该将用户从机舱中移开以查看他们的反应。
二. 如何符合标准：怎么画?
1. 单色icon多用布尔运算：只有一个图层方便后期调整，方便交接使用。
例如，左侧黑色图标的外圆以3px宽度的笔划绘制，这导致更多层，修改起来很麻烦，如果要切割外部则圆角难以控制圈子休息会更麻烦。使用布尔运算的右侧图标更清晰。
编者注：一个小教程，允许您快速掌握布尔运算→《PS热门教程!教你5分钟快速绘制超火的MBE风格图标》
2. 像素要对齐
3. 合适的大小：保证一组图标视觉上大小一致
在绘制图标之前，我们可以绘制代表最大尺寸的框。在此框中，图标不应过多绘制，应正确消隐。同时，为了视觉统一，圆圈略大于正方形。遇到倾斜图标时，可以先将其绘制然后再旋转。
4. 抓住有特点的小细节
简单地说，线的粗细，圆角的大小是一致的，图形是否分裂，并且线断点的细节通常是一致的。这样的一组图标是整体的，风格是统一的。
编者注：那么，你如何制作一套风格的图标？这是方法↓↓↓
《用品牌基因法做图标设计，这是高级UI设计师才会的手法》
《用品牌基因法做图标设计，高级UI设计师才会的手法!(升级篇)》
《从零基础到合格，我总结了这5个图标设计实战方法》
三. 小结
沿着UI的发展趋势，图标的风格经历了各种变化，从模仿到平面，从静态到动态，有的变得简单，有的更加多样化和个性化，但事实仍然是10000不变。它的祖先。图标设计似乎很简单但是要注意很多，既准确又准确的设计，我相信设计师的浪潮都在实际的战斗中。
