商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 建站经验 >

漯河做网站:卡片式设计一定要避免的5个误区

发表日期:2018-01-19 21:45聚圣源浏览次数: 本文关键词:卡片式,设计,一,定要,避免,的,5个,误区,

 

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  近几年来,随着移动用户的不断增加,卡片式设计越来越受到人们的欢迎。一方面,卡片式设计可以轻松容纳多种不同类型的元素,将各种元素以整齐划一的布局呈现出来,提供良好的视觉效果,另一方面,卡片在调整高度和宽度上很是灵活,对移动端的兼容性很高,能轻松适应不同大小的屏幕,实现真正的响应式。这一点小飞在《解密网站设计潮流:为什么卡片式设计这么火?》中已经进行了详细的介绍。遗憾的是,小飞发现在实际的设计过程中,不少站长进入了一些误区,使卡片式设计的强大效用大打折扣。因此,小飞今天特意总结了一些大家在做卡片式设计经常会出现的5个错误,希望能给大家一点启发。

  1.卡片间距过大

  在理想的状态之中,每张卡片应该都是大小相同、整齐一致的,这就要求卡片上的各种元素要保持协调,但实际状况常常没有那么完美。在实际设计过程中,我们可能会发现这张卡片的标题太长,那张卡片的文字描述太短。当这些卡片在大屏幕设备上显示时,间距过大的问题就显露出来了。你可不要傻乎乎的认为这是"留白"的艺术,这种不恰当的间距往往不能做到"以无胜有",更会影响网站的整体排版,让布局杂乱无序,有损信息的密度,甚至还会妨碍访客们的浏览体验,这使得卡片式设计的优势荡然无存。

  遇到这种情况,我们应该怎么办呢?小飞总结了两个方法。其一,我们应该考虑卡片上的元素是否可以缩减:简练标题或描述文字是否会影响用户对重要信息的获取?尽量确保每张卡片在尺寸、涵盖内容上相差无几。其二,我们可以看看卡片式设计是否可以应用到砌体布局中。目前我们一般都是在栅格系统中使用卡片式布局,固定的格子设计更能保证网站的整洁,而砌体布局是指将网站中的元素自动填充在页面的空白区域,就像是墙上堆砌的石头一样。如果卡片式设计可以与砌体布局结合起来,卡片就自动适应空白区域,间距过大的问题也就不存在了。

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  2.一次性展示太多卡片

  对很多站长来说,多使用卡片填满网站就等同于充分利用网站的空间,尽可能给用户提供更多信息。其实,这是个错误的想法。在栅格系统的卡片式布局中,如果一次性展示许多张卡片,常会带来两种负面结果,一是用户被密密麻麻的信息墙吓到,直接退出离开,还有一种情况就是用户勉强浏览,但过多卡片带来的负担会严重影响用户的体验效果。

  和第一个误区一样,在遇到这种情况的时候,我们也要仔细考虑一番:页面上放置这么多的卡片有必要的吗?用户合理的阅读容量是多少?用户在浏览屏幕时可能的注意范围有多广?除此以外,小飞还有一个建议,我们可以给单张页面可放置卡片的数量设置一个限额,当数量超过这个范围时就会弹出提醒的对话框,防止我们无意识的犯错。不过这个方法的难度在于卡片的限额数量应该设为多少,这可能需要我们在自己的网站上进行测试,发现自己网站的规律所在。

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  3.卡片上行为引导太多

  熟悉卡片式设计的朋友们都知道每张卡片只是某个功能或内容的入口点,常展示一些摘要而不是所有细节,所以我们通常会在卡片上放置一些如"阅读全文"等其他链接,引导用户做出预期的行为。但是,在很多糟糕的卡片式设计实例中,不少人在卡片上设置了太多的行为引导,比如"阅读全文"的链接、"查看视频"的链接、CTA按钮、主页链接等等。小飞可以很负责任的告诉你:这么多的行为引导不会有助于延长用户在网页上停留的时长,增加网站流量或提高转化率,却会让用户更加困惑、手足无措。

  站长们在遇到这个问题时也要多想想每个行为引导的存在是否是必要的,或者可以按照不同的重要程度或类型将行为引导分类,按优先次序进行摆放,这样更便于作出取舍。

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  4.卡片上各种元素过多

  这个误区和卡片上行为引导太多有点类似,从更宏观的角度来说,行为引导可以归纳为元素的一种,但由于行为引导在网站流量和销量等方面扮演的重要作用,小飞特意将它拎出来讲了。现在我们来看一下元素过多的问题吧!卡片式设计广受欢迎的其中一个原因就是它很灵活,能够整合各种形式的内容: 图片、文本、动画效果、视频、按钮、链接等。但这并不意味着我们一定要将多种不同的元素一股脑儿放到卡片上,这样不仅不能给用户提供有用的信息,反而容易干扰用户,分散他们的注意力,让他们找不到重点。

  因此卡片涵盖元素的多少应该把握一个度。这一点可以通过对网站元素进行优先等级分类做到,将内容分为首要信息,次要信息等等,这样一来我们就能有目的的安排卡片元素。漯河为了做到这一点,我们还可以深入了解一下自身产品的目标用户群以及他们可能的喜好。

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  5.过度使用图片

  在卡片式设计中使用图片似乎已经成为了一种思维定势。虽然我们经常在卡片中使用图片、插图和图标等,它也确实能够增加网站的视觉表现力,是卡片式设计的最佳拍档。但我们可不能过度使用图片,不能为了图片而放置图片,卡片上图片的存在应该是有一定意义的。

  当我们在卡片上添加图片时,记得问问自己,这张图片是必要的吗?这真的能够帮助用户更好的获取想要的信息吗?或者说它反而会造成视觉上的干扰?最好的解决方法就是实事求是,先确定每张卡片上图片的真正需求,然后根据网站的整体布局探索一下卡片的最佳排版,与此同时也要注重内容的优先等级,思考怎样能让卡片的呈现更加平衡、更加清楚易懂。

  

漯河做网站:卡片式设计一定要避免的5个误区

 

  卡片式设计能够给网站带来很多益处,但这要求我们能够成功避免设计的误区。小飞今天介绍的这5个错误,大家一定要牢记,可不能掉进"坑"里啦!起飞页自助建站平台最近新增加了不少卡片式风格的模板,您无需绞尽脑汁考虑排版(起飞页的大牛们已经帮您想好了),只要仔细挑选自己满意的就可以轻松建站。很多模板上还使用了微妙的CSS动画,能让网站更加活泼、出彩,快来起飞页自助建站平台(http://www.qifeiye.com/?t_wd=a5)做一个响应式网站吧!

  

漯河做网站:卡片式设计一定要避免的5个误区
如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/jzjy/9891.html

网站设计案例推荐

热门文章

站长工具综合查询里面SSL证书不...

SSL证书不安全是怎么回事?但是点进去这个提示后,显示的是别人的tdk是不是被劫持或者被黑了?...

日期:2018-03-27 浏览次数:1881

简洁而实用的版权信息可增色网...

打开网站,人们自然会从上往下浏览,首先映入眼帘的一定是BANNER主视觉,然后是网站主体内容部分。相比较而言,注意到网站底部版权信息的浏览者确实不多,但这并说明网站版权信...

日期:2018-03-05 浏览次数:1873

网站设计需要注意的3点问题...

对于网站设计来讲会受到很多因素的影响,而且不同类型的网站,在设计时需要体现的元素也不一样,比如说对于一个企业网站更想体现出品牌以及产品的特点,主要是对产品、企业信...

日期:2018-02-12 浏览次数:1803

企业网站为什么要改版 改版选择...

网站改版,是每个建站企业必须面临的工作。相信也有不少站长问,已经做好的企业网站,为何还要大费周章重新进行改版设计呢?下面小编就来给大家说说,企业究竟为什么要改变,并...

日期:2018-03-26 浏览次数:1332

永城网站制作:模板建站不可不...

随着互联网建站尤其是自助建站热潮不断高涨,建站行业涌现出越来越多的自助建站平台,这些平台普遍都提供网站模板可选。...

日期:2018-04-30 浏览次数:931

相关文章

首页设计制作在网站建设中的重...

网站的首页是指我们输域名,打开网站后浏览到的第一个页面。无论我们印刷在名片上的网址,还是被搜索引擎收录的网址,被用户浏览最多的就是网站首页。所以,首页的设计制作在...

日期:2018-01-19 浏览次数:114

后台架构设计—数据存储层...

数据存储重要性: 数据是企业最重要的财产; 数据可靠性是企业的命根,一定要保证。 单机存储原理: 存储引擎:存储系统的发动机,它决定存储系统的功能和性能; 引擎类型:哈希存...

日期:2018-01-19 浏览次数:79

请指引我们前进的道路:全球著...

每个行业都存在着不少"领头羊",他们总是能够提出好的想法,带来新的改变,对该行业产生深远的影响。这就像摄影界的David Bailey,艺术界的Tracey Emin,他们都是自己行业的"大家",都...

日期:2018-01-14 浏览次数:76

教你一个方法!7步零代码制作响...

通过学习本套教程:①你可以轻松的零代码制作一个响应式网站。 ②你能够掌握AdobeMuse 2018 版本的所有响应式设计功能。 前言 AdobeMuse 2018,提供了制作响应式网页设计的功能,方便网...

日期:2018-01-14 浏览次数:67

HTTPS连接过程以及中间人攻击劫...

一 、HTTPS连接过程及中间人攻击原理 https协议就是http+ssl协议,如下图所示为其连接过程: 1.https请求 客户端向服务端发送https请求; 2.生成公钥和私钥 服务端收到请求之后,生成公钥和...

日期:2018-01-14 浏览次数:84

随机推荐

企业或者个人自己建网站,需要...

史上最全网站建设备案和不备案...

美国主机和香港主机的对比分析...

您的网站alt图片标签做对了吗?...

百度站长网站logo审核示例以及个...

如何利用情感化元素提升内容传...