整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
辑导读：B类产品设计时一定要注意产品细节，即使是对话框这样容易被忽略的产品设计细节也不要放过。本文从“对话框 vs 抽屉”的设计细节出发，给出不同的设计细节及展示，一起来看看。
说在前面：对话框和抽屉都是在当前页面之上覆盖出现的组件，让用户在不离开主路径的情况下，查看信息/提示/反馈，或快速执行某些的操作。两者的交互模式有类似之处，使用场景也有所重叠。本文对两个组件的主要差别进行了对比，并提供方法帮助大家快速判断应该选择哪一个。
对话框和抽屉均可分为模态、非模态，有遮罩、无遮罩；通常有遮罩的为模态，无遮罩的为非模态。
1）在重要的警告时使用，避免出现严重问题、或修正已出现的问题。
例如：用户未保存就要关闭时，弹出模态对话框提示用户保存。
2） 在需要用户输入信息或进行某操作，才能继续当前流程的时候使用。
例如：某些资源网站会在用户浏览一段时间后弹出模态化的登录/注册/试用窗口，引导注册。
3）用来将复杂流程拆分成简单步骤。
例如：分步骤的模态对话框式的新手引导。
4）用来获取信息，该信息可大大减轻用户的后续操作/精力。
例如：在房地产网站 Zillow 中，用户可以在没有账号或房产代理的情况下浏览房源列表，当用户图联系某代理以获取房源信息时，站点会通过一个模式对话框询问他们是否已经有代理。
1）不要在获取与当前流程不相关、不必要信息的时候使用。
2）不要在会打断高风险流程中使用。
例如：付款为高风险流程，避免在用户付款过程中弹出模态弹窗打断用户，可能会让用户改变主意放弃购买。
3）不要让用户在模态组件上进行需要额外信息（这些信息不在上面）的复杂决策。
例如：Frontier Airlines 使用模态对话框来追加销售机票之外的更多服务，该对话框显示现在购买可以省162 美元，但却找不到为什么会省这个额度的钱：
文档工具语雀中的模态对话框：登录状态失败提醒。
语雀中的进行关联操作的非模态对话框，一个短小的表单：文字链设置（这里也可以使用气泡卡片组件）
Gmail 中点击「写邮件」按钮，在右下角打开非模态小对话框，让用户参考下面的邮件撰写新邮件：
点击上图对话框右上角表示「放大」的 icon 后，扩展为模态大对话框，转化为沉浸式的体验：
项目管理工具 Jira 的帮助文档入口在页面右侧，点开后从右侧划入非模态抽屉展示内容，这样便于用户进行对照查看和操作：
搜索功能入口在页面左侧中的导航中，点开后从左侧划入模态抽屉进行交互，用户可以更加专注于当前操作：
上一案例来自之前的 Jira，当前版本的 Jira 对导航和交互模式进行了调整，例如通知模块由模态抽屉改为了非模态对话框，出现的位置均遵循就近原则，体验上非模态对话框更加轻量。
原来由左侧划入的模态抽屉，点击左侧导航后从左侧划入：
当前版本使用非模态对话框，点击顶部导航后在 icon 下方出现：
研发效能工具 Aone 中用非模态抽屉来展示项目的需求/任务/bug 的具体内容：
与上图 Aone 的类似场景下，同类产品 Teambition 则采用了模态对话框：
相比之下，非模态抽屉的优点是，用户可以同时查看下面的父级页面中其他任务的标题，并快速点击切换到其他需求；而模态对话框的优点是用户可以完全沉浸在当前的任务中，同时顶部也增加了「上一条」、「下一条」按钮，支持上下条快速切换。
两者对比可以看出，两种组件自身的优点也是对方的不足，没有百分百的十全十美。选择哪一个，要看具体用户的需求和产品的定位。
文档工具 Gitbook 中，产品功能和交互都很简洁轻量，没有出现对话框组件，在文档中插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉，而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片，这些气泡卡片和非模态的对话框类似：
按下图从应用场景、交互需求、信息长度三个维度来判断使用对话框还是抽屉。
例如：为一个表单选择组件，从应用场景来看，对话框和抽屉皆可；从交互维度，该表单的填写需要参考表单的父级页面中的内容，则确定选择非模态抽屉，不需要再从长短考虑。
必要的情况下，在抽屉上叠放对话框也是可以的，例如在抽屉操作过程中有非常重要的信息要即刻告知用户，可以通过对话框展示。
参考：
作者：林叶，蚂蚁集团设计师
本文由 @Ant Design 原创发布于人人都是产品经理。未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议
们在浏览网页时或者翻转页面时，经常会看到很多精美的效果的效果。其中，抽屉式网页效果比较常见，它主要由图片和文字通过添加浪js 来实现。抽屉式网页通过移动鼠标来实现页面的切换，通过改变文字和图片而展现不同的界面，它非常实用而且实现简单。
解决方案
制作抽屉式页面时，主要会用倒忙HTML ， CSS 和 JavaScript 。
（1）通过 div 来规定主要内容部分占据的大小，并通过 CSS 来修正。
（2）使用 overflow 标签，使得多余的图片部分隐藏。
（3）通过 js 来实现图片的移动。
制作过程：
（ 1 ）为网页添加背景图片，并定义一个容器 wrap 来规定网页主要内容的大小和它占据的位置，如图 1 所示。
<div id="wrap">
</div>
*{
margin: 0;
padding: 0;
}
body{
background: url(img/sfq4.jpg) center top no-repeat;
}
#wrap{
width: 1090px;
height: 429px;
margin: 150px auto;
border: 1px solid red;
}
（ 2 ）在 wrap 里面添加 ul 列表，在列表中添加主要内容的图片和文字，并为之设置 CSS 效果。使用 overflow 属性规定当内容溢出元素框时发生的事情。在这里可以使用 overflow:hidden ，它一般用在固定宽高的 div 里面，目的是隐藏溢出使内部元素高度即使超过父元素也能够被隐藏；此外， overflow:hidden 另一个流行的用途是用在没有宽高的 div 里，其目的是清除浮动。
<div id="wrap">
<ul>
<li style="background-image: url(img/ 手风琴 5.jpg);">
<div>
<p> 我的个人浪漫之旅 || 美丽之约 </p>
</div>
</li>
<li style="background-image: url(img/sfq1.jpg);">
<div>
<p> 我的个人浪漫之旅 || 美丽之约 </p>
</div>
</li>
<li style="background-image: url(img/sfq6.jpg);">
<div>
<p> 我的个人浪漫之旅 || 美丽之约 </p>
</div>
</li>
<li style="background-image: url(img/sfq2.jpg); width: 789px;">
<div>
<p> 我的个人浪漫之旅 || 美丽之约 </p>
</div>
</li>
</ul>
</div>
#wrap{
width: 1090px;
height: 429px;
margin: 150px auto;
overflow: hidden;// 保障图片在随鼠标移动时不会发生错位
}
#wrap ul{
width: 120%;
}
#wrap ul li{
list-style: none;
width: 100px;
height: 429px;
float: left;
}
#wrap ul li .txt{
width: 100px;
height: 429px;
background: rgba(0,0,0,0.5);
overflow: hidden;
}
#wrap ul li p{
padding: 0.5px 42px;
background: rgba(0,0,0,0.5);
color: white;
font-family: " 楷体 ";
font-size: 14px;
}
为了使图片和文字在同一水平面上，用 float 属性来清除浮动，并且用 rgba 属性来为文字改变颜色和透明度。 rgba 是代表 Red （红色） Green （绿色） Blue （蓝色）和 Alpha （不透明度）三个单词的缩写，颜色值取 0 至 250 ；透明度取值在 0 倒忙1 之间，数值越小则越透明。
（ 3 ）引入 jquery 文件，并添加 js 效果。
<script src="shoufq.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('@wrap ul li').hover(function(){
$(this).stop().animate({
width : '789px'
},500).siblings().stop().animate({
width : '100px'
},500);
});
</script>
添加的 js 代码中， $('@wrap ul li').hover 表示鼠标移上图片时，被选中的图片宽度变为 789px ，用时 500 毫秒。其他的图片则用 siblings 来表示，它们的宽度在鼠标以上时变为 100px ，用时也是 500 毫秒。
效果图：
如果这篇文章对你有帮助,你现在也想学习前端开发技术的话，可以关注私信我免费领取前端学习资料，观看直播课噢！（私信方法：点击我头像进我主页右上面有个私信按钮）
条APP上有个截图分享功能，就是把文章转成一张图片，然后分享到各渠道中去，如微信、QQ等，非常实用，因此，打算就这项功能自己封装为一个组件ImageGenerator，后期专门进行图片生成，html是其中的一个源。
头条截图分享的实际效果图
目前前端使用较多的html转图片的工具是Html2Canvas，考虑技术储备和问题讨论的充裕性，决定封装一下这个工具。步骤如下：
按照官方要求，做安装操作：
npm
npm install html2canvas我当时下载的是1.4.1的版本。
这个工具有自身的一些限制，使用时要注意：
[1] 并非真正的截图软件，而是根据DOM绘制出来的，其绘制能力，完全依赖于工具对DOM和对应属性的支持和理解;
[2] 因为使用了Canvas支持，生成图片的区域不能再有Canvas应用，否则会干扰工具的生成，不能保证生成预期，因此，如果使用了Canvas图表的应用这个工具不推荐使用
这个很简单，这里就是封装一个组件，用于后期引入html之外的源生成图片，同时也做一下图片的统一显示，从而和系统整体的设计进行配合。大致的实现思路如下：
上图，我们引入了工具本身，并设置的结果的显示区。生成的结果将以节点的方式注入 #image-box 中。
上图，封装了一个方法，用途是利用Html2Canvas工具获得图片，这里我们引入了一个组件的数据imageData用以存储和干预生成结果。在这里，我把ImageGenerator封装为全局组件。
我们在文章的尾部加入一个share功能，点击弹出分享设置的弹窗，实际效果如下图所示：
以上技术实现比较简单，这里就不进行赘述了。上图中，我们设置了一个生成图像按钮，点击该按钮则可以触发我们组件中的对应操作。关键思路包括：
【1】这里设置了一个封装组件shareHandler，封装了前导模块和imageGenerator，这两个模块的显示通过一个开关进行控制，该开关则通过图像生成成功事件进行赋值，这样的话，我们可以实现图片生成后，不再显示前导模块，而是显示图片结果，即ImageGenerator。
【2】这里有一个比较关键的操作是shareHandler通过触发事件将转换器发射到文章转换现场，为什么用事件，还是那句话，事件对于解耦和消除组件依赖是最自然的实现。注意，这里我把imageGenerator通过引用的方式作为参数传出了，这样的好处是事件将转换器代入了转换现场，并可以携带回现场转换结果。
【3】在文章查看器，solutionViewer中，自然会订阅事件、事件处理和取消订阅。注意这里的事件处理，实际上是调用了转换器中我们封装的函数，参数则是现场取得的，这里的机制很简单，定义要转换div的id，作为参数传入函数。
那么，点击图像后，我们可以看到效果图：
点击右键另存图像，我们可以获得一张png格式的图片，至于后续对下载和到粘贴板的支持，大家可以自行研究和实现。
实现过程中有几个注意事项：
【1】Canvas返回时，其长宽都是按照实际大小生成的，而我们的例子中，则要根据右抽屉式的弹窗做width=100%，height=auto的处理，这个要如何实现，就是要通过我们在imageGenerator中引入的imageData。
【2】我们的文章显示中，引入了文件管理的微服务，因此，文章中图片的链接都是跨域的，所以，必须打开html2Canvas的跨域选项，在封装的组件里，我是通过一共一个defaultOptions来实现这一点的。
这个选项可以在转换场景提供，也可提供一系列的默认值，最常用的除跨域外，还有是否允许log输出等开关，大家感兴趣可以自行查阅html2Canvas的官网。
内容比较简单，大家如果有这个应用场景，可以参考实现一下，有问题欢迎大家随时交流。谢谢大家的支持。
*请认真填写需求信息，我们会在24小时内与您取得联系。
