网站经常使用模态窗口作为呼吁行动的工具和指出重要信息。例如，模态窗口中的行动号召可能要求站点访问者订阅站点的时事通讯。一个研究用户体验研究公司尼尔森诺曼集团的调查显示，90%的研究参与者选择通过电子邮件通讯接收公司发来的更新，而通过Facebook接收的只有10%。
这可能表明，电子邮件通讯可以是一种发展客户关系的有效方式。让我们看几个设计良好的模态窗口的例子。下面的例子大多是在时尚行业，因为这是我目前工作的行业。
一个设计良好的模态窗口的解剖
无缝设计
不用说，模态窗口应该与网站的视觉风格一致。您不希望模式窗口显示为第三方样式。在我创建的男装移动应用Mylo中，我们遵循了这一规则。
询问我们网站访问者的电子邮件地址的模态窗口与我们品牌的视觉属性一致。对我们来说，有很多空白字体清晰，文案符合我们品牌的设计指导方针。
Mylo在Jean Stories(一个致力于牛仔的时尚网站)上发现的模态窗口也与该网站的整体视觉风格保持一致。
注意他们对品牌配色方案的一致应用，以及在模态窗口中融入他们的标志。
牛仔的故事
明确的目的
模态窗口最好只有一个目标。目标可能是让访问者知道网站范围内的折扣或让他/她注册网站的通讯。一个设计良好的模态窗口应该只请求基本信息。
让潜在客户有太多的表单字段要填写和框要检查是不明智的，因为这样做可能导致不作为。电子商务网站可能会考虑提供一种激励措施，以迫使访问者执行预期的行为，比如以商品折扣作为注册网站通讯的交换。下面是一些提供基于百分比折扣激励的模态窗口的例子:
埃尔
服饰
米莎Nonoo
M.PATMOS
内容为王
您的模态窗口副本应该体现您的品牌的态度，基调和风格。你也可以在模态窗口中陈述一个价值主张。例如，《DuJour》杂志的模态窗口向潜在订阅者说明了他们的通讯的价值主张:“你在其他任何地方都找不到的豪华内容。”
DuJour
更多模态窗口示例
下面是更多遵循上面提到的一般指导原则的模态窗口。
史蒂文·艾伦。
倭黑猩猩
斯特拉麦卡特尼
太子油墨公司
需要供应有限公司
大师
社会名流的家庭
Thisispaper商店
Volta鞋类
奥斯汀Beerworks
Atea Oceanie
胜利杂志
Zurb开发大学
总结
模态窗口可用于要求您的站点访问者执行某个操作(例如订阅您的电子邮件通讯)或共享重要信息。一个好的模态窗口应该有:
- 与品牌视觉风格一致的设计
- 一个明确目标
- 好的内容能反映你的品牌的态度、基调和风格
多亏了费兹塔里克而且卡洛琳Buszynski他是本文的共同作者。
相关内容
在你的网页设计中创造焦点策略性地显示Web表单的最佳技术留白能为你做什么网页设计中的区分艺术
