赞助商
立即赞助

这篇分析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+个赞

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

相关文章

网络成本的降低促使承担推广作用的 H5 越来越多的使用视频呈现的形式,但迈过初期朋友圈视频给用户带来巨大新鲜感的时代之后...
H5
编者按:今天的译文同样来自设计师 Eugen Eşanu,他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问...
Eugen Eşanu
@Jenny黄静雯 :​​​相信很多同学会有,看理论的时候觉得很有道理,看完后却不知该怎么实践,久而久之便会产生「看过很多设计...
ICON
编者按:无论是APP还是网页或者某项服务,在完成设计之后,投入市场之前,总需要通过专业的测试和评估来尽可能减少潜在的问题...
Adam Fard
一、色彩 DNA 文档 概述 根据品牌多年来的设计沉淀以及目前业务的各个使用场景,我们对品牌色彩的DNA进行了重新的探索和定义...
产品设计规范
提到这个话题有两层不同的讨论方向,在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以...
App设计
本文作者通过对产品开发三原则模型:商业可行性、技术可能性、用户期望值的分析,来说明其对于产品设计产生的价值。 一. 什么...
产品开发三原则
@龙爪槐守望者 :熟练掌握 iOS、Android 设计规范是一个设计师必备的工作技能,几乎每家公司都要求做自己的设计规范。当我们...
Android设计规范