全站搜索

如何给企业网站设计图标?

网站开发 330

打开手机,桌面上都是图标。打开电脑,桌面上同样有很多图标。但是,在很长时间里,网站其实没有很多的图标,有的网站甚至只有一个LOGO。但是,逐渐网站上的图标越来越多了。

 

网站为什么需要图标?

一个企业官网上,为何需要图标呢?我们认为有三个原因。

其一,响应式网站的出现。需要在较小的手机屏幕上呈现网站,就需要减少网站的信息量。而图形传达的信息量要超过文字,当占据的版面相同的时候。所以,响应式网站的图标要多一些。

其二,受到手机系统的影响。无论是安卓还是苹果系统,都是以“图标”作为入口的,图标是重要的识别方式。所以,自从智能手机出现之后,网站的图标开始增多。

其三,受到APP设计的影响。一些公司需要APP、网站、小程序等端口设计保持一致,所以,网站的图标数量也就增多了。

网站图标数量统计

我们发现,不同类型的网站,图标数量是存在巨大的差别的。我们对企业网站图标数量多少排列如下:

图标数量最多:商城类网站。通常来说,购物网站的图标数量比较多。我们分析认为,这其中有两个原因。其一是简单的图标,可以引发购物的欲望;其二是模仿原因。一些一线电商平台,都采用图标设计,而不是文字说明。

图片数量次多:企业官网。企业官网的导航、产品详情页、交互等方面,也会使用图标。

图片数量较少:资讯类网站。我们发现,新闻类网站、资讯网站,图标数量较少。

网站图标设计原则

网站图标设计其实属于“UI设计范畴”。而UI设计分为三个层次,一是拟物,简单来说就是“能看明白”,看到了图标,明白是什么意思;二是协调统一,不同图标其风格、颜色、背景、明暗的统一;三是情感传递,通过交互,能够产生较好的用户体验。

基于如上分析,我们来看看网站图标应该如何设计?

第一,能看懂。即,图标可以准确传达内容。做到这一点并不容易。以目前流行的“拟物化”图标设计为例,如果我们为“直播”设计图标,可以设计成一个摄像机或者电视的轮廓,这样用户基本能够看得懂,但是如果设计成为“一个眼睛”的轮廓,则传达的意思就比较模糊。

第二,要进化。图标需要根据消费趋势和用户群体进行变化。以电视图标为例,很多网站的电视图标是老式电视,但是对于完全没有见过老式电视的00后来说,可能会让其产生困惑。此时,就需要对图标进行更新和重新设计。

第三,要统一。如果是多个图标,图标的高光、背景、形态、风格要进行协调和统一,避免差异性太大导致的突兀。

第四,可说明。图标+文字说明,可以更清楚地阐释想要表达的内容,不能过于追求“极简风格”,而让用户看不明白。

上一篇: 下一篇:

相关推荐

  • 网页设计中的极简主义

    458

    这几年,许多设计趋势逐渐成为主流,其中极简风设计最为突出,在设计界占据一席之地,无论是在UI设计、家装设计,建筑、艺术、摄影、音乐甚至食物,极简主义正在被越来越多的领域所接纳,其核心的特征是简约而富有意义。  极简主义起始于二战后的艺术运动,极...

    查看全文
  • 内容为什么内容在网站制作中如此重要?

    413

    WEB设计大师尼尔森指出:网页设计最大的问题是,大多数人都是糟糕的内容创造者。 这就是为什么我们有专业作家、平面设计师、电影制作人、演讲者、音乐家和其他类型的媒体专业人士。 当一个普通人试图创造内容时,要么说的太少,要么说的太糟糕。   ...

    查看全文
  • 网站设计专题:小小的foot,大大的功效

    391

    网页的页脚,在整个网页版面的设计当中所占的比重比较低,一般不会引起别人目光停留。虽然它的比重很低,但是它是整个网站的末端,是网站的最后一个视觉点。一个网站无论上部做的多么的好看,多么的炫酷,如果在页脚设计的时候,给轻描淡写,一笔带过的话,那么整个...

    查看全文
  • 网站前端开发Swiper3轮播插件的使用

    437

    轮播图在网站中使用的比例非常之高,自己手写一个轮播比较费时间,而使用swiper(swiper3)轮播插件能很方便做出图片轮播效果,兼容性好,而且还支持响应式轮播。在项目引入swiper.jquery.min.js和swiper.jquery.min.css文件,html如图:js如图:   如此一个...

    查看全文
展开更多