如何充分利用Shopify的设计系统北极星

如何充分利用北极星

企业家的道路可能会有颠簸和曲折,尽管它通常是一个有回报的旅程,但它仍然是一条崎岖不平的路。在尽我们所能为商家创造最佳体验的过程中,我们确保Shopify感觉有凝聚力、一致,永远不会走错路。

这就是我们发展的原因北极星-设计体系和北极星指导Shopify设计原则。

北极星不仅仅是我们的设计系统——它也被Shopify Partners使用。合作伙伴是让商业变得更好的一个不可或缺的部分,我们希望为您提供构建模块,以创建无缝地融入界面的应用程序。北极星帮助每个人构建看起来和感觉上都像是由同一个团队设计的体验。

北极星帮助每个人构建看起来和感觉上都像是由同一个团队设计的体验。

样式指南,包括我们的组件库和可下载的UI工具包,已经完成在Shopify Unite 2017年向所有合作伙伴开放。以下是如何充分利用今天开始使用北极星的方法。OB欧宝娱乐APP

从北极星OB欧宝娱乐APP开始

充分利用Shopify设计师的知识和原则

除了组件库,您和您的团队还可以使用样式指南来了解指导创建这些元素的设计指导方针和原则。这可以让你直接了解Shopify的用户体验团队是如何思考设计和界面开发的。

风格指南非常详细地介绍了我们如何思考颜色、排版和用户体验设计。在我们的界面重新设计中,有目的地使用了颜色,该指南包括我们如何选择和应用颜色的细节,以及您可以在界面中使用的详细调色板。

还包括详细的排版部分,打破了我们的类型层次结构和规模,以及明确的做和不做的页面布局示例,旨在帮助商家轻松找到他们正在寻找的信息。

北极星:排版

采用最佳的语音语调与商家沟通

为了做到真正的一致,所有东西都需要看起来和听起来一致。我们的内容策略团队在风格指南中开发了资源,以帮助您编写有用的、可操作的界面内容。这些指导方针包括如何使用语音和语调的信息,并指出内容标准,帮助你在应用程序中战略性地规划语言。还有一些例子说明了语调应该如何变化以响应商家的需求和情绪。

伴随着这些高层次的指导方针,还有关于语法、机制和词汇的信息。再也不用猜测我们如何书写日期或显示货币,或者你应该在行动中使用哪些动词。我们希望这是一个一站式的商店,在你的应用程序中制作文字。

北极星:内容

使用能够帮助你进行长期构建的语言

北极星包括原始的CSS样式,我们所有的组件和易于理解的命名约定。合作伙伴告诉我们,编译后的CSS并不总是足够强大,并且您希望访问预编译的样式来利用变量和mixin -我们很高兴能够提供所有组件的Sass版本。

我们的Sass包被编译成尽可能对开发人员友好的,允许开发人员导入所有模块,或者只选择所需的组件。样式将是命名空间的,因此您不必担心与本地样式发生冲突。

我们的Sass包被编译成尽可能对开发人员友好的,允许开发人员导入所有模块,或者只选择所需的组件。

由于静态样式只能让您走这么远,而一致的UI包含一致的交互,因此我们将首次提供从头构建交互式UI组件所需的标记、样式和JavaScript。

为此,我们引入了一个库反应为我们的设计系统带来生命的组件。我们知道JavaScript是Shopify应用程序开发人员使用最广泛的语言,我们很高兴通过React为我们的开发人员社区构建一个现代工具。这些是Shopify Admin中使用的相同组件,它们具有构建伟大应用程序所需的可访问性、性能和响应性。

我们的React组件还提供了强类型API,其形式为属性(或者用React的说法,“prop”)类型定义。这些属性允许你在我们的组件上切换变量,比如主按钮、柔和的卡片、尝试在内容上方打开的弹出窗口等等。

它们还描述了可以传入哪些回调来响应不同的事件,完成设置事件侦听器的所有艰苦工作,因此您不必这样做。这允许你为事件指定一个回调,比如按钮点击和弹出窗口闭包;我们规范化了这些事件可能发生的所有方式(包括键盘事件),并为响应这些事件提供了一个简单的界面。

我们的React组件将为您提供表单、排版、布局和常用UI元素(如工具提示和选项卡)所需的一切。这些组件将完整地记录在我们的风格指南中,在那里你可以通过演示看到它们的作用。

北极星:组件

快速高效地构建应用程序界面

北极星包括UI组件,你可以直接放入你的应用程序中。对于每个组件,我们还包括用户体验原理,以解释组件解决的商家问题,以及UX最佳实践。

这意味着你可以专注于应用特有的困难问题,而不是从零开始拼凑一个界面。如果你有一个应用程序的想法,你可以在几分钟内模拟它。

对于设计师,我们在Sketch中提供了一个统一的UI工具包文件,该文件组织良好,有文档记录,并将保持最新,因此您可以在开始开发之前创建高质量的页面模拟和原型。OB欧宝娱乐APP我们的设计师已经在内部使用这个功能有一段时间了,他们喜欢这样快速地将想法呈现在屏幕上。

我们都在一起打造Shopify

我们的设计系统可以帮助每个人构建统一的Shopify体验,看起来和感觉起来都像是由一个团队构建的。我们的合作伙伴正在帮助我们构建商业的未来OB欧宝娱乐APP北极星今天的设计系统,你可以利用一个组件库和风格指南,将帮助你建立伟大的商业体验比以往任何时候都更有效。

从北极星OB欧宝娱乐APP开始

通过Shopify合作伙伴计划发展您的业务

了解更多