swiftui
Since quarantine hit, I have been tinkering with SwiftUI. Over the past couple of weeks, I studied through the official documentation and watched WWDC 2019 videos relating to SwiftUI to understand its potential. I believe in learning by doing, thus put together a prototype of Kickcheck (conceptually a sneaker app that curates a list of sneakers by categories and keeps users posted on upcoming drops).
自隔离区遭到攻击以来，我一直在修改SwiftUI。 在过去的几周中，我研究了官方文档并观看了与SwiftUI相关的WWDC 2019视频，以了解其潜力。 我相信边做边学，因此将Kickcheck的原型组合在一起(概念上是一种运动鞋应用程序，可以按类别整理运动鞋列表，并让用户在即将到来的发布中发布信息)。
I think SwiftUI is a potential prototyping contender for designers. Allow me to illustrate.
我认为SwiftUI是设计师的潜在原型设计竞争者。 请允许我举例说明。
什么是SwiftUI？ (What is SwiftUI?)
SwiftUI is a set of tools and APIs based on Swift which is a simple way to build interfaces across all Apple platforms. SwiftUI works on Xcode and uses Xcode design tools to keep your code perfectly in sync.
SwiftUI是基于Swift的一组工具和API，这是在所有Apple平台上构建接口的简单方法。 SwiftUI在Xcode上工作，并使用Xcode设计工具使您的代码完美同步。
Before we proceed, let’s clarify a few key terms:
在继续之前，让我们澄清一些关键术语：
- Swift- Apple’s programming language for macOS, iOS, watchOS, tvOS, etc Swift-适用于macOS，iOS，watchOS，tvOS等的Apple编程语言
- SwiftUI- A bundle of tools and APIs based on Swift to easily make interfaces SwiftUI-一系列基于Swift的工具和API，可轻松创建接口
- Xcode- Apple’s integrated development environment(IDE) with powerful features to develop apps for macOS, iOS, watchOS, tvOS, etc. Runs on macOS. Xcode-Apple的集成开发环境(IDE)，具有强大的功能，可为macOS，iOS，watchOS，tvOS等开发应用程序。可在macOS上运行。
设计师为什么要关心SwiftUI？ (Why should designers care about SwiftUI?)
Every known prototyping tool that’s around has been able to survive because it offers unique value. Even though Xcode+SwiftUI is a full development environment, I wanted to compare them to some known prototyping platforms to see how they stack up. For comparison, I chose the Origami studio, Framer, and Webflow. I chose these compared to Axure, Marvel, Protopie, and Principle mainly because I have experience using these platforms and I consider them powerful and complex modern prototyping tools.
因为它提供了独特的价值，所以周围存在的每个已知的原型制作工具都能够生存。 即使Xcode + SwiftUI是一个完整的开发环境，我也想将它们与一些已知的原型平台进行比较，以了解它们如何堆叠。 为了进行比较，我选择了Origami studio ， Framer和Webflow 。 我选择这些比Axure ， 奇迹 ， Protopie和原理主要是因为我一直在使用这些平台的经验，我认为他们强大而复杂的现代原型工具。
Above shown is not an apple to apple comparison as each tool shines on certain fronts. Origami Studio is very easy to pick up as its node-based and every node setting is visible at all times. Framer is collaborative and modular in its approach to prototyping. Webflow is undisputed when it comes to designing+building for the web.
上面显示的不是苹果与苹果的比较，因为每种工具在某些方面都闪耀。 Origami Studio非常容易上手，因为它基于节点，并且每个节点设置始终可见。 Framer在原型制作方法上是协作和模块化的。 Webflow在设计和构建Web方面是无可争议的。
So what’s compelling about SwiftUI?
那么，SwiftUI的吸引力是什么？
Declarative syntax- You get what you type or in other words simply state your UI. SwiftUI organizes code in a simple, easy to read format. In the example below, we defined three different text items, grouped in a VStack(can be thought of as a vertical flex-box from HTML land). SwiftUI organized styling code by each element, making it easier to read the code.
声明性语法 -您得到键入的内容，或者换句话说，只需声明您的UI。 SwiftUI以简单易读的格式组织代码。 在下面的示例中，我们定义了三个不同的文本项，这些文本项分组在一个VStack中(可以认为是HTML领域的垂直flex-box)。 SwiftUI通过每个元素来组织样式代码，从而更易于阅读代码。
2. Design tools- Specifically native components library(Cmd+Shift+L), the capability to drag and drop directly in canvas, dynamic replacement updates code editor reflecting changes in canvas, and preview reflects what’s going on with the project.
2. 设计工具 -特别是本机组件库(Cmd + Shift + L)，具有直接在画布中拖放的功能，动态替换更新了代码编辑器(反映了画布中的更改)，而预览则反映了项目的进展。
3. Native on Apple platforms- This is a big one for me personally. With just a few lines of code, your app prototype can be viewed on any Apple platform. Imagine prototyping for iOS but simultaneously able to view on iPad, Mac, and even Apple Watch. This shows the attention to detail Apple has paid to bring controls and platform-specific experiences to SwiftUI. This opens the door to prototype with all gesture and haptics based interactions in the Apple ecosystem.
3. Apple平台上的本机-对我个人而言，这是一个很大的机会。 仅需几行代码，即可在任何Apple平台上查看您的应用程序原型。 想象一下用于iOS的原型制作，但同时可以在iPad，Mac甚至Apple Watch上观看。 这表明了对细节的关注，Apple为将控件和特定于平台的体验引入SwiftUI付出了代价。 这为使用Apple生态系统中所有基于手势和触觉的交互提供了原型之门。
4. Automatic support for dynamic type, localization, dark mode, and accessibility- This deserves an article on its own but, amazingly, anything you prototype with SwiftUI automatically supports localization, dark mode, and accessibility tools(voice-over, captions & audio descriptions, speech, display customization and guided access). You can read more about Apple’s accessibility technologies here. If you use system defaults in your prototype, like text, such will automatically scale across different device sizes ( 7 types of Macs, 4 types of iPad, 17 types of iPhones, 3 types of appleWatch and AppleTV)
4.自动支持动态类型，本地化，暗模式和可访问性 -值得单独发表一篇文章，但令人惊讶的是，您使用SwiftUI进行原型制作的任何东西都会自动支持本地化，暗模式和可访问性工具(语音，字幕和音频)说明，语音，自定义显示和引导访问)。 您可以在此处阅读有关Apple无障碍技术的更多信息。 如果您在原型中使用系统默认值(例如文本)，则会自动在不同的设备尺寸上缩放(7种Mac，4种iPad，17种iPhone，3种appleWatch和AppleTV)
设计师对SwiftUI的喜爱 (Things a designer can love about SwiftUI)
Visual Editor- As designers, we love visual feedback. The canvas/editor is a powerful tool to style and compose interface elements. It provides a lot of controls which we’ll see in a bit.
视觉编辑器-作为设计师，我们喜欢视觉反馈。 画布/编辑器是用于样式化和组成界面元素的强大工具。 它提供了很多控件，我们将在稍后看到。
2. System defaults- SwiftUI comes with system defaults for font, font-weight, and colors. These are extremely helpful not just to quickly compose layouts but they automatically adapt to the powerful capabilities that come with SwiftUI like scaling across platforms, accessibility tools, and dark mode. That doesn’t mean we can’t use custom fonts and colors, it could take a fair amount to work to define custom fonts and colors while making sure they perform well across the app.
2.系统默认值 -SwiftUI带有字体，字体粗细和颜色的系统默认值。 这些不仅对快速排版非常有用，而且可以自动适应SwiftUI随附的强大功能，例如跨平台缩放，可访问性工具和暗模式。 这并不意味着我们不能使用自定义字体和颜色，而是要花大量的时间来定义自定义字体和颜色，同时确保它们在整个应用程序中表现良好。
3. Stacks- Is a method of grouping elements together. Stacks can also be thought of as auto-layout from Figma/Sketch or flex-box from HTML land. When creating a SwiftUI view, you describe its content, layout, and behavior in view’s body. The body however can contain only one view. We can use stacks as a container of all our view elements. Stacks can be vertical, horizontal, and along Z(back to front, used for layering elements). Let’s see an example
3.堆栈-是将元素分组在一起的一种方法。 堆栈也可以被认为是Figma / Sketch的自动布局或HTML平台的flex-box。 创建SwiftUI视图时，您需要在视图主体中描述其内容，布局和行为。 但是，主体只能包含一个视图。 我们可以将堆栈用作所有视图元素的容器。 堆栈可以是垂直，水平和沿Z方向(从后到前，用于对元素进行分层)。 让我们看一个例子
4. Component library[Cmd+Shift+L]- This powerful shortcut brings components, modifiers, and project assets on your fingertips. I often find myself browsing around when I’m looking for new ideas.
4.组件库[Cmd + Shift + L]-此强大的快捷键使组件，修改器和项目资产触手可及。 我在寻找新想法时经常会四处浏览。
5. Dark mode- Hit 2 birds with one stone. Any composition you make is automatically compatible with Dark Mode. The magic line is .environment(\.colorScheme, .dark). Quick FYI, the dark mode works best with system defaults for font and color.
5.黑暗模式-用一颗石头击中2只鸟。 您制作的任何构图都将自动与黑暗模式兼容。 魔术线是.environment(\。colorScheme，.dark) 。 快速参考，暗模式与字体和颜色的系统默认值配合使用效果最佳。
6. SF symbols- SwiftUI comes with a bundle of 2400+ icons used across Apple’s ecosystem. Its super simple to call these icons via code. Use https://sfsymbols.com/ to search for an icon by keyword and use the reference name in your code. You can also apply image modifiers on these icons.
6. SF符号 -SwiftUI附带了用于Apple生态系统的2400多个图标包。 通过代码调用这些图标非常简单。 使用https://sfsymbols.com/通过关键字搜索图标，并在代码中使用引用名称。 您还可以在这些图标上应用图像修改器。
7. Gestures- Last but not least, setting up gestures is straight forward and can be stacked with conditional statements. Folks over at design+code have this awesome tutorial explaining how to setup DragGesture on interface elements.
7.手势-最后但并非最不重要的一点是，设置手势很简单，可以与条件语句堆叠在一起。 设计+代码领域的人们对此真棒教程进行了讲解，解释了如何在界面元素上设置DragGesture。
我对SwiftUI的看法 (My take on SwiftUI)
Keeping it real, I think the learning curve for SwiftUI is pretty high, however, its a great step from Apple to make coding more accessible. Is SwiftUI a plausible option for design prototyping? Yes and No. Having no way to import designs from tools like Sketch, Figma, Illustrator, and XD front-loads the process. However, for someone designing for Apple’s platform, SwiftUI comes with great out of the box solutions with system default fonts, font-weight, padding, colors, symbols, components like Nav-bar, Tab-bar, lists and much more.
保持现实，我认为SwiftUI的学习曲线相当高，但是，这距Apple迈出了一大步，使编码更易于访问。 SwiftUI是设计原型的合理选择吗？ 是和否。无法从Sketch，Figma，Illustrator和XD之类的工具导入设计，这是整个过程的前期工作。 但是，对于为Apple平台进行设计的用户而言，SwiftUI提供了出色的现成解决方案，包括系统默认字体，字体粗细，填充，颜色，符号，诸如Nav-bar，Tab-bar，列表之类的组件。
So the bottom line is:
所以最重要的是：
For someone wanting to prototype, deploy on device and user-test(Test-Flight app can be used for beta testing) for iOS, macOS, WatchOS, and tvOS.
对于想要进行原型制作的人，请在iOS，macOS，WatchOS和tvOS的设备和用户测试( Test-Flight应用程序可用于Beta测试)中进行部署。
For learning about Apple’s ecosystem. They have done a great job bringing their design guidelines to their development platform. I appreciate the level of integration with their stack of technologies as well as learning resources.
用于了解Apple的生态系统。 他们在将设计指南引入开发平台方面做得很好。 我赞赏他们的技术堆栈和学习资源的集成水平。
For animation and interaction design. Great out of the box solutions for animations and gestures. You can find any animation style you have experienced on Apple’s platform.
用于动画和交互设计。 出色的动画和手势解决方案。 您可以在Apple平台上找到任何体验过的动画样式。
For someone designing for the web, Windows, Linux, and Android
对于为Web，Windows，Linux和Android设计的人
Pass if you are under tight timelines. Even though there are tonnes of resources out there about SwiftUI, making custom experiences can require time and solid debugging.
if如果时间紧迫，则通过。 即使有大量关于SwiftUI的资源，进行自定义体验也需要时间和可靠的调试。
Have fun with it, on your time and your terms. I’m delighted by how close SwiftUI brings an integrated development environment to modern prototyping tools. After watching WWDC 2020, I think Apple will continue to embrace SwiftUI. Looking at how similar iOS, IpadOS, and macOS are becoming, I’m excited for the future of SwiftUI and what it can bring to the design community. Oh also, it a solid skill on your resume and will help collaborate better with your developer colleagues :)
按照您的时间和条件来玩。 我对SwiftUI将集成开发环境带入现代原型工具的如此高兴感到高兴。 看完WWDC 2020之后，我认为苹果将继续采用SwiftUI。 看看iOS，IpadOS和macOS的相似程度如何，我为SwiftUI的未来以及它可以带给设计社区而感到兴奋。 哦，这也是您简历中的一项必不可少的技能，将有助于与开发人员同事更好地协作：)
如何在SwiftUI中启动原型制作？ (How to start prototyping in SwiftUI?)
The big question! In my opinion, it's best to follow an end to end course. Instead of following tutorials and tinkering simultaneously, watching a comprehensive tutorial/course to make a full app experience will acquaint you with the vast potential of SwiftUI like managing multiple screens, calling APIs, making data models, and more. The developer community uses SwiftUI to develop full apps, we can choose if we want to go macro or micro with learning. Personally I incline towards macro. For such I have followed some comprehensive tutorials which cover designing data-driven apps. Following are my recommendations:
大问题！ 我认为，最好遵循从头到尾的过程。 观看完整的教程/课程来获得完整的应用程序体验，而不是同时进行教程和修补，可以使您熟悉SwiftUI的巨大潜力，例如管理多个屏幕，调用API，创建数据模型等等。 开发人员社区使用SwiftUI来开发完整的应用程序，我们可以选择是否要从学习的角度进行宏观或微观的研究。 我个人倾向于宏。 为此，我遵循了一些综合教程，涵盖了设计数据驱动的应用程序。 以下是我的建议：
Apple’s official SwiftUI tutorials(free)- Amazing resource! Estimated at 4hr 25mins to go through full tutorials, I found myself coming back several times. Downloading and playing with source files on each new section helped me understand the structure of the project and the little organizational nuances.
Apple的官方SwiftUI教程 (免费)- 了不起的资源！ 估计大约需要4小时25分钟才能完成全部教程，我发现自己回来了好几次。 在每个新的部分下载并使用源文件可以帮助我理解项目的结构和组织上的细微差别。
Design+Code: Build an app with SwiftUI($15/month or $9/month billed annually)- My personal favorite, this course is quite in-depth and covers a range of topics. While being diverse in the topic it covers, this course is very focused on design. For this course, I’d advise watching all videos before starting to code(you can watch at 1.5x) as it was a nice to scope how I wanted to use course material to bring my app idea to life. Subscription is pricy but well worth it as Design+Code has awesome courses on a range of topics.
设计+代码：使用SwiftUI构建应用 (每月$ 15或每年收取$ 9 /月)-我个人最喜欢，本课程非常深入，涵盖了一系列主题。 尽管涵盖的主题多样，但本课程非常注重设计。 对于本课程，建议您在开始编写代码之前先观看所有视频(您可以1.5倍观看)，因为这样可以很好地确定我想如何使用课程资料将我的应用创意付诸实践。 订阅价格昂贵，但值得一试，因为Design + Code提供了一系列主题很棒的课程。
SwiftUI by example(free): Paul Hudson from HackingwithSwift makes a food ordering app. Videos are short, explanatory and Paul does a good job explaining concepts along the way.
以SwiftUI为例 (免费)：HackingwithSwift的Paul Hudson制作了一个食品订购应用程序。 视频简短，说明性，Paul一路上很好地解释了概念。
Your first SwiftUI app(free): CodewithChris makes a fun iOS slot app. This video is a little long as its a compilation. Some good logic chops and design customization with this one.
您的第一个SwiftUI应用程序 (免费)：CodewithChris是一个有趣的iOS插槽应用程序。 该视频只有一段汇编的时间。 与此相关的一些很好的逻辑印章和设计定制。
Take care, keep making and thanks for eyeballs ✌️
保重，继续制作并感谢您的眼球✌️
翻译自: https://uxdesign.cc/designers-should-care-about-swiftui-9c398979746
swiftui