UI设计, 弹出对话框 设计(区分强调按钮和普通按钮,给用户一个 正向建议的强调按钮)
在UI设计时,经常会需要 设计 弹出对话框,以下是个样式设计:
0.标准对话框

说明
Title space : 标题区
contents space : 内容区
function space: 功能区
在功能区的 user decision making 箭头表示:“用户决策方向”,有两个方向 ”正向“或者”负向“ 或者说 ”肯定“和”否定“。 在这里,期望用户点击的方向,有利于用户操作的方向,为正向。
使用明显的 易于引起注意的 颜色标识 正向 的操作,更容易被关注和点击,甚至会被习惯性点击。
负向 和 可选项(Optional) 采用不已引起注意的颜色。
我绘制了常见的页面 弹出对话框的 更多样式
1.警告 Warring 有图标

2.信息 Info 有图标

3.提醒 无图标

4.提醒 有标题栏

5.选择对话框- 带按钮

-------------------------------------------------
参考:书籍 《神一样的产品经理》 第270页,第284页
UI设计, 弹出对话框 设计(区分强调按钮和普通按钮,给用户一个 正向建议的强调按钮)的更多相关文章
- SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框
SharePoint 2010 Pop-Up Dialogs SharePoint 2010 弹出对话框 SharePoint 2010 使得往你的站点加入对话框内容变得出乎意料的简单 ...
- JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法(转)
原文:JQuery EasyUI弹出对话框解决Asp.net服务器控件无法执行后台代码的方法 jquery-easyui是一个基于jquery的图形界面插件,利用easyui可以创建很多好看的网页界面 ...
- NET使用了UpdatePanel后如何弹出对话框!
原文:NET使用了UpdatePanel后如何弹出对话框! 在ajax中的UpdatePanel弹出对话窗,可以使用: ScriptManager.RegisterStartupScript(Upda ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- [Firefox附加组件]0003.弹出对话框
Firefox中使用面板(panel)模块来显示弹出对话框,面板的内容通过HTML编写.你可以在面板上运行content script,尽管在面板里的脚本无法直接访问插件代码,但是你可以在面板脚本和插 ...
- 10.JAVA之GUI编程弹出对话框Dialog
在上节基础上添加对话框显示错误信息. 代码如下: /*弹出对话框显示错误信息,对话框一般不单独出现,一般依赖于窗体.*/ /*练习-列出指定目录内容*/ import java.awt.Button; ...
- 【Telerik】弹出对话框RadWindow,确认删除信息
要做一个删除功能,但是删除前正常都要弹出对话框确认一下是否删除信息,防止误删信息.
- Response.Write("<script>alert('弹出对话框!')</script>") 后跟Response.Redirect("page.aspx");不能弹出对话框,直接跳转页面了 如何解?
Response.Write和Response.Redirect一起用的时候就会这样,write脚本和redirect脚本不能同时使用,这样不会执行脚本,最好使用ClientScript 改进方法: ...
- selenium移动div里面的滚动条,操作弹出对话框
还是使用js来移动 首先要定位到这个元素 倾向于使用js来定位元素,输入下面的脚本,按下回车键,即可在调试页面看到对应的div块$("div.table-responsive") ...
随机推荐
- hbase ERROR: wrong number of arguments (3 for 4)
hbase(main):036:0> get 'ddl', 'example', 'info:age'COLUMN ...
- WPF中动态改变控件显示位置
转自 http://blog.csdn.net/lassewang/article/details/6928897 测试环境: Windows XP/Windows 7 开发环境: Microsoft ...
- Vue(三):vuex是什么
vuex官网介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue ...
- tomcat重启步骤
tomcat重启步骤1.切换到tomcat目录cd /home/tomcat-home/tomcat-erp/bin2.关闭tomcatsh shutdown.sh3.启动tomcatsh start ...
- Using ADB and fastboot
What is adb? The Android Debug Bridge (adb) is a development tool that facilitates communication bet ...
- Atitit jquery 1.4--v1.11 v1.12 v2.0 3.0 的新特性
Atitit jquery 1.4--v1.11 v1.12 v2.0 3.0 的新特性 1.1. Jquery1.12 jQuery 2.2 和 1.12 新版本发布 - OPEN资讯.h ...
- Atitit 函数调用的原理与本质attilax总结 stdcall cdecl区别
Atitit 函数调用的原理与本质attilax总结 stdcall cdecl区别 通常来说函数调用要用到的两条基本的指令:”CALL”指令和”RET”指令.”CALL”指令将当前的指令指针(这个指 ...
- 数据加密 - TDE透明数据加密原理
首先需要确定你需要加密的列,Oracle 10g数据库将为包含加密列的表创建一个私密的安全加密密钥(表秘钥), 然后采用你指定的加密算法(AES或3DES)加密指定列的明文数据.此时,保护表的加密密钥 ...
- 服务器搭建3 安装libevent2.0.20
1.检测是否安装 安装了的话应该是这样的:如果不是,那就装一下. root@iZ23nyl8frqZ:/home/upload# ls -a /usr/lib |grep libeventlibeve ...
- Android 视觉规范
各种分辨率下图片尺寸 工程师通常开发三套UI布局文件,所以设计师通常也要不同的需求处理2-3套切图. con Type Standard Asset Sizes (in Pixels), for Ge ...