添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 设计分享 >

影响网站访客流量的七项网页设计方法(2)

时间:2014-11-13      来源:互联网     

  四、使用矢量图形作为响应式视觉元素

影响网站访客流量的七项网页设计方法-【科e互联】

 

  文字仅仅是网页设计的一角,图像也和文字一样具有重要意义。通常来说,图像采用JPG、PN和GIF等位图文件格式。

  而位图图像的问题在于两方面:

  1. 位图的大小是固定的,因此无法无损扩展以适应新的布局大小或分辨率,从而就要求添加更多图形内容适应移动端的视网膜屏等。

  2. 每次使用位图时,就会对你网站的加载流程提出HTTP请求。随着网站越来越多的运用图形,这样就会造成加载时间大幅度提升,更不必说呈现页面所需要的数据量大幅增加。

  解决办法:矢量图形。由于矢量图形基本就是运用数学方法呈现视觉元素,因此可以轻松扩展到任意大小、适应任意分辨率,同时不用担心图形质量下降。

  SVG是目前比较流行的一种矢量图形格式,很多网页设计师尤其钟爱于这种格式,因为其能够像很多其他标记语言一样实时调整样式和修改,并生成漂亮并且可以互动的效果。

  另外,矢量图形占用空间小,并可由浏览器直接呈现,从而也就不会产生外部资源占用。

  五、游戏化

  游戏化,当属最难应用的技巧之一。游戏化是指在设计中引入类似游戏的元素给访客带来互动感并在其进行导航时给予激励。

  游戏化通常以完成特定任务后解锁徽章的形式出现;在Treehouse等需要用户完成一系列课程的网站上,这一模式较为适用。但如果你没有课程或类似的结构怎么办?

  对于博客、电子商务类网站或其他比较标准的网页类环境下,游戏化可以采用优惠卷或折扣等方式在特定的情况下提供给访客。例如,博客可以在访客在Tweet上发了网站链接后提供免费的电子书下载,或者电子商务网站可以在访客浏览完全部产品目录后提供折扣卷等。

  这种小玩意有助于个性化访客的访问体验,另外,能够获得个别关注这种感觉对于培养用户投入和鼓励用户回头也非常重要。

  六、图像压缩:速度至上

影响网站访客流量的七项网页设计方法-【科e互联】

 

  网站加载时间过长是扼杀访客吸引力的头号凶器。在这个注意力范围短而广的时代,如果网站的加载时间太长,访客将会毫不犹豫的离去,没人有耐心等待页面缓慢的加载。

  随着网站变得越来越复杂,视觉效果越来越吸引人,加载时间也难以避免的会受到影响。幸运的是,我们可以采用多种技巧缓解这一问题:

  1. 减少内容

  2. 针对web优化图像

  3. 通过内容分发网络提供网站

  首先来说,很多设计师在网站发布时都愿意尽量减少网站内容。最简化可以从CSS和JS文件剥离所有留白、评论和冗余内容,仅留下能够较快加载的精简版本。

  同样,还有很多算法有助于减小网站的图像大小,同时不会影响视觉质量。你可以连续运行多种算法,另外,Image Optim(仅限Mac机)等应用可将准备图像的过程简化到一击即成。

  最后,网站还可以利用内容分发网络(CDN)以更快的速度分发文件。CDN能够通过遍布世界的多个服务器分发网站的数据,从而确保为访客提供文件的服务器是距离其最近的服务器。CDN能够给网页加载时间带来关键的影响,其通常用于防止规模较大的网站因世界各地数千访客同时加载而出现崩溃。Webydo等基于云的网站设计平台的众多优点之一,就是能够代替你处理这一优化过程。

  七、推送通知

影响网站访客流量的七项网页设计方法-【科e互联】

 

  在很多网站上,吸引访客的目标之一,就是如何在你发布新内容后让访客回头,这一点适用于博客、视频等等各式各样的网站。

  通常来说,设计师会使用各种表单让访客登记接收邮件通知。尽管这种方法仍然广为流行,但目前已经有了一种比邮件效果强30倍,而且吸引力远远强于邮件的新技术:浏览器推送通知。

  通过Roost等工具,设计师可以轻松实现浏览器通知功能,让访客在即便未打开你的网站时也能收到新内容提醒。

  目前,在最新的OS X上只有Safari完整支持这一功能,但Chrome和Firefox也会在年内推出推送通知支持,所以说现在是get这一激动人心新技能的绝佳时机。

  欢迎回到现实!

  上述的各项技术技巧在设计流程中都有着重要的意义,在你开始网页设计前应予以仔细考虑。

  保证网站反应迅速、美观且具有动态效果能够鼓励访客与你提供的内容进行更加全面的接触。目前市面上有很多工具能有效地帮助你设计或再设计出先进、诱人的网站,让网站的吸引力全面飙升。

  翻译:蒋灿

web前端视频教程
标签 网页设计
相关文章
web前端视频教程


最新更新

网页特效

web前端视频教程