中英文模式阅读
中文模式阅读
英文模式阅读

How to build design system with SwiftUI


构建支持一种产品的设计系统并不容易 - 它必须具有强大和灵活性,同时具有可扩展性。虽然挑战,lots
of
great
resources
共享有用的原则和方法,帮助团队在视觉和程序上建立一个良好的系统。站在他们的肩膀上,本文试图通过专注于建立一个良好的系统来促进未受破坏的基础SwiftUI

Why do I write this article {#why-do-i-write-this-article}


在我的第一个夏天ITP
在纽约,我很幸运有机会成为iOS开发人员Line Break Studio
。我被分配的一项任务是分两步建立一个设计系统:首先是视觉上的Sketch
,然后以编程方式进入SwiftUI
。尝试使用新框架并使用它构建设计系统的经验令人惊叹,但同时也有错误。这就是为什么我们想与社区分享我们的经验,希望让您的开发过程更轻松。


What is SwiftUI {#what-is-swiftui}


Apple发布了这个开创性的新框架WWDC 2019
,这是多年来的最佳成果之一。从作为Web开发人员的角度来看,项目开发经验SwiftUI
在传统的前端堆栈和框架中更接近于它。


这绝对是一个非常棒的举动,因为编程接口和管理状态比以前更容易。这种改进的最好部分是人们可以integrate UIKit and SwiftUI smoothly
。要学习SwiftUI的基础知识official tutorials
由Apple提供的非常有帮助。从WWDC介绍SwiftUI

The demo project {#the-demo-project}


为了演示目的,我提出了我们内置的设计系统的简化版本Line Break Studio
。它是一套 button
不同形式的组件,构建在两个较低级别的部件之上: typography
colorPalette

演示项目的动态渲染视图


该项目是public on GitHub
,我正在使用Xcode 11 Beta 5
发展。一个Airtable base
作为设计系统管理中心(阅读more about workflow management
)也是公开的参考。


Principles of building design system {#principles-of-building-design-system}


代码中的设计系统是设计人员和开发人员之间的中间件。系统开发人员以视觉形式从设计系统中获取输入,并生成与进一步开发相同的API。应该承认以下两个原则在代码中完成此系统:

1. Communicate with tokens {#1-communicate-with-tokens}


从根本上说,在程序中使用设计系统的目的不是为了更好的代码管理或开发效率,而是为了确保 view
与设计文件一致。为了实现这一目标,使用令牌来表示某些颜色,字体,大小或任何可视元素对于保持团队中开发人员,设计人员和管理人员之间的沟通质量至关重要。
Lightning Design System
由Salesforce构建的令牌

2. Levels of hierarchy {#2-levels-of-hierarchy}


EightShapes' article
,它指出我们应该"首先显示选项,然后再显示决策",因为"没有选项,你就无法做出决定"。
EightShapes' article
关于设计代币


这种排序架构放松了不同级别之间的耦合程度,因此为可能的修订提供了更大的灵活性和动态性。我构建关卡的方式从下到上依次为:material→base→token。但无论如何,这可能是团队感到满意的。


Diving into code {#diving-into-code}


以下部分是根据我们的经验我们想要指出的重点列表。请visit the GitHub repo
完整的代码。欢迎任何反馈或评论家进行改进。

1. Architecting levels of hierarchy {#1-architecting-levels-of-hierarchy}


在较低级别堆叠材料有两种方法可以在最高级别构建令牌:

  • Use enum for type safety and code literacy

在代码中使用枚举作为分组包装器或函数中的参数的优点已经得到了很好的认识。值得一提的一点是层次结构的实现。


我们总是存储原始值,包括字体大小(CGFloat
)和字体名称(String
),在最低层,因为我们不想乱用它。但是因为原始值必须是枚举中的文字,所以我们不能只指定一个case
是另一个枚举的值。


为了解决这个问题,我们实现了一个函数getValue
,返回原始值switch
必要时的情况。

  • Use struct for easier structure

虽然枚举很棒,但在某些情况下我们不需要它的独特功能。例如,因为Xcode
处理动态颜色的繁重工作,API端点不需要参数选项,我们可以通过简单的两级结构设置调色板。

2. Clear and straightforward naming of API endpoint {#2-clear-and-straightforward-naming-of-api-endpoint}


命名惯例是讨论和辩论的另一个广泛主题。除了基本的Swift conventions
,我们遵守的唯一两条规则是:1)没有首字母缩略词,2)简单易懂。例如,要使用排版和颜色系统,而不是创建新的端点,我们从字体和颜色结构进行扩展。这种方法减少了为开发人员记忆不熟悉的API名称的工作量。

3. Manage color sets dynamically in two modes {#3-manage-color-sets-dynamically-in-two-modes}


所以黑暗模式已成为行业的标准,两者兼而有之iOS
Android
团队已实施此功能。这对用户来说是一个很好的趋势,但可能会给设计人员和开发人员带来一些挑战,包括管理和命名颜色集,尤其是灰度集。
Material Design
黑暗的主题指南


使用类似术语动态思考和交流灰度颜色 white
light
black
要么 dark
不起作用。因为如果我们提到动态的颜色#000000
(HEX黑色) black
要么 dark
light color scheme
,你怎么谈这个应该变成的特殊颜色#FFFFFF
(HEX中的白色),indark color scheme
defaultDark
要么 lightDark

令人困惑的颜色集转换


在传统方法中命名灰度动态颜色集是非常令人困惑的。为避免这种混淆,我们使用theme
contrast
管理一组颜色light
dark
而不是计划。
演示中的示例颜色命名Airtable base


请注意,在相反颜色模式下,灰度颜色并不总是需要反转。在这些情况下,浅色保持浅色和暗色仍然是黑暗的,我们只需将其命名为亮或暗。


一旦我们围绕这个命名方法,我们就可以轻松管理这种调色板架构Xcode
。要创建颜色集,只需创建一个新颜色Asset Catalog
文件→添加新的Color Set
→并改变Appearances
Any, Light, Dark
会做。
如何在Xcode中添加颜色资源

4. environment settings {#4-environment-settings}


SwiftUI框架中的一个很棒的功能是environment modifier
,提供控制的能力environment values
在目标视图上。在构建设计系统方面,此功能提供了在根级别更改应用程序字体的便捷方法。而使用的另一个好处environmentValue
是改变和测试开发中的浅色和深色配色方案。

5. buttonStyle and button label {#5-buttonstyle-and-button-label}


与过去相比UIKit
,在SwiftUI中构建可重用的按钮非常容易。该Button view
由两部分组成action
闭包(按下按钮时触发的事件)和label
(按钮的主体)。然后可以使用修改器链接视图buttonStyle
。要了解有关构建可重复使用按钮的详细信息,我建议您阅读Alejandro's tutorial
,这是全面和有用的。


在我们的自定义按钮组件中,第一步是创建两个结构,包括TokenButtonLabel
TokenButtonStyle
。这两个结构根据我们在设计文件中的按钮类型进行编程。例如,只有两种类型的标签:图标和文字。每种类型都有相应的init
为新实例设计的具有不同参数的函数。


另一方面,按钮样式有四种主要类型:圆形图标,图标,胶囊和文本。跟随ButtonStyle
协议,amakeBody
必须实现func。这个功能带给我们一个configuration
财产,提供本地人isPressed
如果按下按钮则监视的值。


最后,堆叠在上面TokenButtonLabel
TokenButtonStyle
,按钮组件API的端点将是TokenButton

  • 将按钮的内容和样式包装在一起的分组,符合视觉设计系统中的按钮类型。

6. AnyView as wrapper {#6-anyview-as-wrapper}


正如我们正在处理的那样makeBody
功能带来的ButtonStyle
协议,我们找到了一个有用的技巧View
。要在变量中存储视图,可以将类型注释指示为AnyView
,作为SwiftUI中视图的一般容器。


在我们的例子中,因为我们想要添加不透明度修改器configuration.label
所有类型的按钮,而不是每个按钮重复这样做switch
最后,将修饰符链接在一起更有意义。我们可以利用它的优势来实现这种模式AnyView
通过这种方式:

7. Build view modifier with mutating function {#7-build-view-modifier-with-mutating-function}


要动态更新按钮的样式,我们可以构建自己的修改器。首先在视图中实例化自定义的可变状态属性,然后创建一个mutating
返回a的函数Self
更新目标状态属性后键入。

8. Tricky border style {#8-tricky-border-style}


SwiftUI的一个缺点是使用圆形边框造型圆形并不简单。我挣扎了一会儿,终于找到了一个solution here on StackOverflow
。一种clipShape
overlay
需要修饰符才能使其工作。


Conclusion {#conclusion}


SwiftUI是Apple的一项令人难以置信的改进。虽然存在缺陷,但是使用它构建一个强大而灵活的设计系统,以及iOS中复杂的用户界面比以往任何时候都高效。我希望这篇文章对任何试图构建UI的iOS团队都有帮助,并且总是欢迎任何反馈!


👉阅读更多我的作品vinceshao.com
/跟我来Twitter
要么LinkedIn

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号:银河系1号


联系邮箱:public@space-explore.com


(未经同意,请勿转载)