1

APP设计中的9种图标类型

 1 year ago
source link: https://www.shejidaren.com/app-she-ji-zhong-de-9-zhong-tu-biao-lei-xing.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

APP设计中的9种图标类型

4月 17, 2023 发表于: 视觉设计. 评论

Sponsor
single-top-500x62-v6.jpg

UI设计师在设计图标时,我们需要考虑图标所具有的指示性和标识性。一个好的图标不仅需要具有视觉效果,还需要能够快速传递信息,易于识别和记忆。在平面设计中,线性图标、面性图标和线面结合图标是最基础的类型。针对不同的需求,我们可以采用简洁、复杂、拟物、扁平、华丽、淡雅、渐变或单色等特性进行设计,下面我们整理了APP设计的9中图标风格,设计师们可以学习这写风格的设计。

01、线性风格图标

1、线性图标:顾名思义就是以线的形式绘制而成。它的表达形式很多,同色的,渐变的,叠加的,断线的等等,但他们的统一特征是 用线作为基础元素去表达图标含义

APP设计中的9中图标类型

APP设计中的9中图标类型

2、线性开口图标:在线形图标基础上面,寻找一个缺口剪断,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小。

APP设计中的9中图标类型

3、色图标:用多种颜色搭配组成的图标。需要定义一个主色调,另外几种颜色作为辅助色点缀,颜色需要有主次区分。

APP设计中的9中图标类型

APP设计中的9中图标类型

APP设计中的9中图标类型

APP设计中的9中图标类型

4粗细线条图标:通过粗细来设计的图标样式

APP设计中的9中图标类型

02、面性风格图标

1、单色面性图标:由单个颜色组成的图标。

APP设计中的9中图标类型

APP设计中的9中图标类型

2、多色面性图标:由多个颜色组成的图标。

APP设计中的9中图标类型

3、渐变面性图标:的颜色从明到暗,或由深转浅,或是从一个色彩缓慢过渡到另一个色彩。

APP设计中的9中图标类型

APP设计中的9中图标类型

APP设计中的9中图标类型

4、透明叠加图标:通过图层颜色的叠加做出交叉图形,将颜色调整为邻近色,让图标更具层次感。

APP设计中的9中图标类型

5、微质感图标:通过设计体现图标立体效果,更真实,让图标更为形象。

APP设计中的9中图标类型

03、线面风格结合图标

1、线面混合:线面混合图标设计的方法可以增强图标的视觉层级感,使图标效果更加丰富,通常用于打造视觉调性。

APP设计中的9中图标类型

APP设计中的9中图标类型

2、色块偏移:在线条样式后面使用偏移色块来创建自定义感觉,为图标设计增加了额外的风格和个性。

APP设计中的9中图标类型

3、 线面结合:线面结合型图标结合了线性图标和面性图标的优点,既保持了面性图标的重量感,同时具有线性图标的精致、细腻。

APP设计中的9中图标类型

04、极简风格图标

极简风格秉承“少即是多”的理念。

使用简单、直接的元素,突出核心内容,提升设计的层次感,不但能够满足设计需求,而且能够帮助用户快速聚焦核心,节约时间成本,提升用户参与度与肯定度。

极简风格广泛应用在UI、web、平面、品牌、工业设计等领域当中。

APP设计中的9中图标类型

05、扁平风格图标

扁平化概念的核心含义是去除多余、厚重、复杂的装饰效果。

具体表现为,多余的透视、纹理、渐变和能制造一种效果的元素被去除,让“信息”本身重新被凸显为核心。

APP设计中的9中图标类型

06、手绘风格图标

手绘标志图标的随意性,把不经意的视觉效果自然地保存下来,尽量避免刻意为之的感觉。随意绘出的形态,能使人感觉到跃然纸上的自然能量与趣味,极具生机又很和谐

APP设计中的9中图标类型

07、像素风格图标

像素图标属于点阵式图像,这类图像的出现源于计算机屏幕的特性,早期的红白机和黑白屏幕手机由于分辨率因素均使用像素图标。像素图标强调清晰的轮廓、明快的色彩,几乎不用混叠方法绘制光滑的线条。

APP设计中的9中图标类型

08、MBE风格图标

MBE风格的图标可以说是剪影图标的延伸,图形色彩鲜艳、简洁、圆润可爱,它的原创作者是法国设计师MBE,MBE风格因此而得名。

MBE图标的主要特点为色块偏移填充、粗线条描边、断线。

另外MBE图标常用彩色小元素,如“烟花”“圆点”“十字”“圆圈”“星星”等进行装饰,制造活泼有趣的小气泡的效果。

APP设计中的9中图标类型

09、拟物风格图标

拟物设计是一种产品设计的元素或风格,指原有物件中,某些必需的形式在新的设计中已不再必要的时候,依旧模仿旧有物件的外观和使用方式。

简而言之,就是利用设计元素来模仿现实中的实物创造出虚拟的三维效果,并产生针对实物性质本身的联想,从而使体验者较容易地做出选择判断。

(设计达人注:下面截图的拟物风格图标应该是扁平化风格的,而拟物化风格请参考此文:40个逼真拟物化 iOS 图标设计作品)

APP设计中的9中图标类型

乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的”,而图标设计对设计师而言,更是一切设计基础中的基础。

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接 500-62-douban-gaogen-sheji-shuji-tuijian.jpg

赞助商链接

jianli-muban.jpg
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

Recommend

  • 16
    • 微信 mp.weixin.qq.com 3 years ago
    • Cache

    9种常用的机器学习算法实现

     简介 根据机器学习的任务或应用情况的不同,我们通常把机器学习分为三大类: 1、

  • 4
    • dockone.io 3 years ago
    • Cache

    Spring中经典的9种设计模式

    简单工厂(非23种设计模式中的一种) 实现方式:BeanFactory。 Spring中的BeanFactory就是简单工厂模式的体现,根据传入一个唯一的标识来获得Bean对象,但是否是在传入参数后创建还是传入参数前创建这个要根据具体情况来定。

  • 8

    码文不易,转载请带上本文链接,感谢~ https://www.cnblogs.com/echoyya/p/14555831.html 一般的方法此处也不列举了,还是有很多的,如双层循环判断是否相等,或新建数组比较...

  • 8

    要说哪个赛道“卷”得最厉害,K12教育必定榜上有名。日益高昂的获客成本,让很多教育公司陷入流量争夺大战中。如何在这样的环境中做到用户增长?本文作者将从三个方面进行分析,希望对你有帮助。

  • 9
    • zhuanlan.zhihu.com 3 years ago
    • Cache

    查找Mac序列号的9种方法

    查找Mac序列号的9种方法MacW教程MacW每天为大家分享软件教程和技巧。每台Mac设...

  • 4
    • www.91yunying.com 3 years ago
    • Cache

    盘点:9种K12教育增长获客方法

    盘点:9种K12教育增长获客方法 发布者: 91运营 2021-05-18 02:27

  • 9
    • my.oschina.net 3 years ago
    • Cache

    带你认识9种常用卷积神经网络

    带你认识9种常用卷积神经网络 - 华为云开发者社区的个人空间 - OSCHINA - 中文开源技术交流社区 摘要:在卷积神经网络中,通过使用filters提取不同的特征,这些filters的权重是在训练期间自动学习的,然后将所有这些提...

  • 7

    9种模糊文字效果.ai (含使用教程) 设计达人 爱设计,爱分享。 优秀设计资源...

  • 1
    • www.shejidaren.com 2 years ago
    • Cache

    这9种能力是UI设计师要必需懂的

    这9种能力是UI设计师要必需懂的 10月 24, 2021 发表于: 视觉设计. 评...

  • 2
    • www.androidchina.net 2 years ago
    • Cache

    9种高性能可用高并发的技术架构

    9种高性能可用高并发的技术架构 – Android开发中文站你的位置:Android开发中文站 > 热点资讯 > 9种高性能可用高并发的技术架构...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK