Material-UI-React-Dialog-d窗

React+Electron桌面应用开发文章索引

这篇文章继续之前的文章，介绍如何创建d窗。

MaterialUI官方给出了Dialog各种实现案例 ，但都很繁琐。因为d窗经常被使用，所以我们需要极其简单的实现。

模态d窗必须打断用户当前流程，用户必须做出选择或 *** 作。同时显示的模态d窗最多1个，不能重叠。

所以，d窗不像是一个界面元素，而更像一个全局功能，任何按钮可以直接呼叫它，让它显示出来。

d窗分为几类：

我们把用户 *** 作分为两类：

我们再分析打开和关闭的实现细节：

尽管内部的交互可能更加复杂，但实现很简单，因为我们可以在窗口打开时候增加一个children参数，把整个内容区填进去就可以。

我们创建Utitlies/MyDialogjs。

这里输出了一个标准元素，当它被App的render使用的时候，会创造两个全局的方法用来显示和隐藏窗口。

一个默认的状态defaultState用来初始化和清空窗口的全部设置，包含了我们上面提到的各种参数。实际上大部分默认值都写在了render()函数里面。

比起官方案例，MyDialog并不简单，但这是一劳永逸的做法，我们看一下具体使用。

首先，我们要在顶级的Appjs中加载 import MyDialog from '/Utilities/MyDialog' 。

然后在render()的最后使用它，这样$showMyDialog和$hideMyDialog就被添加到global全局了：

好了，现在就绪了，我们可以在任意页面中使用，比如在HomePagejs的render()中直接使用它（因为Appjs最先已经把$showMyDialog和$hideMyDialog全局化了，所以不需要再加载MyDialog模块了）：

这里我们在页面上创建了open dialog按钮。

点击按钮将打开一个d窗。

而d窗内我们没有使用简单的文字内容content字段，而是使用了children向d窗内添加了一个按钮close dialog，点击它会通过自身的onClick事件关闭d窗，同时输出HomePage的statetitle，而不是MyDialog的state。

如果点击下面的确认或取消按钮，则会调用onClose方法输出true或flase，我们可以利用这个知道用户点击了哪个按钮。

END

一、说明

d窗常用于中断用户当前 *** 作对其作出补充，或中断用户当前 *** 作对其作出反馈；其价值在于提示重点内容，完成业务流程的简单必要 *** 作或给用户提供实时反馈。

d窗的使用一定要克制，它带来视觉上的中断，打扰用户完成业务流程；再加上d窗视觉面积较小，承载信息有限，应当尽量减少d窗使用。

二、示例

三、设计要点

1 注意通用原则

尽量减少使用：如要使用则一定要控制好频率、节点，控制好d出的位置和大小；思考是否可以使用吸底、吸顶等形态的通知栏（snackbar）来替代，一定不要多层d窗堆叠。

信息有效触达：信息类型上有文字、插图等，组织时从信息关联性、重要性、连续性等特性出发；通过背景分块、字体、字号、粗细的区别来实现，有时候甚至可以辅以局部微动效。

尊重用户使用习惯：比如：提供d窗关闭按钮，作为安全措施；同时，提供体现便捷的交互手段，比如：点击蒙层区域隐藏d窗、d窗自动隐藏等。

重视氛围和体验：d窗有很多中业务使用场景，针对有营销性质的d窗，比如：应用欢迎d窗、应用更新引导、重要活动通知、营销活动节点等；要通过插图、局部微动效等手段来打造体感。

2 明确d窗类型（按照业务功能）

1）欢迎d窗

一般用于用户首次进入应用时的友好提示，这一场景需求当前主流应用都采用多屏投教模式来实现。

与欢迎d窗相比，它可以承载更多信息，但不可避免的阻断了用户对应用的探索动机，并不符合各系统的设计规范。

一般当应用做较大程度的改版时使用，对于承载较少信息的欢迎场景，个人建议使用欢迎d窗，更为凝练、简单、用户影响较小；只要氛围营造得到可以取得不错的效果。

欢迎d窗一般只在用户首次进入应用时出现一次，不要与多屏投教一起使用。

2）通知d窗

一般用于重要的系统公告、与用户密切相关的重要信息等内容的披露；比如证监会重要通知等、持仓个股的重要风险提示等。

对于通知d窗，设计师要有心理准备：几乎不会有用户读完你在d窗里罗列的信息内容。

在设计时，一方面需要使用信息组织以及排版技巧来尽可能提升阅读体验；另外一方面，要巧妙平衡业务风险与用户体验的矛盾，比如采用倒计时后按钮可用的交互模式来限制用户停留时长，进行合理风控。

3）反馈d窗

用于就用户 *** 作提供反馈，d窗相比于其他的轻量级反馈组件如toast、hub、popover等，对流程的中断效应要大很多。

因此首先考虑其它轻量级反馈组件，只有当反馈需要引起用户更多情感共鸣或者反馈信息较多且重要；需要用户做出决策 *** 作时再使用反馈d窗，比如破坏性 *** 作的二次确认等场景。

4） *** 作d窗

当业务流程需要用户授权或作出决策、甚至输入简单、必要字段辅助业务时，常使用 *** 作d窗；比如业务需要系统授权调用位置信息，或签署必要的免责协议、完成抽奖等场景。

在设计时一定要先考虑业务场景需求，综合d窗出现的流程节点以及信息承载能力，合理设计；避免d窗承载超量信息带来 *** 作困难，或出现在不必要的节点阻断流程；同时，一定要提供退出 *** 作选项，给用户充足的掌控感。

重点说一下用户在d窗中输入信息时需要注意的内容：

要明确d窗只能承载轻量的信息输入，多内容的建议用表单页面。

考虑软键盘与d窗一并出现，并使光标自动聚焦到第一个输入项。

软键盘类型根据输入内容做匹配。

考虑是否需要 *** 作按钮， *** 作逻辑是否通过软键盘 *** 作按钮实现。

这里举个简单的例子，用户输入手机号获取登陆短信前为避免机器人恶意 *** 作，需要输入验证码，验证码何时出现最为合适？

还有一类拟物化的运营类 *** 作d窗，只是对d窗皮肤进行了设计，营造了一定的氛围和体感，这里不做说明。

5）挽留d窗

一般用于在用户离开某些业务流程时提示风险并挽留用户；比如，某些离开表单输入页面时，常用d窗提示用户保存，并希望用户完成输入。

这样的设计打破了用户退出业务流程的路径预期，容易给用户带来产品不可控的体验，使用时要克制。

尤其不要在挽留d窗中设置其它的流程触发按钮，用户点击后唤起一个莫名其妙的流程，被欺骗、戏弄的感觉会很强烈，不要为了短期数据带来用户流失。

6）投教d窗

投教d窗一般用来用户教育，比如：系统改版后，提示用户新功能；或在用户离开某项业务时，提示业务固定入口位置。

设计时第一要根据需求灵活排布文案、插图等信息，可以在d窗内做左右滑动 *** 作；其次要注意d窗出现的时机。

7）营销d窗

营销d窗的使用场景有明显的营销特质，比如引导用户发现新功能，引导用户评价应用或者用户的某一 *** 作（订阅）有了重要的新反馈。

设计时，要注意策略化，只有与用户关联性、重要性很高的内容才能引导用户进入营销的业务功能中；而且在d窗出现的时机也要有一定的设计，比如在用户查看某一只个股而投顾直播说到该股票时，用d窗引导就能提升直播转化。

在周期性营销活动中，比如大奖结果公布，也可以在应用全局用d窗形式通知用户、召回用户访问。

四、组成元素分析

1 d窗标签

d窗标签可以明确d窗业务主体，常在APP全局展示独立业务场景的d窗中使用，用来说明d窗来自于哪个相关业务。

标签也有益于品牌投教、氛围营造，视场景需求进行设计。

常见的有文字标签或Icon图标等。

2 标题及附属标题：主文案、附属文案、装饰性文案

d窗剥夺了用户对当前状况的掌控感，产生排斥心理，面积的局限也导致阅读体验较差，设计师要有心理准备——几乎不会有用户读完你罗列的内容。

因此凝练概括的标题文案、简短明确、主次有序的内容，才能够让用户快速获取信息、关闭d窗、继续 *** 作，尽可能降低业务跳出率。

根据阅读心理学，这里有几个原则需要注意：

使用直白表意的语句，不要人为制造词汇；

理解需要知识储备，人借助心智模型识别内容；人们偏好短行信息；

电子屏幕更难阅读，高对比度、大字体能提供帮助。

3 遮罩

d窗是一种模态组件，在用户和d窗之间进行明确的交互之前，页面上的其他内容不能被点触 *** 作。

遮罩提高了d窗的页面层级，遮罩背景透明度的选择由d窗需要用户付出的聚焦程度有关，越需要用户聚焦，遮罩越暗。

4 *** 作按钮

根据d窗场景， *** 作按钮可能由主按钮、辅助按钮、安全关闭icon等单独或组合使用，在某些营销场景下，也可能出现拟物化的按钮。

*** 作按钮要足够大且明晰，颜色选择突出品牌色，且区别主从按钮。

按钮文案要明确易懂或有“煽动性”，比如“取消自动定投”的d窗 *** 作文案，设计主按钮“确定”，辅助按钮“取消”，就容易产生歧义；考虑主按钮“确认取消”，辅助按钮文案“关闭”则可以避免。

安全关闭icon一般放置在d窗下方，符合‘拇指定律’，容易触达。

5 其它组件

可视情况，在d窗中加入其它附属组件，比如：订阅提醒和 *** 作，可默认勾选、投教内容、品牌宣传、氛围元素。

五、优化体验

1 自动收起

减少用户 *** 作，可以对d窗自动收起的功能设计，比如“3s自动收下”，但是一定要用倒计时进行提示，提供足够的可见性来保证 *** 控感。

2 d窗多级内容演示

某些营销场景下，可以在一个d窗中整合多个内容；像Banner一样，这些内容卡片自动切换展示，也可以手动滑动查看。

注意后面的内容露出十分有限，只能给人同级内容很多的映像，滑动查看的概率很小，最好能有固定位置的入口承接。

3 d窗关闭后的引导

d窗具有不可回溯的特点，且大概率用户不会仔细研究d窗内容只想尽快关闭d窗，进行自己的业务 *** 作。

这时候针对某些场景，比如应用升级，可以设计一个固定位置的通知栏（snackbar）来继承用户在完成 *** 作后的应用升级引导；又或者可以在页面设置固定位置浮层按钮，并在收起d窗时用动效提示映射关系，方便用户再次查看。

//模式化d窗才支持returnValue值

--修改如下即可

1

var rvalue = windowshowModalDialog("tools/bjsp","_blank","");

如果要用open打开同时跟父窗体传值的话

--opener代表由open所打开的父窗体 直接取父窗体的元素赋值即可

1

2

windowopenerdocumentgetElementById("txt0")value="555555";

windowclose();

如有问题可以追问，我当及时回答。

希望能帮到你！

1先获取d窗的宽高；

2点击打开d窗时，先设置d窗宽高为0；

3用animate方法，设置宽高，则可以实现渐渐增大；

4最小化时也是一样的 *** 作，用animate方式设置d窗的宽高为0；

伪劣代码：

var $t = $("d窗"),

w = $twidth(),

h = $theight();

$("点击打开d窗的元素")click(function(){

$tcss({width:0,height:0})animate({

width: w,

height: h

},"fast");

});

$("点击最小化的元素")click(function(){

$tanimate({

width: 0,

height: 0

},"fast");

})

js获取父页面的元素可以用$(windowparentdocument)find("#customer_id")val();这里的customer_id表示父页面某一个元素的id。

比如：父页面有一个隐藏的input框<input id="customer_id" type="hidden" value="${distributorcustomer_id}"/>，那么在子页面就可以用上述的语句取到父页面的id为customer_id的值。

在使用浏览器下载网页版Excel文件时，可能会出现d窗的情况。这种情况通常是由于浏览器的安全设置或者插件设置导致的。为了解决这个问题，您可以尝试以下方法：

1 修改浏览器安全设置：在浏览器的选项或者设置中，找到安全选项，将下载文件的安全级别调整到低或中等水平，然后重新下载Excel文件。

2 禁用浏览器插件：浏览器插件可能会拦截或阻止文件下载，您可以尝试禁用浏览器插件，然后重新下载Excel文件。

3 切换浏览器：如果以上方法都不能解决问题，您可以尝试切换浏览器，使用其他浏览器下载Excel文件。

4 检查文件是否受到安全软件的拦截：有时候文件下载被安全软件拦截，您可以检查一下您的电脑是否安装了安全软件，尝试关闭安全软件后重新下载Excel文件。

以上是一些常见的解决方法，如果您还有其他问题或者需要更详细的帮助，请联系浏览器厂商或者相关技术人员。

以上就是关于Material-UI-React-Dialog-d窗全部的内容，包括:Material-UI-React-Dialog-d窗、交互组件「d窗」设计规范、layerd窗返回值在页面怎么获取等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！