企业网站建设技巧:图标的使用方法?

2020-09-15 16:32:10 栏目:技术学堂 查看()
    网站建设中为什么要用图标呢,原因有以下3种:
    1、收到移动端的影响:无论是苹果手机系统还是安卓手机系统都是以“图标”作为入口的,图标是重要的识别方式。所以,自从智能手机出现之后,网站的图标开始增多。
    2、响应式网站的影响:因为网站需要在较小的手机屏幕上呈现网站,就需要减少网站的信息量。而图形传达的信息量要超过文字,当占据的版面相同的时候。所以,响应式网站的图标要多一些。
    3、受到APP设计的影响。一些公司需要APP、网站、小程序等端口设计保持一致,所以,网站的图标数量也就增多了。
网站图标设计原则:
    网站图标设计其实属于“UI设计范畴”。而UI设计分为三个层次,一是拟物,简单来说就是“能看明白”,看到了图标,明白是什么意思;二是协调统一,不同图标其风格、颜色、背景、明暗的统一;三是情感传递,通过交互,能够产生较好的用户体验。
基于如上分析,我们来看看网站图标应该如何设计?
    1、统一:当你设计一个网站并谈论你的品牌时,你不仅应该与内容的基调或网站的颜色主题保持一致。但是在设计包括图标在内的网站UI元素时,也应该保持一致性。
图标也可以根据图标背后的用途进行分类。例如,取消、停止和确认按钮应该是不同的颜色。就像你可以把取消图标用红色,但确认用绿色或蓝色。
    另一方面,图标形状也会随着功能的变化而变化。例如,表单上的图标不同于导航菜单上的图标。一旦你确定了所有的图标和它们的颜色和功能的用途,应该记录他们。
网站建设
    所以如果是多个图标,图标的高光、背景、形态、风格要进行协调和统一,避免差异性太大导致的突兀;
    2、易懂。即,图标可以准确传达内容。做到这一点并不容易。以目前流行的“拟物化”图标设计为例,如果我们为“直播”设计图标,可以设计成一个摄像机或者电视的轮廓,这样用户基本能够看得懂,但是如果设计成为“一个眼睛”的轮廓,则传达的意思就比较模糊;
    3、能说明。图标+文字说明,可以更清楚地阐释想要表达的内容,不能过于追求“极简风格”,而让用户看不明白;
    4、能进化。图标需要根据消费趋势和用户群体进行变化。以电视图标为例,很多网站的电视图标是老式电视,但是对于完全没有见过老式电视的00后来说,可能会让其产生困惑。此时,就需要对图标进行更新和重新设计。
网站图标数量统计:
    通过对比不同类型的网站发现,图标数量是存在巨大的差别的。我们对企业网站图标数量多少排列如下:
    图标数量最多:商城类网站。通常来说,购物网站的图标数量比较多。我们分析认为,这其中有两个原因。其一是简单的图标,可以引发购物的欲望;其二是模仿原因。一些一线电商 平台,都采用图标设计,而不是文字说明。
    图片数量次多:企业官网。企业官网的导航、产品详情页、交互等方面,也会使用图标。
    图片数量较少:资讯类网站。我们发现,新闻类网站、资讯网站,图标数量较少。
    网站建设中,没有一个设计时简单的,包括每一个图标,当用户通过移动设备浏览网站时,如果一个图标距离拇指很远,那么拇指可能无法触及按钮。对于小按钮,用较大的拇指或其他手指来点击或轻击屏幕上的按钮会变得很困难。不正确定义的对比度会让用户很难找到图标,所以在网站建设中图标的使用也要遵循用户体验来设计。
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

郑重申明:某某网络以外的任何单位或个人,不得使用该案例作为工作成功展示!