欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2018:02:01 14:19:25 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有970个文字,预计阅读时间3分钟
导语
iPhone X 发布后,很多设计师吐槽屏幕的形状。当大部分的吐槽逐渐平息下来,我依然没看到关于屏幕转角细节设计的讨论。

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

  

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

 

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

推荐阅读:恒纪元到来 Zoomla!逐浪CMS2x3.0降临地球!

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

  每个人都知道如何制作出正确的转角,设计师通过视觉绘制,工程师需要通过少量的计算,机器被设定好后就能清楚的按照设定程序进行制作。

  让我们看看怪异的全直角是什么样子的:

  

这篇分析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公司与其他公司区别开的主要原因。能做到这一点真的很不容易,并且产品看起来真的很漂亮。

  原文链接:http://medium.com/tall-west/no-cutting-corners-on-the-iphone-x-97a9413b94e

  原文作者:Maggie Mason

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:这款帮你科学养护绿植的APP是怎样设计出来的

下一篇:网易设计师:超全面的交互规范设计流程

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信