固定浮窗在设计中的使用

  固定浮窗是网页设计中常用的技巧,指一定区块固定在浏览器的响应位置而不随滚动条的移动而改变位置的设计。

  最常见的固定浮窗设计是固定在浏览器底部的弹窗广告,比如新浪首页会有新浪视窗的弹窗广告。


  最近当当网首页广告力度很大,其中大部分都是固定在浏览器底部和两边。


  由于固定浮窗总是显示在网页内容的最上端,有时候甚至覆盖了用户想要的价值内容,这种设计确实不讨人喜欢。有时候,有的固定浮窗会提供“关闭”按钮,但是这明显不能消除用户的反感情绪,因为在一片广告上找关闭,也是一种煎熬,而且关闭按钮总是很小,不注意就会点到广告链接上,有时候这个“关闭”还有可能是假的关闭,点上去之后反而跳到了广告页面。

  以上这些都是负面的甚至流氓的设计行为,我们不予讨论,今天主要来讨论固定浮窗在设计中的良性使用。在此之前,我们先分析一下固定浮窗的特点:不随滚动条移动而移动,出现在浏览器的固定位置。如何利用这种特性呢?我们或许可以从桌面软件的设计中找找灵感。

  第一个例子,福昕阅读器的标签目录页,它有什么作用?在一篇长文中,用户可以点击标签到达文章的特定部分。在团800网站左边,有一分类团购的锚链,点击了解就能到达相应的分类团购部分。


  第二个例子,是WPS2012的工具栏和底部的数据显示。作用很明显,用户随时需要或者随时可能需要使用的功能或者看到的信息,用固定的模块展示出来。在新浪微博顶部、新浪微博右边“回到顶部”按钮、人人网底部、美丽说登陆框,都有这样的模块。当然,从网站而非用户的角度讲,固定浮窗广告也是希望用户能够随时注意到广告信息。


  因此,使用固定浮窗必须具备的条件就是,页面很长或者很宽(一般不可能很宽吧?!)的情况下,用户有需要随时或者随时可能有需要在不同段落之间跳转阅读,或者有一些功能和信息随时需要或随时可能需要提供给用户。

  在整理一些合理使用了固定浮窗设计的案例之后,我同时也发现了一些网站引入固定浮窗设计的必要性。第一个是Godaddy的域名购物车,在用户选购很多域名并且滚动条下移一定程度后,购物车里的具体信息不可见,影响了用户体验。第二个是GoogleCalender的添加事件界面,当垂直分辨率不足,用户在滑动到设置界面下部之后,保存时需要重新滚动至上部。


  最后,献上我今天的惊人发现,我写这篇博客的动力,也是我认为难得的飞信在用户体验上的一点创新之处。当某一个好友分组人数够多,点开一个小组滚动查找好友时,飞信将好友组名显示在最上端,并且有收缩列表功能。


  作者:杨元龙

  文章来源:杨元龙新浪博客

时间: 2024-10-14 10:23:17

固定浮窗在设计中的使用的相关文章

网页设计中常用的技巧:最常见的固定浮窗设计

文章描述:固定浮窗在设计中的使用. 固定浮窗是网页设计中常用的技巧,指一定区块固定在浏览器的响应位置而不随滚动条的移动而改变位置的设计. 最常见的固定浮窗设计是固定在浏览器底部的弹窗广告,比如新浪首页会有新浪视窗的弹窗广告. 最近当当网首页广告力度很大,其中大部分都是固定在浏览器底部和两边. 由于固定浮窗总是显示在网页内容的最上端,有时候甚至覆盖了用户想要的价值内容,这种设计确实不讨人喜欢.有时候,有的固定浮窗会提供"关闭"按钮,但是这明显不能消除用户的反感情绪,因为在一片广告上找关闭

仿360在Launcher画面显示内存使用率的浮窗(改进版)

MainActivity如下: package cc.cc; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.app.Activity; import android.content.Context; import android.content.Intent; /**

仿360在Launcher画面显示内存使用率的浮窗(基础版)

MainActivity如下: package cc.cc; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.app.Activity; import android.content.Context; import android.content.Intent; /**

项目实例:淘宝拍卖出价流程浮窗设计小结

之前在交互周会上,作为项目分享了之前做过的拍卖线的出价流程,由于讲的比较匆忙,所以还是想整理成文字,累积下.做多了日常以后,常常觉得如果不多做字面的积累,很多看似瞬间的累积,很快就会被更多的项目淹没~~ 之所以把这个项目分享出来,是因为觉得我们在工作中所做到的大小日常,99%的都不是"无中生有"的,都具有一定的历史,也一定有一定的痛点,一定也有新的业务变化在里面,如何在短时间内把握这些因素,迅速转化为一个合理的方案,是有一定方法的,虽说方法不一定完美,但希望给大家一些思路. 开始正题,

拍卖出价流程浮窗设计小结

之前在交互周会上,作为项目分享了之前做过的拍卖线的出价流程,由于讲的比较匆忙,所以还是想整理成文字,累积下.做多了日常以后,常常觉得如果不多做字面的积累,很多看似瞬间的累积,很快就会被更多的项目淹没~~ 之所以把这个项目分享出来,是因为觉得我们在工作中所做到的大小日常,99%的都不是"无中生有"的,都具有一定的历史,也一定有一定的痛点,一定也有新的业务变化在里面,如何在短时间内把握这些因素,迅速转化为一个合理的方案,是有一定方法的,虽说方法不一定完美,但希望给大家一些思路. 开始正题,

三星N9150在多窗口中如何将全屏模式转为浮窗模式

如下所示我们从手机屏幕的对角线的方向然后用手指拖动屏幕的左上角 然后就会直接把窗口转换成弹出式窗口了,如下面小编以"我的剪贴库"为例   2.然后在弹出的窗口界面中我们点击[圆点]就可以查看更多更好选项.    3.之后在打开的图标中我们就可以选择:拖放内容.最小化窗口.最大化窗口.关闭应用程序,这里以点击[最小化窗口]图标为例.    4."我的剪贴库"以一个圆形的浮动图标出现在屏幕上.    好了到了这里关于浮窗模式就介绍完成了,希望例子可以帮助到各位.

web设计中的网页表单关于编码设计的小技巧

原文地址: http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如"用户名"+输入框, 这里的"用户名"项在英文中是label,约定翻译为标签 页面表单已经是web设计中讨论最多的元素,已经超过10年了.我们无法避免.Call-to-action(一般翻译为&q

网站BANNER设计中 中英文字体的结构分析

本来想写"Advertisemen中的字体结构分析",后来发现这个标题写得有点大,偏离了在目前工作中的针对性,因此缩小到banner的范围,以下内容仅个人在目前工作中对banner设计上的一点浅见,仅起抛砖引玉的作用. Banner的传达方式 [TOPIC] 针对网站中的banner Banner的本身形状:形状决定了其固定的构成方式,一般为矩形,横幅,左右结构和居中; Banner的文字特点:主题式,一般分为主标题和副标题,文字较多;设计的时候还需要考虑应用到网站各种尺寸推广图的可读

浮窗系列之窗口与用户输入系统

在<浮窗开发之窗口层级>这篇文章中,开篇提出了三个问题: 窗口层级关系(浮窗是如何"浮"的)? 浮窗有哪些限制,如何越过用户授权实现浮窗功能? Activity是如何接收到touch事件的? 前两个问题在前两篇文章中已经分析,在这篇文章中我们以第三个问题为切入点,简单分析一下窗口与用户输入的关系. Touch事件是如何分发到Activity上来的? 正常的思路是直接去寻找Activity 的dispatchTouchEvent方法,我们看看Activity的dispatch