Web 开发是指在互联网上创建网站或 Web 应用程序。它涉及一系列任务，从开发网站的整体结构和设计到编写使网站栩栩如生的代码。Web 开发可能是一个复杂的过程，它通常涉及使用各种不同的技术，包括 HTML、CSS 和 JavaScript，以及服务器端语言，如 PHP、Ruby、Nodejs 和 Python。Web 开发人员可能在前端工作网站的一部分，这是用户与之交互的部分，或者在后端，这是处理网站幕后功能的部分。Web 开发是一个快速发展的领域，Web 开发人员需要跟上最新的技术和最佳实践，才能创建有效且引人入胜的网站和 Web 应用程序。
可以肯定地说，Web 开发将继续是一个重要且充满活力的领域。随着 Internet 的不断发展和演变，对 Web 开发人员的需求也可能会增加。Web 开发中使用的技术和工具也将继续发展和改进，这将使 Web 开发人员能够创建更先进、更复杂的网站和应用程序。此外，人工智能、虚拟现实和增强现实以及物联网等新技术的兴起可能会为网络开发人员带来新的机遇和挑战。Web 开发的未来看起来一片光明，对于那些对技术充满热情的人来说，它将继续是一个令人兴奋和有益的领域。
Web 开发是一个快速发展和动态的领域，由于 Web 应用程序开发的复杂性和多样性不断增加，因此对 Web 开发人员的需求量很大。
Web 开发人员有什么好的工作机会吗？答案是肯定的。互联网改变了我们的生活方式。如果您想加入一个令人兴奋的新行业来开发新技术，我们建议您这样做并成为一名网络开发人员。该技术不仅“防 covid”，而且相对抗衰退。
人们每天都越来越多地参与网络，并使用他们的智能手机和平板电脑访问互联网，因此对于网络开发人员来说，创建针对这些智能设备优化的网站和网络应用程序非常重要。
对于网站和应用程序而言，提供用户会喜欢的令人难忘的用户体验将变得更加重要。具有提供引人入胜的用户体验天赋的开发人员应该研究这些趋势带来的机会。
总之，每项 Web 技术的背后都有一支经验丰富、才华横溢的开发人员团队，他们负责更新、开发和维护它。技术每天都在发展，因此有才华的 Web 开发人员始终可用并存在非常重要。
网页开发和网页设计是两个经常混淆的独立领域。虽然它们是相关的，但它们是具有不同重点和目标的不同学科。
网页设计侧重于网站的美学和功能方面，涉及用户界面和用户体验的规划和创建。网页设计师负责网站的布局、配色方案和整体外观，以及网站的导航和用户流程。
另一方面，Web 开发侧重于构建网站的技术方面。这包括编写代码来创建网站的各种组件，例如前端和后端，并将它们集成以创建功能强大且可用的网站。Web 开发人员负责网站的实施和维护，并且可能会使用各种编程技能和框架来实现。
Web 开发人员是专门开发可通过 Web 浏览器访问 Internet 的应用程序和服务的程序员。Web 开发人员使用各种技术和语言（例如 HTML、CSS 和 JavaScript）来创建网站或 Web 应用程序的结构、布局和设计。
Web 开发人员负责构建和维护 Web 应用程序的各种组件，包括用户界面、服务器端逻辑和数据库。他们还可能负责将 Web 应用程序与其他系统和 API 集成，并负责实现增强用户体验的特性和功能。
总之，网页设计关注网站的视觉和面向用户的方面，而网页开发则关注网站的技术实现和功能。
前端开发人员是专门从事 Web 开发客户端的 Web 开发人员。他们负责构建和维护 Web 应用程序的用户界面和用户体验，包括布局、设计和交互性。
前端开发人员通常精通前端技术和语言，例如 HTML、CSS 和 JavaScript。他们负责实施 Web 应用程序的视觉设计，包括布局、排版和配色方案。他们还可能负责实现交互元素，例如按钮、表单和菜单，以及将 Web 应用程序与后端系统和 API 集成。
除了技术技能，前端开发人员还需要对用户体验和设计原则有深刻的理解。他们应该能够创建直观、用户友好且美观的 Web 应用程序。
前端开发是 Web 开发的重要组成部分，前端开发人员在创建 Web 应用程序的外观方面发挥着关键作用。
后端开发人员是专门从事 Web 开发服务器端的 Web 开发人员。他们负责构建和维护 Web 应用程序的底层逻辑和基础设施，包括服务器端逻辑、数据库和 API。
后端开发人员通常具有服务器端语言和技术方面的专业知识，例如 PHP、Python、Ruby 和 Node.js。他们负责实现 Web 应用程序的服务器端逻辑，包括业务规则、数据验证和用户身份验证。他们还可能负责设计和实施数据库模式，以及将 Web 应用程序与其他系统和 API 集成。
除了技术技能，后端开发人员还需要具备强大的问题解决、沟通和协作能力。他们应该能够批判性和逻辑性地思考，并能够设计和实施可扩展、可维护且高效的解决方案。
后端开发是 Web 开发的重要组成部分，后端开发人员在构建和维护 Web 应用程序的功能和性能方面发挥着关键作用。
全栈开发人员是在前端和后端开发方面都具有专业知识的 Web 开发人员。他们负责构建和维护整个 Web 应用程序，从用户界面和用户体验到底层服务器端逻辑和数据库。
全栈开发人员通常对用于构建 Web 应用程序的技术和语言有深入的了解，包括 HTML、CSS、JavaScript 和服务器端语言（如 PHP、Python 和 Ruby）。他们能够处理 Web 应用程序的所有层，从用户界面和用户体验到数据库和服务器端逻辑。
除了技术技能，全栈开发人员还需要具备强大的问题解决、沟通和协作能力。他们应该能够创造性和批判性地思考，并能够适应不断变化的技术和要求。
全栈开发是一个充满挑战和回报的领域，由于 Web 应用程序的复杂性和多样性不断增加，对全栈开发人员的需求量很大。
网站管理员负责构建、维护和更新网站。他们还可能负责将网站与其他系统或云服务集成，例如数据库和内容管理系统 (CMS)，以及实施增强用户体验的特性和功能。
网站管理员通常与开发团队的其他成员（包括图形设计师、内容创建者和项目经理）密切合作，以创建和维护满足企业或组织需求的网站。他们还可以与客户合作以了解他们的要求并提供满足他们需求的解决方案。
如果你是 Web 开发的新手并且想知道从哪里开始以及第一步是什么，这里有一些建议：
学习 HTML 和 CSS 等 Web 开发基础知识——这些是 Web 的核心技术，良好的这些语言基础对于任何 Web 开发人员来说都是必不可少的。您可以从学习 HTML 和 CSS 的基础知识开始，例如网页的结构、如何添加内容和样式以及如何创建简单的静态网页。
选择开发环境——开发环境是一组用于构建和测试 Web 应用程序的工具和资源。这通常包括用于编写代码的文本编辑器或集成开发环境 (IDE)、用于测试网页的 Web 浏览器以及用于运行 Web 应用程序的本地 Web 服务器。带有大量插件的 vscode 编辑器肯定需要引起您的注意。
构建一个简单的网页——学习了 HTML 和 CSS 的基础知识后，尝试构建一个包含一些文本、图像和基本样式的简单网页。这将使您有机会练习所学的技能，并了解不同技术如何协同工作。然后更进一步，开始复制一些最流行的网络应用程序，然后 memic 尝试重新创建它，我指的只是这里的设计。
探索 Web 开发框架和库– 有许多可用的 Web 开发框架和库可以更轻松地构建 Web 应用程序。一些流行的选项包括 React、Angular、Vue.js 和 Django。一旦你确定了一个框架，立即开始学习它并坚持下去直到你掌握它。
HTML或超文本标记语言是一种用于创建和构建网页内容的编程语言。HTML使用一系列元素或标签来定义网页的结构和布局，包括标题、段落、列表和链接。HTML 还允许开发人员向网页添加图像、视频和其他多媒体内容，使其成为构建 Web 应用程序的强大且通用的语言。
定义带有标题、段落和图像的简单网页的 HTML 代码：
<!DOCTYPE html> <html> <head> <title>我的 Web 页面</title> </head> <body> <h1>Hello, World!</h1> <p>这是我的第一个 Web 页面</p> <img src="https://www.example.com/image.jpg" alt="A beautiful landscape"> </body> </html>
在此示例中，<html>和<body>标签定义了网页的结构，而<h1>、<p>和<img>标签定义了页面的内容。<img>标签的src属性指定要显示的图像的 URL，而alt属性为无法看到图像的用户提供图像的文本描述。所以你需要了解 HTML 标签和它们的属性。
CSS或层叠样式表是一种样式表语言，用于描述以标记语言编写的文档的外观和格式。在 Web 开发环境中，CSS 用于控制以 HTML 或其他标记语言编写的网页的外观和布局。CSS 允许开发人员为网页上的内容定义颜色、字体、大小和其他样式，使其成为构建现代响应式 Web 应用程序的重要组成部分。
可用于设置上述网页内容样式的 CSS 代码：
body { font-family: Arial, sans-serif; background-color: #f1f1f1; } h1 { color: #333; text-align: center; margin: 30px 0; } p { color: #777; font-size: 18px; line-height: 1.5; padding: 0 20px; } img { width: 100%; height: auto; }
在此示例中，body选择器将样式应用于网页的<body>元素， h1选择器将样式应用于所有<h1>元素，p和img选择器将样式应用于所有<p>和<img>元素， 分别。此 CSS 代码中定义的样式指定页面及其元素的字体系列、背景颜色、文本对齐方式和其他属性。显示此示例演示了选择 HTML 元素的重要性以及需要使用哪些属性来设置它的样式。因此，了解所有类型的选择器以及它们需要的属性。
你可以使用 CSS 框架让您的生活更轻松。最受欢迎的是Bootstrap和Tailwind CSS，它们都是用于构建响应式、移动优先的 Web 应用程序的前端框架。这两个框架都提供了一组预定义的 CSS 类和组件，可以轻松地将它们合并到网页中，以创建一致的、具有专业外观的设计。Bootstrap 和 Tailwind CSS 是构建现代响应式 Web 应用程序的强大工具。这两个框架之间的选择将取决于您的个人喜好和项目的具体需求。
有许多不同的框架可用于 Web 开发，每个框架的流行程度取决于项目的具体需求以及开发人员、团队或公司的偏好。一些最流行的 Web 开发框架包括：
React： React 是用于构建用户界面的最多的javascript 框架之一。 许多公司都在使用它，并且拥有庞大的开发人员社区。
Angular： Angular 是一个基于 TypeScript 的开源 Web 应用程序框架，由 Google 的 Angular 团队以及个人和公司社区领导。
Vue.js： Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它旨在逐步采用并可以集成到现有项目中。
Ember.js： Ember.js 是一个用于构建大型 Web 应用程序的开源 JavaScript Web 框架。它以其约定优于配置方法和强调开发人员生产力而闻名。
以下编程语言列表可帮助您了解在成为 Web 开发人员的过程中您想要学习和追求的语言。大多数时候，选择将取决于您选择的框架或其他方式：
JavaScript——让我们从显而易见的最流行的 Web 开发编程语言开始，它是 JavaScript，它是一种用于构建前端 Web 应用程序的通用语言。它是一种客户端语言，这意味着它在用户的网络浏览器中运行，并允许开发人员创建交互式和动态网页。JavaScript 还通过 Node.js 等技术用于服务器端开发，它允许开发人员构建可扩展的高性能 Web 应用程序。
Python – Python 是一种高级解释型编程语言，广泛用于 Web 开发。它具有简单易学的语法，是初学者的绝佳选择。Python 还以其强大的库和框架而闻名，例如 Flask 和 Django，这使得快速构建复杂的 Web 应用程序变得容易。
Java – Java 是一种流行的面向对象的编程语言，广泛用于构建可扩展的高性能 Web 应用程序。它是一种通用语言，可用于为各种平台（包括桌面、移动和 Web）构建 Web 应用程序。
Ruby – Ruby 是一种高级解释型编程语言，通常用于 Web 开发。它以简单和优雅着称，使其成为想要快速轻松地构建 Web 应用程序的开发人员的热门选择。
PHP – PHP 是一种流行的脚本语言，广泛用于构建动态网站和 Web 应用程序。它是一种服务器端语言，这意味着它在网络服务器上运行并生成发送到用户网络浏览器的 HTML 页面。
C# – C# 是一种流行的面向对象的编程语言，通常用于构建 Web 应用程序。它是一种通用语言，可用于为各种平台（包括桌面、移动和 Web）构建 Web 应用程序。
Swift – Swift 是一种现代的编译型编程语言，通常用于构建 Web 应用程序。它是一种功能强大的语言，以其安全性和性能着称，使其成为构建需要处理大量数据或执行复杂计算的 Web 应用程序的绝佳选择。
Go – Go 是一种现代的编译型编程语言，通常用于构建 Web 应用程序。它是一种快速、高效的语言，以并发性和可扩展性着称，使其成为构建需要处理大量流量或数据的 Web 应用程序的绝佳选择。
TypeScript – TypeScript 是一种流行的类型化编程语言，通常用于构建大型、复杂的 Web 应用程序。它是 JavaScript 的超集，这意味着它包含 JavaScript 的所有功能，以及可以更轻松地构建大型、可维护的 Web 应用程序的附加功能。
Kotlin – Kotlin 是一种现代的编译型编程语言，通常用于构建 Web 应用程序。它是一种简洁、强大的语言，以其安全性和与 Java 的互操作性而著称，使其成为构建需要与现有 Java 代码集成的 Web 应用程序的绝佳选择。
追求网络开发职业道路可能是一个不错的选择，原因有很多。Web 开发职业的一些好处包括：
对 Web 开发人员的高需求：对 Web 开发人员的需求一直很高，并且预计在未来几年将继续增长。这意味着那些拥有技能和经验的人将有很多机会在这个领域取得成功。
高薪： Web 开发人员的薪水很高，薪水因经验、地点和其他因素而异。总的来说，Web 开发人员可以期望获得丰厚的薪水，并且成长和进步的潜力很大。
灵活性： Web 开发可以在工作地点和日程安排方面提供很大的灵活性。许多 Web 开发人员远程工作，并且能够设置自己的时间并按照灵活的时间表工作。
学习和成长的机会： Web 开发是一个不断变化的领域，新技术和工具不断涌现。这意味着作为 Web 开发人员，始终有学习和成长的机会，并保持在行业的前沿。
创造有形事物的满足感：作为一名 Web 开发人员，您将有机会创造有形且有用的事物。这可以令人难以置信地满足，并且可以为您的工作提供成就感和自豪感。
Web 开发的未来看起来一片光明，许多激动人心的发展和趋势即将出现。一些可能影响 Web 开发未来的最新 Web 开发趋势包括：
人工智能和机器学习的兴起：人工智能和机器学习在网络开发中变得越来越重要，出现了许多新的工具和框架来帮助开发人员构建人工智能驱动的应用程序。
物联网的发展：物联网 (IoT) 是一个由可以收集和共享数据的连接设备组成的网络，预计在未来几年将显着增长。这将为网络开发人员创造新的机会来构建可以连接这些设备并与之交互的应用程序。
移动设备的重要性日益增加：随着越来越多的人使用智能手机和其他移动设备访问网络，网络开发人员创建适合移动设备的应用程序和网站将变得越来越重要。
渐进式 Web 应用程序的兴起：渐进式 Web 应用程序 (PWA) 是外观和感觉都像本机移动应用程序的 Web 应用程序，并且有望在未来变得更加流行。这将为 Web 开发人员创造新的机会来构建可跨不同设备和平台提供无缝用户体验的 PWA。
云计算的发展：云计算在网络开发中变得越来越重要，许多公司将他们的应用程序和数据转移到云中。这将为 Web 开发人员创造新的机会来构建云原生应用程序并将它们与现有的云服务集成。
Web 开发仍然值得学习，因为它是构建和维护作为现代 Internet 支柱的网站和 Web 应用程序的基本技能。随着世界变得越来越紧密，对 Web 开发人员的需求不断增长，对于那些拥有构建和维护未来 Web 应用程序的技能和专业知识的人来说，有许多激动人心的机会。
Web 开发也是一个回报丰厚且具有挑战性的领域，它允许开发人员利用他们的创造力和解决问题的技能来构建供全球数百万人使用的应用程序。有了合适的工具和资源，任何人都可以学习 Web 开发并开始构建自己的 Web 应用程序，从而打开一个充满可能性和机遇的世界。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Vuex 和 Pinia 是用于管理 Vue.js 应用程序状态的标准 Vue.js 库。让我们比较一下他们的代码、语言、功能和社区支持。
如果没有合适的库，开发人员管理应用程序的状态可能会很困难。Vuex 和 Pinia 是标准的 Vue.js 库，用于处理应用程序中的条件。这两个库都非常适合状态管理，但是由于它们出色的特性和功能，选择哪个库用于你的项目需要时间并且令人沮丧。好吧，我们将在本文中看看为什么一个是最好的。
在本文中，我们将通过实际代码示例查看代码比较、它们的变体、功能，以及推荐使用哪一个来管理你的状态应用程序，以便更好地理解。我们还将考虑每个产品的语言、功能和社区支持。
我将简要总结 Vuex 和 Pinia。如果你想要更详尽的解释，我建议阅读Vuex 文档和Pinia 文档。
Pinia是一个新的状态管理库，可帮助你在 Vue.js 应用程序中跨组件管理和存储响应数据和状态。Pinia 由 Vue 核心团队成员之一 Eduardo San Martin Morote 创建。
Pinia 使用新的反应系统来构建一个直观且完全类型化的状态管理系统。
库中引入的新特性是促成 Pinia 推荐的因素之一。总体而言，Pinia 显得轻巧、简单且易于掌握。它拥有可以使 Vue 3 和 Vue 2 中的编程变得通用的一切。因此，这是试用 Pinia 的理想机会。
Vuex是一种状态管理模式和库，构建为集中式存储，可帮助你维护 Vue 应用程序中存在的所有组件的状态。Vuex 遵循确保你的状态突变为预测标准的规则。
使 Vuex 更强大的一个因素是组件从 Vuex store 中获取它们的状态，并且可以快速有效地响应 store 状态的变化。
Vuex虽然是维护你store的状态管理库，但建议你熟悉或搭建过大型SPA。如果你没有经验，Vuex 可能会冗长且令人生畏。
如果你的应用程序很广泛，你需要管理复杂的数据流，并且你有嵌套的组件，你可以使用 Vuex。查看官方文档以获取有关何时使用 Vuex 的更多信息。
Pinia 和 Vuex 之间的区别之一是 Pinia 是“模块化设计”，换句话说，它被构建为拥有多个商店，而 Vuex 只有一个商店。在这些商店中，您可以拥有子模块。除此之外，Pinia 允许将这些模块中的每一个从他们的商店直接导入到需要的组件中。
如果您是一名 Vue 开发人员并且曾使用 Vuex 管理应用程序的状态，您会注意到 Vuex 只有一个商店。在该商店中，您可以在其中包含多个模块。使用 Pinia，您可以将这些模块中的每一个都存储在一个地方，并在需要时将它们直接导入到组件中。
此方法允许捆绑器自动对它们进行代码拆分，并提供更好的 TypeScript 推理。
Pinia 提供开发工具支持，以帮助您使用该库构建和轻松调试。当我们安装 Pinia 时，它会自动挂接到我们的 Vue.js 开发工具，并让我们跟踪对我们的商店所做的更改，这让我们在 Vue.js 版本（Vue 2 和 Vue3）中获得流畅的开发人员体验。
Pinia 提供了一个简单的 API，使您的商店的编写变得简单且井井有条，就像创建组件一样。这意味着与 Vuex 解决方案相比，需要掌握的样板文件和概念更少。
Pinia 还提供了一个完整的插件系统，具有交易和本地存储同步等功能，适用于 Pinia 默认行为不足的情况。
Pinia 提供比 Vuex 更好的 TypeScript 支持，具有 Javascript 自动完成功能，这使得开发过程变得简单。
Pinia 的重量只有 1 KB，因此很容易融入您的项目。这可能会提高您的应用程序性能。
当您的应用程序扩展时，遍历变得很困难。但是，使用 Vuex 模块，您可以根据领域功能将您的商店拆分为多个文件，并从该特定命名空间中的模块访问状态循环。
Vue devtools 中的 Vuex 选项卡允许我们查看状态并跟踪我们的变化。这使我们能够快速评估我们的程序如何执行和调试错误。
Vuex支持热重载功能，它使用 webpack 的热模块替换 API，可以在您开发时快速重载您的 mutations、modules、action 和 getters。
如果你想编写一个 TypeScript 存储定义，Vuex 可以提供它的类型并且更容易实现。它有一个默认的 TypeScript 配置，不需要额外的设置。
Pinia 是一个轻量级库，可帮助您管理整个应用程序的反应状态。与 Vuex 相比，Pinia API 易于学习，使您的代码更易于阅读。
让我们看一下使用 Pinia 和 Vuex 管理我们的状态的代码比较：
Vuex
在此示例中，我们将查看一个简单的 Vuex 存储，它跟踪待办事项列表项的状态：
import { createStore } from 'vuex' const TodoListstore = createStore({ state() { return { todoListItems: [] } }, actions: { addNewList({ commit }, item) { { commit('createNewItem', item) } }, mutations: { createNewItem(state, item) { state.todoListItems.push(item) } } })
如果你看上面的代码，你可以看到 Vuex 存储中的三个动作：状态、 动作和突变。状态返回当前的todoListItems，动作提交一个突变来创建一个新项目，最后，突变创建新项目并将其添加到列表中。当你构建一个更大的应用程序时，你可能会意识到动作和突变相对相似，导致冗余代码，因为每个状态变化都需要一个样板。
Pinia
使用 Pinia 简单 API，您可以消除突变和冗余代码。让我们查看一个代码示例，了解当您使用 Pinia 实现之前的代码时的样子：
import { defineStore } from 'pinia' Export const useListStore = defineStore('list', { state() => ({ return { todoListItems: [] } }), actions: { addNewList() { this.todoListItems.push(item) } }})
上面的示例是 Pinia API 在管理应用程序状态时如何工作的简单代码。使用 Pinia，我们删除了突变并将其直接更新到我们的动作中。
注意：在上面的代码示例中，当我们将项目直接提交给我们的操作时，我们不需要跟踪我们的项目。
Pinia 和 Vuex 是控制应用程序状态的优秀工具，但其中一个必须具有另一个所没有的某些功能。让我们来看看它们是什么。
好吧，这就是它变得更具挑战性的地方，因为仍然有一些项目需要使用 Vuex 来处理状态应用程序，即使 Pinia 是新推荐的状态管理库。它有几个 Vuex 没有的有价值的功能。
Vuex 仍然是构建大型 SPA 的理想解决方案，因为对于构建中小型应用程序的人来说，它相当冗长。
Pinia 也一样。尽管如此，如果你需要所有列出的功能，例如 devtool 支持、TypeScript 支持和状态应用程序的轻松管理，那么 Pinia 是最好的解决方案——它为你提供流畅的开发体验。
如果你正在构建一个不太复杂的应用程序，无论是中等到广泛的应用程序，你都可以使用 Pinia，因为它的重量约为 1 KB。
由于功能多样，在管理应用程序状态时，在 Vuex 和 Pinia 之间进行选择可能会造成混淆。不过，这两个框架都非常适合管理状态应用程序。本文简要比较了它们的特性、功能和对代码的影响。读完这篇文章后，也许你将能够找到适合你的库。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。
// 为什么要数据可视化
数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。
举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律
关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。
一、选择适合的图表
数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。
1. 分析数据关系
根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。
构成关系
构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。
常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。
关键词：“占比、比例、百分比”
比较关系
比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。
常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。
关键词：“增减、升降、涨跌、波动”
分布关系
利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。
常用图表：散点图、热力图、雷达图等
关键词：“随着……而变化、A/B之间的相关性、交/并集”等
关联与流转
流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。
常用图表：关系图、桑基图、漏斗图、进度图等
关键词：“流程步骤、留存、转化、关系”
2. 分析数据特征
按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。
变量特征
分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。
维度特征
多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类
层级特征
多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：
例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。
流程特征
流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。
二、强化视觉层次
选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。
1. 强化数据特性
使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差
2. 色彩视觉传达
除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。
我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：
那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。
定性型：使用色调来进行分类
数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：
定量型：使用深浅色板强调内在顺序
如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。
三、图表中的响应式设计
B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。
1. 布局框架适配
在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
2. 图表元素适配
要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。
3. 极值适配
因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。
// 结语
数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
随着Ｂ端体验设计的发展，表单类页面已经形成了一定的设计模式，例如登录页面，场景比较明确、业务流程和设计模式都比较成熟了。
业务型表单设计与业务强相关。既需要考虑交互带来的用户体验，又要从业务角度出发满足用户的行为需求，相对比较复杂。不过也形成了一些固定的设计方法。今天我们先来看看「精简」策略。
本文主要内容：
✦ 删除，实现表单轻量化
✦ 组织，让表单更加有层次
✦ 隐藏，让表单更加灵活
✦ 转移，扩展表单的异步空间
表单是系统与用户进行沟通的语言，它应当符合双方的认知逻辑。因此表单设计时，需要解决「产品」和「用户」２个方面的问题：
✦ 表单需要用户提供哪些信息，保证信息的正常流转和业务的完整
✦ 用户如何理解这些信息，如何更好地帮助用户完成表单填写
尤其是面对复杂表单，需要从这两方面寻找到突破口。
✦ 在业务层面，设计师需要探究用户的实际需求，反思表单项是否必要，从而减少不必要的选项，提高用户效率。
✦ 同时在设计层面，还需要基于用户认知习惯，通过合理的信息组织、交互形式帮助用户完成表单任务。
复杂表单通常包含多种业务场景，并且与其他业务存在关联和嵌套，导致表单内容信息量较大。我们需要通过「删除」、「组织」、「隐藏」、「转移」４个交互设计原则，让表单页面更加简单、有效。
前几年，我们在银行或者移动营业厅开通一些新业务时，都会填写表单，通常是密密麻麻一堆信息。但是实际需要填写的内容可能只有2～3项，业务人员会特意勾选出来给客户，其余的都是非必填项，或者是业务人员填写的。
线上表单设计时，没有专门的业务人员指导，用户更容易迷失。所以设计师或者产品经理的首要任务就是尽可能地减少表单信息量，降低用户的认知负荷。
最近在做一个表单的优化，业务方要求增加“入参”、“出参”两个表格项，说是用户会看。与用户沟通后，反馈也说“会看一下”。但是在深度挖掘用户场景后，发现用户确实会查看这个信息，只不过不是在当前环节查看，而是在结果项中查看。
所以我们最终去掉了这两个信息量较大的表格内容，从而让整个表单的信息量得到了明显的下降。因此面对复杂长表单，我们需要从需求入手，判断是否有必要让用户提供如此多的复杂信息。
当我们不得不面对复杂表单时，如果采用简单内容平铺，用户看到的是满屏的散点信息，造成信息识别困难，用户一时间难以找到填写思路，反而增加用户的心理负担。因此信息的层次性，对于复杂表单至关重要。
首先要从内容和视觉层面让复杂信息变得清晰、规整，更加符合用户的认知习惯。例如，可以利用分组标题、分割线、卡片，按照不同信息的类别、属性和相关性进行区块划分。
根据不同的布局和交互，主要有以下4种表单设计模式。
表单分组后，可以按照业务逻辑顺序铺开展示。用户只要按顺序填写就可以了。但是对于超长表单，这种布局方式下，用户无法全览页面信息。页面上下滚动、定位查找带来的交互成本比较高。
1）平铺表单
2）卡片表单
因此顺序表单更多地用在业务信息比较简单的场景中。
为了解决长表单的定位效率问题，可以在顺序表单的基础上增加锚点。另外锚点还可以帮助用户快速了解表单所包含的内容模块。
根据锚点的布局，可以分为横向锚点和纵向锚点两类。锚点需要吸顶方便用户操作。本质上来说，锚点表单是顺序表单的优化版本。
如果长表单内容没有依赖关系，还可以将表单拆分为几个相互独立的标签内容，这就是标签表单。
不过标签表单更强调内容的并列关系，常用于配置表单中，例如 MAC 或者 Windows 系统的配置弹窗。标签表单在全新表单中应用较少。
因为标签表单容易造成内容遗漏，并且无法告知用户哪些标签已经填写，哪些标签未填写，或者无法清晰地展示校验信息。来回切换标签查看信息，也会影响效率，因此主要用于用户有目的的配置行为中。
步骤表单是一种常见的表单拆分方式。通过节点将子表单串联起来，形成一个完整的业务闭环。例如阿里云的云服务器订单流程，或者一些开户流程等。
步骤表单有几个特点：
理论上来说，步骤表单有明显的操作顺序，用户需要按照节点完成内容填写，因此不会产生信息遗漏。当然也可以根据实际的业务场景，设置选填节点。但是总得来说，步骤表单更强调的是顺序操作。
对于复杂业务，步骤表单可以将分散在不同页面中的独立业务串联起来，在一定程度上具备新人教学功能，帮助用户了解业务逻辑。减少用户自定义操作时在不同页面的跳转，从而提供新人用户的操作效率。例如系统配置向导类的步骤表单。
由于步骤表单存在正向和逆向操作，因此设计时还需要考虑清楚逆向操作的设计逻辑。例如：
✦ 当用户想要修改前面步骤信息时，除了逐步返回，是否可以步骤条直接跨节点修改？
✦ 用户中途退出表单后，重启时是从第一步开始，还是直接从未填写的步骤开始呢？
✦ 用户如果完成了步骤条表单填写，想要二次修改时，是用普通表单，还是仍然使用步骤表单形式呢？
步骤表单可以分拆信息，化整为零。但是信息节点也不能过多，否则同样会影响用户的操作效率。所以要减少不必要的流程节点。
最近在做设计时，发现步骤表单最后一步是内容预览。通过用户调研发现，部分用户会谨慎地预览前面４步填写的内容。而另一部分用户则认为，刚填写了内容不需要预览，强制预览的设计并不友好。该如何平衡设计呢？
最终我们选择了将预览节点取消，将预览功能调整到第４步，采用「预览」按钮的形式。既满足了部分用户预览的需要，另一部分用户也可以不做预览，直接提交申请。
所以步骤表单过程中的节点具有一定的强制性，需要谨慎对待，保证节点的合理有效。
表单实际上是任务信息的集合，为了具有更高的适配性，内容通常是多种场景的集合。而场景有高频、低频区分，对于高频信息需要优先展示，便于提高用户的填写效率；对于低频场景，可以隐藏弱化展示，从而降低整个表单的复杂度。
例如我们常见的「高级配置」，通常在表单的底部默认收起展示。
复杂表单中信息会出现多级信息共存的场景。这种场景下，复杂表单默认展示当前选项对应的子内容，隐藏其他选项的内容，从而提高信息的指向性。
3、合理的组件形式
比较典型的就是单选和下拉选择器如何选择。有人为了强调效率，一味地追求单选按钮平铺展示，认为单选更加直观，用户不需要点击下拉滚动查看备选项。但是用户同样需要逐个浏览选择，反而增加了整个页面的信息量。
所以单选框更多用在备选项较少的场景，如果备选项较多，建议优先采用下拉选择器，隐藏备选项。
在表单设计时，可以将部分二级信息转移到弹窗、抽屉中，利用浮层空间拓展业务内容，根据用户操作逐级加载出来。从而减少表单的信息量。
例如下图中，没有将「所有配送区域及运费」直接展示出来供用户选择，而是放在了弹窗中，表单中只呈现最后的选择结果。既简化了表单的内容，又让选择结果更加突出，方便用户的查看和校验。
现在很多浏览器都增加了密码存储功能，减少用户记忆成本。而在电商购物网站可以设定默认的收货地址。系统自动读取调用，从而减少用户的输入操作。
现在越来越多的网站支持「手机短信验证码」免密注册登录方式，或者第三方登录方式，或者手机端扫码登录。将原有的表单填写转变为系统行为，从而降低用户的行为成本。
好了，以上就是我总结的表单设计的内容～
重复一遍：
✦ 删除，实现表单轻量化
✦ 组织，让表单更加有层次
✦ 隐藏，让表单更加灵活
✦ 转移，扩展表单的异步空间
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者：腾讯ISUX团队 来源：子牧先生
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
本文转载至 : Mac解压压缩 rar文件
RAR 5.60 for Mac OS Xwww.rarlab.com
cd ~/Downloads/rar
sudo install -c -o $USER rar /usr/local/bin/
sudo install -c -o $USER unrar /usr/local/bin
1，解压命令
//解压到当前目录
unrar x a.rar //解压到指定目录
unrar x a.rar ~/Downloads //解压文件到当前目录
unrar e test.rar //查看rar中的文件
unrar l test.rar //更详细Ï
unrar v test.rar //测试是否可以成功解压
unrar t test.rar
2，压缩命令
// 将file文件压缩到text.rar
rar a text.rar file
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
我们会看到很多页面带有水印，但是怎么实现呢？当然可以有多种实现方式，本文主要讲解在vue项目中基于DOM或者Cavans实现水印效果，当然还有其他的实现方式，比如在原图片的基础上加上水印生成新的图片，但是这需要后端处理。因为要在vue项目中使用，所以我使用自定义指令可以直接对挂载的dom实现水印效果。
本文实现水印的项目环境为：vue + vite + ts
前面专门有一篇讲解vue2.x与vue3.x中自定义指令详解
将水印的指令放到标签上，设置标签的宽高。水印可以放大div标签上，也可以是img标签上。注意：img才有onload方法，div标签么有。
<script setup lang="ts"> import { ref } from "vue"; </script> <template> <div class="index-content" > <div class="watermaker" v-watermark ></div> <!-- <img v-watermark style="width:400px;height:400px" src="../assets/vue.svg" alt=""> --> </div> </template> <style scoped> .watermaker { width: 400px; height: 400px; } .index-content{ width: 100%; height: 100%; } </style>
directives文件
在directives文件下创建waterMark.ts 文件，具体内容实现如下：
import waterImg from "@/assets/vue.svg" const directives: any = { mounted(el: HTMLElement) { //如果el元素是img，则可以用el.onload将下面包裹 const { clientWidth, clientHeight, parentElement } = el; console.log(parentElement, 'parentElement') const waterMark: HTMLElement = document.createElement('div'); const waterBg: HTMLElement = document.createElement('div'); //设置waterMark的class和style waterMark.className = `water-mark`; waterMark.setAttribute('style', ` display: inline-block; overflow: hidden; position: relative; width: ${clientWidth}px; height: ${clientHeight}px;`); // 创建waterBg的class和style waterBg.className = `water-mark-bg`;// 方便自定义展示结果 waterBg.setAttribute('style', ` position: absolute; pointer-events: none;`在这里插入代码片` transform: rotate(45deg); width: 100%; height: 100%; opacity: 0.2; background-image: url(${waterImg}); background-repeat: repeat; `); // 水印元素waterBg放到waterMark元素中 waterMark.appendChild(waterBg); //waterMark插入到el之前，即插入到绑定元素之前 parentElement?.insertBefore(waterMark, el); // 绑定元素移入到包裹水印的盒子 waterMark.appendChild(el); } } export default { name: 'watermark', directives }
directives文件下创建 index.ts文件
import type { App } from 'vue' import watermark from './waterMark' export default function installDirective(app: App) { app.directive(watermark.name, watermark.directives); }
main.ts中全局引入
import { createApp } from 'vue' import App from './App.vue' import directives from './directives' const app = createApp(App); app.use(directives); app.mount('#app');
MutationObserver对水印元素进行监听，删除时，我们再立即生成一个水印元素就可以了，具体方面在下面讲解。
position：relative
position：absolute ，实现这个水印元素覆盖到原始元素的上层，以实现水印的效果。
通过将图片绘制在cavans中，然后通过cavans的toDataURL方法，将图片转为base64编码。
// 全局保存 canvas 和 div ，避免重复创建（单例模式） const globalCanvas = null; const globalWaterMark = null; // 获取 toDataURL 的结果 const getDataUrl = ( // font = "16px normal", // fillStyle = "rgba(180, 180, 180, 0.3)", // textAlign, // textBaseline, // text = "请勿外传", ) => { const rotate = -10; const canvas = globalCanvas || document.createElement("canvas"); const ctx = canvas.getContext("2d"); // 获取画布上下文 ctx.rotate((rotate * Math.PI) / 180); ctx.font = "16px normal"; ctx.fillStyle = "rgba(180, 180, 180, 0.3)"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.fillText('请勿外传', canvas.width / 3, canvas.height / 2); return canvas.toDataURL("image/png"); };
使用MutationObserver监听dom变化，MutationObserver详细用法之前已经讲过了，详细可见作为前端你还不懂MutationObserver？那Out了
具体监听逻辑如下：
// watermark 样式 let style = ` display: block; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: repeat; pointer-events: none;`; //设置水印 const setWaterMark = (el: HTMLElement, binding: any) => { const { parentElement } = el; // 获取对应的 canvas 画布相关的 base64 url const url = getDataUrl(binding); // 创建 waterMark 父元素 const waterMark = globalWaterMark || document.createElement("div"); waterMark.className = `water-mark`; // 方便自定义展示结果 style = `${style}background-image: url(${url});`; waterMark.setAttribute("style", style); // 将对应图片的父容器作为定位元素 parentElement.setAttribute("style", "position: relative;"); // 将图片元素移动到 waterMark 中 parentElement.appendChild(waterMark); }; // 监听 DOM 变化 const createObserver = (el: HTMLElement, binding: any) => { console.log(el, 'el') console.log(style, 'style') // console.log(el.parentElement.querySelector('.water-mark'),'el.parentElement') const waterMarkEl = el.parentElement.querySelector(".water-mark"); const observer = new MutationObserver((mutationsList) => { console.log(mutationsList, 'mutationsList') if (mutationsList.length) { const { removedNodes, type, target } = mutationsList[0]; const currStyle = waterMarkEl.getAttribute("style"); // console.log(currStyle, 'currStyle') // 证明被删除了 // （1）直接删除dom // 1.先获取设置水印的dom // 2.监听到被删除元素的dom // 如果他两相等的话就停止观察，初始化（设置水印+启动监控） // (2) 删除style中的属性 // 1 判断删除的是否是标签的属性 （type === "attributes") // 2.判断删除的标签属性是否是在设置水印的标签上 // 3.判断修改过的style和之前的style对比，不等的话，重新赋值 if (removedNodes[0] === waterMarkEl) { console.log(removedNodes[0]) // 停止观察。调用该方法后，DOM 再发生变动，也不会触发观察器。 observer.disconnect(); //初始化（设置水印，启动监控） init(el, binding); } else if ( type === "attributes" && target === waterMarkEl && currStyle !== style ) { console.log(currStyle, 'currStyle') console.log(style, 'style') waterMarkEl.setAttribute("style", style); } } }); observer.observe(el.parentElement, { childList: true, attributes: true, subtree: true, }); }; // 初始化 const init = (el: HTMLElement, binding: any = {}) => { // 设置水印 setWaterMark(el, binding.value); // 启动监控 createObserver(el, binding.value); }; const directives: any = { mounted(el: HTMLElement, binding: any) { //注意img有onload的方法，如果自定义指令注册在html标签的话，只需要init(el, binding.value) el.onload = init.bind(null, el, binding.value); }, };
删除水印标签依然还在，除非删除水印注册的标签才能删除水印，但是这样做毫无意义，因为这样做内容也会全部删除掉。
toDataURL(type, encoderOptions)，接收两个参数：
image/png、image/jpeg、image/webp等等，默认为image/png格式
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
众所周知，「用户体验五要素」出自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
产品设计者和开发者的角度可以对应理解为：为什么做、做到什么程度、这些东西如何组成、规划用户操作行为、如何呈现这些东西。
「Live Activities设计规范」由苹果出品，原文为英文，上一篇已翻译https://www.yuque.com/viola-ddvdh/yb7quv/uwdod71707e4nez8。上篇也提到了个人对其内容的叙述方式存在一点意见。为了更好的记住&理解「Live Activities设计规范」，使用比较熟悉的「用户体验五要素」对内容进行整理。
原文提供的Live Activity定义如下：
“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”
“Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. ”
从原文可以提炼出Live Activity显示特点：
1. 内容是频繁更新的、有进度/状态显示的、用户关心的。
2. 内容的信息量是一眼就能看完的程度。
但上述仍是表象，并非实质，接下来思考这几个问题：
1. 为什么显示的是进度/状态频繁更新的内容？
2. 为什么要强调用户关心的？
3. 为什么信息量是一眼就能看完的程度？
没有Live Activity时，频繁更新主要靠push推送。但push容易被其他APP的push覆盖，且随着各种APP的频繁使用，用户获取关键信息的效率和通过push打开APP的次数反而在下降。
进度/状态频繁更新的内容，说明每个状态存在的时间短，如果被覆盖/忽略，同一状态就不再复现，用户所关心的，或APP所希望用户关心的，就看不到了。比如：什么时候取外卖、待付款、上传成功等等。
当下我们所处的时代是信息泛滥的时代，需要对信息作精简，但用户的操作是可以多条线进行的，比如比如边看剧边吃饭、上班摸鱼/等外卖、比如听音乐的时候写作。
信息内容和量是官网一直在强调的，需要精简，只展示用户需要的，基本达到一眼看完的程度，目的就是知道变化的是什么，当前状态是什么。
分析了这么多，大胆推测一下Live Activity的设计初衷是：快&准确&轻。而终极目的是打动用户，形成好体验，进而推动口碑和销售；为各APP提供新的通知形式，互惠互利。当然Live Activity在一定程度上也弥补了硬件上的缺憾。
关于这个层次相当于规定功能范围&信息边界限制，就是什么要，什么不能要。这部分的信息官网给出许多，在此将其分类梳理如下，为避免大家不好查找官网/译文对应出处，在句未已标注。
1. 仅iPhone支持，iPadOS、macOS、tvOS或watchOS不支持。（源自：平台注意事项）
2. 非iPhone14的仅针对iOS16有锁屏Live Activity展示。（源自：什么是Live Activity-锁屏）
3. 支持用户手动清除锁屏状态下的Live Activity。（源自：实际操作）
4. 支持用户直接关闭对应APP的Live Activity。（源自：最佳实践方式第3/c条）
5. 支持Live Activity自动开始&结束。（源自：最佳实践方式第6/f条）
6. 限制跟踪活动/状态时长不超过8小时。（源自：最佳实践方式第1/a条）
7. 限制活动/进程结束后展示时长不超过4小时。（源自：最佳实践方式第8/h条）
8. 支持更改背景颜色&不透明度。（源自：设计有用的Live Activity第5/e条）
9. 限制内容布局。（源自：设计有用的Live Activity第5/e条）
10. 限制不同设备的展示尺寸。（源自：规范）
1. 避免在Live Activity中显示敏感信息。（源自：最佳实践方式第4/d条）
2. 避免在Live Activity中显示广告和促销活动。（源自：最佳实践方式第5/e条）
3. 只提供正在进行的任务/事件的关键摘要。（源自：最佳实践方式第2/b条）
4. 在任务/活动结束前，给用户提供关闭Live Activity按钮。（源自：最佳实践方式第6/f条）
5. 点击Live Activity直接定位到对应页面，无需用户二次导航。（源自：最佳实践方式第7/g条）
6. 考虑在活动结束后，锁屏上在合理时段后自动删除Live Activity。（源自：最佳实践方式第8/g条）
（个人猜测）由于是提供一个展示区域，且展示区域有限，所以对于层级架构，一级展示什么，二级展示什么，各阶段展示什么，这些都没有做明确规定&建议。各家APP可以根据自身实际情况进行设计。
通过Live Activity的展示形式，可以总结为2点：吸引、查看（摘要&详情）。
1. 一般是在原深感摄像头两侧展示（电话会直接展示扩展型），分为紧凑型和最小化。
2. 紧凑型在仅有一个活动/事件的时候展示，虽被原深感摄像头分割两端，但仅作为一条信息展示，为了视觉上的统一，这里的颜色不支持开发设置，使用的是系统默认色值。
3. 最小化在存在多个活动的时候展现，左侧和原深感摄像头粘连，右侧独立成岛。
4. 不管是紧凑型，还是最小化，都可以通过点击原深感摄像头区域，进入APP内页，或者长按唤出扩展型。
1. 进入内页的查看基本就是各家显神通了，这里主要讲扩展型和锁屏。
2. 原则上是不支持在扩展型和锁屏做复杂操作的，基本点击是进入APP。
3. 扩展型是用户长按紧凑型/最小化唤起的展示区域，内容是可以自定义的，当然官方也给了相应的建议，具体如下。内容信息种类多的可以采用这种信息左中右排布，底部预留大按钮。内容信息少的可以采用左内容右操作的方式。
4. 根据一致性原则，锁屏展示的布局框架应该与扩展型差不多，同样可以点击打开APP。只是在锁屏状态如果有多个任务同时进行，是会全部展示的，所以要注意品牌的传递，避免用户混淆服务方。
对于如何呈现这些东西，苹果还是写了很多建议，确保视觉上的一致性和美观。
1. 紧凑型状态下，为了保证两侧信息的连贯，除了语句阅读连贯，还需要在图形和颜色上具有一致性，视觉上连贯。
2. 锁屏状态下的背景是可以自定义颜色、图像、不透明度的，当然文字的色值和不透明度也是可以定义的。这就涉及到两者间的对比度对信息阅读的影响。
3. 设计师不仅要考虑最佳状态，还有深色&浅色模式下的，以及不同环境光、设备亮度下的显示。还有一点很容易忽视的，就是在用户自定义的墙纸下显示的效果。不仅要注意信息获取，还需要考虑美感问题。
1. 紧凑型和扩展型之间的布局要保持一致，两者间的变化过渡效果是可以预测的。
2. 一般来说，扩展型和锁屏状态下的信息间标准间距是20pt。
3. 在某些情况下，例如图形和按钮，您可能需要使用更紧凑的边距，以避免挤满边缘或形成混乱的外观。
1. 内容和Live Activity边缘之间的边距需要保持一致，请遵循SwiftUI规则。
1内容和Live Activity边缘之间的边距需要保持一致，，发现以圆角边界为测距点得到的间距关系较为舒适。即：圆形/大致为圆形的图形保持上下，3. 以及左侧或者右侧间距一致即可；方形/大致为方形的图形保持圆角边界与容器圆角边界垂直对齐即可。同一位置的多个图形圆角需要相对统一，才能确保间距的一致性。
需要适应不同机型的尺寸。具体的尺寸规范如下。
动态岛使用44个点的角半径，其圆角形状与原深感摄像头相匹配。
下表中列出的所有值均以pt为单位。
ps：左侧为宽度，右侧为高度。
以上就是整理分析的全部。
在整理分析过程中加强了对「用户体验5要素」各个层划分的理解，也对Live Activity在各个层次上的要求更加明确。
不太爱看书，看了老忘，就很容易失去信心，垂头丧气、一蹶不振。
比较喜欢做图，把信息间的逻辑以图示化的方式表现出来，能加强理解，后期回顾也会比较舒心。
所以就有了这个系列——阅读图示化。
可能会出得很慢，画图比较费时间，想着怎么展示信息间的逻辑也很费时间。
基本是按着小节一块内容对应单图/多图。
基本一张图是一个完整的知识点。
当今提到促进业务增长，尤其是有关互联网行业，总是绕不开B端设计。那么今天我们来挖一挖B端设计到底牛在哪里。
B端设计是指针对企业的终端用户的产品设计，包括适用于消费者、企业、政府、行业等等市场的协同、全方位的客户体验设计，例如产品UI/UX设计、信息可视化设计等等。B端设计是提供终端用户新的解决方案，注重以客户的需求为导向，通过数据分析、可视化、流程优化等手段来进行产品设计。
在一个产品设计中，要考虑到用户的体验，UI/UX有着至关重要的作用，它能够把产品从用户的角度出发，将用户直接引入到设计之中，使用户步入终端，真正成为使用者。
此外，B端设计还要注重对业务流程的优化，例如在订单管理系统的设计中，需要把客户的需求分析清楚，尽可能用最少的步骤帮助客户快速进行订单操作，增加操作效率；同时，也需要考虑到如何将整个管理系统融入到业务流程之中，使其成为一个可持续发展的解决方案。
此外，B端设计还需要考虑系统安全性和可用性。系统安全性指的是在设计过程中重视数据安全，例如考虑不同用户的权限，避免未经授权的访问以及防止误操作等；而系统的可用性则指的是系统操作的一致性，即如何在使用中满足客户的需求，在系统功能上保障系统的完备性和易用性，为用户提供更方便的操作体验。
正确的B端设计应包括：用户界面设计、业务流程的优化、系统安全性以及可用性的考虑等。
用户界面设计的目的在于提供简单易用的用户界面，以满足客户需求，提高用户体验。
业务流程优化则是确保系统能够有效地协调用户间的沟通，使用户流程更加高效、可靠。
系统安全性考虑需要重视数据安全，增加对不同用户权限的考虑，以避免未经授权的访问以及误操作。
而系统可用性方面，则需要系统操作一致性，保障功能的完整性和易用性，使用户操作更加便捷。
用户界面设计还需要考虑跨浏览器的兼容性，以确保用户能够在不同的终端上获得有效的使用体验。此外，对于功能性更强的应用，还需要考虑响应速度、网络请求数和业务性能等方面的优化，以便在处理大量的信息时能够有效地完成任务。
对于不同的用户群体，应当提供相应的交互界面设计，例如考虑弱智使用者和视觉障碍者，以及婴幼儿等特殊群体。此外，可以通过支持多种语言、国家文化差异和地域语言来优化用户体验。
B端设计原则可以帮助企业更好的把握商业机遇，推动业务发展。
首先，应当按照核心业务找出客户需求，深入挖掘，从客户视角出发，明确目标。
其次，要强化设计意识，注重交互性，利用技术手段和平台将功能元件组合在一起，以便更好地解决客户面临的问题和满足客户的需求。
最后，对产品的功能、使用效果和用户体验进行定期的测试评估，根据反馈进行变更和优化，以满足客户的需求。
为实现B端设计的潜在价值，可以采用多重方法，比如从创新的角度增加产品的附加值，加强功能和服务体验，提升网站可用性，优化页面布局，提高页面加载速度等。
另外，还可以改进客户体验，通过可视化或语音技术提升网站和移动应用的交互性，以便让客户更容易获取想要的信息和服务。
此外，可以加强产品的社会化和移动性，以便更好地满足客户的需求，从而获得更多的潜在价值。
对于B端设计来说，还要考虑技术层面的因素。
首先，应根据客户使用情况进行系统优化，以提高系统效率。
其次，要重视人机交互技术，尽可能提供给用户更好的界面体验，并利用智能技术提升用户体验。
此外，应结合实际情况，采用合适的网络技术和安全技术，提升网站的安全性。
最后，还要将设计与市场营销结合起来，通过有效的营销手段，提高客户购买意愿，以获得更多的潜在价值。
B端设计要考虑的技术层面因素有：系统优化、人机交互技术、网络技术和安全技术以及营销手段。这些都是为了能够更好地满足客户的需求，并获得更大的价值。
首先，淘宝的B端设计把价值的提升放在了首位。它通过实时监测用户行为来分析用户习惯，以实现实时调整，提升客户体验。此外，淘宝的营销手段也让它的业务获得了极大的成功。
另外，微信也是一个优秀的B端设计案例。它引入了更多的人机交互技术，以有效沟通用户，同时也提供更安全、便捷的服务，大大提升了用户体验，获得了广泛的应用。
总之，优秀的B端设计不仅能优化用户体验，还可以带来更多的商业价值。
从用户体验角度来看，优秀的B端设计应包括系统优化、人机交互技术、网络技术和安全技术，这样可以给用户提供更流畅的体验，更快的响应速度和更好的安全保障。
此外，B端设计还应该拥有一套完整和灵活的营销手段，帮助企业获得更多的客户价值，以提升品牌影响力和竞争力。
要做好B端设计，一个重要的方面是把用户群体的心理需求和行为习惯结合起来，设计出更具吸引力的产品界面。例如，可以通过实时调整产品配置、设定营销活动等手段来满足不同用户群体的需求。
另外，为了提升用户体验，应该使用更智能化的人工智能（AI）技术，帮助企业更好地分析用户行为，从而更有针对性地进行产品调整。
总而言之，B端设计的成功关键在于结合用户群体的心理需求和行为习惯，并利用智能化的AI技术对用户行为进行分析，只有这样才能设计出更具吸引力的产品界面，满足不同用户群体的需求，并提升用户体验。
在企业开发B端产品之前，应该先进行大量的市场调研，以便弄清楚用户的心理需求和行为习惯，这也是设计成功的前提。在制定设计思路时，应该结合用户需求和行为习惯，并加入智能化AI技术，以有效调整产品界面，使其更具吸引力。在可行性研究阶段，应该采用多种方法，以测试产品整体性能，包括安全性、可靠性等，确保系统可以正常运行，避免潜在风险的发生，为用户的体验提供完善的保障。市场调研是设计成功的先决条件。除了市场调研，企业还应该采用新颖的营销策略，以拓展客户群，丰富产品服务，提升用户体验，实现B端设计成功。
在讲开源设计前，我们或许可以先讲讲开源一词是指什么。
开源全称开放源代码，开源软件最大的特点是开放，也就是任何人都可以得到软件的源代码，加以修改学习，甚至重新发放，当然是在版权限制范围之内。虽然开源一词最初是为软件开发而创造的，但现如今开源所涉及的领域也极其广阔，并不只是包括软件领域，如医药领域的药物开发开源、文化领域的书籍到期开源等等所以开源设计已包含了更广泛的含义，它包括了由任何人或者团队自由共享、协作的设计方案、项目、产品。
我们来看几个大型开源的设计了解一下~
Ant Design
阿里的开源系统后台组件库
https://ant.design
百度推出的开源图表
https://echarts.apache.org/
全球知名图片开源平台
https://unsplash.com
免费（大部分是）：开源设计的一个关键要素是它们通常（但不总是！）免费。这是一个重要因素，因为闭源设计通常需要花费不菲的价格或者冒着侵犯版权的风险去使用。
思想碰撞：更多的设计师或者创意爱好者共同为一个创意提出自己的见解和再设计。
设计开源领域广阔：设计开源领域也几乎涵盖了所有的设计和创意领域如平面设计、三维设计、用户体验设计、环境设计、建筑设计、服装设计、插画、动画设计等等
但是许多人可能会有一个疑问，开源设计和以往的素材网站或者源文件售卖网站有什么区别呢？
在我看来，开源网站与传统售卖设计资源的网站最大的区别是开放与共建，以figma的社区为例，作者发布作品后，任何人都可以对其作品进行redesign甚至remix，这极大的提高了设计师的兴趣，每个人都希望自己的作品能被他人看到，也希望自己的创意能与他人的创意进行更好的结合，这是一个多么美好的场景。而传统网站只是冷冰冰的展示文件售卖资源，缺少了设计中的灵魂。
那说了这么多，开源设计到底有哪些优势呢？
提升设计效率：设计师不应花费时间去解决别人已经解决的问题，比如当我设计一个新项目时，无需从零开始设计系统组件，可以直接使用Ant Design、Ant Mobile Design等现有组件库。
增加学习机会：通过开源社区，设计人员可以从其他人所做的项目中学习，并与专业人员交流经验。
提高设计质量：设计师自己看本人作品时，往往是身在其中不知如何下手，而将作品发布到更广泛的社区有助于设计师获得有价值的反馈以改进他们的作品。
提升品牌价值：对设计开源后，公司品牌能在某些领域内获得传播，提升品牌价值。并且在招募人才时也能成为有吸引力的一项条件。
提升个人价值：一个设计师想要提升个人价值和影响力，可以用开源作品来在行业内获得一定口碑，甚至直接将用户流量转化为订单，或许是更简单且容易的事情。
从这些优势中不难发现，在开源生态中，我们的作品不再是一座孤岛，通过互联网，我们的作品可以和任何人进行链接并且产生共鸣，提升品牌和个人的价值，所以每个人都值得感受开源的美好。
但开源的同时不可避免的会带来许多新的问题和挑战，让我们一起来看一下。
知识产权问题：在开源社区中，设计师可能不清楚其创作的知识产权。因此，他们可能会不自知地侵犯其他设计师的知识产权。
设计门槛问题：设计开源意味着设计师的门槛变低，任何人都可以随意使用开源的设计项目，导致设计师不再愿意花心血创作。
设计师竞争力下降：开源设计意味着普通的设计内容已不需要单独的设计师来完成，顶尖设计师的机会会更多，而普通设计师的竞争力会明显下降。
随着这些挑战的来临，如何更好的面对设计领域的开源是值得深思的问题，既要保护设计师的自身利益，也要让设计行业在开放、共享的环境下拥抱变革，所以在未来的道路上，我们每个人都可以尝试用自身的方法去探索未来，让每个人都能成为时代浪潮中的一朵浪花。
蓝蓝 http://www.lanlanwork.com