UI设计中面性图标设计总结

　　图标在UI设计中占了一席之地，不同风格的图标会影响页面整体风格效果。主流的图标可分为线性、面性、线面结合3大类，之前跟大家分享过线性图标今天我就来跟大家聊聊面性图标设计总结。

　　1.图标的作用

　　事物的价值在于它的用途是什么，图标的用途是帮助用户理解信息，所以“识别性”是图标重要的价值之一。识别性可以分为两个方面，一是含义识别，二是视觉识别。

　　1.1含义识别

　　含义识别就是你的图标能不能被用户理解，在设计时要注意2个方面：

　　1. 要符合大众认知习惯，让用户不用思考就可以作出反应。

　　2. 选择真实世界中的物品为原型，使人下意识对图标有预期认识，降低学习成本。

　　1.2视觉识别

　　视觉识别主要是视觉层面对用户识别图标的影响，主要包括图标颜色和复杂度。

　　比如一组精致的图标缩小放在底部标签栏时，会不会因为图标内容过于密集而导致复杂呢?这种复杂就有可能造成图标的视觉识别障碍。

　　再比如面性图标比线性图标更被识别，如下图面性的图标是不是识别性更高一些呢。

　　因为人眼要花更多时间来识别线性图标，所以在实际应用中，一样的图标内容，线性图标在装饰性上效果更好。

　　2.面性图标常见样式

　　分析了市面上常见的图标之后，这里总结出了以下几种类型：

　　1、面性单色

　　2、面性多色

　　多色的处理方法有：

　　2.1 渐变

　　渐变可以提升图标质感，主要可分为弱渐变和强渐变

　　弱渐变一般在同色系中变化，更有质感

　　强渐变绚丽丰富大胆，常出现在一些运营活动或游戏界面

　　2.2透明度变化

　　2.3层叠

　　通过颜色的深浅变化，使得形状斜街处产生明暗变化，图标更有有层次感。

　　3、面性模糊

　　4、面性写实

　　下面是部分案例示意图：

　　1、面性单色

　　1.1 面性-单色-无彩色

　　1.2. 面性-单色-彩色

　　1.3. 面性-单色-透明度变化

　　透明度的变化，让原本单色的图标设计细节更加丰富。

　　1.4. 面性-单色-透明度层叠

　　1.5. 面性-单色渐变

　　1.6. 面性-单色-斜线渐变

　　1.7. 面性-单色渐变-透明度变化

　　1.8. 面性-单色渐变-层叠

　　透明度变化，UI设计中面性图标设计总结https://www.aaa-cg.com.cn/ui/2686.html叠加之后产生交错的负形，让图标增加了层次感和空间感，降低了厚重感。

　　2、面性多色

　　2.1.面性-双色-层叠

　　2.2. 面性-双色-渐变-层叠

　　2.3. 面性-底板渐变-透明度变化

　　2.4. 面性-底板渐变-透明度渐变

　　3、面性模糊

　　高斯模糊的效果，使图标富有层次感和空间感，也有较强的设计感。

　　4、面性写实

　　还是那句话，对于设计，一定要长期积累，细心研究，总结分析，形成自己的方法论，这样才能少走弯路。我也还在不断研究的路上，希望大家互相学习进步，加油!

　　好了，今天的分享就到这里了因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会发包含有关在该领域工作的更多相关文章。

UI设计中面性图标设计总结相关推荐

UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
如何实现UI设计中的情感化设计？
所谓的UI设计中的情感化设计,是UI设计师基于满足了产品的功能性和操作性之后,在了解产品逻辑.全面分析产品的前提下.设计出来既不影响产品功能,又满足了用户更高层次的需求和期望的一种设计.下面苏州学码思 ...
【UI】第七周图标设计（上）-CSDN就业班-专题视频课程
[UI]第七周图标设计(上)-72人已学习课程介绍本周主要讲解图标设计.在UI设计中,图标设计是必会的内容.在本周的课程中,会讲到各种图标的制作方法,以及各种图标的不同作用. 课 ...
UI设计中的Feed流设计指南
拿起你的手机,看看微博,知乎 ,今日头条 ,微信朋友圈....... 谋杀我们多少时间?它们为什么有这样的魔力?让我们来一探究竟吧. 从结构来看,这些社交和资讯类app中,都使用了feed流.feed ...
UI设计中顶部栏的设计要点
移动端顶部栏设计看似简单,其实在做界面时还是有许多细节值得我们注意的.今天我就针对UI设计中顶部栏的设计要点进行简单的说明,希望能更好地帮助大家理解这个组件. 一.移动端顶部栏样式及设计要点这里将移 ...
什么是UI设计中的情感化设计？
相信很多小伙伴们都知道UI设计.UE交互设计.UX设计,但是你们知道情感化设计吗?不知道也没关系,今天胡老师就和大家讲解一下什么是UI设计中的情感化设计? 情感设计是指如何创建能够唤起情感并带来积极的 ...
android recycleview长按多选_UI设计中Android和IOS设计差异总结
由于设计师.产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照iOS的规范进行设计,两端只做一套. 只做一套的会存在两个问题: 1.安卓用户的使用习 ...
中嵌套的页面如何操作父页面_UI设计中签到页面如何设计
签到,是一种人类行为上的规束,常常被用于一些会议和活动的中,经常被用来作为奖惩的依据.今天我就针对UI设计中签到页面如何设计进行简单的说明. 虚拟世界中的签到 – 从游戏签到,以领虚拟奖励,到购物节签 ...
企业VI设计中企业招牌的设计
企业VI设计中企业招牌的设计编辑:AGO(安可)品牌顾问在企业的VI设计中,企业招牌是指引性和标志性的企业符号,一般安置在企业大门的道路口.门口.店面.展示厅大门等地方.因而是观众第一个接触到的企 ...

UI设计中面性图标设计总结

UI设计中面性图标设计总结相关推荐

最新文章

热门文章