折纸折痕设计软件_折纸简介中的自适应设计

折纸折痕设计软件

Lately Origami has been my go-to design tool for prototyping complex touch interactions. I’ve found that, as I’ve used it, it’s taught me a lot about how code works, how to handle inputs and outputs, and how to achieve a fluid touch interface. So far, I’ve been building and testing prototypes on my iPhone X. While I’ve been able to build some basic functionality with interface orientation patches (i.e. prototypes that support rotating between portrait and landscape orientation), I want to see what it would take to create a fully adaptive iOS prototype — one which works on both iPhone and iPad, including multitasking views.

最近，折纸一直是我设计复杂触摸交互原型的首选工具。 我发现，当我使用它时，它教会了我很多关于代码如何工作，如何处理输入和输出以及如何实现流畅的触摸界面的知识。 到目前为止，我已经在我的iPhone X上构建和测试了原型。尽管我已经能够使用界面定向补丁构建一些基本功能(即，支持纵向和横向旋转的原型)，但我想看看它有什么用。将需要创建一个完全自适应的iOS原型-可以在iPhone和iPad上运行的原型，包括多任务视图。

I intend to write a series of posts to journal my progress. I’m super interested in getting different perspectives; if you’re a designer or developer who has feedback or advice, I’d love to hear! Feel free to leave a response below, or hit me up on Twitter.

我打算写一系列的帖子来记录我的进步。 我对获得不同的观点非常感兴趣； 如果您是一位有反馈或建议的设计师或开发人员，我很想听听！ 随时在下面留下回复，或在Twitter上打我。

让我们从基础开始吧…… (Let’s start with the basics…)

iOS defines two size classes: Compact and Regular.

iOS定义了两个大小类： Compact和Regular 。

• The Compact Size Class refers to a constrained space. It is denoted in Xcode as wC (Compact width) and hC (Compact height).

  紧凑尺寸等级是指受约束的空间。 它在Xcode中表示为wC (紧凑宽度)和hC (紧凑高度)。

• The Regular Size Class refers to a non-constrained space. It is denoted in Xcode as wR (Regular width) and hR (Regular height).

  常规尺寸类别是指不受约束的空间。 在Xcode中将其表示为wR (常规宽度)和hR (常规高度)。

For simplicity sake, I’ll use the shortened notation (e.g. wC hC) in the following discussion.

为了简单起见，在下面的讨论中，我将使用缩写形式(例如wC hC )。

Once upon a time, all iPhone screens were classified as wC hC, at resolutions such as 320x568 on iPhone 5. All iPad screens were classified as wR hR, at resolutions such as 768x1024 on 9.7” iPads. Then one day, larger iPhones came along, starting with iPhone 6 and 6 Plus, at resolutions of 375x667 and 414x736 respectively.

曾几何时，所有iPhone屏幕都被分类为wC hC ，其分辨率在iPhone 5上为320x568 。所有iPad 屏幕被分类为wR hR ，在9.7英寸iPad上的分辨率为768x1024 。 然后有一天，出现了更大的iPhone，从iPhone 6和6 Plus开始，分辨率分别为375x667和414x736 。

• iPhone 6’s screen remained classified as wC hC, so it could still be considered a “small-screen iPhone.”

  iPhone 6的屏幕仍被分类为wC hC ，因此仍可以视为“小屏幕iPhone”。

• iPhone 6 Plus’s screen, on the other hand, was classified as wC hR, making it a “large-screen iPhone.” For users, this enabled features like hierarchical Split View in landscape orientation.

  另一方面，iPhone 6 Plus的屏幕被分类为wC hR ，使其成为“大屏幕iPhone”。 对于用户而言，此功能启用了诸如横向横向分层拆分视图的功能。

Later, iPhone X was introduced with a taller screen by total points (at 375x812) than iPhone 6 Plus (at 414x736). However, due to its notch and home indicator, iPhone X had a safe area that was ever-so-slightly shorter than iPhone 6 Plus’s screen, at 375x734; thus iPhone X’s screen also remained classified as wC hC.

后来，iPhone X的总点数( 375x812 )比iPhone 6 Plus( 414x736 ) 414x736 。 但是，由于其缺口和归位指示，iPhone X的安全区域比375x734略短于iPhone 6 Plus的屏幕。 因此， iPhone X的屏幕也仍被分类为wC hC 。

wC hR) • iPhone X safe area: 375x734 ( wC hR )•iPhone X安全区域：375x734( wC hC) wC hC )

Based on these observations, it seems the threshold between Compact and Regular could be 734. In other words,

根据这些观察，紧凑型和常规型之间的阈值可能为734 。 换一种说法，

• A dimension is considered Regular when it is greater than 734.

  尺寸大于734时，将其视为“常规” 。

• A dimension is considered Compact when it is less than or equal to 734 (i.e. when it is not Regular).

  如果尺寸小于或等于734 (即非常734尺寸)，则将其视为紧凑型。

In Origami, that would look something like this:

在折纸中，看起来像这样：

哦，等等，iPad Split View… (Oh but wait, iPad Split View…)

Since iOS 9 introduced split view multitasking on iPad in 2015, there have been three window sizes in addition to full screen.

自2015年iOS 9在iPad上引入拆分视图多任务处理以来，除了全屏之外，还提供了三种窗口大小。

All 2/3 split views on iPad are classified as wR hR.

iPad上的所有2/3分割视图都被分类为wR hR 。

• On an 11” iPad Pro, the 2/3 split view width is 809, following the 734 rule.

  在11英寸iPad Pro上，遵循734规则，2/3拆分视图宽度为809 。

• However, on a 9.7” iPad, the 2/3 split view width is 694, breaking the 734 rule.

  但是，在9.7英寸iPad上，2/3的拆分视图宽度为694 ，违反了734规则。

因此，我们需要一个更具体的规则。 也许： (So we need a more specific rule. Maybe:)

• A height dimension is considered Regular when it is greater than 734.

  高度尺寸被认为是正常时，它大于734 。

• A width dimension is considered Regular when it is greater than 694 AND the height dimension is Regular (iPad split views), OR when it is greater than 734 AND the height dimension is Compact (large-screen iPhones), OR when it is greater than 809 regardless of height dimension (everything else).

  的宽度尺寸被认为是正常时，它大于694 ，高度尺寸是普通(iPad的拆分视图)，或当它大于734和高度尺寸是紧凑的(大屏幕的iPhone)，或者当它大于809考虑高度尺寸(其他所有因素)。

• A dimension is considered Compact when it is not Regular.

  如果尺寸不是常规尺寸，则将其视为紧凑尺寸。

In Origami, that would look something like this:

在折纸中，看起来像这样：

This system seems to accurately output correct Size Classes across standard viewport sizes. While this is a great start, there are exceptions that need to be considered, which I’ll discuss in depth in a later piece.

该系统似乎可以在标准视口大小中准确输出正确的大小类。 尽管这是一个很好的开始，但仍需要考虑一些例外，我将在以后的部分中深入讨论。

For now, I’ve got a skeleton of an adaptive app that outputs Size Classes. You can download the Origami file here.

现在，我已经有了一个输出大小类的自适应应用程序的框架。 您可以在此处下载折纸文件。

翻译自: https://medium.com/swlh/adaptive-designs-in-origami-intro-da82b0802d30

折纸折痕设计软件