首页
限免课
实战课
免费好课
课程库
经验
问答
会员课程
首页 |经验 |ui |经验详情

UI设计师必须知道的图标拐角那些事

更新时间:2023-11-07

从容与母鸡

ui

3155

很多小伙伴在绘制图标的时候,是不是常常有那样的疑惑:图标该用斜角或是圆弧?多大的圆角度比较合适?这篇从图标的细节处下手,来聊一聊图标的拐角那些事儿。

为了更好地“统一口径”,以48px图标大小为例子,实例中提的各种各样圆弧值当然只是提议,并不是规范。图标的转角分成圆弧和非圆弧二种,而圆弧转角又分成「斜角转角」和「非斜角转角」。

直角拐角:当基本图型为正方形时,提议应用3X圆弧,当基本图型为矩形时,提议应用2X圆弧。当基本图型为较小(低于1/2高宽)矩形时,提议应用1X圆弧。

因此 ,是要依据样子独立考虑到,而不是所有一个圆弧值。

下图的实例:左边图标转角过小,稍显死板。

UI设计师必须知道的图标拐角那些事

非直角拐角:依据图标情景,一般情况下不管视角多少,默认设置均为1X圆弧;独特倾斜度的曲线图“转角”状况以外,依据logo设计必须独立考虑到。

下面的图左边图标转角的圆弧都过大,和斜角图标放一起便会视觉效果不平衡。

UI设计师必须知道的图标拐角那些事

曲率是带有圆角图形的边角度数,它分成外曲和内曲。

除非有必要,一般不容易独立设置图标的内折射率,并且内曲的折射率应该比外曲小,视觉效果上应融洽,防止图标看起来松垮。

UI设计师必须知道的图标拐角那些事

Material Design中提议,在图标的外观设计轮廊上应用 2dp 的圆弧半经(24dp规格下)。不必把描边的转角也制成圆弧(总宽不大于 2dp 的样子)。
转角的內部应该是正方形,不必把內部转角也制成圆弧。

UI设计师必须知道的图标拐角那些事

了解了图标转角的基本上特性,下面看一下圆角和直角图标在具体设计方案中的运用。

圆角图标

圆角图标给人安全性、感染力、年青的觉得,也是有绵软的一面。在各种社交媒体、电子商务、少年儿童、诊疗等领域很普遍。

直角图标

斜角图标给人认真细致、宣布、坚决干脆利落的觉得,也是有冷酷无情的一面。一般发生在各种理财投资的金融理财产品中,暗示着投资理财有风险性,项目投资需理智。


斜角图标

实际上倾斜角图标算不上是独立的一种,跟断开图标一样更合乎图标设计风格这一类。设计方案时必须考虑到的是一致的倾斜角长短、及其歪斜视角的一致。

图标转角危害着图标的气场,一致的圆弧半经是统一全部系统图标大家族的重要。感染力较弱的有正方形和三角形,而环形感染力最強,内置互动特性。但这并不代表着图标都选用圆弧,也不是圆弧越大越好。自然要融合商品的精准定位来考虑到,商务接待、高新科技、高档的领域商品更合适用有棱有角的斜角图标,传递靠谱可信赖的气场。而朝向大家的社交媒体、婴儿、女士类等商品更合适用圆弧图标,以突显其感染力。

版权声明 | 文章配图仅供学习参考,引用图片版权归属原作所有

                如有问题,请及时与我们联系,我们将第一时间做出处理



上一篇 下一篇

相关课程

ONLINE COURSES
  • 女生学计算机可以从事什么职业

    女生学计算机可以从事什么职业

    讲师:JennyZ

  • 设计类前景较好的专业有哪些

    设计类前景较好的专业有哪些

    讲师:奇思无止境

  • UI作品集怎么做

    UI作品集怎么做

    讲师:行动者帆帆

  • 元宇宙对设计师有哪些影响

    元宇宙对设计师有哪些影响

    讲师:奇思无止境

免费好课

FREE GOOD COURSES
MORE
  • Stable Diffusion - 2024全新AI绘画系统教学

    Stable Diffusion - 2024全新AI绘画系统教学

    1小时40分钟49秒

  • 品牌物料设计课

    品牌物料设计课

    3小时57分钟38秒

  • 网游手绘武器制作课

    网游手绘武器制作课

    3小时55分钟44秒

  • 游戏道具造型表现课

    游戏道具造型表现课

    3小时51分钟28秒

  • AI+UE5轻松实现科幻电影!

    AI+UE5轻松实现科幻电影!

    32分钟36秒

  • 游戏3d设计师模型基础课

    游戏3d设计师模型基础课

    3小时49分钟53秒

Copyright © 2015 - 2021北京云创科讯软件有限公司

京ICP备16013396号-1

经营许可证京ICP证161220号

课程咨询电话 18516802937

  • 在线咨询
  • 插件下载
  • 职业测评
  • 素材下载
  • 微信咨询
学习在线解答