折纸折痕设计软件
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 (Compact width) and (Compact height).
紧凑尺寸等级是指受约束的空间。 它在Xcode中表示为 (紧凑宽度)和 (紧凑高度)。
-
The Regular Size Class refers to a non-constrained space. It is denoted in Xcode as (Regular width) and (Regular height).
常规尺寸类别是指不受约束的空间。 在Xcode中将其表示为 (常规宽度)和 (常规高度)。
For simplicity sake, I’ll use the shortened notation (e.g. ) in the following discussion.
为了简单起见,在下面的讨论中,我将使用缩写形式(例如 )。
Once upon a time, all iPhone screens were classified as , at resolutions such as on iPhone 5. All iPad screens were classified as , at resolutions such as on 9.7” iPads. Then one day, larger iPhones came along, starting with iPhone 6 and 6 Plus, at resolutions of and respectively.
曾几何时,所有iPhone屏幕都被分类为 ,其分辨率在iPhone 5上为 。所有iPad 屏幕被分类为 ,在9.7英寸iPad上的分辨率为 。 然后有一天,出现了更大的iPhone,从iPhone 6和6 Plus开始,分辨率分别为和 。
-
iPhone 6’s screen remained classified as , so it could still be considered a “small-screen iPhone.”
iPhone 6的屏幕仍被分类为 ,因此仍可以视为“小屏幕iPhone”。
-
iPhone 6 Plus’s screen, on the other hand, was classified as , making it a “large-screen iPhone.” For users, this enabled features like hierarchical Split View in landscape orientation.
另一方面,iPhone 6 Plus的屏幕被分类为 ,使其成为“大屏幕iPhone”。 对于用户而言,此功能启用了诸如横向横向分层拆分视图的功能。
Later, iPhone X was introduced with a taller screen by total points (at ) than iPhone 6 Plus (at ). 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 ; thus iPhone X’s screen also remained classified as .
后来,iPhone X的总点数( )比iPhone 6 Plus( ) 。 但是,由于其缺口和归位指示,iPhone X的安全区域比略短于iPhone 6 Plus的屏幕。 因此, iPhone X的屏幕也仍被分类为 。
Based on these observations, it seems the threshold between Compact and Regular could be . In other words,
根据这些观察,紧凑型和常规型之间的阈值可能为 。 换一种说法,
-
A dimension is considered Regular when it is greater than .
尺寸大于时,将其视为“常规” 。
-
A dimension is considered Compact when it is less than or equal to (i.e. when it is not Regular).
如果尺寸小于或等于 (即非常尺寸),则将其视为紧凑型。
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 .
iPad上的所有2/3分割视图都被分类为 。
-
On an 11” iPad Pro, the 2/3 split view width is , following the rule.
在11英寸iPad Pro上,遵循规则,2/3拆分视图宽度为 。
-
However, on a 9.7” iPad, the 2/3 split view width is , breaking the rule.
但是,在9.7英寸iPad上,2/3的拆分视图宽度为 ,违反了规则。
因此,我们需要一个更具体的规则。 也许: (So we need a more specific rule. Maybe:)
-
A height dimension is considered Regular when it is greater than .
高度尺寸被认为是正常时,它大于 。
-
A width dimension is considered Regular when it is greater than AND the height dimension is Regular (iPad split views), OR when it is greater than AND the height dimension is Compact (large-screen iPhones), OR when it is greater than regardless of height dimension (everything else).
的宽度尺寸被认为是正常时,它大于 ,高度尺寸是普通(iPad的拆分视图),或当它大于和高度尺寸是紧凑的(大屏幕的iPhone),或者当它大于考虑高度尺寸(其他所有因素)。
-
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
折纸折痕设计软件
文章知识点与官方知识档案匹配,可进一步学习相关知识Python入门技能树预备知识Python简介215503 人正在系统学习中 相关资源:折痕CP图制作软件OrigamiPatternEditor_折痕图-专业指导文档类…
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!