在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. 使用 sqlyog 导入导出数据显示 lost connection to mysql server during query

    mysql中经常需要备份数据,在使用 sqlyog 进行备份数据库为转储文件,然后在其他数据库中导入发生 lost connection 经过查询大量资料是数据库配置的 max_allowed_pac ...

  2. 支付接口中常用的加密解密以及验签rsa,md5,sha

    一.常用加密类型分类 1.对称加密:采用单钥对信息进行加密和解密,即同一个秘钥既可以对信息进行加密,也可以进行解密.此类型称之为对称加密.特点速度快,常用于对大量数据信息或文件加密时使用.常用例子:D ...

  3. SpringBoot actuator 应用监控。

    前言 : 今天在阅读 <SpringCloud微服务实战>一书时看到了SpringBoot actuator相关知识,并且自己也本地调试实践.觉得SpringBoot这一套监控还是挺有意思 ...

  4. css遮罩层

    父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style& ...

  5. Win7/Win8.1右键菜单技巧:应用程序任意加

    对于Win7.Win8.1老用户来说,日常使用中离不开双击各类第三方应用程序,尤其是常用的记事本.QQ聊天.关机.一键截图等程序,这时我们不妨将这些“右键菜单”,轻松实现一键开启QQ.截图或者关机等功 ...

  6. vue-cli 工程中引入jquery

    在vue-cli 生成的工程中引入了jquery,记录一下.(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : &quo ...

  7. Binlog中最容易踩到的坑

    MySQL高可用架构中,主库复制是非常常见的一种. 当主库宕机后,可以提升一个从库作为新的主库,保证服务可用性:同时可以通过扩展从库,提高整个集群的QPS. 在主从复制架构下,MySQL通过binlo ...

  8. 开发中遇到的一些mongoose的问题

    save方法,这个方法可以用来创建新的文档,也可以用来修改已有文档 1,save创建新文档 var Tank = mongoose.model('Tank', yourSchema); 2 var s ...

  9. Theories of Deep Learning

    https://stats385.github.io/readings Lecture 1 – Deep Learning Challenge. Is There Theory? Readings D ...

  10. IBM研究院找到度量安全性方法:容器与虚拟机,谁更安全?

    https://zhuanlan.zhihu.com/p/40446759 虚拟机比容器更安全吗?你可能会有自己的答案,但IBM研究院发现容器的安全性与虚拟机一样,甚至更加安全. 一般来说,从接口宽度 ...