在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计:

0.标准对话框

说明

Title space : 标题区

contents space : 内容区

function space: 功能区

在功能区的 user decision making 箭头表示:“用户决策方向”,有两个方向 ”正向“或者”负向“ 或者说 ”肯定“和”否定“。 在这里,期望用户点击的方向,有利于用户操作的方向,为正向。

使用明显的 易于引起注意的 颜色标识 正向 的操作,更容易被关注和点击,甚至会被习惯性点击。

负向 和 可选项(Optional) 采用不已引起注意的颜色。

我绘制了常见的页面 弹出对话框的 更多样式

1.警告 Warring  有图标

2.信息 Info  有图标

3.提醒 无图标

4.提醒 有标题栏

5.选择对话框- 带按钮

-------------------------------------------------

参考:书籍 《神一样的产品经理》 第270页,第284页

UI设计, 弹出对话框 设计(区分强调按钮和普通按钮,给用户一个 正向建议的强调按钮)的更多相关文章

  1. SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框

    SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框         SharePoint 2010 使得往你的站点加入对话框内容变得出乎意料的简单 ...

  2. JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转)

    原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...

  3. NET使用了UpdatePanel后如何弹出对话框!

    原文:NET使用了UpdatePanel后如何弹出对话框! 在ajax中的UpdatePanel弹出对话窗,可以使用: ScriptManager.RegisterStartupScript(Upda ...

  4. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  5. [Firefox附加组件]0003.弹出对话框

    Firefox中使用面板(panel)模块来显示弹出对话框,面板的内容通过HTML编写.你可以在面板上运行content script,尽管在面板里的脚本无法直接访问插件代码,但是你可以在面板脚本和插 ...

  6. 10.JAVA之GUI编程弹出对话框Dialog

    在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.Button; ...

  7. 【Telerik】弹出对话框RadWindow,确认删除信息

    要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.

  8. Response.Write("<script>alert('弹出对话框!')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框,直接跳转页面了 如何解?

    Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...

  9. selenium移动div里面的滚动条,操作弹出对话框

    还是使用js来移动 首先要定位到这个元素 倾向于使用js来定位元素,输入下面的脚本,按下回车键,即可在调试页面看到对应的div块$("div.table-responsive") ...

随机推荐

  1. [转]python中@classmethod @staticmethod区别

    Python中3种方式定义类方法, 常规方式, @classmethod修饰方式, @staticmethod修饰方式. class A(object): def foo(self, x): prin ...

  2. Spring boot注解(annotation)含义详解

    Spring boot注解(annotation)含义详解 @Service用于标注业务层组件@Controller用于标注控制层组件(如struts中的action)@Repository用于标注数 ...

  3. django -- model中只有Field类型的数据才能成为数据库中的列

    一.model的定义: from django.db import models # Create your models here. class Person(models.Model): firs ...

  4. 【OfficeWebViewer】在线预览Word,Excel~

    今天有个需求, 直接支持web端预览word,excel等文件, 查了一下很多写的比较麻烦, 这里找到一种简单的方式: http://view.officeapps.live.com/op/view. ...

  5. c# vs2010 excel 上传oracle数据

    excel 数据表上传到oracle数据库.过程例如以下: 1.打开本地excel文件 2.用OleDb连接excel文件 3.将来excel的数据读取到dataset中 4.把dataset 中数据 ...

  6. HTML5学习笔记(十):CSS常用操作

    对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...

  7. 菜鸟调错(五)——jetty运行时无法保存文件

    背景交代: 上一篇博客写的是用jetty和Maven做开发.测试.在使用的过程中遇到一个小问题,就是在jetty启动以后,修改了jsp.xml等文件无法保存. 错误信息: 解决方案: 到Maven库( ...

  8. FFmpeg编译:jni not found 的问题

    进入Android\Sdk\ndk-bundle\platforms\android-xx\arch-arm\usr目录查看发现与Google官方下载的NDK相比缺少include目录 此目录下包含各 ...

  9. 每日英语:The Risks of Big Data for Companies

    Big data. It's the latest IT buzzword, and it isn't hard to see why. The ability to parse more infor ...

  10. MIME详解

    MIME详解 原文:http://blog.csdn.net/cxm_hwj/article/details/6690058 MIME,英文全称为“Multipurpose Internet Mail ...