扁平化后台模板html(扁平化 css)

　　网页设计任何时候都是每个企业都重视的宣传渠道，进入网站的第一印象很大程度上决定了用户是否继续探索你的网站。很多网站虽然也算图文并茂，但缺乏让人惦记下去的吸引力，在这个时候，不妨添加一些图标元素，图标可小可大，可黑白可彩色，可扁平可复杂……总之，有效使用图标可以大大提高设计项目的可用性和视觉价值。下面，秒秒学小编就为你详细解说图标在网页设计中的作用和用法：

　　1. 增强视觉效果

　　网站上有趣的图像对增强视觉效果有帮助，但如果是正式或者权威的图片，可以使用图标来增强图像的内容，提供额外的信息，并提供交互提示。

　　以下面的牙科诊所为例(诚然，图片比较刻板)，这样的设计就很新鲜和界面友好。头像旁边的简单图标是个新选择，注意外环中微小的牙齿元素。左侧白色部分的小三角图标也很吸人眼球，网站的其余部分也使用了很多其他小图标以及导航。

　　2. 创建交互体验

　　图标不需要有特定的展示位置来鼓励用户交互。图标实际上可以是驱动交互性的元素。匹配图像和视觉效果，使元素在屏幕上移动。具有图像或其他背景的图层图标来创建一个有点意外的元素。

　　例如下图的葡萄酒网站，飞机图标沿着屏幕上的箭头移动，当用户鼠标滚动到屏幕的该部分时，每个线条图标将呈现为一幅画，动作简单，经典，高效。

　　3. 使用动画

　　图标不一定是静态的。但是图标的动画最好与图标本身的内容相关。运动不应过快或过慢，取个能产生兴奋的中间值。

　　例如下图的网站，该图标是随处可见的灯泡，但带有个性化的印记。注意灯泡的内部是一个火焰，然后有一个有趣的悬停动作，因为灯泡弹跳与漩涡。此外，灯泡周围的圆圈图案轻轻地移动，并且对鼠标悬停模式做出响应。

　　4. 创建图标集群

　　同样风格的图标的群集可以产生有趣的视觉影响。当你缺乏视觉聚焦时，可以考虑成排的图标。图标可以作为链接或只是独立的图像。群集可以只包含两三个图标，也可以包含三个以上图标，与内容相匹配。如果你喜欢自定义图标，也可以自己设计。秒秒学有专门的教程，教你如何设计图标，案例经典，即学即用：

　　《网页图标设计自学教程》

　　https://www.miaomiaoxue.com/show/bookshow/aabe88fc58ecaa900158f1985f6606c2.html?sh

　　5. 结合时尚元素

　　使用图标可以体现风格的灵活性。一旦确定了一个项目的设计风格，就能创建一组符合该视觉色调的图——从线条艺术，草图式样，平面切割设计到精美的微型艺术品，任你发挥。像目前最流行的扁平化风格，秒秒学也有专门的教程，教你如何制作：

　　《扁平化图标设计》

　　https://www.miaomiaoxue.com/show/bookshow/aabe88fe567c8e7c0156b6a9d9282eea.html?sh

　　例如下面的网站，扁平化的图标具有清晰的排版和明亮的色彩，呈现出迷幻的科技感。

　　6. 变异化设计

　　通常图标设计是标准化的，但是有些情况下，你可以对图标改变颜色，调整形状，甚至重绘图标的样式，这种变异会吸引人们的目光，凸显某种你期待发生的表现。

　　例如下图的网站，标题采用了充满童趣的手写字体，与网站要推介的婴童产品相匹配，更加凸显了产品的特性。

　　再例如下图的食品网站，在整个设计中使用了素描风格，与产品“手工制造”的概念相呼应，让人印象深刻。

　　当然，网站设计中图标的使用还不止小编今天说的这些，你可以加设计裙551750749和设计同行们一起交流，里面不但有海量设计资源，还时不时还送个惊喜，赶快加起来吧。

　　————————————

　　更多秒秒学信息：