提升设计品质的8个布局方案[译](3)
作者:笨活儿 来源:笨活儿 发布时间:2010-03-18 16:06:00
3. 模态窗口
模态窗口(Modal windows),或者称为浮窗,一般用于在空间紧张的页面中展示额外信息。在模态窗口中,你可以放置放大版的图像、额外内容、警告/提示信息、视频等等。用模态窗口展示信息时,记得要同时明确地提示用户如何关闭它。
同时,用于打开模态窗口的链接、缩略图、图标或者其他图形元素,一定要保证与模态窗口要展示的内容有足够的关联。相似的图标、摘要、图形元素都能帮助用户建立原始链接与打开的窗口的联系。
模态窗口的例子
运用到登录和注册流程中的浮窗
模态窗口最典型的运用就是登录/注册窗口了(与诸如图像、音频、视频、Flash等“传统”媒体文件相比)。登录和注册表单不是用户每次浏览页面都要用到的必要部分,所占页面空间理所应当被节约下来。而使用浮窗,则又为用户省去了重开一个页面的时间,毕竟这只是一个很简单的非常用动作。他们能在网站的任何页面中登录/注册,而不用中断现有流程——只要网站的设计者能提供基于Ajax的“静悄悄的” 登录/注册。
Grooveshark 整个站点的每一个页面中,这个漂亮的登录窗口都触手可及。注意,点击登录( Lodin> )按钮后并不会载入一个新页面,而是直接把注册表单替换成了登陆表单(使用了手风琴效果)。非常方便,非常友好的用户界面。
消隐页面/使用投影
如果要使用模态窗口,让窗口下面的页面淡出焦点十分重要。你可以用半透明背景覆盖或者为窗口添加投影,或者两者结合。这么做有两个作用:一是能让用户将注
意力集中到浮窗上,然后暂时忽视掉背后的页面。另外,也能增加窗口和页面之间的深度感和区分度,让人在视觉上觉得这窗口确实是漂浮着的。注意看下面的例子(KissMetrics),半透明的黑色背景让页面消隐,有助于登录浮窗暂时成为视觉重点。另外,取消和关闭窗口的按钮也设计得很好,够明显,够漂亮。
RealMacSoftware 的浮窗只做了投影,而没有让整个页面消隐。只要深度感和区分度做得足够,这样也很有效。
模态窗口的脚本


猜你喜欢
- 有一个比较大的数据集需要自己处理,在分出训练集和测试集时,如果靠手动实在太麻烦,于是自己写了一段代码。(其实就是在某一路径下的子文件夹里取出
- 项目初始化首先我们创建一个目录,初始化 npm,得到一个package.json文件。mkdir react-clicd react-cli
- 我就废话不多说了,大家还是直接看代码吧!import tensorflow as tfimport numpy as npinput = t
- 本人最近在当当网上购买了一本关于用户体验的书,在此把最实在的内容整理下发给大家分享下。第一步:表现层视觉设计,也就是我们说的网页设计师做的工
- 在许多编程语言中都包含有格式化字符串的功能,比如C和Fortran语言中的格式化输入输出。Python中内置有对字符串进行格式化的操作%。模
- 孤立帐户,就是某个数据库的帐户只有用户名而没有登录名,这样的用户在用户库的sysusers系统表中存在,而在master数据库的syslog
- Mysql慢查询解释MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过
- 目录前置知识可迭代对象如何判断一个对象是否是可迭代对象?enumerate 函数多嵌套列表总结前置知识如果给定一个 list 或 tuple
- 图片的上传上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示
- 或者说有一条命令 hostname [string],当string是不包含2950时,是true,包含2950时是false。使用Exce
- Pyinstaller这个库是我用pip下载的第一个模块。接下来通过本文给大家分享Python PyInstaller安装和使用教程,一起看
- 网络I/O模型人多了,就会有问题。web刚出现的时候,光顾的人很少。近年来网络应用规模逐渐扩大,应用的架构也需要随之改变。C10k的问题,让
- 本文给大家介绍vue2.0+webpack环境构造过程。1.首先新建一个目录vue-wkdemo,这是我们的项目目录。执行 npm init
- 模块在python编程中的地位举足轻重,熟练运用模块可以大大减少代码量,以最少的代码实现复杂的功能。下面介绍一下在python编程中如何导入
- 环境搭建下载安 * eego,bee1.开启gomod设置代理go env -w GO111MODULE=ongo env -w GOPROX
- 官网地址:https://dev.mysql.com/downloads/mysql/我这里是RHEL6.5的系统,因此选择RedHat 6
- 今天照着样例搞了下tensorboard,发现自己无法显示scalar,而graph却可以正常显示。出现这种情况就说明,tensorfboa
- 概述laravel服务容器就像一个高度自动化的工厂,你需要的东西,定制好模型,使用特定接口来制造。因为使用了服务容器,laravel中大部分
- 前端开发环境多数基于Node.js,好处不多说了。但与使用Visual Studio开发的后端Asp.Net Core项目一起调试,却不是很
- 清空服务器缓存asp代码: <%Call RemoveAllCache()Sub RemoveAllCa