赞助商
立即赞助

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

UI设计3年前 (2021)更新 流光
2.5K 0 0

iPhone X 发布后,很多设师吐槽屏幕的形状。当部分的吐槽逐渐平息下,我依然看到关于屏幕转角细节设的讨论。

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

你理解的转角是什么样的?

当你开始设计转角的时候,毫无疑问,一定是设计成简单的方形。因为可通过机械准制这些屏幕,够保证边界的误差很小。

每人都知道如何制作出确的转角,设师通过视觉绘制,程师需通过少的算,机器被设好后就能清楚的按照设程序行制作。

让我们看看怪异全是什么样子:

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

Apple公司知他们要利用全屏技术,他们有会改变屏幕形状了,为论如何他们都需要解决制造过程存在问题。想来,大部分费用应该是花费在了内更新上了。

当然,这些屏幕计还有一些丑陋的方案:

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

这个方案应该是落地生产最好的方案:

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

屏幕的棱角

接下来是强迫症慎入,iPhone X屏幕圆不是使用经典圆法:线与圆单个象限弧相切。

而是使用更复杂的方法:使用圆形,但是斜坡圆滑的更快些。使整体起来温柔多。

为能更的看出差异,里使用gif:

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

△ 常规圆角和iPhoneX屏幕圆角的区别

Apple公司在平和iMac上使这样的圆角已经很多年,但是直到iOS7才应到iPhone上。这种形状在传统上难实现,因为它在2D设计编辑器中是可的,过这种情况正在改变。

关于缺口

接来我们了解屏幕的缺口分,就是我们说的「刘海」。左右两边有两个圆角。由于曲线的衰减,一条曲线和另一条曲线可无缝连接。

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

这种设计是没有问题的

我现iPhoneX模板并没有100%复官方的形状,能是因为很难或者他们没有注意到。

这种设计的未来迭代肯定会改变这些尺寸,因为有个很有趣的事情是置硬件的变会影响外观设计的变。

当然,这些变化看起可能很小,但从设角度看,他们相当的了不起了。因很多设即使设师愿意推动这些法,部分组织也不会投太多的资源。

关于改变

我喜欢独立应用程序的一原因他们坚持己见的资本。比如很多公司(人数超过50人)产品外观型变化基本不可能的,但Apple公司的设就仍能力行改变,这一很酷的行。

数以千计设计细节是Apple公司与其他公司区开主要原。能做到这真很不容易,并品看起来真很漂亮。

文链:《No Cutting Corners on the iPhone X》

原文者:Maggie Mason

注译者的微信公众号:「渔夫和Ta的灵魂」

这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Darren大人 :总结了一套引导页的设计思路,希望自己在新的一年能多学习总结,在这里和大家分享交流,大家也可以提出问题和建...
2.5D
文章分享了弹出框都有哪些,以及弹出框应该怎样使用。 前言 任何一款应用程序都少不了提示。当我们需要告知用户某些特殊消息...
交互控件
王镇雷:日常工作,除了完成单点需求以外,如果能用上一系列高大上的「模型」,一下子专业度就上来了。 所以今天给大家介绍...
商业需求
之前我把交互设计师职业技能的第一部分——思维部分讲完了,之后我开始讲「眼界」这部分。老实说,我只是作为一个设计师在写些...
交互模型
给予用户即时反馈是交互设计中十分重要的一个原则。它是关于系统如何即时有效地应对用户进行的操作的设计。当用户进行操作时...
按钮设计
这个月来自 Prototypr 的设计工具合集,质量相当过硬了!值得一提的是,Kitze 这款浏览器荣获了「设计师和开发者最实用浏览器...
Prototypr
平时的工作中,经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发,有理有据的说明这些问题,并给出...
App设计
我在上一篇文章《动效设计没那么难!让谷歌动效设计师带你入门》当中,已经通过实际的案例,分享了动效设计并不难的原因。我...
AE