1、网页图标设计WEB UI设计网页中的图标设计图标在网页设计中用途广泛,几乎每个网站中都存在着图标。通过这些图标,可以方便的实现视觉引导和功能划分。合理的运用不仅可以给设计增加亮点,也会起到非常重要的作用,它能带来额外的注解并且使设计里的对象和元素引起用户的注意,可为标题添加视觉引导、用作按钮、用来分隔页面、做整体修饰、使网站更显专业、增强网站交互性等等.1.图标在网页设计中的作用2.图标要与内容、其他图标、整个网站的视觉风格一致。3.图标要简单易懂1.图标在网页设计中的作用 视觉上分割内容:让内容更具有吸引力和可读性。经常被应用到网站的主体、列表、或者其他文本较多的元素中。效果突出,被广泛使用
2、。可以在网页设计几乎每个元素中都找到图标的身影:标题、脚注、导航条、列表;图标可以大幅提升页面中元素的浏览效果。作为概念的视觉参照物,快速引导用户:这在导航元素中最为常见(上图)有时候连文本注释都不需要。图标是优秀网页设计中不可或缺的部分,但如果使用不当或者图标设计的不到位,那么辨识度就很差,用户也难以理解。因此我们需要外观精致、意味深刻的图标。2.图标要与内容、其他图标、整个网站的视觉风格一致。将所有的图标设置为形状相同 图标系列应该保持视觉统一。对于一组风格不统一的图标,即使某款图标设计的再棒,也要放弃。视觉统一,关乎到整体设计。如何实现视觉上的统一,总结如下:使用相同的颜色或者配色使用相
3、同的配色 边界属性要一致,这组图标的设计充分运用了圆润的曲线,黑色构成轮廓,红色点亮整个设计,而白色则营造出负空间,设计互补而令人愉悦。边界属性一致效果要一致,比如说渐变、透明、阴影等效果。效果一致还要考虑图标的视觉风格是否与内容、网站的风格一致。视觉风格与内容、网站风格一致图标应该和网站整体设计相配 图标的视觉风格要与整体设计风格相似:像上图中的图标,与整个页面风格完美契合,提供了一种视觉上的和谐感。图标与网站整体形成鲜明的对比:当图标作为导航时,这种方法非常奏效,比如上图的社交媒体链接,更能够吸引注意力。3.图标设计要简单易懂 每个人都有每个人的见解,图像的解释也不是绝对的,可能一部分人能够理解这款图标,另一部分人就不能。但图像的传达能力比文字强,比如说上图中的图标,就能清晰的传达含义。案例任务案例进行之前请同学们回忆布尔运算知识案例任务OVER