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

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

3天内不再提示

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

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

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

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

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

简单

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

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

一致性

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

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

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

清晰

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

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

空间

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

最少给2px的负空间

视觉调整

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

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

布局规格

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

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

测试验证

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

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

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

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

    关注

    8

    文章

    2767

    浏览量

    72779
  • ui
    ui
    +关注

    关注

    0

    文章

    198

    浏览量

    21186
  • 图标
    +关注

    关注

    0

    文章

    18

    浏览量

    7766
收藏 人收藏

    评论

    相关推荐

    PCB布线需要遵循的一些基本规则

    布线是PCB设计的重要组成部分,也是整个PCB设计中工作量最大和最耗时间的部分,工程师在进行PCB布线工作时,需要遵循一些基本的规则,如倒角规则、3W规则等。
    发表于 10-31 14:30 1207次阅读

    七个经典的Arduino创意制作实例(转)

    手上有一块闲置的Arduino 开发板,某天,空闲的我碰上了闲置的它,准备利用它开发某物玩玩,就在网上搜索Arduino 的制作实例,搜索的结果有上百,从中挑选了七个资料齐全的Arduino 制作实例,在此分享此资源,希望Arduino 爱好者能共同探讨学习。资料下载:
    发表于 07-02 15:42

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

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

    网站建设服务的七个步骤

     网站建设服务的七个步骤  一,你要有一绝对稳定的空间,或是服务器。一稳定的空间,能够对网站优化起到很大的作用。网上商城制作服务器是最好的选择,但是服务器投资太大,刚开始建站没有那么多资金可以
    发表于 05-19 16:49

    PCB设计七个基本技巧

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

    UI设计规范

    UI设计师基础设计规范
    发表于 06-21 06:06

    七个单片机创意设计实例

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

    CPU设计师该去往哪里

    对可怜的处理器设计师表示同情。他们的工作以前非常简单。在每一半导体新工艺代中,每平方毫米的晶体管数量都会加倍,速度会有很大的提高,同时总功耗也会降低。设计师的黄金规则是“保持体系结构不变,在实现上稍作调整。”
    发表于 07-17 07:04

    为什么AD9226要七个周期才可以得到输出转换结果?

    AD9226为什么是七个周期才可以得到输出转换结果?
    发表于 09-17 04:36

    PCB中通用的七个技巧,提高效率必备

    搁置的DRC错误。”  Bob Tise是目前正在SunstoneCircuits公司上班的经验丰富的pcb设计师,他的认为:“你一定要抵抗住完全搁置DRC错误的诱惑,并遵循一开始就设定好的规则
    发表于 10-15 08:00

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

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

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

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

    PCB设计时应该遵循规则

    PCB设计时应该遵循规则 1) 地线回路规则: 环路最小
    发表于 12-12 14:48 1107次阅读
    PCB设计时应该<b class='flag-5'>遵循</b>的<b class='flag-5'>规则</b>

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

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

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

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