高冷风格网页设计(网页风格创意设计)

编辑 | 苏苏

授权 | 胡晓波工作室 （ID：ziyou-design）

快人一步，掌握2023图标设计趋势。

图标是产品设计重要的组成部分，我们 可以通过图标增加页面效果，让页面更容易被记住。 随着时代发展，图标的设计趋势每天也在推崇出新，今天我们来分享下2023年一些图标趋势。

▍3D图标

什么图标会在2023年流行， 一定少不了3D图标。

3D图标能让界面更容易抓住用户注意力，它的细节更多，更能体现创意想法。如上图这组图标，每个图标里都有很多故事，并且这类型图标，大多数参考生活里面物体，用户也容易理解。

3D图标非常灵活，可以根据需要增加各种细节，并且能运用到各种领域。上面B端场景图标，让很平淡的表单场景 页面瞬间变得生动起来。

3D图标因为视觉比较重，所以如果你页面本身就比较颜色多，很花哨，那就要慎重使用。另外就是如果我们页面需要用户更专注内容，比如阅读产品。那么3D图标也会很抢内容，所以运用时候一定要克制。

上图这个案例将3D图标很好的运用进去了，页面显得很精致，图标和内容贴合度很好，整体的视觉风格也比较新颖，这种效果用在产品页面，或者项目改版都特别好。

3D图标和普通图标设计流程还不太一样，一般前期先画草图，把3D每个元素构思清楚，再去软件里面画，同时对软件有些要求。

但是整体的效果呈现，确实是比扁平化图标看着更有吸引力，更容易让用户理解。所以2023年3D图标 这个趋势一定不能忽视。

随着这两年3D技术的流行，3D图标不仅要求是静态的，有时候也要求你做成动态的。

对于设计师造型能力，设计想象力都是一个跳转，只能说现在做UI设计师是真卷呀。

在UI里面，3D图标运用上去就特别新颖，相对扁平化给人更活泼，更灵动。很自然，特别适合一些年轻的产品。

在一些韩国APP设计中，能看见设计师很早就在页面中去尝试3D效果，配合简洁的页面，让页面非常焕然一新。

这效果一放，逼格拉满，同时 也和扁平化风格瞬间拉开了差异化。

▍手绘图标 ‍‍‍‍

如果你希望你的产品有一个独一无二的风格，那么这个图标趋势值得研究，你可以自己画一套手绘图标，然后把他变成矢量的。这种图标这种手绘感，非常有个性，而且很容易被你用户记住。

无论用在网站，还是空白页，还是当插图都是可以的，你可以改变线条，粗细，形状，通过这些调整，然后找到符合你们产品调性的图标。

也可以做成贴纸周边去运用，特别有亲和力，让品牌也生动起来了。

手绘图标也可以增加色彩，让它个性起来，独一无二起来。

这样一整套图标，能让页面特别活泼，当然APP整体调性得简约，这样才能和这个风格匹配。

这样的效果用在引导页，首页登录效果都非常的nice，真人搭配一个手绘效果图形，也会给人很特别的感受。

设计效果特别新颖，图标也很有趣味性，手绘的效果也恰到好处，和整体页面简洁风格搭配起来，特别精致。

韩国饿了么，整个主风格就是用的手绘，手绘的美食图标，和手绘的地图，是不是有点像在日本动画片的感觉。因为本身在韩国使用外卖大多数也是年轻人，轻松有趣的设计语言让人眼前一亮。

▍厚重的图标

2023年线条图标可能会成为过去式了，到了2023年，把线条加粗的图标可能会成为一个新的趋势。这样的图标更容易被用户注意到，也更容易点击。

苹果原生图标细的，可以理解为系统图标。那么你的界面设计成厚重粗的图标，用户会感觉更有新鲜感，当然厚重的图标你也可以做成填充的。但是要注意这样的图标也是要有技巧的。

厚重的图标，对于线条厚度，留白空间很重要。有时候你如果留白空间不合理，这一套图标就毁掉了。

所以新年第一步，做视觉改版，记住这个趋势，把你们很单薄线的图标，优化的更厚重稳点，当然这个也要看整体页面风格一起调整。

厚重的图标，在页面里面能引导视觉注意力，如果图形很细，有时候会让页面很飘，让页面看起来特别散。

▍2.5D图标

2.5D大家都不陌生，就是在扁平化风格下面，去创建立体的效果，让图形有3D感，但是相对于3D视觉会更轻一些。今年这个风格还会流行，并且在大量产品中会被用到。

‍‍‍‍‍

韩国滴滴，整套图标都是采用2.5的风格，看着非常的高级，整体图标采用黄色和蓝色配色，非常醒目。同时图标都是带一点点角度的立体图形，整体显得很独特又年轻。‍‍‍‍‍‍‍‍‍‍‍

在一些Banner小插画的图形上，也是用的这种立体图标，整体页面风格非常一致性，同时品质感很高。

设计师可以通过透视，色彩，投影加上形状工具去创建一个立体效果。可以用的场景还特别的广泛，背景图，占位空白图都可以运用。

但是需要注意，2.5的图标也要注意细节，图标面积越小细节越少，如果图标面积越大，细节越丰富。如果图标很小，细节太多会显得很琐碎。如上图因为面积很大，所以图标可以加很多细节，车上还可以画各种图案，元素。

这一款金融工具产品，用2.5D图标来做引导页面，传递稳重感，并且图标处理的很利索，干净，很有细节。特别值得学习。

一点轻量化，带点角度的2.5D效果，很多设计师能驾驭，它不需要我们用3D软件去建模渲染，通过sketch和AI都能轻松做出来，这个趋势在今年也备受关注。

▍极简图标

这种图标风格代表了「少即是多」的理念，简单的元素，砍掉很多细节是今年流行重点。在很多优秀设计里面都能看见。这种图标设计核心是：表意精准。能用一个元素表达，不要用多个元素，不要为了细节而细节。

‍‍

这类图表对于图形概括能力有一定要求，要用尽量少的元素传递你图形的含义，从一开始用户看见图标就能理解你想表达的意思。

图形非常简单干净，让人一目了然，没有多余的元素。化繁为简是它表达的核心。但该有的细节都要有。

图标样式你可以加上拼色，让它有个对比，效果更有层次。

也可以是一个简单的色块展示，也很舒服，颜色上面大家可以多去大胆尝试。

▍带颜色形状的图标

如果你想用线型图标，但是觉得黑色有些单调，想加点创意，那么就可以在背后加点形状，比如圆形，方形，然后加一个颜色，这样细节就会增加很多。

比如这组图标，设计师在每个图标后面增加图标轮廓几何图形，这样会让图标有两层效果，看起来更有层次感，也更加活泼。

handse的这组图标，背后的几何图形非常有个性，加上图标本身有方向性，让图标显得很活泼很生动。

带颜色形状的图标适合于产品比较年轻化，用户人群年轻人，比较追求个性的产品调性，会让页面充满灵动力。

通常填充的颜色都当作背景，你可以取图标一个小局部，比如笔的笔杆部分，比如优惠券券的部分。这里很多细节可以尝试，但是有一个前提就是基础图形得好看。这个趋势也会在2023年被大量广泛用到。

▍渐变图标

渐变是这两年的一个趋势，无论UI、平面还是品牌。渐变让扁平变的有趣有变化。也能在一堆纯色，扁平设计里面脱颖而出。今年很多公司也开始把渐变加图标里面了，像像 Adobe 和 Instagram 这样的公司已经加入了这一潮流。

渐变的图标能让页面潮起来，增强图标品牌感，如上图图标，运用到暗黑模式就特别适合。

你也可以在渐变里面增加一些厚度和立体感，让整体色彩丰富起来。

也可以增加一些磨砂透明效果，让图标丰富起来。这些细节大家都可以大胆尝试。

如果你感觉你的图标缺少点创新，加点渐变，加点磨砂效果，可能效果会瞬间不一样。

这两年随着iOS暗黑模式的运用，这种渐变风格在深色底上运用就更游刃有余了。所以这个风格大家在项目改版和作品集改版都可以大量去尝试。

▍几何抽象图标

几何抽象风格顾名思义，就是用非常简单的几何图形去做图标，和2.5D相反，它需要营造一些抽象空间，才能更有吸引力。如上图的一组几何抽象图标，第一眼可能不知道什么意思，但是仔细看，每个都有自己独特含义

几何抽象图标，它不会用一些大家生活熟悉的物，但是图标都会用一些抽象几何图形组合，通过色彩叠加，渐变颜色方向运用，形成一些空间感。比如上图这个图标，就通过渐变形成一个不可能的空间。

这类图标用在LOGO里面也是合适的，非常简约高级。今年大家如果做品牌可以大胆试试。

颜色大多运用这种路径渐变，让它有一种流动感。

比如这组天气图标，也是很高级，简单的几何图形就把天气的变化隐喻进去了。

抽象图标因为设计比较大胆比较前卫，所以用色要求比较高，配色一定要高级，有特点，特别是渐变的层次感要有。

— 点击图片查看更多视觉新意 —

今天的文末福利：

赠送大家【 1000+款几何填充底纹，AI格式】 感兴趣的小伙伴可以都拿去！

领取方式如下：

1.首先在文章底部点个赞 和 在看

底纹，小编会 将下载地址发给你 （小编不是机器人，回复会慢一些，大家稍等 ）。

提前加好友，朋友圈每日放送更多有价值的设计资源

关注设计圈视频号，获取更多有趣有料的设计知识

▼

#进设计群#

设计圈交流群：仅对星标“设计圈”公众号的用户开放。添加上方领福利的小编微信备注「设计群」加入。