• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 正在疯狂流行的等轴测图标,千万不要错过

正在疯狂流行的等轴测图标,千万不要错过

作者:CARRIE COUSINS 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含图标设计,等轴测图标,经验分享,设计趋势等相关知识,CARRIE COUSINS 希望在学习及工作中可以帮助到您

图标是几乎任何网站都需要的重要组成部分,无论是用来传递信息、导航还是用来装饰,图标和类似图标的元素都是一种富有吸引力的有趣的功能性元素。

虽然在过去的几年间,扁平化设计一直处于主流,但是现在越来越多的设计师开始青睐等轴测的图标元素。这一趋势不仅体现在网页设计上,在平面设计领域同样非常流行。

它指所有流行,很大程度上是因为它不同于传统扁平化设计的立体质感和逼真质感。同时,等轴测图标元素在设计细节上依旧使用的是扁平化的方式,这也使得它成为更优、也更好的选择。

等轴测图标趋势是怎么回事

其实等轴测的设计并不难理解,它是一种在二位平面中绘制三维物体的方法。等轴测图标是这种设计技法在图标设计中的延伸,这也是它最富有吸引力的地方。

等轴测图标受欢迎并不难理解,它形状突出,足够简单,而且还有纵深。它拥有平面设计该有的美感,在视觉上更有吸引力,也更易于用户理解。

绝大多数的设计师对于等轴测图标都抱有开放的心态,在设计的时候,绝大多数的设计师都会让图标和明亮的色彩结合起来使用,看起来也颇具有真实感和吸引力。

借助阴影和视角上的变化,设计师还能让等轴测图标更加具有层次感和视觉吸引力。不过在设计等轴测图标的时候,周围的环境元素应当做成贴合等轴测风格的迷你版本。

它是扁平化图标的自然进化

等轴测图标其实还算是扁平化设计的延伸,从根源上来说,是属于扁平化2.0 和 Material Design 的变体。元素从3D空间投射到2D平面之后,使用干净简约的线条来呈现造型。

通常,配色方案会来自扁平化设计。

等轴测图标相对而言更易于理解,并且具有设计师所喜欢的平面设计的特征。

如何使用等轴测图标

实际上,许多设计师并不只停留在使用等轴测图标,而是将它延伸到插画,甚至到更系统的设计层面上。

等轴测图标可以以几乎任何方式来使用,并且具有不同的视觉属性。

这种图标风格的好处之一在于,它足够简单,可以是静态也可以是动态,它足够小巧,对于网页而言也不会有太大压力。

等轴测图标的应用范畴非常广,它可以用作超大尺寸的按钮,作为插画,也能作为导航,还能为网页创造视觉焦点。

值得注意的事项

虽然等轴测图标很时髦,但是它并不一定适合所有的项目。

通常会认为这种设计太过于“卡通”,而在有的设计项目当中,明亮的配色会喧宾夺主,或者看起来太花哨,影响视觉信息的传达。在这种局面下,就需要小心了。

如果没有计划,使用太多的等轴测图标可能会让人觉得难以接受。

构建一套等轴测图标所需要花费的时间比普通的扁平化的图标更加耗时。有太多的立体化的细节需要考虑,如果方向或者细节出现错误,用户会很容易分辨出来也更容易感到迷惑。

由于等轴测图标的风格多变,许多图标合集可能会呈现出「过度设计」的感觉,设计师在这个时候应该仔细筛选,避免使用这样的图标合集。不论怎么说,恰到好处的设计始终是最理想的,而最合适的图标也始终是「隐形」的,润物细无声地存在于整个设计体系当中。所以,在选择或者设计的时候,尽量让等轴测图标贴合整体风格,不要喧宾夺主。

等轴测图标相关资源

如果你之前从未使用过等轴测图标,也未曾自己动手设计过,那么最好是找一套现成的等轴测图标。有许多现成的等轴测图标资源可以供你使用,你可以借助它们更快地完善当前的设计项目。

许多相关的图标合集都是矢量的,不仅可以响应不同的设计需求,而且也便于你进行修改和调整,这些资源大多是 AI 格式的或者 EPS,无损缩放。

下面是一些素质相当过硬的等轴测图标合集:

  • Isometric Arrow Icons
  • Isometric Kitchen Objects
  • Multipurpose Isometric Icons
  • Isometric Infographic Set Elements
  • Isometric SEO Icons
  • Cryptocurrency Blockchain Isometric Icons
  • Isometric Office Equipment
  • Mobile Communication and Multimedia Icons
  • Flat Finance Isometric Icons
  • Isometric Icons Bundle

如果你想自己动手设计,那么下面的资源不要错过:

  • Learn How to Create Isometric Illustrations
  • Isometric Design Inspiration On Dribbble
  • Video: Isometric Design for Beginners
  • 22 Illustrator Tutorials for Creating Isometric Illustrations
  • Video: Adobe Illustrator isometric action tutorial

结语

你想跟上等轴测图标的设计风潮么?那么现在就可以动手了,不要放过这些现成的资源,如果你愿意动手自己设计,也不难。

注意配色方案和拟真度的控制,它们会直接影响到整个设计的效果,多看看别人的设计和现成的图标合集,找到符合你的项目的平衡点。

「2018年设计趋势,一个都不要错过」

  • 《2018年,这10个LOGO设计趋势值得你关注》
  • 《超全面总结!2017年UI设计领域流行过这21个设计趋势》
  • 《掌握这12个移动端UX设计趋势,你就掌控了2018年》
  • 《这款独特的紫色,是为你指引2018年设计方向的年度潘通色》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 如何绘制功能性图标?来看资深设计师的全面总结!
  • 如何系统学习功能图标?来看资深设计师的全面总结!
  • 腾讯设计师总结的图标设计五维自检法
  • 正在疯狂流行的等轴测图标,千万不要错过
  • 超实用的扁平图标绘制终极指南!
  • 如何画好一组线性图标?来看这份新手科普总结!
  • 这个「以用户为中心」的图标设计法,恰好很多设计师不会
  • 超全面的图标基础知识总结
  • 腾讯设计师:如何系统地设计界面图标?
  • 如何找到改版的切入点?我用「品牌探索」这个方法!

相关文章

  • 2017-08-06WEB中文字体应用指南
  • 2018-08-23超实用!西文字体及排版的运用方法(附字体搭配建议)
  • 2018-08-23腾讯高级设计师:交互知识树系列之如何积累交互模型?
  • 2017-08-06谈谈对css属性margin的理解
  • 2018-08-23超详细的登录注册的业务逻辑流程梳理
  • 2018-08-23「从硅谷回国,我没有任何犹豫」: 专访 Airbnb 中国设计经理 Vivian Wang
  • 2017-08-06The Complete List of MIME Types(比较完整的MIME类型一览表)
  • 2018-08-23反馈机制这样设计,才能不让用户厌烦
  • 2017-08-06移动互联网时代:响应式网页设计已成为大势所趋
  • 2018-08-23想让作品从80分到100分?你需要这些包装作品的小技巧!(升级篇)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 进阶好文!如何把那么多经典的设计模型用起来?
    • 经典好书!从零开始翻译《Design Systems》:设计系统
    • 通常CSS错误及解决办法技巧
    • 免费高效!用 Paddy 让你的 Sketch 学会自动排版!
    • 网页设计的专业与非专业
    • div css命名规范 css class命名规则(符合SEO规范)
    • 浅谈网页中的字体的设置
    • 高手私藏系列!有哪些能快速提高PPT排版水平的技巧?
    • 25条div+css编程提醒及小技巧整理
    • 从设计指南说起,详解iOS系统组件分类体系

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有