iPhone 12 VS 设计师

2020-10-19 本文已影响0人 UEGOOD

10月13日，苹果公司举行了一年一度的iPhone发布会，并推出了四款新iPhone。大部分的讨论都是关于新设计和功能的，所以让我们先把这些说出来:

我认为回到iPhone 5/iPad Pro风格是一个很好的选择，我个人很喜欢这种设计和专业功能，并且本次发布会推出的iPhoneMini同样相当引人注目。磁性充电技术未来有望在的苹果笔记本电脑(基于ARM的)实现。

这个金属和玻璃外壳里面有一个应该关注的问题

如果您是从事移动应用程序（或响应式网站）的设计师，您肯定感同身受，目前Apple移动设备的尺寸已经很多了。这是Artboard预设在Sketch和Figma中的外观。

但这些新款iphone让市场前景变得更加复杂。还记得史蒂夫·乔布斯(Steve Jobs)介绍带视网膜显示屏的iPhone 4吗?

他特别提到，这款手机的基本分辨率与其他所有iphone都是一样的，都是320x480。只是像素密度高了2倍。

那是UI设计的一个伟大而简单的时期。你设计了320 x 480点的所有东西，并输出并适配了2x的设备(640 x 960)。

这是非常“苹果”的，一条清晰、容易遵循的道路，完全是为了消除不必要的复杂性。

iphone分辨率，这里面甚至没有包括第一部iPhone SE (320x568)

这些360x780和390x844的分辨率是从哪里来的?它们仅仅是这些手机三分之一的主要分辨率。并且增加很多复杂性，所以如何处理?

根据Steve Troughton-Smith的这条推文，我们得到了新的390宽度。

iPhone 12 Mini的分辨率降低了375 x 812，与iPhone X相同。这种方法的问题在于，它不再是3倍的比例，而是2.88倍。当然，在较小的屏幕上并不会带来太大的伤害，因为大多数有关如何显示对象的实际计算都是通过代码完成的。

Ukiyo—一款为创意人士量身打造的应用程序

上面你可以看到的一个应用程序的设计示例。它不是理想的，因为特别是顶部和底部的间距需要调整手机之间的外观才能正确显示。在某些手机上，主按钮需要滚动，因此我们必须调整这些设备的整张卡片和字体大小，才能完成适配。

为每个特定的分辨率进行必要的调整

当然，Swift UI和其他编码方面的进步让它变得更简单了，但在设计阶段，我们仍然想看看它在更大的设备上会是什么样子。我们也经常在这些设备上使用Sketch Mirror来预览它，所以这让我们做了比我们想做的更多的工作。

在此之前，我们的设计对象是375 X 812的iPhone X 的viewport，以及更大的414x896。它覆盖了大多数独立的手机，再次基础上，开发者调整布局以适应其他少数设备上的更多内容(或者只是变大)。

那390和428的宽度呢?

答案是，看情况而定。在content consumption(内容消费)的情况下，UI可以保持相对相同的大小，而内容本身可以被放大，或者质量更高(以像素为单位)。

但是，仅仅是放大可能会失去我们在特定大小中设置的字体的良好平衡。内容可能开始看起来太大，太小，太宽。

此外，一些放大或缩小会导致非常细的线条出现锯齿，所以如果你使用非常细/轻的字体，那么你可能会失去一些易读性。

在ios7操作系统之后，苹果公司通过引入更粗、更粗的字体和替代“轻”字体来解决了这个问题。但是一些设计师(甚至更多的产品负责人)喜欢这些轻字体，因为出于某种原因，他们理解它们是“轻”字体是好的设计。

如果我们试图在这些手机上使用相同的“滚动高度”，那么我们最终会有一些未使用的空间，这不是最佳的。当然，情况可能并不完全是这样的，因为有些手机有不同的高宽比，这只是个一般原则。

Fold是一个相当常见的概念，用一条无形的线将我们在一个屏幕上看到的东西(没有滚动)和设计的其他部分隔开。其理念是，所有最重要的元素都应该在“above the fold”，以便于访问。

有人说“人们不滚动”，这在现代听起来有点傻(考虑到我们平均每天滚动300米的事实)。

但它可能会影响一些电商项目，在这些项目中，它是精心设计的，以适应尽可能多的相关信息和一个屏幕上的“立即购买”按钮。当然，我们可以创建一个覆盖按钮，但这并不能解决会删除特定手机上的信息的问题。

所以我想，对于电商项目来说，通过把同样的设计做大来测试体验可能会更容易，因为那样会让我们对人们在所有设备上看到的东西有更一致的看法。

一个44P高(在1x的时候也是44像素高)的按钮在2x的时候仅仅是88像素高，在320x480的viewport渲染的同样也是44P。

我们都很怀念在同一viewport上只有两种分辨率的时候。这使得用户体验在设计时更加容易，同时也便于测量。