• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞

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

作者:渔夫和Ta的灵魂 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含iPhone X,iPhone X转角细节,经验分享等相关知识,渔夫和Ta的灵魂希望在学习及工作中可以帮助到您

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

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

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

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

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

当Apple公司知道他们要利用全屏技术,他们就有机会改变屏幕的形状了,因为无论如何他们都需要解决制造过程中存在的问题。想来,大部分的费用应该是花费在了内置更新上了。

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

这个方案应该是他们落地生产最好的方案:

屏幕的棱角

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

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

为了能更好的看出差异,这里使用了gif:

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

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

关于缺口

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

这种设计是没有问题的

我发现iPhoneX模板并没有100%复制官方的形状,可能是因为很难制作或者他们没有注意到。

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

当然,这些变化看起来可能很小,但是从设计角度来看,他们相当的了不起了。因为很多设计即使设计师愿意推动这些想法,大部分组织也不会投放太多的资源。

关于改变

我喜欢独立应用程序的一个原因是他们有坚持己见的资本。比如很多公司(人数超过50人)产品外观上有大型变化基本上是不可能的,但是Apple公司的设计就仍有能力进行改变,这是一个很酷的行为。

数以千计的设计细节是Apple公司与其他公司区别开的主要原因。能做到这一点真的很不容易,并且产品看起来真的很漂亮。

原文链接:《No Cutting Corners on the iPhone X》

原文作者:Maggie Mason

欢迎关注译者的微信公众号:「渔夫和Ta的灵魂」

「iPhone X 适配案例」

  • 《腾讯设计师:极速适配 iPhone X 的技巧揭秘!》
  • 《如何适配iPhone X?来看滴滴出行的实战案例复盘!》
  • 《如何适配iPhone X?来看QQ 音乐这个实战案例复盘总结》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 这篇分析iPhone X 转角细节设计的文章,收获了15000+个赞
  • 腾讯设计师:极速适配 iPhone X 的技巧揭秘!
  • 如何适配iPhone X?来看滴滴出行的实战案例复盘!
  • 如何适配iPhone X?来看QQ 音乐这个实战案例复盘总结
  • 为了让 iPhone X 更好浏览网页,我给网页加了个导航按钮
  • H5页面如何适配iPhone X ?腾讯设计师给出了通用解决方案!
  • 动手试试!手把手教你如何适配 iPhone X
  • iPhone X适配没那么复杂,但也不是看上去这么简单
  • 谷歌设计师:如何评价新版 iPhone X 的设计规范?

相关文章

  • 2018-08-23高手来了!8个简单有效的方法帮你提升设计档次
  • 2018-08-23超10万阅读!腾讯设计师在路边摊的“暖心实践” 
  • 2018-08-23上亿人使用的QQ iPad版「斗图神器」原来是这么设计出来的!
  • 2018-08-23提需求前,你要问自己这8个问题
  • 2017-08-06手机浏览器不支持position: fix的解决方法
  • 2018-08-23想做出中国风的字体设计?我总结了4个规律!
  • 2018-08-23设计实战!专业的设计师是怎样进行着陆页设计的?
  • 2018-08-23想自学插画?9个必备的手绘插画教程神器
  • 2018-08-23经典好书!从零开始翻译《Design Systems》:设计系统
  • 2018-08-23设计实战:教育产品组件化交互设计的实践与思考

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • table td 图片水平垂直居中实现代码
    • 网页页脚该注意的地方小结
    • 私货分享!设计师如何全面提升自己的工作效率?
    • HTML中的input type="reset"标签失效(不起作用)的可能原因。
    • 高手用10分钟,就能让你搭配出好看的颜色
    • Web前端开发者必知的9个实用CSS属性
    • web的各种前端打印方法之CSS控制网页打印样式
    • 引入CSS的方式有哪些?link和@import的有何区别应如何选择
    • 从「手势交互」出发,分析产品设计背后的原理
    • 如何做好表单设计?这儿有3个通用的注意要点

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有