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

这8个要点 能让你的网页首图抓住用户注意力

发表日期:2018-04-01 18:46聚圣源浏览次数: 本文关键词:网页设计师,第一印象

 

  编者按:Banner 是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

  网页设计师都明白,网页对于用户的第一印象是非常重要的,而网页给用户的第一印象很大程度上取决于网页的视觉设计。现在的网页虽然多种多样,但是出于视觉化设计的目的,大多会使用大图背景,或者超大尺寸的Banner。当用户一打开网页的时候,映入用户眼帘的Banner ,是影响视觉设计的关键因素,它有个专门的术语是 Hero image,我们通常称之为首图。所以,网页首图的设计需要特别用心的。

  网页首图不仅仅是一张漂亮的图片,它还应该是强大的视觉传达工具。谈情怀不如讲套路,今天的文章,我们就通过一系列最佳实践来为你展示首图设计的一些设计“套路”。

  1、一定要使用相关图片

  在挑选图片的时候一定要精挑细选。

  合适而好的图片能够提升整体体验,而不合适的图片选择则可能毁掉整个设计。在选取图片的时候,尽量选择贴合主题,内容一致,主旨和目的相匹配的图片,这样可以避免用户的预期和内容产生割裂感。就像讨厌标题党一样,用户会因为首图和内容的不匹配而对网站内容失去信任,飞速离去。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  这个首图的内容实际说的是贷款,但是配图选取的是毛巾,在信息传达上就存在不匹配的问题。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  这个网站主推的产品就是冰激凌,内容和图片的一致,也符合用户的预期。

  2、让首图成为核心

  首图是承载内容的重要容器。

  你想要让内容不同凡响,又能够从整个设计中脱颖而出,那么就要用好首图。在视觉上设计优秀的首图能够让用户每次打开网站的时候都为之驻足。

  在首图的设计上,苹果每次都为我们提供了最优秀的案例

  

这8个要点 能让你的网页首图抓住用户注意力

 

  小贴士:首图并不需要将所有的信息都呈现出来,相反首图应该是强调重点,将最突出的部分强化并呈现出来。

  3、拿出情感化的设计

  将情感融入设计,并且用情感来说法用户,才是首图的设计之道。只有能够触动用户情绪的设计更具有说服力。

  很多时候,我们使用创意也好,借助热门IP也好,精心打磨文案也好,也只是希望让首图能够让用户惊喜、喜欢、需要,最终是要通过它调动起用户的情绪。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  积极的情绪刺激能够更好的建立用户和你的网站之间的互动感。

  4、一定要高清

  图片一定不要出现模糊或者像素化的情况,虽然这是一个低级错误,但是很多时候还是难以避免。

  低素质的图片是非常容易让人产生疏离感的,在高清屏幕到处都是的今天,模糊不清的图片是无法接受的(专门的像素风是另外一种情况)。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  想要用户对你的网站拥有积极的情绪,那么图片的素质一定要有保证,高素质的图片能够让用户准确地获得信息,清晰的图片总能让人看着更加舒服。

  5、强化CTA按钮

  网页首图常常和行为召唤(CTA)按钮搭配着使用。由于首图配图通常在视觉上极其突出,但是搭配有行为召唤按钮的首图,其本质上是用来吸引用户,传递信息,并引导用户去点击按钮的,所以行为召唤按钮和视觉信息丰富的图片之间,不应该互相干预,而是通过设计,让CTA按钮更加突出,让图片处于辅助的位置,最终达到吸引、引导的目的。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  按钮的视觉重量应该超过图片的视觉重量。

  6、控制对比度

  对比度是任何设计中都必须注意的点,在设计首图的时候同样需要注意。

  首图中的文本和排版也需要用心设计,通常需要选择加粗且易读的字体。如果你的图片和文字叠加到了一起,那么需要注意背景的图片和前景的文字之间的对比,确保文本是能够被清晰分辨的。通常,设计师会在图片上叠加上一个半透明的有色图层来降低繁复色彩的视觉信息量和干扰。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  除此之外,你还可以使用Scrims 技术,这种网页技术能够识别文本,并且让图片和底层的图片之间构成对比,确保可读性。

  小贴士:如果你打算使用使用图文叠加的方式来设计首图,还应当注意让图片的主体部分是清晰可见,且能够被用户轻松理解的。

  7、兼顾不同的屏幕尺寸

  如今的内容都需要考虑跨平台、跨设备、跨平台的兼容和适配性,当你的图片出现在不同尺寸的屏幕上的时候,它是否能够正常显示,正确显示,并且符合不同平台、不同屏幕的显示需求。

  

这8个要点 能让你的网页首图抓住用户注意力

 

  这个时候,你应该多了解一下响应式设计:

  《浅谈思路!七个技巧帮你搞定响应式网页中的图片设计》

  《小心无大错!响应式网页图片库设计的九个注意事项》

  《腾讯干货!响应式图像终于有超赞的解决方案了!》

  小贴士:结合响应式设计的需求,你可以使用Cloudinary 这样的多尺寸图片生成工具,帮你生成符合响应式图片断点的图片。

  8、考虑使用插画

  在网页首图中使用插画能够赋予首图以个性。相比于图片,插画更加个性化,插画的内容更加自由,也更容易控制,从内容到技术均是如此。

  Dropbox 就使用插画来呈现、表达复杂的内容:

  

这8个要点 能让你的网页首图抓住用户注意力

 

  小贴士:当你打算在首图当中使用插画的时候,请尽量保持插画和整体设计之间的一致性,尽量让它们看起来来源是相同的。

  结语

  网页首图绝对是真个设计中最关键的部分之一。选取素质高,有趣的图片,同网站的内容结合起来,参考上面的这些最佳实践,你的网页首图应该能够更上一层楼。

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/wzsj/5206.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5386

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:649

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:648

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:633

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:627

相关文章

刚刚过去的6月,网页设计师们特...

如果要深究近期网页设计趋势的变化,这些变化更多是关于用户模式,色彩和排版设计的。但是不论是其中哪种,都牵涉到一些微妙的设计技巧和复杂的影响因素,将它们纳入6月的设计...

日期:2018-01-05 浏览次数:68

2017年最后几个月,网页设计师值...

如果你也一直观察网页设计这个行业,会发现它的变化确实非常快。设计趋势来了又去,年头流行,到年底可能就完全看不到了,还有一些设计手法,则在几年之间持续不断地发生变化...

日期:2018-01-05 浏览次数:62

最后一个月,这3个设计趋势是网...

正如同我们在之前所观察到的,今年所流行的设计趋势中绝大多数的都和字体排版有着密切的关联,哪怕到了年底最后一个月,设计师们都愈加倾向于使用漂亮的字体和出彩的排版让自...

日期:2018-01-05 浏览次数:69

腾讯高级交互设计师C7210的十年...

我所就职的地方(Blogbus)还没有 —— 那时就是“网页设计师”,职责包括主站和博客模板的设计与前端实现等等,印象里时不时还会有平面设计方面的内容。...

日期:2018-04-01 浏览次数:523

收入囊中!20个前端和网页设计...

我们常开玩笑说,不想当产品的设计不是好开发,而实际上多数的设计师、开发和产品都会在自己的领域深耕,为了技术、眼界和能力的进阶而不遗余力。不断的学习是这几个行业的从业者必...

日期:2017-06-30 浏览次数:5

随机推荐

我在ITUX做交互设计的经验感悟...

移动端网页设计如何打造优秀小...

记忆篇|从心理学理解交互设计...

腾讯高级交互设计师C7210的十年...

UX Designers:设计优秀的用户体验...

企业网站内部链接优化的小技巧...