产品在进行设计时，往往需要做好多方面的考量，针对有一定“障碍”的用户，产品需要做好包容性设计，帮助用户更自如、轻松地使用和进行交互。本篇文章里，作者就如何进行无障碍设计做了方法策略上的总结，一起来看一下。
你知道吗？视力、听力和行动能力完全健康的人，可以轻松地读写，可以有效执行多任务，并且始终可以正常工作的人约占总人口的50％？其余的人都是戴着眼镜或有色盲，手腕或耳朵受伤，生活在嘈杂的环境中或网络信号质量差，忙碌或忙碌中，阅读障碍或有注意力障碍等。
这意味着大约一半的用户可能很难使用我们的产品或浏览我们的网站。因此，我们可能错过了提高用户满意度并扩大受众范围的机会。
不过在设计阶段实施一些简单的原则就可以改善交互和整体用户体验，极限设计可以为所有人带来价值，我们称之为“包容性设计”。
包容性设计考虑了尽可能多的人的需求和能力，而不仅仅是针对残疾人。它认识到我们的需求会随着时间和环境的变化而变化，因此它会预测错误，挣扎和不同的交互方式。它的目的是在问题发生之前解决问题，提高标准并改变良好产品设计的标准。
包容的用户界面是善解人意，有意识且可访问的。年龄、性别、教育程度，财富和能力等不同特征，在不同环境中生活或工作，获得技术水平不同的不同人群可以舒适地使用它。我们将使用POUR作为在用户与界面之间创建简单、轻松、快速交互的参考。
作为设计师，我们当然不能控制以上所有要求都能做到。但是我们应该承认，人们遇到的许多可访问性问题是由设计阶段未做过的决定引起的。
因此，设计师有很多机会可以有所作为。仅通过做出更明智的设计决策，我们就可以影响（改进或协助）四种经验。
通常，可访问性被认为是对创造力的挑战；但是，如果我们认为这是一个创造性的挑战，那么我们会开辟全新的可能性领域。真正好的可访问性的诀窍不是在功能或功能上进行折衷，也不是在美学上取舍，而是使功能和创意体验也可以访问。
1）颜色
① 对比度
对比度是亮度或颜色的差异，使物体从周围环境中脱颖而出，并可能对清晰度产生显着影响。高对比度使视觉元素从背景中脱颖而出，更加引人注目。
专家提示：纯粹的＃000000黑白色会给眼睛带来强烈的对比度，甚至会影响阅读障碍者。这就是为什么我们倾向于避免使用它，而是选择深灰色的原因。
② 亮度
亮度描述从光源发出的照明水平或从表面反射的光量。明亮的颜色反射更多的光线，并会干扰我们阅读和处理信息的能力。
避免在背景或较大表面上使用鲜艳的颜色。请勿在文本上或文本附近使用鲜艳的颜色，以免干扰文本。
如果品牌要求特定的高亮度颜色，请尝试建议使用饱和或较深的颜色。如果你绝对必须使用明亮的颜色，则应将其用于突出显示动作的方法最小化，并将其与较深的色相搭配以达到平衡和高对比度。
专家提示：任何含有超过50％黄色的颜色都会自然反射更多的光。这意味着黄色，橙色，绿色和蓝绿色是高风险颜色，应谨慎使用。
③ 色盲
色盲是无法区分特定颜色（通常是红色和绿色，偶尔是蓝色）的一种，它比你想象的要常见。
专家提示：不要仅仅依靠颜色；颜色不应该是传达重要信息的唯一方法。您可以执行以下操作：
2）版式
① 字体选择
通信是每个数字产品的首要目标，可以借助印刷术及其正确应用来实现。内容应清晰易读，这意味着易于识别和解释，轻松阅读和处理。
简洁明了对于快速阅读和解释至关重要，请避免使用复杂的字体，因为它们只会增加视觉干扰。选择正确的字体家族，针对那些具有清晰定义和独特形状的字符，因为视力障碍或阅读障碍的人可能会因某些字符或其组合而感到困惑。
② 字体样式
字体样式还会影响弱视或阅读障碍者的阅读性能。我们应该注意并谨慎使用字体样式（如斜体，下划线和大写）的频率和位置。
根据“英国阅读障碍协会”的规定，应避免使用斜体，特别是对于较大的副本块或较小的字体。这是因为它们使字母倾斜，显得更加尖锐，因此更难以阅读。
正文也应避免使用带下划线的字体样式。给长的段落加下划线会增加视觉噪音，从而降低阅读性能，而给短的句子或单词加下划线会与活动链接相关联，并可能引起混乱。粗体是添加对比度和强调的更好选择。
尽管没有确凿的研究，但有一些证据支持也应避免主要针对正文使用大写字母。似乎所有大写字母的统一外观会降低单词形状的对比度，从而使扫描变得不那么容易。此外，大写看起来有点紧张，可能感觉好像有人在向您大喊大叫。
专家提示：平衡是关键。谨慎使用每个样式并赋予其含义甚至可以提高可读性。
③ 字体大小
您知道绝大多数人戴眼镜或隐形眼镜吗？实际上，十分之六以上！此外，约有62％的人通过手机访问互联网，这还不包括应用程序的使用情况。当视力不佳的人在旅途中在小屏幕上使用技术时，可能会出什么问题？
使用较大的字体。通常，16px被认为是最具有包容性的，但是请注意，字体可以以不同的比例站立，并且字体的大小可以相差很大。切勿低于14px，事实上，大多数现代网站的正文都使用18px字体，而标签，标题或工具提示仅使用14px或16px。
专家提示：此外，避免使用薄而轻的字体，因为对于较小的字体或在明亮的光线下可能难以阅读。
④ 段落格式
帮助人们轻松浏览内容应该是我们的首要目标，因为只有20％的人可以阅读内容，其中55％的人可以快速浏览内容。我们的工作是通过使用舒适的段落格式来尽可能地支持人们。
研究表明，用于支持可读性的平均在线行长（包括空格）约为70个字符。标题，字幕和项目符号点将有助于扫描，而左段对齐将使文本更易于阅读。
较长的文字墙使人们参与的机会大大减少。成功的段落长度不超过5到6个句子。
空格将帮助患有认知和注意力障碍的人，保持阅读重点。对于其余的内容，它只会使阅读更加愉快和流畅。根据WCAG，最佳做法是将行高（行之间的间距）设置为相对于该类型大小的1.5相对值。段落之间的间距也至少应比行间距大1.5倍，因此必须明确定义。
提示：行距不应超过2.0，因为它可能产生相反的效果并分散读者注意力。
⑤ 复制版面
作为设计师，我们经常陷入过度设计布局的陷阱，以使它们看起来引人注目或独特，从而将可用性放在一边。这就是为什么我们看到诸如文本的一部分之类的趋势在彩色或带纹理的背景上重叠图像或文本的趋势。只要我们知道如何以及何时使用它们，我们仍然可以享受其中的一些趋势。
当在彩色或带纹理的背景上使用文本时，我们需要确保它们之间的色彩对比度足够高，同时在整个重叠区域都保持一致-意味着在副本下没有较浅和较暗的区域，也没有过多的细节干扰。较大的字体大小和较重的字体粗细也会提高对比度。
专家提示：一如既往地“了解您的用户”。时髦的布局并不适合所有人。
您可能在想，视觉设计如何影响听觉体验？因此，想象一下您正在与一个俱乐部的朋友交谈。我敢打赌，您只能听见她说的话的一半，但是您可以通过看着她的嘴唇移动，肢体语言和面部表情来保持对话的进行。
由于视觉效果的支持增强了模棱两可的声音，因此您最终可以理解它们。在用户界面中，声音对于不同的人可能意味着各种各样的事情。它们也很容易在嘈杂的背景中丢失，因此最好以视觉提示来支持它们。
我们的目标应该是提供听觉和视觉提示的反馈，支持错误，通知以及与相关和邻近图形元素的重大交互。我们还必须确保视觉线索保持足够长的活动时间，以使人们能够看到和阅读，同时又不隐藏任何重要的内容。
一个好的做法-不限于支持声音辅助技术，是在UI元素中添加描述性标签，并在图像中添加标题，以便于在屏幕阅读器中轻松导航。为视频使用字幕是改善听力体验的另一种方法，对非母语人士也有帮助。
最后，我们不应该忽略声音是问题的情况，这就是为什么我们需要视觉替代的原因。有些人可能对特定的声音敏感，或者处于声音可能引起干扰的情况下。然后，这是一个好习惯，让人们可以选择关闭声音而不必调低扬声器音量，从而使此功能清晰可见。
专家提示：避免使用不必要的自动播放声音和音乐，因为它们会打扰甚至惊吓别人。
1）知觉
① 视觉清晰度
清晰度是用户界面中的第一个也是最重要的属性。成功的用户界面使用户能够识别和解释他们所看到的内容，了解产品的价值和所要采取的行动，预测使用产品时会发生什么以及与产品成功交互。
形式跟随功能是一项原则，指出对象应反映其预期的功能或目的。为了在用户界面中实现此目的，我们使用了附加功能，附加到UI的视觉提示/属性，以显示用户与其交互的可能方式。
支付能力取决于用户的身体能力、目标、过去的经验，当然还取决于他们认为可能的情况。按钮应该看起来像按钮，就像链接、菜单标签、表单等一样。使用清晰的符号/功能可以帮助用户识别或解释界面，并轻松进行交互。
在用户界面中使用熟悉的和已建立的设计解决方案将帮助用户预测结果并自信地采取行动。因此，使用设计模式来解决常见问题是一个好习惯，该设计模式是经过测试、优化和可重用的解决方案。
设计模式建立在过去的经验和可能性的基础上，并附加到特定的目标上。为避免眼前的问题，选择正确的设计模式应该是我们避免混淆或压力大的交互的第一要务。
建立一致的视觉语言是获得更全面界面的关键。具有相同功能和/或重要性的重复交互式UI组件应始终以相同的方式外观和操作。因此，导航、按钮、链接、标签、错误等元素应在整个产品中具有一致的样式，颜色和动画。
值得注意的是，一致的视觉语言不仅可以通过附加含义和减少视觉噪音来帮助互动，而且还可以增强产品的个性，提升品牌知名度，建立情感联系和信任。
② 层次结构
视觉层次结构是指图形元素的视觉重量及其排列方式，使用户可以轻松地探索和发现内容。通过为页面元素分配不同的视觉权重，我们可以对内容进行分组并影响人们感知信息和浏览产品的顺序。
颜色是第一大关注焦点。彩色元素将脱颖而出，因此在层次结构中位于较高位置。明亮的颜色会更加突出，因此，考虑到这一点，我们应该仔细安排和分配颜色，以将眼睛引导至正确的位置。
视觉元素的大小（例如印刷、按钮、图标和图像）在确定重要性方面几乎与颜色一样强大。较大的图形吸引了用户的注意，并且显得很重要。对于排版，明显不同的尺寸缩放比例可以帮助建立内容层次结构，并使内容扫描变得轻松而轻松。
辅助视觉层次结构的另一种方法是通过设计一致性和例外。一致对齐，外观相似，重复或相邻的元素给人的印象是它们是相关且同等重要的，而偏离元素以及不寻常的形状和有趣的纹理或样式将更加显着。太多的设计例外会引起人们的关注，并会增加复杂性，因此，谨慎使用它们是一个好习惯。
专家提示：研究格式塔原理及其在UI设计中的应用将有助于我们理解视觉感知和分组以改善视觉层次。
③ 色彩应用
颜色不应该是传达信息或增加意义的唯一方法，但它仍然有用且很有影响力，因此不应将其视为装饰性元素。颜色具有含义，尽管没有硬性规定，但是太多的颜色会导致信息疲劳，并且不一致地使用颜色会导致混乱。
避免使用太多颜色。通常，三种颜色足以描述页面的所有重要视觉元素。60–30–10规则可以帮助我们建立完美的和谐。其中60％的彩色项目由原色组成，以创建统一的产品主题，具有30％的辅助颜色增强含义和/或创建引人注目的效果，以及10％的强调色，以补充和辅助主颜色和辅助颜色。
此外，我们需要确保为消息使用正确的色调。除了美学，颜色还可以创造情感和无意识的联系。特定阴影的含义会因我们所处的文化和环境而异，并且颜色通常具有不同的含义-在西方世界，错误是红色，成功是绿色，信息是蓝色等。
专家提示：可以将我们自己的含义分配给颜色，只要它们不与既定规范重叠，并且我们在整个产品中使它们保持一致。
④ 符号学
符号学是对符号/图标及其含义的研究。它着重于人们如何形成和解释这些含义，这取决于人们所看到的上下文。在用户界面中，图标是可视语言的一部分，用于表示功能、功能或内容。符号学可以帮助我们设计立即被识别和理解的图像。
尽管这些年来，我们已经开发出具有大多数人接受和理解的含义的图标。用户还习惯于使用特定于平台的图标，并且可以轻松地进行解释。在可能的情况下，最好遵循这些既定的解决方案，以获得熟悉和流畅的体验。
当然，在某些情况下，我们需要设计具有特定功能的自定义产品特定图标。这些图标必须尽可能简单明了，以确保清晰度。它们还应该具有一致的视觉样式，以传达其功能或与其他非功能性元素区分开。
最后，我们不应该仅仅依靠视觉隐喻来传达含义，因为某些关联可能并不那么明显。如果图标需要标题来描述其含义，则可能不合适。如果不确定，请与实际用户一起测试我们的设计会有所帮助。
专家提示：图标不仅易于解释，而且还可以具有多种含义。因此，将标记与功能图标结合使用是一种很好的做法。
2）互动
记忆
许多心理学实验表明，健康个体的处理能力非常有限。在我们的短期记忆中，我们大多数人平均可以保留7项，具体取决于个人。我们的大脑并未针对数字产品所需的抽象思维和数据记忆进行优化，因此良好的设计会有所作为。减少页面上可用选项和信息的数量，以及使用清晰的标题，面包屑和“后退”选项来访问以前的内容，将帮助用户记住或提醒自己他们在哪里，打算做什么或要做什么。
交互元素上或附近的清晰可见副本将帮助用户在整个交互过程中保持知情和自信。例如，表单标签应始终可见，动作不应隐藏在悬停后面，按钮应提供目标位置的上下文，并且各节的标题应明确。
专家提示：通过称为“块”的过程可以增加我们的短期记忆和处理能力。这是我们在视觉上将项目分组以形成更容易记住的较大项目的地方。
1）菲茨法
菲茨法则为人类的运动和互动提供了一个模型。它指出，将指针（光标或手指）快速移动到目标区域所需的时间是其距目标的距离除以目标大小的函数。意味着较小的目标会增加互动时间。
根据Fitts法则，我们旨在减小用户与目标之间的距离，同时增加其尺寸。该法律主要适用于导航和按钮。菜单和子菜单元素应在附近，而按钮，链接和分页应在较大区域上单击，以实现更快更准确的交互。
专家提示：根据可用性最佳实践，按钮/链接的最小尺寸为42×42像素（重击尺寸）。
2）奖励：提高绩效
到目前为止，我们已经建立了包容性设计，旨在让尽可能多的人访问并实现他们的目标或解决他们的问题，尽管他们有自己的情况。
我们可能很幸运，可以使用最先进的设备或超高速互联网，但是当我们的信号不太好时，我们会感到挣扎。对于大多数人来说，老式设备和糟糕的互联网已成为常态，因此，为获得最佳性能而设计是一件大事。
极简主义是关键。如果我们打算创造一种可以被尽可能多的人使用的产品，那么我们就应该摆脱不必要的一切。图形，图像或动画是有价值的，还是增加了视觉噪音和加载时间？如果是的话，那就必须走了。
图像优化是帮助提高数字产品性能的另一个标准。通过将图像调整为合适的大小，然后通过诸如ImageOptim和TinyPNG之类的工具运行它们，可以节省宝贵的千字节和实际的加载时间。
开发人员通常使用的一种提高性能的技术是“延迟加载”模式，其中图像的加载是异步的，并延迟到需要时才加载。
例如，如果您快速滚动到页面底部，则在网站完全加载之前，您可能会看到类似网站线框的内容。“渐进图像加载”的一种替代方法是“渐进图像加载”，其中我们显示一个空的占位符框<div>，然后用小的低质量模糊图像填充它，最后用所需的高质量图像替换它。
在每个数字产品中都遵循上述最佳实践，这是高可访问性标准的良好起点。但是总会有改进的余地，并且更好地了解我们的用户可以揭示提高无障碍标准的新方法。
因此，有必要花费一些时间和金钱来更多地了解我们的不同类型的用户，因为他们可以教会我们很多有关使包容性体验成为现实的知识。了解我们的用户将帮助我们练习同理心。
“赋权”不是偶然的设计思维过程的第一步。在移情阶段，我们的目标是加深对我们正在设计的人员及其独特视角的了解，因此我们可以在进行任何设计决策时与他们认同并代表他们。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
交互和体验设计师在实际工作中可能会借鉴外来的理论，比如米勒法则。但是你知道吗，其实你们运用这一法则的时候也是有误区的。今天我们就来看看米勒法则到底是干什么的，我们应该怎么样运用它才能使我们的工作进展下去。
说到「米勒法则」（Miller’s law），你可能不太熟悉，因为它更多是被称作「7±2法则」，还有一个有趣的叫法——神奇数字7±2（The Magical Number Seven, Plus or Minus Two）。
这个法则阐述的是：人类的大脑短期记忆存在上限，最多可以记忆大约7±2，即5~9个信息团。
说起来这个法则还算简单，但我看见网络上许多讲解关于「米勒法则」在UI设计中用法的文章，都是在反复例举类似以下案例：
网页的导航菜单往往不会多余9项；金刚区往往一行只会有5个等案例。
这着实有点硬生生在套理论的味道。
因为「米勒法则」研究的是人类大脑的短期记忆量，而导航菜单、金刚区这些场景，是侧重用户识别，而不是侧重用户记忆。
试想你作为用户的时候，你会去记导航菜单的名称吗，哪怕是短暂地记下来（就像我们记短信中的验证码，然后到另一个应用中输入的场景一样，短暂地记住）？
我想大部分的人在这些场景中，应该都是所见所得、过眼云烟的吧。
并且“导航菜单的设计旨在用户识别而不是用户记忆”这个观点，在UX研究咨询公司 Nielsen Norman Group（NN/g 尼尔森诺曼集团）的“web可用性”一文中也有指出。
所以以上导航菜单、金刚区的案例，产品可能确实也是有在控制菜单项目的数量，但更多应该是出于对「希克定律」的考量，而不是「米勒法则」。
我之前也有在《交互四策略实现希克定律》一文中说过：
用户的决策能力会跟随选项数量的增长而降低，给用户非常多的选择，约等于没给用户选择。
这些案例完全是强行反推，给套了个「米勒法则」的结论，实属不妥。
那我就来谈谈，我对「米勒法则」的理解以及它在产品设计中的用途。
米勒在1956年《心理学评论》刊中的《神奇的数字7±2：我们处理信息能力的一些限制（The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information）》一文中，首次提出「米勒定律」。
但该文只算是一篇阐述学术观点的文章，不算严格意义上的论文。
米勒在文中引用了实验者记忆变化音调的实验，发现人们在短时间内可以很好地记忆并复述5~6位的信息，随着收到的信息位数增多，记忆出错的概率也在不断增加。
但因为实验者存在个体差异，最终的信息记忆量基本都能在该基础上再浮动2~3位。
所以得出了“人的大脑在短期记忆中最多可以记住大约7±2个信息团”的结论。
但因为该实验与文章不属于正式的科研研究和论文，所以后来的科研学者又对“人类短期记忆上限”进行了更多的实验研究，最后形成了很多种学说。
有坚持7±2的守旧派；有认为最佳短期记忆信息团为4±1的创新派；也有认为“人类的最佳短期记忆不应该被束缚于一个固定数值区间”的不站队派。
确实 NN/g 尼尔森诺曼集团也说过，用户的短期记忆能力存在较大的个体差异，前25%的人群比尾部25%的人群会好大约2.4倍。
但不论怎么说，这些实验都明确表明了：人的短期记忆存在上限，只是对具体能记住的信息团数量存在分歧。
基于这个结论，我们在设计产品时，该如何加以运用呢？
NN/g 尼尔森诺曼集团基于「米勒法则」，提出了以下几则设计指南参考：
① 响应时间必须足够快，以便用户在等待下一页加载时不会忘记他们正在做什么（体验侧）。
② 更改访问链接的颜色，以便用户不会忘记他们已经单击过哪里（UI+交互侧）。
不要让用户去记优惠券代码，而是该将优惠信息置入短信或邮件中的链接，通过链接自动将优惠券转移到用户的购物车中。
这样可以让计算机承担记住晦涩代码的负担（交互侧）。
③ 在用户可能需要帮助的场景显示“用户帮助”功能，这样他们就不必前往单独的帮助功能区去记步骤，然后再回来解决手头的问题。（交互侧）
你会发现，实际上专业团队对「米勒法则」的理解，基本都在于如何解决“人的短期记忆上限”问题，并没有去纠结，到底是7±2，还是4±1？
并且我在 NN/g 团队每一条设计指南的后面都标注了该条指南作用的侧重向，发现大多都体现在交互侧。
因为「米勒法则」研究的是人的短期记忆极限，在视觉表现层其实很少会运用到。
视觉更多强调的是“从识别到操作”，这并不是「米勒法则」的研究内容。
举一些切实的例子吧，基于「米勒法则」而诞生的产品交互中，我们最常接触到的就是移动设备自动获取短信验证码，方便用户一键填充。
通过图像识别用户的银行卡号，减轻用户记忆负担。
这一类有关用户短时记忆的场景，为减轻用户记忆负担而诞生的交互形式，才是真正的基于「米勒法则」。
现在你明白了吗？因为「米勒法则」中提到了短时记忆极限量为7±2个信息团，让许多人都去关注数字了，而忽略了「米勒法则」到底在研究什么。
然而这个数值，迄今为止，在科研领域依然还存在着分歧。
米勒在他发表的文章中也提到了：
虽然短时记忆存在上限，但是人们的大脑也总是在努力寻找其他方式拓宽这个极限，例如拆解与再组合。
在前面米勒让实验者记忆变化音调的实验中，就有人通过自主拆解、再组合信息形成信息团的形式，来增加自己最终记住的单位信息数。
基于此，前面图像识别用户的银行卡号的示例，如果因为技术受限而无法实现，我们也可以通过拆解卡号为“4位一个信息团”的方式，来方便用户记忆、输入与校验。这样在体验方面也是一种弥补。
要将用户的记忆负担减轻到极限，那就干脆让用户放弃记忆。
例如苹果基于自己的云管理与密钥技术，在识别到用户在创建密码时，会自动填充强密码，强密码复杂混乱到很难被人脑记忆。
一方面加强了密码的安全性；另一方面，搭载其他技术手段来减轻用户的记忆负担，不再纠结于用户究竟能记住多少个、多少位的密码。
直接将用户需要记忆的内容减轻至0，这也许才是真正基于「米勒定律」而创造出来的产品设计吧。
其实这篇文章我认为更多是写给交互和体验设计师看的。
如果你着手的功能有涉及到用户记忆的场景，不防可以参考一下这些减轻用户记忆负担的案例，还有NN/g的设计指南。
但好像现在「米勒定律」被很多UI设计师用成套路了。
然而你发现了吗，文中「米勒定律」的案例，与视觉、与“7±2”很少存在关联。
如果文章开头导航菜单、金刚区的例子，你硬要说是参考了神奇数字7±2，我认为勉强也算行吧（嗯…勉强算）。
因为虽然我认为其设计理论更多是建立于「希克定律」之上的，但「希克定律」告诉我们要减少展示给用户的选项数量，却并没有给出一个建议值。
如果你希望在某些场合给你的设计一些立足点（大家懂的），你如果说结合了「希克定律」与神奇数字7±2，我认为比直接说基于「米勒定律」要更内行一些。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
编辑导读：自手机诞生至今，手机验证码的设计形式越来越多，图标的、语序点选的、空间推理的等等样式，让用户感觉新意的同时，也给设计者提出了难题：验证码的设计，到底应该怎么做才能更好的便利使用者呢？一起看看这篇文章吧，也许你会有新思路、新方向。
验证码“作为人机交互界面经常出现的元素，其本质是为了防止用户利用机器人程序自动注册、登录、恶意投票、发送垃圾邮件、恶意尝试密码等登陆尝试，保证网络安全。”
我们平时在使用互联网产品时会发现，对于企业来说，如何防止黑产恶意抓取企业数据资产，用户隐私，和恶意攻击等，网络安全问题重中之重。
对于用户来说，希望是极致用户体验，不打扰，能快速完成任务。
因此需要在两者间取得相对平衡，既兼顾企业网络安全，又能给用户极致体验。
本文是我在项目设计中总结几种常用到验证码。
我们如何在产品设计中恰当的运用验证码，让用户体验产品起来超级棒却又能保证产品的安全。
希望能为设计师伙伴们提供一些启发或帮助。
进入移动互联网时代以来，验证码的运用场景越来越广。
其验证方式可以大致归为以下几类：
图标/图片行为验证可以保证非中文语言地区的用户可以轻松识别。
高安全级别，用户只需按照顺序点击图中图标/图片，即可完成安全验证。
但是如果选择图标/图片质量不高或者只显示一部分，就会无限增加用户识别能力，体验就超级不好。
比如12306火车票网站图片点选验证就被人唾骂。但是好处也多，那就是打击了囤票的抢票软件。
和图标/图片点选验证方式不同，文字点选验证在保证人的可识别性同时让机器的识别难度呈指数型增长。
安全性比图标/图片点选验证更高，用户只需按照顺序点击图中文字，即可完成安全验证。
对人比较友好，对机器不太友好。
和文字点选验证方式不同，语序点选验证在保证人能识别范围内，并要求用户按照正确的自然语义排序完成点选操作，让机器的识别难度呈指数型增长。
也无形中给用户增加认知成本，比如文盲，对文字理解弱的人。
和其他验证方式不同，空间推理验证同时需要用户根据图片的问题提示点选相应的物体。
逻辑解题能力结合3D立体元素识别能力，对用户来说认知成本更高。
由于图片空间形态的多样性和复杂的问题，可以显著的降低机器识别的概率，适用于高安全场景。
滑动拼图验证的过程中会收集用户拖动滑块的行为轨迹和用户设备信息等多维度信息，实时分析这些信息来进行人机识别。
对于用户来说，流畅优质的用户体验，仅需轻轻滑动完成拼图，即可完成安全验证。
还有重要一点，拼图验证区域可以作为广告宣传或者其他用途，可增加收入。
可根据用户行为轨迹以及其他安全策略，判别用户的风险程度，给用户智能呈现对应的验证形式。
可疑用户根据疑似程度弹出不同难度的验证码进行二次验证，也有概率直接通过。
极致用户体验，多维度收集环境信息，安全用户只需轻点即可通过验证。但是风险也很大，需要非常高大数据支持。
像纯数字，纯字母，数字加字母的静态或动态验证，由于此类的验证码过于内容简单，对计算器程序来说，学习成本不高，很容易被破解，现在几乎不用这种验证方式了。
现在部分还在使用是升级版输入型验证，主要是扭曲变形的数字加字母的验证码，这提高了难度，难以直接辨认。
但是对于用户体验来说，用户体验度一般。
8. 短信验证
对于短信验证，其实也可以归类为输入型验证，为什么会单独分一类，主要是它跟输入型还是有很大不同。
短信验证成本相对输入型验证高，因为需要购买短信，但安全型却是指数型增长的，用户体验来说非常不错。
9. 指纹或刷脸验证
对于以上验证方式来说，指纹或刷脸验证成本会更高，因为需要相应的硬件软件支持，投入大限制也高。
但是安全性也是最高的，极致用户体验，只需要按下手指或者刷下脸就可以验证通过。
上面列举的这几种验证方式，只是目前使用最广泛和最常用的验证方式。
随着科技发展，会出现越来越多不同的验证方式，给用户带来更加极致的用户体验。
随着互联网开启，验证码运用场景也随之而来。
其运用场景可以大致归为以下几类：
验证码适用于 App、Web 及小程序等用户注册场景，可以抵御自动机恶意注册（如利用注册机批量注册小号）。
同时可以有效阻止撞库攻击，从源头进行防护，保障正常用户的注册、登录。
羊毛党频繁刷取奖励，导致真实用户无法获取奖励，业务方运营活动效果下降、经济利益受损。
验证码适用于抢购、秒杀、优惠券等活动场景，有效抵御爬虫、自动机刷取福利券，有效拦截刷单操作，让羊毛党空手而归。
恶意用户用小号在 UGC 社区恶意发帖、刷票，使运营方无法获得真实用户反馈，影响活动开展。
验证码适用于论坛、投票等场景，有效抵御自动机刷赞和水军刷帖，解决广告屠版、恶意灌水、刷票问题。
恶意爬虫可爬取网站的内容、数据，导致网页的核心资源、机密信息被盗用和复制。
验证码适用于公告栏、论坛等内容网站，有效抵御爬虫爬取网站内容信息，防止自动机、爬虫盗取网页内容和数据。
除了以上常见的运用场景，未来验证运用的场景也会越来越多，也会越来越完善，既兼顾网络安全，又有极致用户体验。
对于不同产品或者不同场景，其显示方式（交互方式）可以大致归为以下几类：
触发式显示就是鼠标移入验证条后显示验证拼图，轻松接入，不影响网页原有的排版和美观。
特别是对于手机端寸土寸金的显示内容区域来说，这就显得尤为重要，可以节省很多空间。
适用端：电脑端和手机端。
何为嵌入式显示，就是点选验证区域直接完整嵌入网页，清晰直观，便于用户使用和广告宣传，特别对于网站品牌宣传，可以从验证码下手。
但是对于手机端来说，因为需要完整显示验证区，这就尤为很占用空间，手机端不是很推荐使用这种显示方式。
适用端：电脑端。
弹出式的显示，跟触发式显示有点像，但是弹出式显示是绑定自有验证按钮效果，与自有业务样式完美融合。
而且会根据情况来是否需要验证弹窗，体验相对来说会更加友好，适用场景也更广泛。
适用端：电脑端和手机端。
① 涉及到产品的安全性，目前验证码是最小成本来实现产品安全的手段之一；
② 在实际运用中需要注意辨别产品安全跟验证码之间关系，应该根据产品的安全以及场景是否需要来选择恰当的“验证码”；
③ 验证码未来无论怎么变化多端，其目的都是为了网络安全，其次才是用户体验。在安全和体验上，这就需要我们设计师来找到他们平衡点。
下面是汇总的验证码验证方式对比图，希望能为设计师伙伴们在使用验证码时提供一些启发或帮助。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今年年初，世界上最大的多人在线创作沙盒游戏平台Roblox携元宇宙概念在纽交所上市，再加上《失控玩家》的热映，这个听上去极为虚幻的、不着边际的概念成了资本的香饽饽。本文作者对此进行了分析，与你分享。
上个世纪八十年代，为了尽快改变国内发展现状，国内掀起了一场崇尚知识、尊重人才的运动，追求科学知识成了所有人的共识，就在全国人民都对新科学新技术翘首以盼的时候，“水变油”横空出世，引发整个科技圈震动，举国沸腾。
一旦这一技术成真，所有人都明白，这对当时的中国和国内科技界，意味着什么。而事实上，这不过是一场惊天闹剧。水变油就算可能有朝一日会成真，但那属于未来，并不是当时所处的时代所能实现的。
如今，这一幕在科技互联网领域似乎又在上演。创新匮乏，风口难现，资本畏缩的局面之下，整个科创领域急需要一个新的概念振作整个市场。
于是，元宇宙概念堂而皇之的登上了风口。
今年年初，世界上最大的多人在线创作沙盒游戏平台Roblox携元宇宙概念在纽交所上市，首日市值突破 400 亿美元，相较去年约 40 亿美元的估值飙升10 倍。这个月，字节跳动收购Pico更是把元宇宙的热度推向高潮，再加上《失控玩家》上映，元宇宙概念股爆发，这个听上去极为虚幻的、不着边际的概念成了资本的香饽饽。
然而，从互联网风口的发展脉络来看，元宇宙的爆火，更像是互联网创新的一次“水变油”闹剧。
元宇宙这个概念可能跟水变油一样久远了，现在无非是新瓶装旧酒，被资本和巨头们重新包装了新概念。
搞笑的是，元宇宙的概念重新火到现在，被刷屏、被科普、被讨论，但实际上很多人仍然没有弄懂这个概念，而这种似懂非懂云里雾里的概念，对于科技巨头和资本来说，最有腾挪的空间。
事实上，在1992年出版的科幻作品《雪崩》中，作者构建了一个平行于现实世界的虚拟世界，人们可以在里面拥有一个自己的虚拟替身，这个世界叫作“Metaverse”，也就是类似现在爆火的元宇宙。
元宇宙所代表的世界，自由度极高，换句话说，你在现实中能做的事情，在元宇宙也能做，而现实中不能做的事情，可能会在元宇宙中实现。
就像《失控玩家》中的开放世界游戏，玩家在游戏中可以杀人、放火、抢银行，对不带墨镜的非玩家角色们做任何事情。它和普通游戏的区别在于，元宇宙中的这些行为都建立在高度的沉浸式体验中，当你杀人、放火、抢银行时，感觉像真的在实施暴力和犯罪。
当然，元宇宙的想象空间不是像电影中偏向满足用户的暴力需求，而是延展到现有互联网生活无法触及的领域，接近于把整个现实世界平移到虚拟中。
但现在看来这未免太过虚幻。广义被认同的元宇宙有六大支撑技术，分别为区块链技术、交互技术、电子游戏技术、人工智能技术、网络及运算技术以及物联网技术，而单看任何一项，都处于一种技术水平和落地应用跟不上外界期待的状态。追根究底，当初区块链、人工智能等概念炒作多火爆，现在就有多尴尬，这和现在的元宇宙如出一辙。
可为什么就是这样一个概念，引起了资本和巨头的竞相争夺呢？其实他们未必真的认为元宇宙会掀起下一代互联网社交和娱乐模式的变革，更现实的是他们恰好需要元宇宙这个让人摸不着头脑的新“风口”。
进入2021年以后，互联网经济整体进入了一个动荡、难熬的时期。一方面，互联网用户增长缓慢，已然到达了一个极限，越发困扰着互联网公司。
根据中国互联网络信息中心（CNNIC）最新发布的《中国互联网络发展状况统计报告》显示，截至2021年6月，我国网民规模达10.11亿，较2020年12月增长2175万，互联网普及率达71.6%。其中，即时通信用户规模达9.83亿，较2020年12月增长仅218万，短视频用户规模高达8.88亿，较2020年12月增长1440万。
另一方面，监管成为今年影响互联网公司最重要的外部因素，从教育到游戏，从社区团购到共享民宿，从影视圈到饭圈…那些曾经引得资本追逐和热捧的风口及风口上的公司，在野蛮生长的过程中，乱象丛生，现在无一例外地触动了红线。
从这个角度出发，元宇宙这样一个没有落地的、虚幻的又能刺激大众兴奋点的概念，在监管时代下似乎安全许多。互联网巨头和资本，就如同古代帝王迟暮之后，一味追求长生，生生臆想出来了长生不老药。
近期，苹果秋季发布会举行，每年的这个时候，围绕苹果新机都会掀起一波又一波讨论的热潮。然而，不得不承认，苹果秋季发布会带给用户的惊喜已经越来越少，舆论热潮过后，讨论点总会落在苹果创新乏力、库克才能不足上。
苹果的创新困境，只是整个互联网经济创新越来越泯然于众的一个缩影，在贴有创新乏力标签的互联网公司名单中，恐怕要加入很多巨头的名字。
2016年，谷歌也举行了一次发布会，在会上一口气发布了一大堆的硬件产品，这个东拼西凑的硬件全家桶，因为装的都是“过时”的产品，而被媒体狠狠地嘲讽了一次。由此，作为美国硅谷技术创新风向标的企业，人们开始质疑谷歌是不是“黔驴技穷”，一位在谷歌任职13年的老工程师公开批评谷歌发布的产品分别抄袭了亚马逊Echo、WhatsApp和微信。
硅谷的活力丧失，已然成为一种共识。
而国内呢？我国互联网经济的模式或产品创新，曾一度改变了原本互联网公司从硅谷复制、借鉴现有模式的习惯，渐趋成为全球互联网创新的另一个中心。然而，在共享经济的高潮过后，国内互联网新事物的诞生和发展套路基本就沦落成找准一个行业进行线上化，继而融资烧钱、规模扩张、相互争夺流量。成则剩者为王，败则一地鸡毛。
这其实不是创新，以往互联网创新的本质在于变革行业，衍生出一种比现有商业业态更有优势的新生模式，但现在互联网的风口中，我们看到的不是对行业的升级，而是干扰甚至破坏。
比如社区团购，社区团购通过融资，以补贴吸引用户白嫖，将原有菜摊菜贩为主导的商业业态快速破坏，实际上它为商业社会创造的价值却寥寥无几。新消费投资热也是如此，眼见没什么新赛道了，资本瞄准了我们的餐桌。
原以为社区团购和新消费已然是国内互联网创新的一次大倒退，直至元宇宙爆火，这场由概念炒作掀起的虚火从硅谷烧到国内，更像是一场席卷全球互联网经济的倒退，以掩盖整个互联网创新乏力的事实。
换句话说，我们正在拿未来数十年都未必能实现的科技幻想，来弥补现在的创新枯竭。
尤其是外界对元宇宙的畅想，目前来看过于超前了。一方面，作为能够超过智能手机和个人电脑的下一代主流计算平台和元宇宙的重要入口，AR/VR还停留在视觉阶段，交互很差，用户根本没有沉浸式体验；
另一方面，一个全新的世界，需要包括游戏、影视视频音乐内容、办公与会议体系、虚拟消费品、虚拟房地产、虚拟经济体系等等，而这些要素在现有的互联网世界都未必成熟。
元宇宙的刺激作用已然在互联网商业中显现。Roblox在美国纳斯达克上市，顶着“元宇宙第一股”的光环，Roblox现在的市值高达500亿美元。
无独有偶，9月8日，元宇宙概念股集体爆发，股价飙升，最高涨幅达到了44%。其中，中青宝连续两日涨停，连带着歌尔股份也收获了10cm涨停，市值逼近1800亿元。字节跳动更是因为高价收购国内VR行业头部厂商PICO，被推上舆论的风口浪尖。
游戏公司们也极为兴奋。游戏公司是元宇宙重要的参与者，甚至不排除未来一个开放世界的游戏就是一个元宇宙，由此，备受政策风险左右的游戏公司们似乎找到了一个天然适合炒作、拉动股价的营销点。像完美世界、世纪华通等，都在向外界透露自己积极探索和融入元宇宙相关元素的信息。
但元宇宙拯救不了国内游戏公司，同样也拯救不了国内互联网。
近期，A股游戏公司先后披露了半年度业绩报告。数据显示，2021年上半年，A股31家游戏公司中，16家出现了营收同比下滑，17家公司归母净利润同比下滑，其中7家企业出现亏损。三七互娱、完美世界、昆仑万维等头部游戏公司出现营收、净利双降。
游戏公司业绩下滑，主要是因为去年同期的业绩太过优秀，疫情后便恢复了正常水平。不过可以预测的是，下半年游戏公司的业绩不容乐观。新未成年人防沉迷游戏禁令出台后，游戏公司都要面临用户活跃度降低、游戏流水下降的问题，这在游戏用户数日益减少的背景下，又增添了营收的压力。
参与元宇宙炒作的不只是游戏公司，互联网巨头们也在蜂拥而上。比如腾讯，据天风证券梳理，无论是打造虚拟世界需要的引擎工具的缔造者Epic，还是AR组件领导者Snap，以及自由表情工具Bitmoji、摄像头Kit、社交软件Discord等，都有腾讯投资的身影。
腾讯和字节跳动正在争夺和押宝下一场互联网变革的风口，对后者来讲，元宇宙可能涵盖了下一代社交网络体系，成为干掉腾讯这一社交巨头的绝佳机会。可是，无论是腾讯还是字节跳动，追捧和投资元宇宙似乎都不能解决当下互联网公司面临的最大困境，外部不确定性因素或将持续对他们的核心业务产生冲击。
对于创投圈，我们看到，元宇宙其实很难成为创投圈的一剂“兴奋剂”，缓解创投人士的焦虑。因为放眼望去，除了一些蹭元宇宙热度的游戏公司，创投圈投无可投，VR创业公司虽然重新得到关注，但过去VR元年的惨痛经历还历历在目，而跟风的游戏公司，他们的行为仅限于炒作概念。想要落地，可能还很久远。
从互联网诞生之初，消费、娱乐、信息获取等模式的创新，丰富了用户的生活，到现在互联网公司围着一个过度超前的概念，靠想象获得刺激和高潮，这种演变未免有些悲哀。
毕竟，元宇宙理论上即使是成立的，但是它也和水变油一样，并不是这个时代的事情，可以研究，但应该做好长期投入的准备，而不是现在就开始进行概念炒作和收割。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这篇小文，将从四个模块讲述如何有效竞品分析。
竞品分析顾名思义，是对竞争对手的产品进行比较分析。
不同的角色做分析的方向是不同的，UX设计师做产品体验分析，从视觉和感觉两个方面去分析；产品经理做竞品分析从功能、框架、技术、战略等，分析产品背后的部分，比如竞品为什么这么做？是如何做到的？下一步会怎么做……这里作者主要是分析产品层面的竞品分析。
竞品分析的意义根据产品发展阶段不同，可归纳为以下四点：
通过竞品分析，可以快速了解这个行业、市场、竞争对手的产品以及自己的产品。
从产品战略层面来说，可以为企业制定战略、布局规划提供依据；可以通过MVP来测试产品是否符合市场预期，找准产品定位。
做竞品分析会让我们时刻关注竞争对手，关注环境的变化，关注政策的变化等，有效的竞品分析可以预警避险。
定方向、定目标、定策略，包括竞品分析、用户研究、需求分析、产品规划、产品设计等。
输出一份完整的竞品分析，需要完成六个核心流程：
明确目标：明确为什么要做、想解决什么问题、竞品分析的目标是什么
选择竞品：选择要分析的竞品、直接竞品、间接竞品、参照品
确定分析维度：根据竞品分析目标，确定要从哪些维度分析竞品
收集竞品信息：从各种渠道收集竞品信息
信息整理与分析：对收集到的竞品信息进行整理与分析
总结报告：得到竞品分析的结论，输出竞品分析报告
在第一部分全面认识竞品分析中有提到竞品分析的意义，也是竞品分析的目标所在，概括的可以分为四类：决策支持、学习借鉴、市场预警、机会探索。
根据产品生命周期不同，竞品分析的目标和侧重点不同。所以在竞品分析之前一定要了解当前产品处于什么阶段，需要分析的目标是什么。
竞品的选择，首先要了解竞品的分类：直接竞品、间接竞品、替代品、参照品。然后根据目标针对性的选择产品。
直接竞品
是指产品形式和目标用户群是完全相同的产品。比如生活中最鲜明的例子：可口可乐 VS 百事可乐。
间接竞品
是指产品形式不同，目标用户群类似的产品。比如：可口可乐 VS 元气森林，都是饮品。
替代品
是指产品形式不同、品类不同，目标用户群类似，能满足用户相同需求的产品。比如：公交车 VS 滴滴打车。
参照品
是指有参考价值的产品，可能是跨界的各种产品，开放式的产品类别。
竞品的选择不是数量越多越好，而是要选择合适的，做深度分析，分析出有价值的信息。
分析维度是指从哪些方面、哪些角度去分析，在这个阶段要确定产品分析的广度和深度。可以从产品视角和用户视角两个不同的视角去确定分析维度。
产品视角：从产品本身的信息量上去选择要分析的维度。以功能、框架、技术、体验、用户……等维度进行分析；
用户视角：从用户最关注的信息上去选择要分析的维度。以$APPEALS（客户需求分析）框架作为分析框架。
$APPEALS方法是IBM在IPD总结和分析出来的客户需求分析的一种方法。它从8个方面对产品进行客户需求定义和产品定位。具体如下：
$-产品价格（Price）；
A-可获得性（Availability）；
P-包装（Packaging）；
P-性能（Performance）；
E-易用性（Easy to use）；
A-保证程度（Assurances）；
L-生命周期成本（Life cycle ofcost）；
S-社会接受程度（Social acceptance）。
收集竞品信息的渠道总结为三种：官方渠道公开资料、第三方竞品分析平台获取、打入产品自行体验或与用户接触调研出来的等。
在之前公众号文章里曾分享过有关用户分析、产品分析等数据分析平台的汇总表。
信息收集完成后，并不是所有信息都是可用的，需要对其进行筛选、分类、剔除、评级等，得到有效信息，针对有效信息进行分析。
这里也是竞品分析重要的一个环节，不同的目标，需要选择不同的分析方法，汇总一下竞品分析的方法有：比较法、矩阵分析法、竞品跟踪矩阵、功能拆解、探索需求、PEST分析、波特五力模型、SWOT分析……（下一部分会具体讲解）
所有的分析步骤都完成之后，需要对分析结果进行总结，从中挑选出有价值的信息，形成一份分析报告，报告的格式可根据展示场景输出选择适当的格式。
与竞品做横向比较，深入了解竞品，并通过分析得出优势、劣势。
打勾比较法：有无某功能，如果产品功能复杂，要拆解成2级功能等再横向比较
评分比较法：应用于用户体验设计评估和$APPEALS要素评估
描述比较法：通常会用“界面截屏+文字描述”的形式
以二维矩阵的方式分析产品与竞品的定位、特色或优势。
跟踪竞品的版本更新，找到竞品各版本的发展规律，以推测竞品下一步的行动计划。竞品跟踪矩阵包括几个要素：时间、版本号、版本变化要点（新增、优化、删除）以及外部环境变化。
把竞品分解成1级功能、2级功能、3级功能，甚至4级功能，以便更全面地了解竞品的构成，避免遗漏。
挖掘竞品功能所满足的深层次的需求，以便找到更好的解决方案，提升产品的竞争力。
PEST分析法是对宏观环境进行分析，以便找到机会，认清威胁与挑战。
所谓PEST ，P是政治（Politics），E是经济（Economy），S是社会（Society），T是技术（Technology）。
对行业环境进行分析，评估某一行业的吸引力、利润率。
PEST分析和波特五力模型可归纳出SWOT分析中的机会和威胁，通过SWOT分析找出产品的优势、劣势、机会、威胁，以便制定竞争策略。
产品越发展难免会进入同质化的竞争，与其更好，不如寻找更好的机会点。在竞品的基础上做“加减乘除”，以便进行差异化创新。
借助精益画布、竞品画布、战略画布这三个工具可以提升竞品分析的效率。
精益画布是关于产品商业模式分析的一种很实用的工具，可以用来做产品商业模式规划和分析。精益画布可以帮助产品更全面的思考、决策，从系统、商业的角度来规划产品、分析产品，建立产品的全局观。
精益画布在日常工作中的使用场景包含：编写PRD、项目立项、商业计划书……
知己 用精益画布--规划自己的产品
知彼 用竞品画布--规划竞争对手的产品
竞品画布是前面提到的竞品分析的一种方式，是把竞品分析的六个步骤固化到一张表上，作为一个规范性的模板，引导大家更规范的做竞品分析。
竞品画布相当于竞品分析报告的MVP（最小可用产品），用来低成本快速验证分析的思路是正确的，避免返工。
很多人在刚接触一个新产品时，很容易盲目的去分析，找不到方向，此时借助竞品画布这个标准化的模板，一步步的去分析产品，可以很快地了解一个产品。
战略画布是做产品差异化竞争的有效工具，是通过价值曲线的方式，在某一时间段内寻找到有用户价值的战略方向。
价值曲线
价值曲线是以图形的方式描绘出一个产品在各个竞争元素上表现得相对强弱程度，由此可以看出一个产品的战略轮廓。
横坐标显示产品的竞争元素、价值点（用户在意点）等，通过用户的评价就可以了解到对于用户来说他们最在意的是什么，他们使用产品的原因是产品给他们带来了什么，这就是要寻找的竞争元素的来源。
纵坐标显示相对水平。
通过价值曲线的方式，可以清晰的看到产品与竞品间的差异点，战略画布是做产品差异化创新的有效工具。
最后，利用思维导图结构化的方式，整合了竞品分析核心知识点，分享给看到的你：
看似这些竞品分析的方法论是在做一些与设计无关的事情，但很多方法论是通用的，可以应用到视觉、交互的竞品分析当中；作为设计师不能给自己设限，要多去学习跨界的知识，了解这些竞品分析的方法论后，以后再接触新项目，便可以借助文中的规范尝试做竞品分析，助力自己快速了解业务、行业等。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
B 端导航栏，是 B 端项目最重要的模块（没有之一）。一个优秀的 B 端导航栏，可以清晰地连接项目的所有功能、模块，让访问者高效的在模块间穿梭。
通常，在进行具体页面设计的时候，我们第一个设计的模块也是导航。在主流的页面框架中，导航分为两种，顶部导航和侧边导航。
有很多 B 端产品官网使用的顶部导航，并不能作为管理系统导航，仅仅是一般网站导航。比如阿里云或腾讯云官网上方的导航。
这类导航主要应用在企业官网中，通过比较密集的信息密度，将提供的产品或服务全部罗列出来。
而侧边栏虽然可以做不少花哨的样式，但信息密度显然无法和顶部导航栏相提并论。
顶部导航的特征需要鼠标悬浮展开分类面板，通过收纳大量下级菜单，来提升用户的 “检索” 效率。而用户在这些菜单间跳转切换的频率不会太高。
侧边栏导航的特征则是更直接，包含的菜单数量不会太多，用来提升用户的 “跳转” 效率。满足用户高频的模块跳转切换需求。
侧边栏的设计也包含两种形式，细栏和宽栏。
细栏主要突出图标，应用在模块数量不多的情况，也为内容区域腾更多控件出来。比如 Teambition、百度云等产品。
宽栏则是比较安全的设计形式，兼容性较好，不管是模块数量多还少都能用。但相应的，它会一定程度上占用控件减少内容区域面积。
在一般项目中，只要用好侧边栏的设计即可。顶部导航在管理界面中的应用多为混合场景，用来切换比侧边栏更高级的分类页面。比如腾讯云内部页面中，切换业务模块使用顶部导航的展开面板，业务下级模块则在侧边栏。
导航栏设计，必然要满足 “导航” 这个核心目标。组件的样式、交互必须为功能服务，但很多新手只考虑样式。
通常情况下，导航是反映项目功能模块的入口，产品中包含多少模块、子模块，就会有序的布置到导航里面。那么问题来了，项目到底包含了多少模块和子模块？哪些是要放进导航里的？
在之前思维导图应用的分享中，有一个非常重要的产品输出类型，叫 —— 功能结构地图。解释了不同功能层级的结构和从属关系，以及项目中总共包含了哪些页面。
它是制定导航内容的主要依据，但并不代表里面出现的每一个节点页面都要放进导航中。
设计师展开导航设计前，也需要使用思维导图工具，再把需要展示出来的内容和结构梳理一遍。否则，面对模块数量较多，层级超过两级的导航就必然手忙脚乱。
比如腾讯云直播和短书的侧边栏层级结构：
这么看起来很清晰对吧？但留给设计的坑是，并不是每个层级，它们都可以点击，都具备跳转功能。我们来看看实际的实现的效果。
也就是说，在导航栏的导航选项中，并不是所有的选项都是用来跳转的，它们是用来辅助区分内容和用来展开的。
所以，我们要在思维导图阶段，根据实际场景的需要，对每一个导航信息点进行标注，明确它们在后续设计中包含的作用。
同时，还有一个需要注意的事情，就是是否为导航栏增加响应式适配。即窄屏的情况下，通常是将导航栏缩短，只保留图标的方案。
把这些内容定好，就可以进入我们具体的设计环节了。
整理好上方的内容层级，到具体设计步骤里，首先要做的，就是制定出一个能满足层级显示和操作的交互结构出来。
再整理一遍，侧边栏的内容包含：
而可交互的元素，显然是有对应交互状态的，那么对应的交互状态就包括：
那么，先用原型做个示意，它的状态包含了默认、选中一级、选中二级三种情况：
在实际设计环节里，最难受的事情就是一级菜单有的用来展开，有的可以选中，怎么区分？而一二级菜单悬浮、选中是否要统一样式？怎么保证一致性？
如果要统一一二级菜单的选中样式，那么设计过程中，就要保证一二级菜单实际占用空间区域是一致的，间距也进行统一，才能合理添加悬浮和选中效果。
如果不对一二级菜单统一悬浮和显示样式，区分展示，可以不统一菜单的实际区域和高度。但是，这样的导航要设计好更困难一点。如果不统一交互效果，那么就尽量保证其中一级悬浮和选中采取背景填充，另一级仅仅是文字样式变更。
把要使用哪种方案确定下来，然后再去优化细节，添加对应的图标内容和优化字体、分割线等等。
我们在上面用的案例，逻辑层级是 3 级，但是有的项目中，包含的可能有 4 级、5 级，那么必然会呈现出更复杂的交互体系。
常见的做法，就是将侧边栏做成两列，一列是顶级菜单，一列是其它次级菜单，类似有赞的这种做法。层级越多带来的挑战也就越大。
导航的设计，对细节调节并不仅仅是为了好看，而是提供更直观的交互和一致性。仅仅完成样式依旧是不够的，具体使用上还可能会碰到什么问题我们要尽可能多进行思考。
比如：
这样的问题，就留给大家自己思考了。
导航的设计细节是很次要的因素（虽然对整体样式很重要），重点是给出合理的信息展示和交互方法。如果导航不能帮助用户快速、简洁的进行页面的选择和跳转，即使做的再好看也是一个失败的导航。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
想必大家对地图都不陌生,都使用过地图吧,有了地图我们也就不用在把回家的路径牢牢地记住了,只需要在地图上搜索下就能进行导航了,
而且在打车的时候也都使用的是地图,…地图作用范围很广很广这里就不在多介绍了直接进入主题.
目前市面上主流的地图有:
高德地图
https://lbs.amap.com/ 开发者平台
百度地图
https://lbsyun.baidu.com/ 开发者平台
腾讯地图
https://lbs.qq.com/ 开发者平台
天地图
https://www.tianditu.gov.cn/ 开发者平台
以上就是我们常用的地图,也是可以免费调用的地图不收费,但是有次数限制都够用,基本所有的地图开发都要先申请为开发者后才能进行地图的开发
虽然高德很火很厉害,但是我公司让我用天地图开发,所以下面的案例大致演示天地图的开发的流程,其他平台的地图开发流程基本都类似.
只要掌握一个地图的开发那么其他地图开发就是小儿科了…
进入天地图页面
注册账号
申请成为开发者
开发者分为: 个人开发者和企业开发者 根据情况自行选择
然后根据需求创建应用-生成应用key
入门Dome
实例代码:
http://lbs.tianditu.gov.cn/api/js4.0/guide.html 以下代码的内容介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>HELLO WORLD</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <script> var map; var zoom = 12; function onLoad() { map = new T.Map('mapDiv'); map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //39.897019,116.323003 } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv" style="position:absolute;width:100%; height:900px"></div> </body> </html>
地图级别 也就是地图加载后显示的缩放级别
缩放级别1~2 那么就是洲级别 (亚洲 ,美洲…)
缩放级别3~4 那么就是国家级别
缩放级别5~6 那么就是省级别
缩放级别7~8 那么就是市级别
缩放级别9~10 那么就是区级别
缩放级别11~12 那么就是县级别
…以此类推 最多缩放18级别(街道级别)
上案例效果图:
http://lbs.tianditu.gov.cn/api/js4.0/examples.html 基本日常所需的实例,稍微改动就能使用了
上面实例无法满足你的要求或者需要添加特殊操作,那么能在下面AOI文档中能找到具体实例代码里的每一个方法使用详细,然后在根据业务需求进行修改就行了
http://lbs.tianditu.gov.cn/api/js4.0/class.html
在天地图中提供了几个服务接口用来获取一些数据的地方 ,但是注意有每日调用配额限制的(控制台可以查看次数限制)
http://lbs.tianditu.gov.cn/server/search.html
比如:客户想查询或者快速定位某一个区域或者街道的位置,但是自己通过地图一点一点的找太麻烦了那么就可以通过接口的方式直接获取到想要的数据,
查询: 北京市延庆区延庆镇莲花池村前街50夕阳红养老院的坐标
http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"北京市延庆区延庆镇莲花池村前街50夕阳红养老院"}&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5
接口返回的数据:
{“msg”:“ok”,“location”:{“score”:40,“level”:“地名地址”,“lon”:116.002677524,“lat”:40.4509903540001,“keyWord”:“北京市延庆区延庆镇莲花池村前街50夕阳红养老院”},“searchVersion”:“6.0.0”,“status”:“0”}
响应接口
| 参数值 | 参数说明 | 参数类型 | 备注（值域） |
|---|---|---|---|
| status | 返回状态 | string | 0：正常返回，101：结果为空，404：出错。 |
| msg | 返回信息 | string | OK：正常，其他异常。 |
| location | 地址信息 | json | 地址信息 |
location
| 参数值 | 参数说明 | 参数类型 | 备注（值域） |
|---|---|---|---|
| lon | 坐标点显示经度 | Double | 必须返回。 |
| lat | 坐标点显示纬度 | Double | 必须返回。 |
| level | 类别名称 | string | 非必须返回。 |
| typeRound | 附近相似点 | Array | 开启周边查询必需返回。 |
然后在代码里通过
map.centerAndZoom(new T.LngLat(116.41593, 39.92313), 16);
从新设置下地图显示的位置,以及缩放比例就行了.
在很多项目都要求把客户提供的公司…在地图上标注出来并且显示对应的描述,
在天地图提供的实例中是默认鼠标点击显示,然后点击消失,实际中这样太麻烦了我们稍作修改,改变为鼠标悬浮显示,鼠标离开消失
修改后的代码
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>天地图－地图API－范例－多个点的信息窗口</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #mapDiv{height:900px;width:100%;} input,p { margin-top: 10px; margin-left: 5px; font-size: 14px; } </style> <script> var map var zoom = 15; function onLoad() { var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"], [116.406605,39.921585,"地址：北京市东城区东华门大街"], [116.412222,39.912345,"地址：北京市东城区正义路甲5号"] ]; //初始化地图对象 map = new T.Map("mapDiv"); //设置显示地图的中心点和级别 map.centerAndZoom(new T.LngLat(116.41593, 39.92313), zoom); for(var i=0;i<data_info.length;i++){ var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1])); // 创建标注 var content = data_info[i][2]; map.addOverLay(marker); // 将标注添加到地图中 addClickHandler(content,marker); } function addClickHandler(content,marker){ // 改为鼠标悬浮显示 marker.addEventListener("mouseover",function(e){ openInfo(content,e)} ); //添加鼠标离开后关闭提示框 marker.addEventListener("mouseout",function(e){ map.closeInfoWindow() } ); } function openInfo(content,e){ var point = e.lnglat; marker = new T.Marker(point);// 创建标注 var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象 map.openInfoWindow(markerInfoWin,point); //开启信息窗口 } } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>为多个点添加多个点的信息窗口</p> </body> </html>
如果客户不知道自己公司…的坐标,我们可以通过-客户给的名称,进行自动搜索地理位置然后进行标注实现
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－地理编码</title> <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <script> var map; var zoom = 3; var geocoder; function onLoad() { //初始化地图对象 map=new T.Map("mapDiv"); //设置显示地图的中心点和级别 map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom) //创建对象 geocoder = new T.Geocoder(); //根据国家名称自动搜索,对应的坐标,然后插入标注 var list=["美国","中国","阿拉伯联合酋长国"]; for (let string of list) { geocoder.getPoint(string,searchResult); } } function searchResult(result){ console.log("经纬度: "+result.location.lat + ',' + result.location.lon) if(result.getStatus() == 0){ //创建标注对象 var marker = new T.Marker(result.getLocationPoint()); //向地图上添加标注 map.addOverLay(marker); var markerInfoWin = new T.InfoWindow("信息窗口"); marker.addEventListener("click", function () { marker.openInfoWindow(markerInfoWin); });// 将标注添加到地图中 }else{ alert(result.getMsg()); } } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>本示例演示如何使用地理编码接口获得坐标信息。</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-tdt-demo</title> <!-- 引入天地图在线 API --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
mounted() 中初始化天地图
<template> <div :id="tdtMapDivID" class="divTdtMap"></div> </template> <script> export default { name: 'TdtMap', data() { return { tdtMapDivID: "tdtMapDivID_"+this._uid, tdtMap: {} } }, created() { }, mounted(){ // 初始化天地图 this.initTdtMap() }, watch: { }, methods: { // 初始化天地图 initTdtMap(){ this.tdtMap = new T.Map(this.tdtMapDivID) this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12) }, } } </script> <style scoped> .divTdtMap { margin: 0px; padding: 0px; width: 100%; height: 80vh; z-index: 0; } </style>
导入 组件、注册 组件和 使用 组件
<template> <!-- 使用组件 --> <TdtMap></TdtMap> </template> <script> /* 导入组件 */ import TdtMap from './components/TdtMap' export default { name: 'TdtMap', components: { /* 注册组件 */ TdtMap, }, data() { return { } }, created() { }, mounted(){ }, watch: { }, methods: { }, } </script> <style scoped> </style>
隐藏天地图LOGO
document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none'
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
- JavaScript是函数级作用域编程语言：变量只在其定义时所在的function内部有意义。
- 如果不将变量定义在任何函数的内部，此时这个变量就是全局变量，它在任何函数内都可以被访问和更改。
- 如果函数中也定义了和全局同名的变量，则函数内的变量会将全局的变量“遮蔽”。
- 这个程序的运行结果是什么呢？
- 这个程序的运行结果是什么呢？
- 先来认识函数的嵌套：一个函数内部也可以定义一个函数。和局部变量类似，定义在一个函数内部的函数是局部函数。
- 在函数嵌套中，变量会从内到外逐层寻找它的定义。
- 在初次给变量赋值时，如果没有加var，则将定义全局变量。
- JavaScript中函数会产生闭包（closure）。闭包是函数本身和该函数声明时所处的环境状态的组合。
- 函数能够“记忆住”其定义时所处的环境，即使函数不在其定义的环境中被调用，也能访问定义时所处环境的变量。
- 在JavaScript中，每次创建函数时都会创建闭包。
- 但是，闭包特性往往需要将函数“换一个地方”执行，才能被观察出来。
- 闭包很有用，因为它允许我们将数据与操作该数据的函数关联起来。这与“面向对象编程”有少许相似之处。
- 闭包的功能：记忆性、模拟私有变量。
- 当闭包产生时，函数所处环境的状态会始终保持在内存中，不会在外层函数调用后被自动清除。这就是闭包的记忆性。
闭包的记忆性举例
- 创建体温检测函数checkTemp(n)，可以检查体温n是否正常，函数会返回布尔值。
- 但是，不同的小区有不同的体温检测标准，比如A小区体温合格线是37.1℃，而B小区体温合格线是37.3℃，应该怎么编程呢？
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>Document</title>
-
</head>
-
-
<body>
-
<script>
-
function createCheckTemp(standardTemp) {
-
function checkTemp(n) {
-
if (n <= standardTemp) {
-
console.log('你的体温正常');
-
} else {
-
console.log('你的体温偏高');
-
}
-
}
-
return checkTemp;
-
}
-
-
// 创建一个checkTemp函数，它以37.1度为标准线
-
var checkTemp_A = createCheckTemp(37.1);
-
// 再创建一个checkTemp函数，它以37.3度为标准线
-
var checkTemp_B = createCheckTemp(37.3);
-
-
checkTemp_A(37.2);
-
checkTemp_B(37.2);
-
</script>
-
</body>
-
-
</html>
在Java、C++等语言中，有私有属性的概念，但是JavaScript中只能用闭包来模拟。
- 题目：请定义一个变量a，要求是能保证这个a只能被进行指定操作（如加1、乘2），而不能进行其他操作，应该怎么编程呢？
-
<!DOCTYPE html>
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>Document</title>
-
</head>
-
-
<body>
-
<script>
-
// 封装一个函数，这个函数的功能就是私有化变量
-
function fun() {
-
// 定义一个局部变量a
-
var a = 0;
-
-
return {
-
getA: function () {
-
return a;
-
},
-
add: function () {
-
a++;
-
},
-
pow: function () {
-
a *= 2;
-
}
-
};
-
}
-
-
var obj = fun();
-
// 如果想在fun函数外面使用变量a，唯一的方法就是调用getA()方法
-
console.log(obj.getA());
-
// 想让变量a进行加1操作
-
obj.add();
-
obj.add();
-
obj.add();
-
console.log(obj.getA());
-
obj.pow();
-
console.log(obj.getA());
-
</script>
-
</body>
-
-
</html>
- 不能滥用闭包，否则会造成网页的性能问题，严重时可能导致内存泄露。
- 所谓内存泄漏是指程序中己动态分配的内存由于某种原因未释放或无法释放。
- IIFE（Immediately Invoked Function Expression，立即调用函数表达式）是一种特殊的JavaScript函数写法，一旦被定义，就立即被调用。
- 函数不能直接加圆括号被调用。
- 函数必须转为“函数表达式”才能被调用。
- 为变量赋值：当给变量赋值需要一些较为复杂的计算时（如if语句），使用IIFE显得语法更紧凑。
- IIFE可以在一些场合（如for循环中）将全局变量变为局部变量，语法显得紧凑。
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
目录
2.1element.getElementsByTagName()
3.1 document.getElementsByClassName('类名')
3.2 document.querySelector('选择器')
3.3 document.querySelectorAll('选择器')
API( Application Programming Interface,应用程序编程接口)
是一些预先定义的函数,目的是提供应用程序
与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
简单理解: API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。
比如我们想要浏览器弹出一个警示框,直接使用alert( '弹出')；
1. API是为我们程序员提供的一个接口,帮助我们实现某种功能，我们会使用就可以，不必纠结内部如何实现
2. Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
3. Web API 一般都有输入和输出(函数的传参和返回值) ，Web API很多都是方法(函数)
4.学习Web API可以结合学习内置对象方法的思路学习
文档对象模型( Document Object
Model ,简称DOM) ,是W3C组织推荐的处理可扩展标记语言( HTML或者XML )的标准编程接口
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式
DOM把以上内容都看作是对象
使用 getElementById( ) 方法可以获取带有ID的元素对象
-
<div id="time" >2019-9-9 </div>
-
<script>
-
var timer = document.getElementById('time');
-
console.dir(timer);
-
</script>
-
-
//返回结果为<div id= "time">2019-9-9</div>这一整个标签
注意:
1.因为我们文档页面从上往下加载，先得有标签所以我们script 写到标签的下面
2. get 获得element 元素 by 通过驼峰命名法
3.参数 id 是大小写敏感的字符串
4.返回的是一个元素的对象
5. console.dir 打印我们返回的元素对象更好的查看里面的属性和方法
使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合
document.getElementsByTagName('标签名');
-
<ul>
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
</ul>
-
<script>
-
var lis = document.getElementsByTagName('li');
-
console.log(lis);
-
</script>
1. 返回的是 获取过来元素对象的集合 以伪数组的形式存储的
2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
3. 得到元素对象是动态的，标签里面的内容变了，得到的内容就变了.
element.getElementsByTagName() 可以得到这个元素里面的某些标签
-
<ul id = "nav">
-
<li>1</li>
-
<li>2</li>
-
<li>3</li>
-
<li>4</li>
-
<li>5</li>
-
</ul>
-
<script>
-
var nav = document.getElementById('nav');
-
var navLis = nav.getElementsByTagName('li');
-
</script>
根据类名返回元素对象集合
-
<div class="box" >123</div>
-
<script>
-
var boxs = document.getElementsByClassName('box');
-
</script>
根据指定选择器返回第一个元素对象
注意:里面的选择器需要加符号 类选择器：.box id选择器： #box
-
var firstBox = document.querySelector('.box');
-
-
var nav = document.querySelector('#nav');
-
-
var firstBox = document.querySelector('li');
返回指定选择器的所有元素对象集合
-
var allBox = document.querySelectorAll('.box');
-
-
//返回所有 class 名为 box 的标签
-
var body = document.body ;
-
// 返回 body 元素对象
-
-
var htmlEle = document.documentElement;
-
// 返回 html 元素对象
JavaScript 使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为
简单理解:触发---响应机制
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作
事件是有三部分组成 事件源 事件类型 事件处理程序
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采用函数赋值形式）
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获取鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
JS的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意一下都是属性
① element.innerText
可用于获取标签中的内容。此时获取的是从起始位置到终止位置的内容，但它去除 html 标签， 同时空格和换行也会去掉
获取到 p 标签再打印 p 标签中的内容
var p = document.querySelector('p');
console.log(p.innerText);② element.innerHTML
获取内容时，获取的是起始位置到终止位置的全部内容，包括 html 标签， 同时保留空格和换行
获取到 p 标签再打印 p 标签中的内容
var p = document.querySelector('p');
console.log(p.innerHTML);普通标签使用，表单不能用
src 、href、id 、 alt 、title
案例：点击不同按钮显示不同图片
-
<title>Document</title>
-
<style>
-
img {
-
width: 300px;
-
margin-top: 20px;
-
}
-
</style>
-
</head>
-
<body>
-
<button id="but1">按钮1</button>
-
<button id="but2">按钮2</button>
-
<br>
-
<img src="../images/objpic07.jpg" alt="" title="图片1">
-
<script>
-
var item1 = document.getElementById('but1');
-
var item2 = document.getElementById('but2');
-
var img = document.querySelector('img');
-
item1.onclick = function() {
-
img.src = '../images/objpic07.jpg';
-
img.title = '图片1';
-
}
-
item2.onclick = function() {
-
img.src = '../images/objpic08.jpg';
-
img.title = '图片2';
-
}
-
</script>
-
</body>
可操作的表单元素的属性： type 、value、 checked、 selected、 disabled
按下按钮修改表单框 里面的内容，通过修改 value
input.value 等于 this.value 因为 this指向的是事件函数的调用者
案例：仿京东显示隐藏密码
-
<title>Document</title>
-
<style>
-
.box {
-
position: relative;
-
width: 400px;
-
border-bottom: 1px solid #ccc;
-
margin: 100px auto;
-
}
-
.box input {
-
width: 370px;
-
height: 30px;
-
border: 0;
-
outline: none;
-
}
-
.box img {
-
position: absolute;
-
top: 2px;
-
right: 2px;
-
width: 24px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<label for="">
-
<img src="../images/close.png" alt="" id="pic">
-
</label>
-
<input type="password" id="item">
-
</div>
-
<script>
-
var item = document.getElementById('item');
-
var pic = document.getElementById('pic');
-
var flag = 0;
-
pic.onclick = function() {
-
if(flag == 0) {
-
item.type = 'text';
-
this.src = '../images/open.png';
-
flag = 1;
-
} else {
-
item.type = 'password';
-
this.src = '../images/close.png';
-
flag = 0;
-
}
-
}
-
</script>
-
</body>
① element.style 行内样式操作
② element.className 类名样式操作
行内样式案例：显示与隐藏文本操作（当Input获取焦点，文本框初始内容消失，失去焦点，内容出现）
-
<title>Document</title>
-
<style>
-
input {
-
color: #999;
-
outline: none;
-
height: 24px;
-
}
-
</style>
-
</head>
-
<body>
-
<input type="text" value="手机">
-
<script>
-
var item = document.querySelector('input');
-
item.onfocus = function() {
-
if(this.value == '手机') {
-
this.value = '';
-
}
-
this.style.color = '#333';
-
this.style.border = '1px solid pink';
-
}
-
item.onblur = function() {
-
if(this.value == '') {
-
this.value = '手机';
-
}
-
this.style.color = '#999';
-
this.style.border = '1px solid black';
-
}
-
</script>
-
</body>
类名样式案例：密码框验证信息（提示输入6~16位密码，不满或超出提示错误，正确则提示正确）
-
<title>Document</title>
-
<style>
-
.box {
-
width: 400px;
-
margin: 100px auto;
-
}
-
input {
-
outline: none;
-
}
-
.pic {
-
height: 15px;
-
display: inline-block;
-
line-height: 15px;
-
text-indent: 18px;
-
font-size: 13px;
-
color:blue;
-
background: url(../images/mess.png) no-repeat;
-
}
-
.wrong {
-
background: url(../images/wrong.png) no-repeat;
-
color: red;
-
}
-
-
.right {
-
background: url(../images/right.png) no-repeat;
-
color: green;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<input type="password" class="ipt">
-
<p class="pic">请输入6~16位的密码</p>
-
</div>
-
<script>
-
var item = document.querySelector('.ipt');
-
var item2 = document.querySelector('.pic');
-
item.onblur = function() {
-
if(this.value.length < 6 || this.value.length > 16) {
-
item2.className = 'pic wrong';
-
item2.innerHTML = '您输入的位数不对要求6~16位';
-
} else {
-
item2.className = 'pic right';
-
item2.innerHTML = '您输入的正确！';
-
}
-
}
-
</script>
-
</body>
分享此文一切功德，皆悉回向给文章原作者及众读者.
转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
npm init --yes
npm i express npm i multer
-
const express = require('express')
-
-
//将这个express的方法赋值给app
-
const app = express()
-
-
//引入multer这个包
-
const multer = require('multer')
-
-
//上传的文件会保存在这个目录下
-
const upload = multer({ dest: 'uploads/' })
-
-
//使用中间件
-
app.use(express.urlencoded());
-
app.use(express.json());
-
-
-
//登录接口
-
app.post('/api/login', (req, res) => {
-
if (req.body.username && req.body.password) {
-
res.json({
-
"status": 0,
-
"message": "登录成功",
-
})
-
// res.send(req.body)
-
console.log('req.body', req.body)
-
} else {
-
res.json({
-
"status": 1,
-
"message": "登录失败",
-
})
-
// res.send(req.body)
-
console.log('req.body', req.body)
-
}
-
-
// res.send()
-
})
-
-
-
app.listen(8023, () => {
-
console.log('8023端口运行成功,已经跑起来了...');
-
})
-
//引入express框架
-
const express = require('express')
-
-
//将这个express的方法赋值给app
-
const app = express()
-
-
//引入multer这个包
-
const multer = require('multer')
-
-
//上传的文件会保存在这个目录下
-
const upload = multer({ dest: 'uploads/' })
-
-
//使用中间件
-
app.use(express.urlencoded());
-
app.use(express.json());
-
-
-
//获取接口
-
app.get('/my/user/userinfo', (req, res) => {
-
if (req.body.Authorization) {
-
res.json({
-
"status": 0,
-
"message": "获取成功",
-
"data": {
-
"id": 1,
-
"username": "leopard",
-
"nickname": "little-leopard",
-
"email": "laotang@qq.com",
-
"user_pic": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAe"
-
}
-
})
-
console.log('req.body', req.body)
-
} else {
-
res.json({
-
"status": 1,
-
"message": "获取失败",
-
})
-
console.log('req.body', req.body)
-
}
-
})
-
-
app.listen(8023, () => {
-
console.log('8023端口运行成功,已经跑起来了...');
-
})
-
//引入express框架
-
const express = require('express')
-
-
//将这个express的方法赋值给app
-
const app = express()
-
-
//引入multer这个包
-
const multer = require('multer')
-
-
//上传的文件会保存在这个目录下
-
const upload = multer({ dest: 'uploads/' })
-
-
//使用中间件
-
app.use(express.urlencoded());
-
app.use(express.json());
-
-
app.post('/my/user/avatar', upload.single('avatar'), (req, res) => {
-
console.log(req.file);
-
if (req.file) {
-
res.json({
-
"status": 0,
-
"message": "上传图片成功"
-
})
-
console.log('req.body', req.body)
-
} else {
-
res.json({
-
"status": 1,
-
"message": "上传图片失败"
-
})
-
console.log('req.body', req.body)
-
}
-
})
-
-
app.listen(8023, () => {
-
console.log('8023端口运行成功,已经跑起来了...');
-
})
蓝蓝设计的小编 http://www.lanlanwork.com