一、什么是金刚区金刚区通常指的是 banner 或搜索框下以宫格形式排列的多个图标,数量上多采用1-2行,每行展示5个图标,再多会显得拥挤。大多数金刚区都可以左右滑动,以便查看更多的内容。如下图:
![网页设计 网页设计](/upload/pic13/20191030110622122212.jpg)
网页设计
为什么叫金刚区呢?这个名称来源于百变金刚,由于产品迭代或功能调整变更,金刚区可以很灵活的进行替换,就像一个百变金刚一样,故称之为金刚区。比如每到春节等重要节日,金刚区就可以很方便换上一身“新衣服”。如下图:
![网页设计 网页设计](/upload/pic13/2019103011070143143.jpg)
网页设计
二、金刚区的作用金刚区的主要作用就是把多种功能汇聚到一起,方便用户查看选择,同时起到导流的作用。
三、金刚区常见样式我粗略地把金刚区分为两大类,有底板的和没有底板的。有底板的通常用一个固定的形状再加上其他元素组成图标,更容易做到视觉上的统一,使页面看起来更整齐规整,同时对比强烈,更容易吸引注意力。而没有底板更难把握视觉上的平衡。
1.有底板1.1.底板形状常见底板形状有圆形、超椭圆形、圆角矩形、三种,归根到底都是大圆角、非常接近圆形,而很少见以方形作为底板形状的。这是因为相同尺寸的圆形和正方形,圆形的面积更小,在视觉上会展现出较大的空隙,不会显得特别拥挤,更容易聚焦内容,同时圆形具有很强的亲和力,适用于大多数场景。如下图:
![网页设计 网页设计](/upload/pic13/20191030110775217521.jpg)
网页设计
1.2.底板颜色通常采用邻近色或同类色,并添加渐变提高质感。底板使用丰富的色彩使得图标和页面对比强烈,更容易吸引用户的注意力。以贝壳找房为例,进入首页的第一眼,视线就被顶部的金刚区所吸引,如下图:
![网页设计 网页设计](/upload/pic13/20191030110829102910.jpg)
网页设计
1.3.构成元素底板上的元素有很多种,常见的有线性、面形图标、文字、实物照片、logo等。金刚区不仅要吸引用户的注意力,同时还要做到能明确表达它所代表的功能作用,所以尽量使用识别度高、一目了然的图标,而添加字体或实物照片作为图标,比较容易让人理解。如下图:
![网页设计 网页设计](/upload/pic13/20191030110867516751.jpg)
网页设计
2.没有底板2.1.线性图标线性图标在视觉上简洁、安稳沉静、有质感,大多数金融产品最常使用线性图标,更容易突出理智、安全可靠的情感,如下图:
![网页设计 网页设计](/upload/pic13/20191030110980868086.jpg)
网页设计
2.2.图形图标图形图标样式很多,常见的有扁平、拟物、2.5D等,可以展示更多的设计细节,增强视觉上的表现力,但是图标表意容易模糊,对文字的依赖性较大,而且更新迭代替换替换金刚区的成本较大,如下图:
![网页设计 网页设计](/upload/pic13/20191030111079447944.jpg)
网页设计
2.3.实物照片实物照片可以带来真实、可靠的感觉,表达清晰,用户一眼就能知道其代表的意思,同时使用实物照片替换金刚区时所花费的设计成本较低。
![网页设计 网页设计](/upload/pic13/20191030111052405240.jpg)
网页设计
四、划重点今天主要分享的内容是关于金刚区的一些思考,我总结了以下几点:
1.有底板的金刚区在视觉上更统一、突出,容易吸引用户的注意力;
2.金刚区使用圆形底板看起来整洁、不拥挤,且亲和力较强,使用场景广泛;
3.金刚区的图标要明确表达出他的功能作用,所以要使用识别度高、一目了然的图标。
(郑重声明:本文版权归原作者海盐社青山所有,转载文章仅为传播更多信息之目的,如有侵权,请联系我们删除;如作者信息标记有误,请联系我们修改。)
新闻名称:网页金刚区设计思考
网页链接:https://www.cdcxhl.com/news24/113524.html
成都网站建设公司_创新互联,为您提供网站营销、网站改版、营销型网站建设、软件开发、网站设计公司、外贸建站
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联