网站设计之扁平化图标设计方法简述

<!doctype html> <html> <head><meta charset="utf-8" /><title> 网站设计之扁平化图标设计方法简述 - 腾云网 </title><meta id="description" name="description" content="始创于2008年，智慧网络营销服务提供商，历经10多年，服务客户超万家，遍布国内600多个城市。" /><meta id="keywords" name="keywords" content="平面图标设计,扁平化设计,图标制作" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="/fresh/css/ML_index.css?v=1019" /><link rel="stylesheet" href="/fresh/css/ML_animate.min.css" /><link rel="stylesheet" href="/fresh/css/ML_swiper.min.css" /><link rel="stylesheet" href="/fresh/ML_font-awesome/css/font-awesome.css" /><link rel="stylesheet" href="/fresh/css/ML_siteTemplete.css" /> <script src="/fresh/js/ML_jquery.min.js"></script> <script src="/fresh/js/ML_swiper.min.js"></script> <script src="/fresh/js/ML_wow.js"></script> <link rel="stylesheet" href="/fresh/css/innerStyle.css" /><link rel="stylesheet" href="/fresh/layui-v2.7.6/layui/css/layui.css" /> <script src="/fresh/layui-v2.7.6/layui/layui.js"></script> <script src="/fresh/js/api.js"></script> </head> <style> .gmlc { height: auto !important; } </style> <body style="background-color: #f4f4f4" class="siteTempleteBody"> <script type="text/javascript"> gethead(); </script>  <div class="M_inbanner"> <img id="link" src="" /> <script type="text/javascript"> var link = getpicimorpantion(12); link = JSON.parse(link); $("#link").attr("src", homeurl + "/" + link.Path); </script> </div>   <div class="main_body">  <style> .on { background-color: #e9eaee !important; color: var(--main-color) !important; border-bottom: 3px solid var(--main-color) !important; } </style> <div class="main_left"> <ul> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow1.png" alt=""> <img class="s_img" src="/images/know1.png" alt=""> <span>新手上路</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/help/162.htm">建站流程</a> <a href="/register">注册会员</a> <a href="/News/195.htm">使用教程</a> <a href="/findpwd">找回密码</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow2.png" alt=""> <img class="s_img" src="/images/know2.png" alt=""> <span>在线付款</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/online-pay">在线付款</a> <a href="/help/163.htm">转账汇款</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow3.png" alt=""> <img class="s_img" src="/images/know3.png" alt=""> <span>相关服务</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/News/170.htm">常见问题</a> <a href="/help/193.htm">备案须知</a> <a href="/help/173.htm">服务条款</a> <a href="/help/248.htm">投诉举报</a> </div> <li class="main_left_selected"> <div class="L_nav_left"> <img class="r_img" src="/images/iknow4.png" alt=""> <img class="s_img" src="/images/know4.png" alt=""> <span>新闻动态</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" style="display: block;"> <a href="/News/171.htm">网站优化</a> <a href="/News/224.htm">建站经验</a> <a href="/News/174.htm">网络营销</a> <a class="on" href="/News/238.htm">网页设计</a> <a href="/News/237.htm">技术文章</a> <a href="/News/281.htm">系统公告</a> </div> <li > <div class="L_nav_left"> <img class="r_img" src="/images/iknow5.png" alt=""> <img class="s_img" src="/images/know5.png" alt=""> <span>关于我们</span> </div> <i class="fa fa-angle-down"></i> </li> <div class="main_left_drop" > <a href="/aboutus" title="关于我们">关于我们</a> <a href="/about/200.htm" title="人才招聘">人才招聘</a> <a href="/about/202.htm" title="隐私保护">隐私保护</a> <a href="/contact" title="联系我们" target="_blank">联系我们</a> </div> </ul> </div> <script> $('.main_left ul li').click(function (e) { e.preventDefault(); var num_li = $('.main_left ul li').index(this) $('.main_left_drop').eq(num_li).slideToggle() $(this).addClass('main_left_selected').siblings().removeClass('main_left_selected') $('.main_left ul li i').eq(num_li).toggleClass('rroo') }); </script>   <div class="main_right"> <div class="main_right_title"> 网站设计之扁平化图标设计方法简述 </div> <div class="main_right_box"> <span id="lContent"><p style="text-indent:2em;">界面趋向于扁平化，那么除了界面还有一些图标扁平化的设计应该怎么设计呢？大同小异，界面设计只是在整体上的设计，而图标设计上，风格一致，只是在设计的过程中更为精致，要在一个图标里面表达内容，也是让设计师头痛的一件事，而扁平化设计比较注重是图标的简洁和表达，而一些基本的设计方法除了能够简约之外，很重要的一点是能够表达清晰，在理性和感性之间的表达出极简主义的精髓和魅力。有些人说扁平化图标就是实物的剪影，小编不否定也不肯定，毕竟它也不是单纯的剪影，而扁平化很重要的是线和面的应用，此外还有颜色的运用。</p><p style="text-indent:2em;">扁平化的图标大致分为纯粹的平面设计，折叠设计，轻质感设计等等，这一类的风格其实比较容易跟一些传统的中国剪纸风格混淆，腾云建站认为这样混淆其实也是会出现的，毕竟很多情况下确实有一点相似。正经的说大家都是平面的，对于扁平化的图标实现，其实还有些流行使用二维或者三维来表达装饰，组合起来的画风也是别有一番风味，但是更多的是要灵活运用颜色，把效果发挥到极致。例如纯色调的图标设计，这种图片比较考究，毕竟是统一色系的进行搭配，容易吧图标搞砸，但是却更具有简单抽象、易于接受等特性，有些设计会偏向于“线”的刻画，精准到位的设计会给人一种清新脱俗的感觉，另一种会比较倾向于“面”的设计，把握大局，给人大气的感觉。这一类的纯色图标设计清新典雅，不少的界面里都能够看到他们的踪迹，而且具有别具一格的现代气息，更为人们所喜爱。</p><p style="text-indent:2em;">设计上关键还是细节设计。从前的实物化设计是追求细节上的相像，而扁平化图标主要是轮廓上的绘制让人感觉简约，当然也不是没有细节，细节主要是体现在轮廓线条的设计。绘制过程可以根据自己的洗好和设计进行融合，每一笔越细致更会凸显精细和典雅，虽然去繁的过程看起来很简单，但实际操作却不然，要取实物其中的精华和亮点，同时能够传达出准确的信息，这也是一个比较困难的过程。在一般的绘制基础上，应该懂得抓住事物的关键点，运用几何秒回出相近的图形，当雏形出来之后，就可以根据自己的创造想法调整线条，定型，对比调整，图形内部要讲究调整比例的结构。在制作的过程中应该注意轮廓、拐点、斜线等等的会不会有发虚的现象，出现这种情况都会给人感觉不大好看，技术不过关的感觉，小编这里有一个小技巧：双层叠加，这种效果往往能够避免一些发虚的感觉。新手一般很容易犯的一个错误就是图标最后会变得模糊，如果发生这种情况，首先要检查是不是因为使用了矢量绘制，这是一个不良习惯，注意避免。</p></span> </div> </div>  </div>  <script type="text/javascript"> getfoot(); </script> </body> </html>

CINXE.COM

网站设计之扁平化图标设计方法简述 - 腾云网