by Fabrice Dubois

通过Fabrice Dubois

无家可归的iPhone(第2部分) (Homeless iPhone (Part 2))

Pause. Rewind. Deep dive in the design process.

暂停。 倒带。 在设计过程中深入研究。

Two weeks ago I posted about the possibility of an iPhone that has no Home button at all.

两周前我曾发表过关于iPhone根本没有主页按钮的可能性的报道 。

With iOS 11 on an iPad you enjoy a whole new app switcher. As a little design challenge, I study how this UI could work on the imminent ‘iPhone 8’, and whether it could cater for the absence of Home button.

在iPad上使用iOS 11，您可以享受全新的应用程序切换器。 作为一个小的设计挑战，我研究了该UI如何在即将到来的“ iPhone 8”上运行，以及它是否可以解决缺少Home按钮的问题。

Today I’ve paused the exploration, and I’m walking you through the design process. We’ll review my sketches in detail, see what they reveal about the train of thought (ouch!), and look at a couple of prototype variants that you’ll be able to download and try.

今天，我暂停了探索，并引导您完成设计过程。 我们将详细审查我的草图，查看它们揭示出的思路( 哎呀！ )，并查看几个原型变体，您可以下载并尝试。

Being process-oriented, not product-driven, is the most important and difficult skill for a designer to develop.

以过程为导向，而不是产品驱动，是设计师开发的最重要和最困难的技能。

Matthew Frederick

马修·弗雷德里克(Matthew Frederick)

Sketches and prototypes below are provided as is, they haven’t been modified at all for the sake of this article. I include raw scans of my large sketch boards, so the post is probably best viewed on desktop or tablet.

下面的草图和原型是按原样提供的 ，出于本文的考虑，它们并未进行任何修改。 我包括对大型素描板的原始扫描，因此最好在台式机或平板电脑上查看该帖子。

素描 (Sketching)

I always keep my sketches and notes. They’re useful to review in slow motion what has happened in the mind, assess the reasoning, and have a fresh look at germinating ideas that were forgotten on the road side.

我总是保留我的草图和笔记。 它们对于以慢动作查看头脑中发生的事情，评估推理以及重新审视在路边被遗忘的想法非常有用。

For this project I used two A3 sheets. Let’s comment the key screens:

在这个项目中，我使用了两张A3纸。 让我们评论一下关键屏幕：

1. Trying to force-fit the iPad design. In that first attempt, everything is on a single horizontal scroll view. And there’s a Home button! False start.

1. 尝试强制安装iPad设计。 在第一次尝试中，所有内容都在单个水平滚动视图上。 并且有一个主页按钮！ 错误的开始。

2. Trying again. But stopping fast since clearly, it’s not going to work. My proportions are completely unrealistic. Lack of discipline.

2. 再试一次。 但是自从明显停止后，它就没有用了。 我的比例是完全不现实的。 缺乏纪律。

3. A more realistic ratio. I finally acknowledge it’s a very long phone I’m dealing with (6/13 ratio). I’m going to need my imagination. The whole view now scrolls vertically, with apps on 2 columns. An accident happens here: my focus has now shifted to the iPhone’s Control Centre (that I’m probably examining on my iOS 11 phone, as a model for the sketch). I’m misled and add the little chevron at the top, meaning “swipe down to close”.

3.更现实的比例 。 我终于承认这是我要处理的非常长的电话(6/13的比率)。 我将需要我的想象力。 现在，整个视图垂直滚动，其中应用程序位于2列中。 这里发生了一个事故：我的注意力现在转移到了iPhone的控制中心(我可能正在我的iOS 11手机上进行检查，作为草图的模型)。 我被误导了，并在顶部添加了小V形符号，意思是“向下滑动以关闭”。

4. A potential conflict. Because I now wrongly assume the UI can be swiped down, I worry this is going to interfere with my vertical scroll. I capture this in a side note: “KO since swipe needed to close overlay”. I swap things, move apps to the top, as if it could help, but finally plant the seed of an alternative idea: “Recent apps @ top but as horiz. carousel”.

4. 潜在冲突。 因为我现在错误地认为UI可以向下滑动，所以我担心这会干扰我的垂直滚动。 我在旁注中捕获了这一点：“ KO，因为需要滑动才能关闭覆盖层”。 我交换了一些东西，将应用程序移到顶部，好像有帮助，但是最后植入了另一个想法的种子： 旋转木马”。

5. One last shot at the vertical scroll. Here, I guess I’m seeking confirmation that the vertical approach is flawed... But my mind forks again as I notice a new issue! Controls and recent apps compete for visibility: Scroll to view one and the other is pushed out of bounds. They’re part of the same strap. At that point I decide to try decoupling them.

5. 垂直滚动的最后一击。 在这里，我想我正在寻求确认垂直方法是否有缺陷……但是当我注意到一个新问题时，我的思绪再次分叉！ 控件和最新的应用程序争夺可见性：滚动查看其中一个，另一个则超出范围。 它们是同一条皮带的一部分。 那时我决定尝试将它们去耦。

6. Recent apps as horizontal carousel. That looks more familiar for an app switcher. Controls still scroll vertically, though — so how does that work as a whole? Doesn’t feel right. I appear distracted again between 6 and 7 but let’s skip that.

6.最近的应用作为水平轮播。 对于应用切换器来说，这看起来更熟悉。 但是，控件仍会垂直滚动-那么整个控件如何工作？ 感觉不对。 我似乎又在6到7之间分散了注意力，但我们跳过一下。

7. Two parallel scroll views. The control group and the app carousel are now free to move without running into each other. Space is shared equally. I annotate some elements with “Size?”: Can I afford that layout on the real device? Only one way to know: Increase fidelity. But overall I sense I’ve got a candidate solution I can work with.

7.两个平行的滚动视图。 控制组和应用程序轮播现在可以自由移动而不会碰到彼此。 均分空间。 我用“大小”注释了一些元素：我可以在实际设备上负担该布局吗？ 只有一种知道的方法：提高保真度。 但是总的来说，我觉得我有一个可以使用的候选解决方案。

观察结果 (Observations)

I don’t state my goal. That’s a pity because something as simple as “Adapt the new iPad switcher to the iPhone 8” (even if obvious) would have focused me sooner on the actual issues.

我没有说明我的目标 。 遗憾的是，诸如“使新的iPad切换器适应iPhone 8”之类的简单操作(即使很明显)也会使我更快地关注实际问题。

I don’t have a very clear logic in mind. Evidence of confusion: The fallacy that the UI is an overlay that can be swiped down, and the Home button that I remove then for some reason bring back (don’t ask!).

我没有很明确的逻辑。 混淆的证据：UI是可以向下滑动的覆盖层的谬论，以及由于某种原因我随后删除的“主页”按钮会带回来(不要问！)。

I seem mainly concerned by a layout problem. Apparently I don’t worry much about how to access the home screen. Yet that’s very key in my experiment! I do leave a shy trace at step 3: “Lacks obvious way to go to HS”, and then stick a Home button everywhere. This is embarrassing (given the experiment is all about button-less!) — I’m probably aware that at some point I need to find empty space so the background can be tapped, like on the iPad switcher, but I wouldn’t swear. The Home button looks more like a mechanically applied FIX-ME label, something I don’t want to deal with yet.

我似乎主要担心布局问题。 显然，我不必担心如何访问主屏幕。 但这对我的实验非常重要！ 在第3步中，我确实避开了痕迹：“缺少通向HS的明显方法”，然后将“主页”按钮放置在各处。 这很尴尬(假设实验全部是关于无按钮的！)—我大概知道在某个时候我需要找到空白空间以便可以轻按背景，例如在iPad切换器上，但是我不会发誓。 。 “主页”按钮看起来更像是机械应用的FIX-ME标签，我现在还不想处理。

Being process-oriented means: [Long list that includes:] Working fluidly between concept-scale and detail-scale to see how each informs the other.

面向过程意味着：[包括以下内容在内的一长串内容：]在概念量表和细节量表之间流畅地工作，以了解彼此之间如何相互影响。

Matthew Frederick

马修·弗雷德里克(Matthew Frederick)

My drawing and handwriting look awful. But somehow that’s positive. In the process of doing these sketches it never occurred to me that I would share them later; in the moment, the absence of aesthetic requirements actually did reinforce focus.

我的绘图和手写看起来很糟糕。 但这是积极的。 在做这些草图的过程中，我从来没有想到过以后再分享它们。 目前，缺乏审美要求确实增强了人们的关注度。

Side notes help inform my next steps. Sketch, evaluate, note issues, and try addressing them in a future iteration. Any change can bring new problems, and the sooner I capture them, the better. It’s just so easy to spot and forget. I’ll take side notes more systematically in the future.

旁注有助于通知我下一步 。 草绘，评估，记录问题，并尝试在以后的迭代中解决它们。 任何更改都会带来新问题，而我越早抓住它们，就越好。 发现和忘记是如此容易。 以后我会更系统地记录一些笔记。

原型制作 (Prototyping)

You can try the prototypes below if you use Principle, on a Mac or an iPhone directly. Click the movie captions to download the Principle .prd files. To learn more check Principle’s docs, and my tips at the end of the post.

如果您直接在Mac或iPhone上使用Principle ，则可以尝试以下原型。 单击电影字幕以下载Principle .prd文件。 要了解更多信息，请查看Principle的docs以及文章末尾的提示。

An early version (v8 above) features the chevron at the top and a discreet Home button at the bottom. Tapping the chevron re-opens the current app (what else could it do?) but so does a tap on the app miniature already.

早期版本(v8以上)的顶部为人字形，底部为谨慎的Home按钮。 轻按V形箭头可重新打开当前应用程序(它还能做什么？)，但也可以轻按一下该应用程序缩图。

So this chevron based interaction looks silly, in hindsight. Pay attention to the animation it triggers: While it does the right thing (zooming in the app correctly represents the action of bringing it to the foreground), it is disconnected from the chevron object itself. The chevron, on one hand, is doing what you want (dismiss switcher and return to app) but on the other hand it does not behave as you’d expect (slide down). Prototyping instantly trapped the contradiction here. I should have caught the flaw much earlier, but that’s ok — there are many things in my life that I should’ve done earlier.

因此，事后看来，这种基于人字形的交互看起来很愚蠢。 请注意它触发的动画：尽管它做对了(在应用程序中缩放正确表示将其放到前台的动作)，但它却与人字形对象本身断开了连接。 人字形一方面在做您想要的事情(关闭切换器并返回到应用程序)，但另一方面，它的行为却不符合您的期望(向下滑动)。 原型设计立即将矛盾困在这里。 我应该早点发现该缺陷，但是没关系–我生命中有很多事情应该早一点做。

The chevron is gone (v11 above) but I now experiment with a home screen miniature (like in iOS 10's switcher). This is efficient for the home screen use case, but it pushes the previous app (green) too far left for a right-hander. And there’s duplication again: the Home button becomes redundant, but if I remove it then the user can only rely on the miniature to go to home screen, which is too far right for left-handers! They could scroll but in this particular case I certainly don’t want them to have to.

人字形消失了(上面的v11)，但是我现在尝试使用主屏幕缩影(例如在iOS 10的切换器中)。 这对于主屏幕用例是有效的，但是对于惯用右手的人，它将上一个应用程序(绿色)向左推得太远了。 再有一个重复：“主页”按钮变得多余，但是如果我删除它，则用户只能依靠缩图进入主屏幕，这对于左撇子来说太过正确了！ 它们可以滚动，但是在这种情况下，我当然不希望它们必须滚动。

There’s another aspect: this model is inconsistent with my target one, whereby only a tap on the background should take you home. This is key for the coherence of the whole, and central to the beauty of the new iOS 11 switcher. Why? Because the blurred background behind the switcher is the home screen. Any specific affordance to access the home screen (such as a Home button or my miniature) is superfluous (not to say incoherent) when you can interact with the home screen directly. Depth is one of the core design principles in iOS — with Clarity and Deference — and Apple beautifully builds on it here.

还有一个方面：该模型与我的目标不一致，因此只需轻按背景即可将您带回家。 这是整体一致性的关键，也是新iOS 11切换器之美的关键。 为什么？ 因为切换台后面的模糊背景是主屏幕。 当您可以直接与主屏幕进行交互时，访问主屏幕的任何特定功能(例如“主屏幕”按钮或我的缩影)都是多余的(更不用说是不连贯的)。 深度是iOS的核心设计原则之一-清晰明了，而Apple则在此基础上完美构建。

In the final v14 iteration above I clean up and more strictly align with the iPad switcher. That’s the version I present in part 1. A further improvement could be to enlarge the empty area at the bottom, for instance by limiting the Control Centre grid to 3 rows.

在上述的最终v14迭代中，我清理并更严格地与iPad切换器对齐。 这就是我在第1部分中介绍的版本。 进一步的改进可以是扩大底部的空白区域，例如将Control Center网格限制为3行。

One last quote from Matthew Frederick’s excellent 101 Things I Learned in Architecture School:

马修·弗雷德里克(Matthew Frederick) 在建筑学院学到的101本书中的最后一句话：

Properly gaining control of the design process tends to feel like one is *losing* control of the design process […] Accept uncertainty. Recognize as normal the feeling of lostness that attends to much of the process.

适当地获得对设计过程的控制往往会感觉到“失去”了对设计过程的控制[…]接受不确定性。 正常情况下会感觉到整个过程中的迷失感。

On my journey I drifted away from my initial goal several times and accidentally glimpsed at different possibilities. Some may be worth revisiting later, some opened my eyes to new pitfalls. The wandering isn’t waste, it is the essence of exploration. At the same time one can’t keep opening boxes and adding todos forever; it’s also important to deliver reasonably stable and presentable solutions as you go along. The challenge is to strike a balance between breadth and depth.

在旅途中，我几次偏离了最初的目标，无意间瞥见了各种可能性。 有些也许以后值得回顾，有些让我大开眼界。 流浪不是浪费，而是探索的本质。 同时，人们不能永远打开盒子并添加待办事项。 在您进行过程中，提供合理的稳定且合理的解决方案也很重要。 挑战在于在广度和深度之间取得平衡。

提示–如果您尝试使用原型 (Tips – if you try the prototypes)

• Interactions are limited to: swipe up, scroll horizontally, tap the blue app miniature, tap the switcher’s background. In the home screen, tap the blue icon only.互动仅限于：向上滑动，水平滚动，点击蓝色的微型应用程序，点击切换台的背景。 在主屏幕中，仅点击蓝色图标。
• The intermediate Dock state that I describe in the previous post is not supported by the prototypes I share here. In order to create the Dock state movie I made a temporary modification.我在上一篇文章中描述的中间Dock状态不受本文共享的原型支持。 为了制作Dock状态电影，我做了一个临时修改。
• The prototypes are designed for the ‘iPhone 8’ itself, at 375 * 812 points (145 pt taller than an iPhone 6/7). So if your test device, like mine, is a 6/7 series, Principle scales down the UI a bit so that it fits your display: Everything looks a bit smaller than it should be. And positioned a bit higher too, due to the bottom area on the 6/7 (no such chin on the future edge to edge display).这些原型是为“ iPhone 8”本身而设计的，高度为375 * 812点(比iPhone 6/7高145 pt)。 因此，如果您的测试设备(例如我的设备)是6/7系列，则Principle会稍微缩小UI以便适合您的显示：所有内容看起来都比实际尺寸小。 并且由于6/7的底部区域而定位得更高(以后的边缘到边缘显示中没有这样的下巴)。

• However, if you open this image on a 6/7 you get a much better idea of the expected ‘iPhone 8’ feel. Just imagine the phone is taller and that you can tap the bottom area anywhere. You may need to first save the image to your photo library. It’s supposed to fill the entire screen and look like this:

  但是，如果在6/7上打开此图像 ，则可以更好地了解预期的“ iPhone 8”感觉。 试想一下手机更高，您可以在任何地方点击底部区域。 您可能需要先将图像保存到照片库中。 它应该填满整个屏幕，如下所示：

翻译自: https://www.freecodecamp.org/news/homeless-iphone-part-2-1f7b3acc8a6c/