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

单机到天亮

单机到天亮

2016-02-16 23:54

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

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

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

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

回到顶部

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

在线客服

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

用户反馈/调查问卷

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

分享

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

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

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

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

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

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

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

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

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

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

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

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

回到顶部

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

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

在线客服

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

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

用户反馈/调查问卷

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

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

分享

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

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

流程相关页面:不需要。

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

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

展开更多 50%)
分享

猜你喜欢

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

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页浮动条设计的细节体验

详细解析网页走出屏幕的设计体验

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页走出屏幕的设计体验

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

详细解析网页设计中的细节分析

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页设计中的细节分析

详细解析关于UX和网页设计的32条迷信

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析关于UX和网页设计的32条迷信

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析设计应注意的细节

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析设计应注意的细节

详细解析网页导航设计原理

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页导航设计原理

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

浅谈网页按钮设计的十条基本准则

浅谈网页按钮设计的十条基本准则

详细解析8款成功的LOGO重构设计

详细解析8款成功的LOGO重构设计
下拉加载更多内容 ↓