0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

UI设计师如何设计好图标,需遵循这七个规则

如意 来源:布莱恩学设计 作者:布莱恩 2020-09-03 16:20 次阅读

大家好,我是布莱恩。图标是 UI 设计中最基础也是很重要的部分,辅助人们更好的理解功能内容。随着扁平化设计风格的普及,图标的风格越来越简约,看似简单的图形,实际要准确的表达含义,也是需要注意一些方法的。以下是图标设计技巧的分享内容:

设计图标是一个艺术创作的过程,里面也有很多需要被关注而不可忽视技巧。要知道如何设计好图标,是对于 UI 设计师来说是不可或缺的重要技能。

在我设计图标的时候,我个人认为有以下7个规则:

简单

一个图标一个非写实的表现。不需要担心图标不够真实,消除不必要的细节,用基本的形状只保留最基础的部分,让这个图标更容易被理解。

有时候图标会因为有更多细节而传达了更复杂的意思,这反而是样式问题!

一致性

在整个图标系统中,你的图标要保持同一种样式来确保图标完美协调。比如同样的形状,填充,描边粗细,尺寸等。要制定好可以被复用的栅格,规范和样式。

UI设计师如何设计好图标,需遵循这七个规则

如果可以的话,尽可能重新设计这些图标,而不要混入其他不同风格的图标来使用。

清晰

设计「完美像素」的图标,特别是在图标非常小的时候。这样图标的描边就可以保持锐利,不会有模糊。注意半像素的情况出现,尽量避免小数点参数

这也可以帮你保持图标的辨识度,在你等比缩放他们的时候保持清晰。

空间

确保你的图标的所有形状有足够的空间。笔画和空间过于狭小会使图标更难被理解。

最少给2px的负空间

视觉调整

确保你的图标看起来是正确的,适当的调整元素的对齐来达到视觉上的平衡。

不要只关注参数,如果有需要就用上你的眼睛来衡量,轻微移动这些元素。

布局规格

所有图标保持同样的尺寸,在图标周围定义一个可调整的内边距范围,尽量让元素设计在这个范围内。不要挤满所有元素。

当图标需要额外控件时可以超出这个内边距范围。

测试验证

在设计阶段,你的图标可能看起来是完美的,但还是需要将图标放到实际的界面环境中,测试他们是不是完美,有没有可以调整的细节问题。

确保每个新增的图标和其他图标显示一致。

你在设计图标过程中,有用到以上的这些技巧吗?可以在评论区告诉我,你是怎么怎么设计图标的。
责编AJX

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 内存
    +关注

    关注

    8

    文章

    3016

    浏览量

    73989
  • ui
    ui
    +关注

    关注

    0

    文章

    204

    浏览量

    21367
  • 图标
    +关注

    关注

    0

    文章

    18

    浏览量

    7828
收藏 人收藏

    评论

    相关推荐

    上海汇道科技:揭秘UI设计师背后的故事!

    界面交互、再到用户体验都有涉猎。由于工作重心的不同,UI设计师的工作内容会分为三方向: 国内的大部分UI设计师从事GUI方向的工作,主要负
    发表于 03-27 16:50

    PCB设计七个基本技巧

    本文将探讨印刷电路板(PCB)设计新手和老手都适用的七个基本(而且关键的)技巧和策略,只要在设计过程中对这些技巧多加注意,就能为你与你的团队减少重新设计次数、缩短设计时间以及减轻整体设计结果诊断
    发表于 09-17 17:45

    七个单片机创意设计实例

    了以下作品,那恭喜了,你已经掌握单片机了!单片机的七个创意设计实例(从易到难),附电路图、源代码、演示视频.pdf (106.94 KB )
    发表于 07-02 04:35

    Python数据可视化专家的七个秘密

    分享 Python数据可视化专家的七个秘密
    发表于 05-15 06:43

    航天器或卫星的七个基本子系统介绍

    与此同时,我们也必须清楚地认识到,由于极端恶劣的环境,太空其实是一非常危险的地方。轨道飞行中存在辐射、飞溅的碎片、极端温度和繁多的环境干扰。鉴于这些因素,飞船设计师采用了抗辐射集成电路(例如
    发表于 11-16 06:15

    HACCP七个原理 ppt

    HACCP七个原理分别是哪七个?: 1. 进行危害分析,确定控制措施(HA- PA)2. 确定关键控制点(CCP)3. 建立所确定的关键控制点极限值(CL)4. 关键控制点的监视系统(M)5. 偏
    发表于 02-19 17:47 0次下载

    用电池驱动七个白光LED电路的设计

    用电池驱动七个白光LED电路的设计     为驱动一以上的高亮度白光LED,设计工程需要选择是串联连接LED或是并联连接LED。  并联连接
    发表于 12-25 10:25 1860次阅读
    用电池驱动<b class='flag-5'>七个</b>白光LED电路的设计

    卷积神经网络的七个注意事项

    卷积神经网络的七个注意事项
    的头像 发表于 08-24 16:09 3865次阅读

    UI设计师的10常见错误,你是否中招了?

    做设计难免会出错。有的错误真的只是之前不知道,后知后觉遂有了恍然大悟。而还有很多错误属于大家都知道,但是因为各种原因忽视而不小心犯了。但是不论是哪种,我们终究是要改正并提升才行的。下面是设计师 Danny Sapio 总结的 UI 设计
    的头像 发表于 09-03 15:52 1938次阅读

    改善优化网站UI设计的七个技巧

    你对自己的网站当下的UI设计效果满意吗?如果不知道如何改进的话,那么这篇文章或许对你有很大的帮助。
    的头像 发表于 01-03 14:51 2745次阅读
    改善优化网站<b class='flag-5'>UI</b>设计的<b class='flag-5'>七个</b>技巧

    高速电路设计工程需要掌握的七个技术

    高速电路设计,工程需要掌握哪些知识技能呢?下面以具体的七个技术面,为大家详细叙述一一解答:
    发表于 01-28 07:15 12次下载
    高速电路设计工程<b class='flag-5'>师</b>需要掌握的<b class='flag-5'>七个</b>技术

    总结,大厂设计师都是这样做UI设计的!

    对于大多数人来说,设计师可能只需要承担画图的工作,但实际的工作中,UI设计师从进入项目团队后就需要开始与团队伙伴一起开始协作,所负责的部分也不仅仅只是设计这一环。毕竟,UI设计不等同于
    发表于 07-27 10:19 955次阅读
    总结,大厂<b class='flag-5'>设计师</b>都是这样做<b class='flag-5'>UI</b>设计的!

    除了sketch,UI设计师还有哪些设计工具?

    总有UI设计师在发出过这样的疑问:Windows电脑如何安装sketch? Sketch是当前UI设计工作中绝大多数设计师的选择,他的功能齐全、运行稳定,确实是
    发表于 07-30 10:41 1007次阅读
    除了sketch,<b class='flag-5'>UI</b><b class='flag-5'>设计师</b>还有哪些设计工具?

    元宇宙构造的七个层面是什么

    元宇宙就如同一和现实平行的世界,这个虚拟世界里同样可以进行工作娱乐,Beamable公司的创始人Jon Radoff认为元宇宙构造有七个层面,那元宇宙构造的七个层面是什么呢? 元宇宙构造的
    的头像 发表于 11-05 17:19 5894次阅读

    蓝牙mesh网络的七个特点

    蓝牙mesh网络的七个特点
    的头像 发表于 12-21 11:20 955次阅读
    蓝牙mesh网络的<b class='flag-5'>七个</b>特点