前端质量设计指引

前言

质量作为软件最为重要的要求，决定了用户能从软件产品获得的安全感，用户安全感越高，那产品被用户接受认可的程度就越高。

但是软件质量是一个抽象的概念，因为它涉及到许多因素，这些因素不仅数量众多，而且通常具有多样性和复杂性。

首先，软件质量涉及到用户需求和期望的满足程度，而用户需求和期望因人而异，因此很难通过一种通用的标准来度量软件的质量。

其次，软件质量涉及到许多技术和商业标准，如可靠性、安全性、易用性、效率等，这些标准可能存在冲突或者相互矛盾，如安全性和易用性之间的平衡。因此，确定软件是否符合这些标准通常需要考虑多个因素和因素之间的相互作用。

另外，软件质量也受到开发团队和组织的影响，如团队成员的技能、开发流程和工具、测试方法和过程等，这些因素也会影响软件的质量。

因此，评估软件质量需要综合考虑多种因素和标准，并考虑它们之间的相互作用和权衡。

如何做质量设计规范

为了提高软件的质量，我们需要对软件或者软件模块做一些质量设计，以实现我们的软件质量目标。

所以，从软件质量的目标和需求出发，去制定和实施质量设计。

软件质量的目标和需求有哪些？

ISO/IEC 25010:2011 标准

根据国际通用的质量评估标准 ISO/IEC 25010:2011，可以将软件质量分为内部质量和外部质量，同时，内部质量和外部质量又有不同的特征和属性：

其中可靠性、安全性、可维护性、可移植性属于内部质量。它们主要关注软件系统的内部特性和结构，包括代码质量、软件架构、设计等方面。这些质量特征的评估主要依赖于技术性的分析和测试。

功能适用性、性能效率、兼容性、可用性属于外部质量。它们主要关注软件系统的用户体验和功能需求，包括软件的界面、功能、反应速度、兼容性等方面。这些质量特征的评估主要依赖于用户满意度、用户反馈和用户体验等方面。

前端质量设计

每个技术栈对于质量设计关注的维度和数据指标都是不一样的，但是总体来说关注的质量特征都是相同的。所以，下面通过质量特征，前端在该质量特征需要去做和可以去做的事情。

一、可靠性

可靠性中要求软件需要有成熟度、可用性、容错性、易恢复性

1、成熟度、可用性：保证软件的成熟度和可用性需要对软件进行完善的监控

前端监控设计：

监控指标的设计：监控指标是用来衡量应用程序性能和用户体验的标准。监控指标应该包括页面加载速度、资源加载速度、JS 报错次数、接口请求错误率、页面停留时间等。在设计监控指标时应该根据应用程序的业务特点和用户行为习惯进行调整。

监控数据的采集：监控数据的采集是指将监控指标采集到系统中进行分析和处理。在采集监控数据时，应该考虑数据采集的时机、数据采集的方式、数据的精度等因素。

监控数据的处理和分析：监控数据的处理和分析是指对监控数据进行过滤、清洗、统计和分析，提取有用的信息，帮助开发人员找到问题和解决问题。在处理和分析监控数据时应该使用一些数据分析工具和算法，如 ELK、Grafana 等。

监控数据的告警和反馈：监控数据的告警和反馈是指通过邮件、短信等方式及时向相关人员发出告警信息，并及时跟踪和解决问题。在设计监控数据的告警和反馈时，应该考虑告警的级别、告警的频率、告警的方式、告警信息的准确性等因素。

监控系统的稳定性：监控系统的稳定性是指保证监控系统的运行稳定和可靠，避免监控系统本身出现问题而影响应用程序的正常运行。在设计监控系统的稳定性时，应该考虑系统的容错能力、系统的可扩展性、系统的数据备份和恢复等因素。

独立开发一套监控系统比较麻烦，常用的前端监控平台有 sentry、fundebug、frontjs、webfunny，这些平台都可以实现以上的能力，可以考虑私有部署，避免重复造轮子。

这里推荐使用sentry。

2、容错性：对软件已知的不能通过正常手段避开的错误或者故障，进行容忍和防范设计。

前端常见的白屏现象、点击无反应现象等对用户体验极差，需要对这些进行容错处理。

• js 执行错误，如：Uncaught ReferenceError: a is not defined、json 解析错误
• 资源加载失败，如图片、视频等资源
• Promise 异常
• Iframe 异常
• 跨域 Script error
• 请求失败，登录超时，长连接（ws、webrtc）连接失败等
• 媒体设备授权失败
• nodejs IO 错误(如文件创建、读取时文件不存在)

这些常见的错误通常可以通过 try/catch、错误回调监听处理，处理需要包括日志记录，对功能性影响严重的需要做数据上报和闭环，同时可以对用户进行相对应反馈

3、易恢复性：应用出现故障或者错误时，通过一系列的机制和方法，保证应用程序可以迅速恢复到正常运行状态

（1）异常处理机制的设计

异常处理机制和容错性有大部分含义的重叠，但是异常处理机制应该是比容错性更加完整的。

异常机制的关键点：异常的处理（同时需要给与用户良好的提示），错误日志记录及闭环处理。同时异常处理机制的成效很重要，机制不仅需要保证软件功能异常时能够保持其他主流程能够正常使用，也要在收集到必要信息闭环后通过不断地优化实现整个异常地出现次数、影响范围变小（少）。

（2）备份和恢复机制的设计

备份一般针对数据，也可能是一些复杂的流程（最后可能还是映射成数据），备份的意义很大部分是为了容灾或者避免误操作导致的重要数据丢失。

容灾场景：重要数据或者数据库被损坏，需要对数据库进行备份；本地应用数据库应该考虑数据备份，备份方式可以是本地备份或者异地备份或者云端备份，防止因为磁盘异常等外界因素导致的数据丢失；重要用户文件备份；重要配置备份等。

对重要的操作过程进行过程备份，避免用户端奔溃导致过程丢失。

备份的目的是为了灾后恢复，但是，备份是有成本的。所以整个过程应该严谨慎重。

（3）灰度发布和回滚机制设计

为了提升产品上线的稳定性和可靠性，灰发和回滚机制是很重要的。

其中灰发机制是一种渐进式的发布和部署方式，通过将新特性或者新功能发布给一部分用户来评估功能的成功度和稳定性。

灰发机制首先需要建立灰度用户分组，分为灰度发布分组和正常发布分组。然后观察收集用户反馈，为新功能或者问题修复提供数据参考。

灰发机制之后需要设计回滚机制，在出现问题的时候及时快速恢复到之前的系统状态。

回滚机制可以设计为自动回滚、版本回滚、系统回滚，在出现问题时，让用户能够重新使用稳定的功能，提升用户体验。

二、安全性

安全性中要求软件程序具备保密性、完整新、责任、抗抵赖性、真实性。

保密性

保密性中要求保护软件中所使用的数据不被未经授权的人访问、查看、更改、披露等。

前端作为离用户最近的技术栈，对保密性的要求是最高的，所以，前端针对保密性的质量设计是重中之重：

为了保护数据的私密性和安全性，需要针对传输过程和储存的数据进行加密。

加密项	详情
协议加密	为了保证数据的安全性和完整性，通常在传输过程需要使用安全的网络协议，常见的网络安全协议有SSL/TLS、IPSec、SSH、VPN、erberos、S/MIME、PGP，基于这些安全的网络协议，衍生了很多安全的应用层传输协议：如基于SSL/TLS的https和wss、邮件加密协议PGP、远程登录协议SSH。前端一般都运行在浏览器中，所以涉及的协议并不多，所以只须遵循https、wss优先即可
安全的加密算法	有时候数据传输无法使用安全协议或者需要对数据的存储进行加密，这时候需要使用安全的加密算法。安全的加密算法：AES、RSA、SHA-2等，需要注意的是，随着计算机网络算力的不断提升，一些传统的加密算法如MD5、DES已经不安全了，可以被暴力破解。前端可以通过调用加密库实现加密方法调用，推荐使用crypto-js

安全传输协议：https、wss、webrtc

安全加密协议：AES、RSA、SHA-2

前端加密库：crypto-js

完整性

软件的完整性要求软件系统能够有效防止未经授权就修改或者访问数据。所以软件产品需要对涉及数据、权限、信息或功能可能收到的恶意篡改损坏涉及保护机制。

（1）权限设计
软件产品经常会对软件设计不同的权限场景，每一种权限对应能访问的数据是不一样的。所以为了保证每种权限只能访问自己的数据，需要对权限系统进行设计，同时防范越权行为。

越权（Unauthorized Access）是指未经许可或超过许可权限，试图访问受限资源、服务或应用程序等的行为。该行为通常是计算机犯罪和黑客攻击的一种形式，旨在获取未经授权的访问，这可能会导致关键数据、信息和系统的失去安全。

越权攻击可能包括潜在攻击等，如网络钓鱼、木马病毒、分布式拒绝服务（DDoS）攻击。攻击者会尝试猜测密码、诱骗用户提供凭据、利用漏洞绕过身份验证等，以进入系统或应用程序中的受保护区域，并访问敏感信息或者更改关键配置信息。如果未及时发现和排除越权问题，可能会导致严重后果，如系统崩溃、数据泄露、网络盗窃、知识产权的侵犯等。

为了防止和减轻越权攻击的风险，需要在组织和系统设计的所有层面上采取多种安全措施，包括访问控制、身份验证、日志记录、防火墙和反病毒/反恶意软件等技术及预防海外入侵的保障解决方案等等。与此同时，为了检测越权事件，监控和分析系统中的活动，以识别和追踪可能存在的恶意或异常行为，是非常必要的。

（2）攻击防范
为了防止不法分子通过暴力破解、诱骗的方式绕过身份验证，前端需要针对性地设计防范方案。

以下是常见的攻击：

攻击方法	简介	详细
XSS攻击	XSS（跨站脚本攻击）是指黑客利用web应用程序的安全漏洞来注入恶意的客户端脚本，从而向访问页面的用户注入恶意代码的攻击行为。这种攻击通常通过网页表单或客户端脚本中的输入变量来实施，因此也被称为HTML注入。攻击者可能会利用XSS漏洞来窃取用户的cookie、会话令牌、密码以及其他敏感信息，或者在它的受害者的计算机上执行恶意代码，甚至可能掌控被攻击的系统。攻击者使用JavaScript、VBScript、HTML、CSS等编程语言编写的恶意代码，被注入到敏感页面中以达到投毒、重定向、挂马等目的。	详情
CSRF攻击	CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种利用 Web 应用程序的弱点进行攻击的恶意行为。CSRF攻击往往通过欺骗用户来完成，利用当前用户已经登录的状态，伪造用户的请求，执行某些特定的操作。当受害者在某个网站已经登录并设置了一个cookie时，攻击者可以通过伪造请求，以当前用户的身份进行用户不知情的操作，可能导致意外的修改、添加或删除数据等。例如攻击者可以通过伪造请求重置或更改用户的密码、发送恶意邮件等。	详情
点击劫持	点击劫持（Clickjacking）是一种利用网页中的漏洞，欺骗用户点击看似无害的按钮或链接，从而执行恶意操作的攻击方式。点击劫持可以控制用户的操作，包括盗取用户的密码、下载和安装恶意软件、将用户重定向到恶意网站等。常见的场景包括在透明的覆盖层上放置无害按钮、伪造表单等。	详情
URL跳转漏洞	Web URL跳转漏洞（Open Redirect）是指攻击者能够通过修改URL的参数，欺骗用户跳转到恶意网站或下载恶意文件等。这种漏洞通常需要借助站内其他页面或第三方服务接口来实现。攻击者利用URL跳转漏洞的过程大致分为以下三步：1、攻击者构造恶意URL。通常会利用站内其他页面或第三方服务接口来构造URL。2、攻击者通过诱导用户点击恶意URL。3、用户访问该URL，被重定向到攻击者制定的恶意页面或下载恶意文件。	详情
文件上传漏洞攻击	Web文件上传漏洞攻击是指攻击者利用Web应用程序中存在的文件上传漏洞，上传恶意文件到服务器，从而实现获取敏感信息或者执行恶意操作等目的。以下是几种常见的Web文件上传漏洞攻击方式：1、上传可执行文件：通过上传可执行文件，如PHP文件、Shell脚本等，攻击者可以获取服务器的控制权，进行后续攻击。2、上传恶意脚本：攻击者可以上传包含恶意JavaScript代码的HTML、PHP等网页文件，当用户访问这些文件时，恶意脚本会被执行，从而进行盗取用户信息、恶意跳转等行为。3、上传Web木马：攻击者可以上传Web木马，实现对服务器的远程控制，从而获取服务器敏感信息，或者进行攻击行为。	详情
sql注入	Web安全SQL注入攻击是指攻击者利用Web应用程序中存在的SQL注入漏洞，向Web应用程序中的数据库发送恶意的SQL语句，以获取、修改或删除数据库中的数据。以下是几种常见的Web安全SQL注入攻击方式：1、盲注注入：攻击者在不知道服务器回应的情况下进行的注入，根据服务器不同的响应，判断是否注入成功。盲注注入分为基于布尔注入和基于时间的盲注。2、键头注入：攻击者向SQL语句中添加键头字符，从而改变SQL语句的语义，使得Web应用程序可以访问和展示攻击者想要的数据。3、报错注入：攻击者在注入恶意SQL语句时，利用SQL语句执行出错时返回的错误信息，获得有关数据库架构、用户名或密码等敏感信息，可以进一步进行攻击。	详情

web安全的问题还有很多很多，如中间人攻击、私有网络攻击等等，可以持续关注OWASP官网（owasp.org/）、Web安全联盟官网…

责任、抗抵赖性

责任：根据实体的操作能唯一跟踪到该实体的程度。
抗抵赖性：软件系统能够证明已发生的行动或事件，以便日后不能否认这些事件或行动的程度。

这两个都需要软件程序提供安全正确的日志系统、审计系统，防止操作发生后无法追踪，这对于防止各种欺诈行为和数据篡改等安全问题十分重要。

真实性

真实性指的是软件产品所提供的安全措施和功能的实际和可靠程度。具体来说，安全性的真实性包括以下几个方面：

• 可信性：软件产品提供的安全措施应该得到用户和其他利益相关者的信任。
• 合法性：软件产品提供的安全措施应该符合相关法律法规的要求。
• 可靠性：软件产品提供的安全措施应该可靠、稳定，并能够在实际应用环境中工作正常。
• 可证明性：软件产品提供的安全措施应该能够通过相关的测试和验证得出结论，证明其可行性和有效性。

只有确保软件安全性的真实性，才能够有效地保护用户和相关利益相关者的安全和利益，降低相应的风险，提高软件产品的可靠性和信任度。

三、可维护性

提升软件的可维护性也是提升软件质量的一个方向。其中可维护性可以由以下属性来衡量：

• 模块化：软件系统应该是一个个模块组成，模块之间的相互耦合应该降到最低，以便模块发生修改时不会相互影响。
• 可复用性：软件产品应该具有支持代码重用的能力，尽量避免写重复的代码、避免重复的工作，以提高软件开发的效率和质量。
• 易分析性：评估一个或多个零件的预期变更对产品或系统的影响，或诊断产品的缺陷或故障原因，或识别待修改零件的有效性和效率程度。
• 易修改性：在不引入缺陷或降低现有产品质量的情况下，软件产品或系统可以被有效且高效修改的程度。
• 易测试性：为软件系统、产品或组件建立有效且高效的测试标准，并进行测试确认软件是否满足这些标准的程度。

可维护性的属性很笼统，那作为前端开发，怎么遵循这些属性特征去提升我们程序的可维护性呢：

模块化开发

采用模块化的开发方式，将前端代码划分成独立的模块或组件，以提高代码的封装性和复用性。模块封装需要遵循高内聚低耦合的软件设计思想：

高内聚指的是将相同或者相关的功能组织在一起，使得一个模块或者一个类实现单一的、独立的任务，功能内聚性强，比如一个类只负责完成某一项功能，而不是多项功能。它的优点是方便模块化编程、减少模块与模块之间的耦合度、提高代码的可读性和可维护性等。

低耦合指的是模块之间的依赖关系尽可能的少，也就是尽量减少模块之间的交互，这样可以降低模块之间的相互影响，减少一个模块的修改对其他模块的影响。低耦合的优点就是方便模块化，减少重复的代码，提高代码的可维护性和可扩展性，也避免了系统的不稳定性和代码难以调试的问题。

同时，由高内聚低耦合衍生了很多设计原则：

• 单一职责原则（Single Responsibility Principle，SRP）：一个类只负责完成一个单一的任务，而不涉及其他的职责和任务。
• 开放封闭原则（Open-Closed Principle，OCP）：对于模块或者类的设计应该开放扩展，而封闭修改，也就是说，对于模块或者类的修改不应该影响到其他的模块或者类。
• 依赖倒置原则（Dependency Inversion Principle，DIP）：针对多个模块或者类之间的依赖关系，依赖于抽象而不是依赖于具体实现。
• 组合/聚合复用原则（Composite/Aggregation Reuse Principle，CARP）：使用组合或者聚合的方式来实现代码复用，而不是使用继承的方式。
• 迪米特原则（Law of Demeter，LoD）：原则上类或模块不应该了解不必要的细节，尽可能减少模块或类之间的相互作用和依赖。

所以，在做模块封装的时候只要遵循以上设计原则，则可以做到高内聚低耦合了。

统一规范

为了提升代码的可读性和维护性，需要对研发过程规范进行统一，如编码规范、代码提交规范、代码合并规范等。

抽离公共物料

为了提升代码的复用性，可以抽离公共物料，前端公共物料由：UI组件、公共代码片段、公共方法、插件、脚手架、npm包等。

自动化工具的使用

如自动化构建工具、自动化测试工具和代码检查工具等，可以提高代码的质量和可靠性，同时也减少了人工干预带来的错误风险。

引入单元测试

前端单元测试是指对前端代码中的功能模块、组件、服务等独立单元进行测试的过程。单元测试通常是在开发过程中进行的，可以帮助开发人员更容易地测试和发现代码中潜在的问题，提高代码的质量和可维护性。

四、可移植性

可移植性指的是软件产品可以在不同的硬件、操作系统、平台、网络环境上运行的能力。在今天这个不断变化的信息技术领域中，各种数字设备和应用程序的不断涌现，从而导致了平台和环境的不断变化。因此，可移植性成为衡量软件质量的一个重要指标。可移植性要求软件具备以下属性：

• 适应性（Adaptability）：软件产品或系统能够有效地使用不同或不断发展的硬件、软件或其他操作或使用环境。
• 易安装性（Installability）：软件产品可以方便地在目标设备或系统上进行安装。
• 可替代性（Replaceability）：在相同环境中，产品能够替换其他相同目的的指定软件产品的程度。

前端提供软件的可移植性，需要考虑浏览器兼容性问题、UI统一性问题。

浏览器兼容

其中浏览器兼容问题又可以分为：

• css 兼容问题
• js 兼容性问题
• 移动端兼容问题

浏览器兼容问题的定位方式：

can i use (caniuse.com/)中查询具体兼容性问题

CSS兼容性问题解决：指南，其中最优方式，样式的打包处理器postCsss 开启Autoprefixer。

js兼容性问题解决：搜索特定垫片或者使用 Modernizr

移动端兼容性问题：常见的移动端问题及处理方案（指引）

UI统一性

从前端到大前端的过程中，跨平台成为趋势。有时是web+linux+windows，有时是ios+android+小程序。为保证用户体验在各种平台的无缝切换，在跨端实现中需要保证UI交互的统一性。

第一、使用统一的UI组件，如Ant Design、ElementUI等
第二、使用跨平台框架，一些跨平台框架天然实现了UI在每个平台的几乎统一，不需要开发去处理，如electron、taro甚至是flutter。

五、功能适用性

功能适用性是指软件产品能否满足特定的需求，包括软件的功能、业务和用户需求。其中要求以下属性：

• 功能完整性（Functional Completeness）：软件产品实现的功能达到所有指定任务和用户目标的程度。
• 功能正确性（Functional Correctness）：软件产品提供具有所需精度的正确或者相符的结果的程度。
• 功能适当性（Functional Appropriateness）：软件产品促进完成指定任务和目标的程度。

要保证软件的功能适用性，软件开发应该做好软件需求分析。

需求分析

软件需求分析是指在软件开发过程中，对需求进行识别、收集、记录、组织和分析以确保需求被准确理解和定义的过程。软件需求分析是软件开发的关键环节，通常在软件开发的早期阶段完成，其重点是确定业务需求、用户需求以及功能和非功能需求等。

在软件需求分析中，需求分析人员需要从多个角度对需求进行分析，进行发现和决策。需求分析人员会利用UML建模或其他工具来分析需求，包括用例分析、活动图分析、时序图分析、类图分析、状态转换图分析等，以便准确识别、记录和分析系统的功能、业务流程和用户需求，确保软件开发可以顺利进行。

软件需求分析的目标是确保需求的准确和完整性，并说明系统必须遵循的规则和流程。它还要确保每一个目标都可以被优化，并符合技术和财务约束。只有经过高质量的软件需求分析，才能确保后续软件的设计和开发能够顺利进行，从而保障系统的正确实现。

六、效率

SO/IEC 25010:2011标准中的效率特征是指软件系统在规定条件下的性能表现，包括实时性、资源利用率等方面的表现。其中定义了以下效率特征：

• 时间（Time-behavior）：软件产品或系统在执行其功能时的相应和处理时间以及吞吐量满足要求的程度。
• 资源（Resource Utilization）：软件产品或系统在执行其功能时所使用的资源数量和类型满足要求的程度。
• 容量（Capacity）：软件产品或系统的参数的最大极限满足要求的程度。

这里的效率其实就是指性能，时间上的性能考究、资源上的性能考究、容量上的性能考究。

前端做为UI层，离用户最近的技术栈，对于性能效率的要求是最高的。如何提升性能效率：

主动性能优化

对意识到的性能问题进行优化：

性能问题	措施
工程优化	构建过程优化；构建资源大小优化（混淆、压缩、分包）；
运行优化	白屏时间优化；资源加载优化（异步、渐进式）；长列表优化（虚拟列表）；复杂耗时过程优化（释放主线程、任务队列、web-worker）；应用加载优化（启动流程疏解）

响应式性能优化

通过性能监测功能监测业务线上运行性能，性能监测工具上文有了。收集到性能数据之后需要行为性能问题，定位的工具：

工具	能力
chrome devtool Performance insight	谷歌浏览器中一个新推出监测页面性能的工具，对比原有的Performance来说解决了信息过多、难以分析、指导性少的痛点。使用指南
chrome devtool Lighthouse	谷歌浏览器中针对页面加载渲染评测工具，可以页面的FCP、LCP等关键过程进行评测并给出性能得分，同时指导开发者进行对应优化。使用指南
chrome devtool Memory	谷歌浏览器中一个对页面性能页面内存监测的工具，针对页面中存在的内存泄漏问题很有效果。使用指南

性能收集方案

有时，常规的性能监测工具不一定能够准确地收集到相关的性能数据，这时候就要自研一套性能收集方案。

七、兼容性

兼容性是指软件产品与其他软件产品或硬件设备之间能够正确地进行交互和运行，从而保证系统的完整性和可靠性。兼容性涉及到多个方面，包括软件与硬件兼容性、不同软件之间的兼容性、不同操作系统之间的兼容性等等。兼容性要求软件具备以下特征：

• 互通性（Interoperability）：两或多个软件系统或产品或组件可以交换信息并使用已交换信息的程度。
• 共存性（Co-existence）：软件产品在与其他产品共享相同环境和资源的同时，能够有效的执行其所需功能，而不会对其他产品产生有害影响的程度。

前端一般是web应用，处理完浏览器的兼容性，一般来说，不会有其他问题。但是，作为大前端技术栈的今天，前端需要开始考虑软件和其他软件、系统之间的兼容性。

平台	兼容性问题
系统兼容性	系统级别api兼容性、文件系统api兼容性等
应用兼容性	与安全软件的兼容性（如360、鲁大师）、与系统软件的兼容性等
硬件兼容性	调用底层显示能力时应考虑与显卡的兼容性问题（如有时渲染4k时有些显卡吃不消）、不同处理器的兼容性（arm64、x86）等

八、易用性

易用性指软件产品提供方便、高效、易使用的能力，以及用户对软件产品的满意度。易用性要求软件具备以下特征：

• 被识别的适当性（appropriateness recognizability）：用户能够识别产品或系统是否适合他们需求的程度。
• 易学习性（Learnability）：软件产品或系统能够使用户在紧急情况下学习如何有效、高效地使用它的程度。
• 易操作性（Operability）：软件产品或系统易于操作、控制和恰当使用的程度。
• 用户错误防御（User error protection）：软件产品或系统保护用户不出错的程度。
• 用户界面美观（User Interface aesthetics）：软件产品提供的用户界面令用户愉快和满意的程度。
• 可访问性（Accessibility）：软件产品或系统可以被具有最广泛特性和能力的人在特定使用环境中使用以实现特定目标的程度。

易用性中要求前端研发在需求分析、功能实现时，把以上特征属性赋予软件，这里更多的时主观能动性的事情。其中前端可以做的是：遵循约定俗成的设计规范和模式，减少相同或者相似功能在UI交互上的差异，以降低用户理解难度。

遵循统一的UI设计规范

• 配色规范：应选择符合品牌特色和业务需求的配色方案，注意色彩的搭配和对比度的处理。
• 字体规范：使用品质好、可读性强的字体，注意字体的大小、粗细等要素，避免过于花哨或难以识别的字体。
• 图片规范：需要使用合适大小、格式、分辨率的图片，每个图片需要进行优化处理，确保它们能够快速加载并且占用的空间较小。
• 盒子模型规范: 遵循标准的盒子模型，使得网页部件的位置和布局能够更加准确。
• UI元素规范：遵循通用的界面元素和设计规范，如按钮、输入框、文本框、下拉框、图标等，确保在不同的系统和浏览器中都能够适用和美观。
• 常用交互规范：如hover、active、focus等状态下样式应均为与整体风格一致的设计，用户可明确地区分何时原生状态，何时元素被激活或选中状态。
• 响应式规范：网页设计应该考虑到不同尺寸屏幕的用户，并确保能够视觉上均衡地展示内容，避免大屏幕显示不全或小屏幕上显示错位等问题。
• 通用组件：提取通用公共组件，如modal、message、表单组件等

前端质量设计图谱

通过围绕ISO/IEC 25010:2011 质量标准讨论了前端如何针对性的做质量相关的设计和工作，以下是总结图谱：

总结

质量设计是个宽泛的话题，本文无法给出通用的质量设计方法，每个存在质量问题的点都会有不同的设计方法。所以，本文只给出了在提升软件质量的范畴内前端能够做什么事情。当然，这些事情并不是都需要去做，我们只需要针对关键问题去做关键的处理，最低成本提升软件质量。

本文也同时带来了一个理念，软件质量并不是单单和bug相关，它存在于软件产品周期的每个角落，甚至可以看到前端组件库的抽离都是质量建设的一部分。所以，软件质量，如你所想，但又非你想的那么简单，需要认认真真去思考。愿大家都能产出高质量的软件产品。

最后

觉得烧烤哥总结的不错，点赞关注吧；如有不足的地方，请不吝指正。