发布时间:2024-08-30 13:52:30 浏览量:201次
身为设计师,图标设计是一项必须掌握的技能,一个具有创意的图标,不仅可以吸引更多用户关注,还能向用户传达一种“高品质、大品牌”的信号。
图标设计作为UI设计当中重要的一环,承担着物品、动作、程式等等图形象征的过程,如果对于用户而言,这个对象或行动不明确,该图标就立刻会失去它的实用价值,并成为一个视觉干扰。
那么UI设计师在设计图标的时候,针对这些情况,该怎么处理呢,跟数艺君一起来看。
App 产品界面中的图标设计
功能图标在 App 中的应用场景
以手机为例,几乎所有界面都设有功能图标,尤其是个人设置界面和功能类别繁多的界面中,设置功能图标是非常必要的。在UI设计工作中,设计功能图标已经成为设计师的常规工作。而功能图标的设计水平也体现了设计师的能力。另外,在求职的时候,关于功能图标的设计经验和能力也是简历中的必备项。
不同的App产品,功能图标所占数量也不同。根据 App产品的性质不同,少则十几个功能图标,多则几十个。
如下图所示,优酷的分类图标设计得就非常有创意,在类别繁多的情况下依然能够保持良好的识别度,对颜色的使用可圈可点,将优酷的主题颜色——蓝和红体现得淋漓尽致。
目前,以线下服务为目的的产品越来越多,功能类别也越来越多,例如支付宝的功能分类,如果只使用文字会很难辨识,在这里,功能图标的意义就更加重要了。
设计功能图标时,新手往往会出现做得复杂、充满故事性、图形随意等错误,这是违背了功能图标的基本设计原则的。功能图标设计有3大原则,简洁、规则、统一。重点在于简洁,语义层准确,表达清晰,图形规则有序,线条风格统一。功能图标的重要设计精髓在于简单易懂。
32像素和36像素单位是App中常见的功能图标尺寸,我们知道,目前的触屏手机最佳范围是44像素,但是如果将图标充满44像素,会太过于饱满。常规做法是,肉眼能识别的视觉尺寸采用36像素,而肉眼看不到的切图点击范围采用44像素,这也是我们在设计功能图标时的一个技巧。
功能图标设计注意事项
1 圆角和描边粗细不统一
2 图形不规则,比如礼物的丝带
3 没有居中对齐,比如积分
1 图标极简
2 语义层表达准确
3 图形规则,逻辑严谨
4 风格统一,线条统一
功能图标设计的描边法
目前,功能图标的常用制作方法有两种,各有利弊。一是布尔运算法,该方法相对比较高级,特点是使用稳定并且造型变化空间大;二是描边法,该方法非常简单,适合轻量级设计,但是锚点过多,生成的图标在使用过程中容易出现问题,非常有局限性。描边法不是利用图层样式的描边来实现,而是使用截图中的工具。
36×36 尺寸功能图标操作实例
按快捷键Ctrl+N新建一个空白文档,大小为36像素×36像素。
新建一个“钱包”组,选择“圆角矩形工具”,在画布中单击鼠标创建一个圆角矩形,大小为36像素×32像素,“半径”为2像素,设置填充颜色。
热门资讯
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
2. 移动端UI设计中常见的5种APP界面类型,你get到了吗?
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型,帮助大家更好地了解UI设计的基本知识
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
想要了解iPhone6界面设计的尺寸规范吗?这里为您详细介绍iPhone6的UI设计尺寸规范,包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
8. Photoshop操作教程:自制电子印章 | PS技巧详解
想要学会制作电子公章吗?跟随本教程,详细介绍Photoshop操作步骤,让您轻松掌握PS技巧,制作精美电子印章。
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
学习平面设计要用到哪些软件?随着社会的发展,平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗?本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
1. 打开微信扫一扫,扫描左侧二维码
2. 添加老师微信,马上领取免费课程资源
同学您好!