详细解析网页浮动条设计的细节体验

2016-02-16 23:54 0 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的详细解析网页浮动条设计的细节体验教程,一起来看看吧!超容易上手~

【 tulaoshi.com - 平面设计 】

顾名思义,浮动条是在页面沿一定轨迹浮动的表现形式。

不再固定在某一指定位置,而是随鼠标拖动而动,巧妙的设计会使得在不妨碍网友浏览的同时,满足其增加曝光率的需求。其特殊的表现形式与传统的形式相比更能聚集网络访客的眼球,使得其影响力更深三尺。但是过度的曝光不加思考的一味所有页面都用浮动条或者叠加大量功能入口,有可能造成用户使用上的视觉干扰和产生厌烦的心理。

可用于浮动条上的功能主要有回到顶部、在线客服、用户反馈/调查问卷、分享。

回到顶部

可以帮助访客在浏览页面时,尤其是页面底部没有导航的网页,重新找到导航,或者重温一遍网页。主要用于页面比较长,需要回到顶部进行一些操作。

在线客服

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

基于网页的即时通讯工具,它不需要安装任何软件,只需要在浏览器窗口就可以进行实时交谈。常出现在用户在流程中比较容易产生疑问的页面。

用户反馈/调查问卷

想倾听用户对网站或业务的想法和期望,使用这些信息来改善最常使用的产品和服务,解决用户在使用中的问题,更优化的实现用户期望。用于新业务上线,改版,AB testing

分享

使浏览者可以方便的将网页分享到一系列SNS站点。通过分享按钮,网页将更容易被百度搜索引擎所发现,从而有机会带回更多的流量。同时也可以增加互动,拉近网民与网站的距离。常出现在活动页面,产品详情页,特色版块等。

综合携程网站现状,我的建议是:

全站首页和机票、酒店、高铁频道首页都比较短,内容较密集。用户还在建立网站印象阶段。不建议放任何浮层。

度假的首页及二级页面都比较长,且底部也无导航。建议增加回到顶部,可以帮助用户浏览。

惠选、团购等携程的活动版块及特色产品。建议增加分享按钮,吸引用户,增加网站流量。

预订流程中各个功能的使用大致如下图:

详细解析网页浮动条设计的细节体验,PS教程,图老师教程网

目前网上的浮动视觉样式、位置并不统一,也没有任何的逻辑。看了一下其他的网站,也大多如此。

详细解析网页浮动条设计的细节体验,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

我个人比较赞同的浮层设计是全站统一,局部变化。不要各个页面都杂乱无章,也不要完全一味的追求所有页面功能设计一模一样。

综合研究发现,我定义的浮层规则是:

回到顶部

业务相关页面:当业务相关的版块页面长度超过两屏,则显示浮层。

流程相关页面:需要用户回到页首进行操作功能的,页面长度超过两屏的,显示浮层。

在线客服

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

业务相关页面:当特色业务相关的版块上线时,用户需要培养习惯时,则显示。

流程相关页面:用户在操作过程中容易产生疑惑,错误的页面,显示。

用户反馈/调查问卷

业务相关页面:当特色业务相关的版块上线、改版时,则显示。

流程相关页面:需要用户进行复杂操作过程的页面,显示。

分享

业务相关页面:特色业务版块、具体的产品、网站促销活动时,则显示。

流程相关页面:不需要。

补充规则(也是我认为最重要的一点):

整个浮层功能不能影响用户的正常浏览习惯。

来源:https://www.tulaoshi.com/n/20160216/1576597.html

延伸阅读
有一段时间没分享一点儿东西了,记得上次与大家分享过情感化设计中的手绘应用表现。今个再次煽情一下,与大家分享一点关于色彩情感的那些事儿,可能前部分的色彩介绍大家有了解过。但任何事情有因有果,所以还是先让大家了解下关于色彩的组成和色彩的情感等,再来简单说说在我们生活中和界面设计中的运用所带来的感受,以及人们对色彩的喜好偏...
曾经有人说过,布局虽然只是内容的表现形式,但却能决定浏览者对内容的态度,从这句话中就足以看出布局在设计中的重要性。 从网页的布局中就能看出一个设计师的设计水准,以往的网页布局大家都会依照黄金比例的原则去排版设计,所以大多数网页也都千篇一律,而现在,中规中矩的网页布局已经不由得让浏览者产生了视觉疲劳,因此必须做出一些改...
建筑与雕塑在光的作用下,让我们领略到了作品的神圣、结构的清晰、空间的真实 艺术摄影的炫光和强光,凸显的的是神秘、高雅与个性 广告大片中强光源对比的手法,能让模特更加立体有层次,凸显品牌的调性 光影涂鸦也被人们称为光绘画、光电涂鸦,慢慢成为流行的一种街头和时尚的艺术活动,神秘感扑面而来。 光影是网页设计中...
关于Banner的设计,相信已经有很多人都看过这方面经验的分享了,我来公司也做过了一些Banner的设计,那在这其中通过不断的学习、实践积累了自己的一些小小经验和方法,下面给大家浅浅的分享下我总结的Banner设计经验。如有错误,尽管拍砖,小女子虚心请教学习。 Banner设计其实是我们接触互联网工作后,最常见一种工作。那么Banner到底...
随着互联网的高速发展,各种各样的网站层出不穷。在这样的环境下,用户是如何在浩瀚的互联网海洋中快速挑选网站的呢?网页设计师又如何能让自己的网站在用户匆匆一瞥后就迅速吸引到他们进一步注意的呢?本文作者向用户介绍了一种简单的页面布局方式分割布局,这种布局方式试图让用户初览页面时感受到一种友好的浏览体验。 作为网页设计师,我们...

经验教程

477

收藏

65
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部