网上有很多关于shopify怎么建站,shopify免费自建站的知识，也有很多人为大家解答关于shopify如何构建的问题，今天为大家整理了关于这方面的知识，让我们一起来看下吧!
本文目录一览：
shopify如何构建
编辑指南：设计师经常使用各种高质量的设计案例，所以许多设计师开始专注于构建统一的设计系统，希望将各种设计聚集在一起，创建一个更完整的系统；作者拆除了 Bit 让我们了解一下团队建设设计系统的过程。
在这篇文章中，我将呈现并拆卸它 Bit 团队建设设计系统的过程；为了帮助你更好地理解，每一步都会向你展示真实的案例。
设计系统的创建是为了解决不可避免的无序状态，它带来了秩序。在 1976 年，NASA(美国国家航空航天局)推出了第一个设计系统。
到目前为止，几乎所有的大型组织(如 Uber，Pinterest，Airbnb 或 Shopify）都有这样的设计系统；该系统可以保持其产品本身的连续性，并帮助更混乱的产品和团队建立秩序。
在 Bit，我们为超过 15 有组件使用场景的10000名开发人员提供解决方案；该平台帮助开发人员构建、共享和使用组件，加快和优化 Web 产品研发过程。
我们喜欢建造一个 在过去的两年里，我们首先“扔”自己的平台来构建一个设计系统，然后将其转变为一个由共享模式组件组成的活跃生态系统。
该系统提供的价值远不仅保持了界面体验的一致性，而且大大加快和扩大了开发规模，提高了产品质量，而且改善了开发人员、设计师和其他人的工作方式。
通过让所有成员参与合作，共同创建和共享组件，这个设计系统可以得到更快、更广泛的应用。
本文将重点从开发层面进行描述，并与您分享我们的设计目标和过程 以及设计结果。
目录：
视觉语言组件共享文档和组件的可发现性增量升级依赖于项目更新团队沟通设计的涟漪变化 – 研发合作模式
一、视觉语言
审视现有，然后定义我们创建视觉语言的过程；与大多数设计系统文章中描述的不同，它们是大型企业持有的特权，这通常是初创企业的奢侈选择。
作为一家成长型初创公司，我们没有时间停止，将设计系统转化为大型复杂项目；相反，我们必须检查现有的视觉语言，然后将其组织成一个有序的系统。
这个项目由 Bit 设计负责人 Amir Shalev 项目分为两部分：领导：
审查现有的风格和元素；创建一致的系统后，将其作为标准视觉语言的强大而灵活的基础。
Bit.dev 面板规范和颜色规范
视觉一致性意味着为颜色、文本、大小、位置和其他视觉语言创建统一的风格标准指南；字体、排版、主色和辅助色可作为设计系统的一部分。
我们还需要创建一系列 UI 这些元素需要在未来使用现代的前端框架(例如) React 框架)作为组件实现。
按钮、头像等基本组件
为了使系统中的元素在真实场景中具有可用性，除了像按钮或头像这样的基本元素外，还必须确保元素 UI 除组件外，还应包括组件的组成模式或组件的具体用法，这是保证元素功能的最基本方法。
组合组件可以创建更具体、更先进的复合组件
在准备就绪之前，设计系统必须沉淀以下资产：
样式指南（Style – Guide）：用于定义 UI 样式和实现方式。表现形式通常是一个很长的文档，有很多解释和排版。复用系列视觉元素（Reusable Visual Elements）：它们通过组件进行视觉（UI 方面)和功能（UX 方面)结合在一起，保持一致性；表达形式通常是一个大源文件，其元素是 Figma 或 Sketch 在软件上绘制。
二、组件共享
有些人建立组件生态系统的方法是发布一个带有所有组件的版本包，仅此而已，但我们更喜欢创建一个共享组件生态系统。
1. 我们的流程
如果前往 Bit.dev 在主页上，你会发现一些很酷的东西；当鼠标悬挂在组件上时，它会触发亮度，提示组件的名称、版本和父级范围。
Bit.dev首页 —展示共享组件的作品
您看到的页面由共享组件组成；然而，这些独立的组件是由不同的团队开发和持有的，来源是不同的项目，它们是混合的。
在 Bit，有不止一个设计系统，我们有不同的UI团队 构建和共享组件生态系统中的组件。
假如鼠标悬挂在等等「链接」（Link）或「段落」（Paragraph）单击这些元素，您将看到相链页面显示这些组件是 “base-ui” 范围的一部分；这是我们设计系统最基本的部分，我们的设计系统团队是独立的 GitHub repo 中开发，然后发布 Bit.dev 供所有人使用。
“base-ui“-我们设计了系统的基本组件
然而，市场部成员需要更具体的组件，如与营销相关的“标题”（Heading）组件或“行动按钮”（Action – button）组件；这些不是 “base-ui” 设计系统的一部分是另一个被称为“布道者”（Evangelist）组件范围。
基于此背景，在 GitHub repo 这些组件自动属于营销团队；但由于使用了这些业务组件 “base-ui” 因此，它们的升级是由组件构建的 “base-ui” 团队负责。
“布道者”（Evangelist） — 营销组件
“布道者” 只是由 “base-ui” 组成和扩展的许多组件之一。事实上，每个企业团队都是 参与构建自己业务范围的组件，与他人分享自己的成果。
与其为组件发布统一的软件包，我们选择创建一个让所有人合作但独立发布版本的生态系统；设计系统的作用应该是促进 并且规范，而不是阻止或强制执行。
这个生态系统取得了巨大的成功，我们减少了约会 75% 新营销页面的建设时间也保持了设计风格的一致性。
2. 用自主研发的工具工作
Bit 的 “折腾” 这意味着我们以帮助他人的方式建立自己的设计系统，并从 2017 年初，已经这样进行了好几年了。
以下为要点：
我们使用Bit OSS 工作平台开发、管理和发布来自不同团队和代码库的解耦组件。我们通过Bitt 云平台帮助所有团队成功地开放、共享和集成组件。我们的设计团队提供组件系统中的基本组件，并负责更新和调整，以确保基本组件的标准和一致性。
3. 选择 React 框架
2017 年，由于各种原因，我们选择使用 React 框架，对这个选择非常满意；自从 React 16 引入 Hooks 和 Context API 之后，它开始变得非常强大；例如，即使在状态管理方面，多个组件也可以相互分离。
然而，我们正在看到许多团队选择 Bit 用于 Vue 或 Angular 甚至是 Stencil Web 组件。事实上，我们一直在和。 Angular 团队合作，为 Angular 的 Bit 图书馆提供支持；但在考虑了所有因素后，我们认为 React 是目前 Bit 团队的最佳解决方案。
4. 独立组件
Bit 工作平台帮助您创建模块项目，享受简单全面的开发体验；每个组件都是独立开发、构建、测试、记录、发布和集成到新的应用程序中，所有组件都是和谐的组合和管理。
5. 建立开发过程标准
实现设计一致性的另一个好方法是标准化组件的开发过程；Bit 标准化发布过程，如标准组件开发环境，提供可重复使用的文档模板，甚至提供可扩展和可重复使用的开发记录管道图。
管道图具有可扩展性、可重用性和自定义设置的管道图
三、文档和组件的可发现性
在不使用额外维护工具的情况下，保持文档更新。
使用 Bit 另一个优点是，我们不需要为组件创建或维护额外的文档网站。
1. 本地开发
当我们编写组件时，Bit 的 UI 它将显示一个涵盖当地开发环境中所有组件的文档；该文档支持每个组件的概述、使用示例和组成组合的隔离。
可以创建自定义和重用的文档模板，使所有组件都能按照相同的标准和设计进行文档化。
文档是本地开发的一部分
2. 云端文档
只有每个文档 Bit 组件的一部分，当组件导入云时，组件的文档将显示在主页上供所有人查看；组件的记录位置相同，便于查看和预览；如果您在本地安装或导入组件，也支持在本地更新文档。
“先修改 Tokens，之后更新 React、UI Kit，然后将这些链接更新到相应的文档页面，然后发布文档。”—— Kaelig Deloumeau Prigent，Shopify 的 Polaris 开发者
所有的 Bit.dev 上述文档与我们在本地开发中看到的一致。每次发布新版本的组件，其文档都可以很容易地同步更新；没有额外的成本，没有复杂的过程，没有未及时更新的文档。
本地开发，即云看到的
3. 可发现性和搜索功能
由于组件越来越多，Bit.dev 利用“组件搜索”和“相关筛选项”来提高组件的可发现性，帮助我们快速、轻松地搜索许多组件。
前往 Bit.dev 从数千个 OSS 在组件中搜索你想要的，或添加你自己的组件
四、增量升级
控制单个组件版本
我们的设计系统是根据组件来控制版本，而不是简单地发送一个包。
对于独立的单个或多个组件 版本控制比将所有组件打成单个包要好得多；独立发布的组件语义版本控制已经成为游戏规则的改进者。以下是 Bit 主要优势：
我们只更新用户需要的内容。我们可以轻松快速地升级单个组件。我们可以很容易地修复或回滚任何组件。我们支持混合和匹配来创建各种复合组件。
Bit 帮助用户发布每个组件作为一个独立的包。由于每个组件的版本是独立的，组件可以根据不同的项目进行增量升级，而不是一次又一次地集成到一个大包中。
如果前往「按钮」组件页面，您会注意到组件目前正在进行中 1.5.0 在版本上，初始版本是 1.0.0。
这种更新方式给了设计师和开发人员很大的自由，每个人都可以不断创新和升级产品发布。
例如，下面显示了已发布的内容 1.5.0 版本按钮：
“布道者” 组件/按钮@1.5.0
以下是之前 1.4.0 版本按钮：
“布道者” 组件/按钮@1.4.0
这是早些时候 1.0.0 版本按钮：
“布道者” 组件/按钮@1.0.0
假如你现在回来了 1.5.0 在版本中，您会注意到按钮有一系列的使用示例，1.5.0 这个版本比以前的版本支持更多的设计示例。
这样，设计师和开发人员就不需要等到大版本或更长时间的迭代版本更新，现在他们可以非常自由地开发和升级组件。
组件开发者也可以通过 sem 控制每个组件的版本以避免冲突，以控制版本规则，查看历史记录，查看视图以更改日志。
除了需求之外，应用程序共同创建者不会收到更新通知，每个人都很高兴。
五、依赖项的涟漪式变化
管理所有组件关系：Bit 管理项目中所有组件之间的依赖关系图，这意味着当我们升级或中断组件时，Bit 会 “知晓” 哪些组件与它们有依赖关系，然后对这些依赖组件进行重构和测试。
结果表明，这种方法使组件之间的内部关系更容易掌握。在同一个项目中开发多个组件更容易。
假如我们在那里升级时破坏了一个组件，我们不得不检查并修复所有的依赖组件。”—— Jony Cheung，Atlassian 的 Atlaskit 软件工程经理
每次更改，也会对所有关联组件运行一次 重构 和测试，并让我们确切地知道哪些组件已损坏，而哪些组件没有；如果结果一切正常，我们可以简单粗暴地告诉 Bit 一次性迭代所有相关组件。
我们现在正在开发一种叫做 Ripple CI 的新产品。在 Ripple 平台运行的重建过程，将通过云端把更改传输到不同团队产品中的、有依赖关系的组件里。
使用者将确切地看到每个依赖组件被涟漪式影响的过程，以及它们的影响关系、影响部分；然后，这些组件将一起被修复和发布。
六、项目更新
通过 GitHub 集成实现自动化，我们使用对外公开的集成方式将 Bit.dev 与 GitHub 平台关联起来；当组件的新版本发布到 Bit.dev，这个版本将 “知道” 在 GitHub（或 GitLab）上的哪些项目也该被更新，然后这个过程就完全自动化了。
组件的新版本作为一个 Pull 请求，将自动发送到所有包含该组件的项目；只需单击选择接受，便可更新。
这使得负责设计系统的团队能够很容易地持续升级，并帮助所有产品构建者接受更新与集成更改。
并且，团队可以随时监控谁遗忘了更新内容与位置，这里必须提到就在不久前 Gilad Shoham 领导 Bit 核心团队避免了一次重大更新事故！注意咯 Gilad，我们什么都知道了。
七、团队沟通
通过 Slack 软件实现自动化：发布新的组件版本时，所有使用此组件（与此组件有依赖关系）的团队都将通过平台和 Slack 软件获得更新通知。
因此，例如说一个版本内「购物车」中的「按钮」组件被导出时，Bit 团队会收到一个通知，其中包括执行该操作的用户账号、操作行为（导出）以及与该特定操作相关的导出组件数。
以下是 Eden Ella 从 “布道者” 团队组件内更新「按钮」组件的记录。
每次进行组件的导入操作时，均将出现类似的通知模板，但带有不同源范围。
该工作流程帮助所有人保持信息同步，且更好地进行工作协同。
八、设计 – 研发的协作方式
以可视化的方式在代码上协同工作：
设计系统这一概念对设计师 和开发人员 来说是两个不同的东西。设计师通常谈论画布上的元素，开发人员在他们的集成开发环境内讨论 React 组件。用户最后获得的是由代码编写的产物，而不是设计元素。
这就是为什么设计师参与 UI 开发过程这件事会产生争议。
我们用两个强大工具来实现设计与研发之间稳固且双赢的合作关系：
第一个是使用Zeplin —— 这是一个侧重于服务设计师，让他们与开发人员友好合作的工具。我们用它将设计任务转化为开发任务，团队使用该工具的频率是每天。
第二个是使用Bit 平台 —— 这是一个侧重于服务开发人员，让他们与设计师友好合作的工具，它为设计师在 UI 组件开发过程中扮演积极的一环搭建了桥梁；此外，它还可以帮助设计人员监视代码更改行为，甚至是参与组件的新版本的更改协作。
通过可视化，设计师可以查看和尝试实际效果的 React 组件
同时，我们使用 Bit 平台将所有组件公布给设计师，保证他们的设计效果始终完美一致。
像“热重加载渲染” 和“可编辑示例” 等功能，是设计师查看组件和尝试不同设计样式的好方法。
每当有组件的新版本或者新组件在 Bit.dev 发布，设计师能通过可视化直观地看到更改内容。这样就很容易保证所有设计的一致性。
然后，在设计师的批准之后，可以将此更改作为 Pull 请求，自动发送给所有有影响关系的项目。这意味着设计人员现在直接能与开发人员共同开发组件。很酷吧？
在不久的将来，我们团队打算在 Bit.dev 平台上添加更多面向设计师的功能，例如交互式属性面板，这样设计师就可以自己进行组件更改的行为，并将更改后的组件保存为新版本。这些功能应该能在 2021 年上线。
九、结语
2020 年版本的 NASA 设计系统
建立 UI/UX 体验，并在产品的各个触点上延续体验的一致性，帮助用户在操作时不会产生混淆，能够直观地进行导航并成功地与产品不同模块进行交互；这就是品牌效应，而你需要一个这样优秀的品牌效应。
在建立设计系统的过程里，我们算是从头开始构建。我们审视了现有设计，把它变成了一个有序系统；我们定义了视觉元素 和样式指南，这些东西无不反应了 Bit 的品牌故事。
我们依靠自主研发的云工具平台，来构建一个可共享的组件系统；在过程中，该平台将每个成员聚集到此；在这个民主但受监管的生态系统中，我们让组件驱动产品开发。
最后，这个系统得到大众快速和几乎绝对的采用。
我希望这篇文章至少帮助你了解些许我们构建设计系统的过程，以及现代大家共同构建 Web 产品的可能性。
原文：https://blog.bitsrc.io/how-we-build-our-design-system-15713a1f1833
作者：Jonathan Saring；
译者：徐曼鹭；审核：张聿彤；编辑：徐小淇
本文由 @三分设 翻译发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议
shopfity是什么平台？
Shopify是为80多万企业提供支持的全球多渠道电子商务平台 – 服务对象从一系列小店到像Kylie这样的小店 像Cosmetics和Allbirds这样的销售额可以达到10亿美元的品牌。
无论是通过网站、第三方市场还是物理销售点系统，Shopify都可以帮助品牌建立和管理其销售渠道。
Shopify还可以帮助品牌所有者在Facebook和谷歌等数字平台上进行品牌营销。一般来说，Shopify使在线业务流程更加简单和集中。
以上就是关于shopify怎么建站,shopify免费自建站的知识，后面我们会继续为大家整理关于shopify如何构建的知识，希望能够帮助到大家！