对文章打分
iPhone X前后摄像头系统部分参数曝光
阅读 (26903) 评论 (11)
阅读 (26551) 评论 (7)
阅读 (21435) 评论 (17)
阅读 (67572) 评论 (0)
阅读 (34097) 评论 (3)
阅读 (31815) 评论 (12)
Advertisment ad adsense googles cpro.baidu.com&figure&&img src=&https://pic1.zhimg.com/v2-cc12d54a5eadbb3c69c9be_b.jpg& data-rawwidth=&1920& data-rawheight=&1080& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&https://pic1.zhimg.com/v2-cc12d54a5eadbb3c69c9be_r.jpg&&&/figure&&p&这是我们果壳中的宇宙-IPhone X的Face ID和True Depth Camera分析系列的第二篇，第一篇链接在此&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&果壳中的宇宙-IPHONE X的FACE ID和TRUE DEPTH CAMERA分析-硬件篇&/a&，这回我们就来聊聊iPhone X上另一个令人惊讶的新功能-Animoji。本文主要进行浅显的分析，更多的技术细节请参照论文，另外受限于作者知识储备，本文多有不足之处，请大家多多指正，我们也会根据大家的意见建议及时修改相关部分，以求尽量准确。&/p&&h2&起源&/h2&&p&或许大家也注意到了，在iPhone X发布后，USC的图形学副教授Hao Li在linkedin上发了个说说，具体内容如下图&/p&&figure&&img src=&https://pic2.zhimg.com/v2-33f2c9fe44a4fb256cf65_b.jpg& data-rawwidth=&750& data-rawheight=&997& class=&origin_image zh-lightbox-thumb& width=&750& data-original=&https://pic2.zhimg.com/v2-33f2c9fe44a4fb256cf65_r.jpg&&&/figure&&blockquote&来自Hao Li的Linkedin&/blockquote&&p&这个图形学界家喻户晓的杀马特少年又一次来到了聚光灯下。那么Animoji和这位大神的PhD论文究竟有什么关系呢？FaceShift又是干什么的？这又要从快十年前说起了。&br&Hao Li在2006年进入瑞士ETHZ攻读PhD，师从当时还在ETH的Mark Pauly。博士期间，他发表了数篇文章，可谓无一篇不是大作，08年SGP的非刚性注册，09年SCA的人脸跟踪，可以说是为后来的研究和商业应用打开了一扇大门，09/10/11三年的三篇SIGGRAPH也把整个这一套理论推向更自动，更鲁棒，更实时。他在EPFL的同事Thibaut Weise和Sofien Bouaziz也是这一方向的大牛，在发表数篇论文之后也组建了人脸动画公司FaceShift。2015年FaceShift被苹果收购，他们也成了继PrimeSense之后苹果在iPhone X刘海的技术储备里的另一款重要的拼图。&/p&&h2&Animoji的秘密&/h2&&p&在发布会上，我们看到由于有了我们&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&上一篇文章&/a&分析过的True Depth Camera，iPhone X能够做到各种光照环境下的人脸识别，即Face ID，此外还有另一项黑科技，就是Animoji。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-8ce78c24b55ca82072a91_b.jpg& data-rawwidth=&480& data-rawheight=&314& data-thumbnail=&https://pic2.zhimg.com/v2-8ce78c24b55ca82072a91_b.jpg& class=&origin_image zh-lightbox-thumb& width=&480& data-original=&https://pic2.zhimg.com/v2-8ce78c24b55ca82072a91_r.jpg&&&/figure&&blockquote&Animoji-来自苹果发布会&/blockquote&&p&你的iPhone X可以通过前置摄像头观察你的表情，并且让卡通做同样的表情，听起来很酷炫，那么，这么神奇的Animoji究竟是怎么实现的呢？&/p&&p&我们翻了翻上一节提到的四个大神的paper，这里争取给大家尽量简洁地解释一下这项技术的基本思路。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-5f02eef361c2_b.jpg& data-rawwidth=&596& data-rawheight=&332& data-thumbnail=&https://pic3.zhimg.com/v2-5f02eef361c2_b.jpg& class=&origin_image zh-lightbox-thumb& width=&596& data-original=&https://pic3.zhimg.com/v2-5f02eef361c2_r.jpg&&&/figure&&blockquote&Animoji-来自Apple&/blockquote&&p&从这个图里，我们能够看出Jony Ive的头变成了一个更秃（手动尴尬）的虚拟头部，而在这个虚拟头部的背后，就是这项技术的核心概念：Blendshapes（中文我们可以称作混合形状）。&/p&&ul&&li&&b&人脸动画与Blendshapes&/b&&/li&&/ul&&p&一张三维人脸一般可以分解为两个维度: identity和expression。identity我的翻译是本征量, 指去掉表情变化之后人脸的形状特征, 可以理解为每个人的相貌; expression是表情, 不同人脸都可以做出类似的表情。通俗点说，就是每个人的面部可以作为相貌和表情的一种组合。所以呢，如果我们想要把一个人的表情迁移到卡通人物上面，就是把人脸的表情分量提取出来，再告诉卡通人物做同样的表情就好啦。&/p&&p&闭上眼睛想想，好像人都是俩眼睛一鼻子一嘴巴，表情就是每个部分不同姿势的组合嘛，虽然每个人长的不一样，但表情好像都是类似的那么几种。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-634e0a2b913fe92d71eedc_b.jpg& data-rawwidth=&564& data-rawheight=&1161& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&https://pic1.zhimg.com/v2-634e0a2b913fe92d71eedc_r.jpg&&&/figure&&blockquote&Expressions-来自&a href=&http://link.zhihu.com/?target=http%3A//Chronicdoodler.deviantart.com& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&Chronicdoodler.deviantart.com&/span&&span class=&invisible&&&/span&&/a&&/blockquote&&p&那是不是人的表情就这么有限种呢？或者说人的每种表情是不是可以通过有限种的基本表情合成出来呢？Bingo! Blendshapes就是这个思路，我们假设对同一人来说, 那么他的任意表情就可以用有限的表情基来表示, 这些基就称为这个人的BlendShapes，就像这样：&/p&&figure&&img src=&https://pic4.zhimg.com/v2-860f58bd47dfd8f26274ab6dbe298ea7_b.jpg& data-rawwidth=&919& data-rawheight=&638& class=&origin_image zh-lightbox-thumb& width=&919& data-original=&https://pic4.zhimg.com/v2-860f58bd47dfd8f26274ab6dbe298ea7_r.jpg&&&/figure&&blockquote&Blendshapes-来自Dynamic 2D/3D Registration Course-SGP'14&/blockquote&&p&这些blendshapes都有相同的网格结构，也就方便了我们进行组合。说到组合，最简单的就是线性组合了，就像下图这样（唔，这个卡通人物的原型就是上文提到的各位大神的导师Mark Pauly，这么玩自己的导师也是没sei了）：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8424dfe0d2cda9a626c9_b.jpg& data-rawwidth=&640& data-rawheight=&353& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic2.zhimg.com/v2-8424dfe0d2cda9a626c9_r.jpg&&&/figure&&blockquote&Blendshapes expression-来自cs599-ss2015_Hao Li&/blockquote&&p&现在，我们就可以用blendshapes的线性组合来表示人的各种表情了（当然这个不是绝对的，有时候还是需要后续修正），即一个表情可以用一组表情基和一组权重来表示。有了这两组数据，我们就可以大展身手了。&/p&&p&比如，我们想把一个表情迁移到一个卡通人物上，只要我们有这个卡通人物的Blendshapes表情基和表情权重就好了。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-334d96f750b3dfa7df7ec1_b.jpg& data-rawwidth=&640& data-rawheight=&373& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-334d96f750b3dfa7df7ec1_r.jpg&&&/figure&&blockquote&Blendshapes expression-来自cs599-ss2015_Hao Li&/blockquote&&ul&&li&&b&利用Blendshapes来做人脸跟踪&/b&&/li&&/ul&&p&更神奇的是，Blendshapes还能用在这个问题的另一方面，就是人脸跟踪上。我们知道一个面部表情可以由一组Blendshapes表情基的线性组合合成，即这里的 &img src=&http://www.zhihu.com/equation?tex=e%3DBd%2Bb& alt=&e=Bd+b& eeimg=&1&& :&/p&&figure&&img src=&https://pic1.zhimg.com/v2-dd7b79b6d0bd79b828d2bc1ce0c84b84_b.jpg& data-rawwidth=&640& data-rawheight=&375& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-dd7b79b6d0bd79b828d2bc1ce0c84b84_r.jpg&&&/figure&&blockquote&blendshapes-来自Dynamic 2D/3D Registration Course-SGP'14&/blockquote&&p&那么人脸跟踪的目的就是求解其中的变量：表情权重d，也就是解一个反问题：给定一个面部的数据e和Blendshapes表情基B如何反求表情权重d。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-d661b7a898a52c8b3ac77d_b.jpg& data-rawwidth=&640& data-rawheight=&307& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic2.zhimg.com/v2-d661b7a898a52c8b3ac77d_r.jpg&&&/figure&&blockquote&Tracking-来自cs599-ss2015_Hao Li&/blockquote&&p&这个问题有两部分，第一是每个人的相貌，就是我们之前说的identity不同，这也会使每个人的blendshapes表情基不同，所以我们要生成一套符合每个人相貌的blendshapes表情基；第二个就是求解表情权重了。&/p&&ul&&li&&b&个性化的Blendshapes表情基&/b&&/li&&/ul&&p&这个个性化的Blendshapes表情基就是要生成一组符合当前用户的相貌的表情基。最直接的办法就是让用户为每一个表情拍摄一组数据，再通过非刚性变形把初始的blendshapes变形成个性化的blendshapes。&/p&&figure&&img src=&https://pic4.zhimg.com/v2-0de8fdc1d0603fff930e13_b.jpg& data-rawwidth=&3600& data-rawheight=&720& class=&origin_image zh-lightbox-thumb& width=&3600& data-original=&https://pic4.zhimg.com/v2-0de8fdc1d0603fff930e13_r.jpg&&&/figure&&blockquote&Blendshapes capture-来自Face Off: Live Facial Puppetry&/blockquote&&p&也有在跟踪过程中逐渐修正的算法：&/p&&figure&&img src=&https://pic2.zhimg.com/v2-7c5f68c3ab863d83e2b89_b.jpg& data-rawwidth=&1280& data-rawheight=&720& class=&origin_image zh-lightbox-thumb& width=&1280& data-original=&https://pic2.zhimg.com/v2-7c5f68c3ab863d83e2b89_r.jpg&&&/figure&&blockquote&Customized blendshapes-来自Online Modeling For Realtime Facial Animation&/blockquote&&p&还有直接通过捕捉到的一般脸结合刚性形变生成个性化的Blendshapes的：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-12598bafb04b5a14e7fc2c807de00eb6_b.jpg& data-rawwidth=&640& data-rawheight=&369& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic3.zhimg.com/v2-12598bafb04b5a14e7fc2c807de00eb6_r.jpg&&&/figure&&blockquote&customized blendshapes-来自Realtime Facial Animation with On-the-fly Correctives&/blockquote&&p&这里就是变形过后的Blendshapes：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-de89dbdc581aefb47f52d7e4cbf0dc19_b.jpg& data-rawwidth=&400& data-rawheight=&225& data-thumbnail=&https://pic2.zhimg.com/v2-de89dbdc581aefb47f52d7e4cbf0dc19_b.jpg& class=&content_image& width=&400&&&/figure&&blockquote&customized blendshapes-来自Realtime Performance-Based Facial Animation&/blockquote&&p&当然，还有重要的一步就是要捕捉一般脸的模型，用于辅助变形和追踪，一般来说，用户只要转转头，通过刚性和非刚性注册就可以通过深度图生成比较完整的一般脸的模型：&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-67af0f392_b.jpg& data-rawwidth=&400& data-rawheight=&225& data-thumbnail=&https://pic3.zhimg.com/v2-67af0f392_b.jpg& class=&content_image& width=&400&&&/figure&&blockquote&Neutral face-来自Realtime Performance-Based Facial Animation&/blockquote&&p&看到这里是不是觉得似曾相识？没错，在发布会上我们看到的这一幕：&/p&&figure&&img src=&https://pic3.zhimg.com/v2-930b24f288adb59beab5e6d825b047c5_b.jpg& data-rawwidth=&308& data-rawheight=&191& data-thumbnail=&https://pic2.zhimg.com/v2-930b24f288adb59beab5e6d825b047c5_b.jpg& class=&content_image& width=&308&&&/figure&&blockquote&Face registration-来自苹果官网&/blockquote&&p&这里iPhone X不仅捕捉了用于Face ID人脸识别的人脸特征，同时也获得了用于blendshapes的一般脸模型，可谓一举两得，后续可以通过上文提到的非刚性形变和在跟踪过程中逐渐修正的算法实现个性化的blendshapes生成。&/p&&ul&&li&&b&表情权重&/b&&/li&&/ul&&p&上文提到人脸跟踪就是求解人脸动画的反问题：给定一个面部的数据e和Blendshapes表情基B如何反求表情权重d，通过上面的方法我们得到了个性化的Blendshapes表情基B，那么给定一个面部数据e，我们就可以通过优化方法求得表情权重d，即 &img src=&http://www.zhihu.com/equation?tex=argmin_d%7C%7Ce%E2%88%92%28Bd%2Bb%29%7C%7C%5E2& alt=&argmin_d||e-(Bd+b)||^2& eeimg=&1&& 之类。这里值得注意的是这个公式只是一个示意，实际算法中会考虑多种能量函数，包括空间深度信息：&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-811fd9cf55e26bc67b05ad4a42c4bb0c_b.jpg& data-rawwidth=&118& data-rawheight=&99& class=&content_image& width=&118&&&/figure&&blockquote&depth-没错，这就是Hao Li&/blockquote&&p&彩色纹理信息：&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-183e42e1b0bdda48e11e8_b.jpg& data-rawwidth=&119& data-rawheight=&104& class=&content_image& width=&119&&&/figure&&blockquote&texture-没错，这也是Hao Li&/blockquote&&p&还会考虑时空的信息，结合前几帧的信息进行优化：&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-90ef98cfe9d946_b.jpg& data-rawwidth=&679& data-rawheight=&140& class=&origin_image zh-lightbox-thumb& width=&679& data-original=&https://pic3.zhimg.com/v2-90ef98cfe9d946_r.jpg&&&/figure&&blockquote&spatial-temporal-没错，还是Hao Li，本图仅作示意，并非实际连续帧&/blockquote&&p&之后，通过一些优化算法即可得到表情权重d，也就是我们想要求解的跟踪参数。（对算法有兴趣的朋友可以参照Reference中的论文内容）&/p&&h2&结语&/h2&&p&至此，我们浅显地分析了一下这回iPhone X上的Animoji的技术背景。我们可以看出，这些酷炫的黑科技背后都是无数科研人员的灵感，分析，和实现，优化的漫长循环。能做出如此炫目的工作的Hao Li，Thibaut Weise，Sofien Bouaziz，Mark Pauly和他们在ETHZ，EPFL，FaceShift，Apple同事们也真的值得大家尊敬和仰慕。&br&另外值得注意的是，不光Mark Pauly组在做这方面的研究，浙大的周昆老师团队也有像Face Warehouse等等许多十分杰出的人脸动画和跟踪的工作，发布会中演示的Snapchat的酷炫的人脸动画：&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-7ae_b.jpg& data-rawwidth=&120& data-rawheight=&231& data-thumbnail=&https://pic2.zhimg.com/v2-7ae_b.jpg& class=&content_image& width=&120&&&/figure&&blockquote&Snapchat-来自苹果发布会&/blockquote&&p&也有我们华人研究者的参与，我们将来可能也会写点东西来介绍他们的工作（或者作者们自己出来写也说不定呢）。&/p&&h2&Reference&/h2&&p&[1] &a href=&http://link.zhihu.com/?target=https%3A//vfxblog.com//so-about-those-iphone-animojis/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&vfxblog.com//&/span&&span class=&invisible&&so-about-those-iphone-animojis/&/span&&span class=&ellipsis&&&/span&&/a&&br&[2] &a href=&http://link.zhihu.com/?target=http%3A//chronicdoodler.deviantart.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Chronicdoodler.deviantart.com&/a&&br&[3] &a href=&http://link.zhihu.com/?target=http%3A//www.hao-li.com/cs599-ss2015/slides/Lecture15.1.pdf& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&hao-li.com/cs599-ss2015&/span&&span class=&invisible&&/slides/Lecture15.1.pdf&/span&&span class=&ellipsis&&&/span&&/a&&br&[4] &a href=&http://link.zhihu.com/?target=http%3A//sofienbouaziz.com/publications.php& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&sofienbouaziz.com/publi&/span&&span class=&invisible&&cations.php&/span&&span class=&ellipsis&&&/span&&/a&&br&[5] &a href=&http://link.zhihu.com/?target=http%3A//www.hao-li.com/Hao_Li/Hao_Li_-_publications.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://www.&/span&&span class=&visible&&hao-li.com/Hao_Li/Hao_L&/span&&span class=&invisible&&i_-_publications.html&/span&&span class=&ellipsis&&&/span&&/a&&br&[6] &a href=&http://link.zhihu.com/?target=http%3A//gaps-zju.org/facewarehouse/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&gaps-zju.org/facewareho&/span&&span class=&invisible&&use/&/span&&span class=&ellipsis&&&/span&&/a&&/p&&p&&br&&/p&&p&作者： &a class=&member_mention& href=&http://www.zhihu.com/people/124c6b0ebea66fabc28e3& data-hash=&124c6b0ebea66fabc28e3& data-hovercard=&p$b$124c6b0ebea66fabc28e3&&@origami dance&/a&， &a class=&member_mention& href=&http://www.zhihu.com/people/dfe7d0f3baa8a5ffacc03e0& data-hash=&dfe7d0f3baa8a5ffacc03e0& data-hovercard=&p$b$dfe7d0f3baa8a5ffacc03e0&&@张远&/a&，王士玮，方清&/p&&p&&br&&/p&&p&&b&果壳中的宇宙系列文章：&/b&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&果壳中的宇宙-IPHONE X的FACE ID和TRUE DEPTH CAMERA分析-硬件篇&/a&&/p&&p&&a href=&https://zhuanlan.zhihu.com/p/& class=&internal&&果壳中的宇宙-IPhone X的Face ID和True Depth Camera分析-Animoji篇&/a&&/p&&p&_(:3」∠)_ _(?ω?”∠)_ _(:з)∠)_ ∠( ? 」∠)＿ _(:зゝ∠)_&br&请毫不犹豫地关注我们：&br&我们的网站：&a href=&http://link.zhihu.com/?target=https%3A//graphicon.io/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GraphiCon&/a&&br&知乎专栏：&a href=&https://zhuanlan.zhihu.com/graphicon& class=&internal&&GraphiCon图形控&/a&&br&微信公众号：GraphiCon&/p&&figure&&img src=&https://pic1.zhimg.com/v2-3850f35adecd7c208c615c0_b.png& data-rawwidth=&430& data-rawheight=&430& class=&origin_image zh-lightbox-thumb& width=&430& data-original=&https://pic1.zhimg.com/v2-3850f35adecd7c208c615c0_r.jpg&&&/figure&&p&如果你有什么想法，建议，或者想加入我们，你可以：&br&给我们发邮件：&a href=&mailto:hi@graphicon.io&&hi@graphicon.io&/a&&br&加入我们的QQ群：SIQGRAPH（）&br&加入我们的slack群：&a href=&http://link.zhihu.com/?target=https%3A//graphicon.herokuapp.com/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GraphiCon&/a&&br&GraphiCon长期接受投稿，如果你想投稿给我们可以通过上面的方式联系我们！&/p&&figure&&img src=&https://pic3.zhimg.com/v2-885fb112fbdbe_b.png& data-rawwidth=&88& data-rawheight=&31& class=&content_image& width=&88&&&/figure&&p&本作品采用&a href=&http://link.zhihu.com/?target=http%3A//creativecommons.org/licenses/by-nc-nd/4.0/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议&/a&进行许可。&/p&&p&如需转载请署名。&/p&&p&&/p&
这是我们果壳中的宇宙-IPhone X的Face ID和True Depth Camera分析系列的第二篇，第一篇链接在此，这回我们就来聊聊iPhone X上另一个令人惊讶的新功能-Animoji。本文主要进行浅显的分析，更多…
&figure&&img src=&https://pic4.zhimg.com/v2-d0b5de0c8fa34ca5b9e506ad8aad4a23_b.jpg& data-rawwidth=&670& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-d0b5de0c8fa34ca5b9e506ad8aad4a23_r.jpg&&&/figure&&h2&从圆角到圆角&/h2&&p&iPhone 一直都是关于屏幕，Steve Jobs 在 2007 年发布会上就将第一代 iPhone 的 3.5 吋显示屏称为“巨大的屏幕”，而在 iPhone &a href=&https://link.zhihu.com/?target=https%3A//www.cultofmac.com/488008/jony-ive-book-excerpt-iphone/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&设计最初阶段&/a&也同“无边泳池”这个意象相关联，所有的设计元素遵从于屏幕而不能让用户分心，全屏幕设计的 iPhone X 将对这一理念的执行提到具有划时代意义的高度之上，由 iPhone X 划分前后两个时代。&/p&&p&但是仅一块大屏幕无法开启未来，屏占比和边框宽度之类的参数指标无法用来作为时代划分的依据，用户的认知并非受控于一些参数条，从 89% 增大到 90% 对用户来说并没有质的改变。质的改变必须作用于用户的认知，不是用语言上的假象或者宣传手段来说服，而是用真象和产品，递出一把钥匙，也就是设计。&/p&&p&一个革命性的产品背后有大量的技术的支撑，每一处创新的实现背后又有大量的繁杂的具体工作，但是用户认识到的却是产品的“&a href=&https://link.zhihu.com/?target=http%3A//www.hi-id.com/%3Fp%3D3098& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&外在形象&/a&”，这个外在形象具有自明性，并非技术使然，用户认识到的产品的外在形象与技术无任何关系，比如用户认识到的手机就是它的外在形象，手机里面的 CPU 或者制作这款手机的工艺等对用户来说没有意义，因此，设计师工作的两面性在于，台前，需要将外在形象与背后的技术相隔离开，幕后，则需要为实现这个外在形象去与背后的技术形成关联。我们看到的那些炫技的设计，就是设计师期望外在形象与背后技术形成关联，以及我们经常能见到的那些以参数为目标的设计，也是如此。&/p&&p&产品的外在形象越简洁越易识别，越脱离技术关联就越有说服力。&/p&&p&很多手机厂商在宣传自己的大屏幕手机时，总会使用到一个手段，比如是平面广告还是视频上，那就是让手机屏幕内的内容与所处的背景融合在一起，让人感觉手机消失了，或者说边框消失了，这种宣传手段在强调的恰恰是手机的技术参数一面，而与“外在形象”没有太大关联。&/p&&p&iPhone X 上脱离了技术关联的就是全屏幕，而塑造 iPhone X 的全屏幕外在形象最重要的设计特征就是四个圆角。柔性 OLED 屏幕的切割和折叠，相应的电路堆叠技术，或者是圆角处的次像素反走样渲染等等技术内容，对厂家来说，可以用此辅助来向用户说明自己创新的独特之处，但对于用户来说，真正关心的只有外在形象，也就是这块独特的圆角全面屏。通常来说，如此大的圆角的屏幕是反技术的，不符合技术的理性导向，也就是为什么它需要更多额外技术支撑的原因，但在产品之上，在用户关心的外在形象之上，这个圆角屏幕却是非常自然的结果，依照手机的形态形成的均一的屏幕外轮廓符合全面屏的概念；而另外一面，突破常规的形象（屏幕总是四四方方的）则又能表现出它的革命性。&/p&&p&Apple 标志性的圆角曲线在 iPhone X 的应用，将其划时代的意义通过外在形象向前推了一大步，并与其他厂家的类似产品形成差距，人们将进一步认为 iPhone X 才是真正的全面屏，而其他的设计，如屏幕的外轮廓没有追随机身形态，都会被认为不够彻底的。与此同时，如果屏幕的圆角很小，它就更像一个技术革新产品，无法脱离技术关联感，也就是无法为用户的认知带来革新。在 iPhone X 上，屏幕的圆角，以及因这个圆角形成的整体形象的重要性，从 Apple 对屏幕上端的缺口处理就可以得到验证。从 Apple 的产品图和宣传资料上看，对屏幕的缺口（Notch）不仅毫无掩饰，而且还加以强调和渲染，为突出 Face ID，为形成一个标志性的视觉元素，也是以不避讳的方式在强调全屏幕形象。我们甚至可以确定，iPhone X 上端屏幕缺口两侧的圆角区域，就是为了营造“外在形象”，从功能、技术和理性层面来说，更倾向于将屏幕上端做齐平而无缺口，这个外在形象是如此重要，Apple 甚至在软件界面上也不去对这个缺口作过多的掩饰。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-b4c38c52d27f9190ab2a_b.jpg& data-rawwidth=&670& data-rawheight=&356& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-b4c38c52d27f9190ab2a_r.jpg&&&/figure&&p&&br&&/p&&p&如我们所知，从 iOS 开始，Apple 将产品上的圆角曲线应用到界面之上，主要是围绕着圆角四边形的图标上，而从 iPhone X 上的 iOS 11 上可以看到，在界面上加入了更多圆角曲线的元素，就像上图所示的一角所展示，从外到内，形成了一层层更加连续的多度，从最外侧的圆角开始一直等距递进到电话图标，如果去仔细核算，这个角落可以数出至少 7 条等距圆角曲线。&/p&&p&到处都是圆角。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-66ccbe6ab27a81e42138b_b.jpg& data-rawwidth=&640& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic1.zhimg.com/v2-66ccbe6ab27a81e42138b_r.jpg&&&/figure&&p&&br&&/p&&p&早期的计算机采用的是 CRT 显示器，而 CRT 显示器是用真空玻璃管做成的，要保证它的安全和密闭性，以及可制造性，CRT 显示器玻璃要做成凸面的，而且四周的外轮廓并非四四方方，而是向外凸的弧线形成的四边形，四个角当然就为圆角，所以，早期的 CRT 显示器基本都是外凸并且四角都有大圆角。&/p&&p&上图分别是 1981 年的 Xerox Star 8010 和 1984 年的 Macintosh 电脑，可以看出当时围绕着屏幕的设计是如何抵消弧面屏幕的反直觉性，通常的方式就是用罩壳圈出一个相对四方的显示区域，比如 &a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Xerox_Alto& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Xerox Alto 那样&/a&，而四角的圆角处理可以让显示区域显得更平（因为四角形态收缩更厉害）。Xerox Star 8010 在罩壳下都为内容显示区，而 Macintosh 则有大的黑边，内容显示区域面积更小也更为平坦，Macintosh 上的这个黑边为界面显示黑色，并非显像管上的非显示区，与“用黑色来掩盖 iPhone X 上的屏幕缺口”同理。&/p&&p&Macintosh 界面四周有小小的圆角，可以看出是经过设计的圆角。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-3b014d296b1986176ddd31_b.jpg& data-rawwidth=&640& data-rawheight=&273& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&https://pic4.zhimg.com/v2-3b014d296b1986176ddd31_r.jpg&&&/figure&&p&&br&&/p&&p&左图为 1983 年发行的 Lisa Office System 3.1（图片来自 &a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Apple_Lisa& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Wikipedia&/a&），可以看到界面的四角，以及计算器的界面轮廓都出现了圆角四边形。&/p&&p&按 Andy Hertzfeld 在 &a href=&https://link.zhihu.com/?target=https%3A//www.folklore.org/ProjectView.py%3Fproject%3DMacintosh%26sortOrder%3DSort%2Bby%2BDate& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&The Original Macintosh&/a& 中所写，Apple 在软件界面上出现圆角四边形可以追溯到 1981 年，Andy Hertzfeld 在 &a href=&https://link.zhihu.com/?target=https%3A//www.folklore.org/StoryView.py%3Fproject%3DMacintosh%26story%3DRound_Rects_Are_Everywhere.txt& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Round Rects Are Everywhere!&/a& 这一节中说到了圆角四边形诞生时的故事。当时 Apple 的天才程序员 Bill Atkinson 正向团队展示他是如何用一种聪明的方法可以在仅有 68000 处理器的 Lisa 和 Macintosh 机器上快速画出圆和椭圆，Steve Jobs 看了之后有另外的想法，他说：“圆和椭圆都不错，但是能画出带圆角的四边形吗？我们现在也能画出吗？” Bill Atkinson 回答说很难做到，而且他认为并不真需要圆角四边形，Steve Jobs 就立刻强烈回应了：“到处都是圆角四边形！看看这个房间周围就知道了！”并且还带着 Bill Atkinson 出去转看可以碰到多少圆角四边形，最后 Bill Atkinson 被说服，第二天下午就拿出了满意的结果。&/p&&p&接着，圆角四边形在 Apple 的软件界面上到处都是了。&/p&&h2&iOS 的圆角图标&/h2&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-bcdead524a514_b.jpg& data-rawwidth=&670& data-rawheight=&332& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-bcdead524a514_r.jpg&&&/figure&&p&&br&&/p&&p&2013 年随着 iOS 7 的发布，Apple 将 iOS 上的标志性的圆角图标轮廓作了更新，将工业设计中的曲线连续概念应用到了视觉设计之上，iOS 7 之前的圆角图标，也包括通常的平面设计软件中绘制的圆角四边形，圆角部分为一段圆弧，那么在直线和曲线的连接点处曲率从 0 立刻过渡到一个恒定的数值，带来的视觉感觉就是过渡不顺畅，保证顺畅就需要让直线到曲线过渡中形成一个连续的变化，从 0 逐渐地过渡到某个数值，而不是从 0 跳动到某个数值。在实际操作中，并非一件简单的事，曲线的过渡也是一件讲究技艺的事，也要求一定的&a href=&https://link.zhihu.com/?target=http%3A//www.hi-id.com/%3Fp%3D3146& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&数学意识&/a&。&/p&&p&iOS 7 在介绍新的圆角图标轮廓时，给出了上图右的一张线框示意图，图中在圆角处密密麻麻的点让人感到困惑，并非难以逆向破解，由于最近 Apple 在 UI Design Resources 上给出了 &a href=&https://link.zhihu.com/?target=https%3A//developer.apple.com/design/resources/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&iOS UI 素材的下载&/a&，里面包含了这个圆角图标轮廓的矢量图，我们可以通过这个矢量图可以挖掘到一些信息。&/p&&p&&b&简单的概念&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-2f15f7f45be632f5fb220f21e3fd9a6f_b.jpg& data-rawwidth=&670& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic2.zhimg.com/v2-2f15f7f45be632f5fb220f21e3fd9a6f_r.jpg&&&/figure&&p&&br&&/p&&p&在前文《&a href=&https://link.zhihu.com/?target=http%3A//www.hi-id.com/%3Fp%3D3231& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&J 的艺术，R 的艺术&/a&》已经对曲率连续一些基本概念作过介绍，在此稍作重复一下。&/p&&p&上图 a 为 1/4 圆弧过渡的圆角，iOS 7 之前的圆角图标，通常平面软件绘制的圆角四边形，以及通常我们称作“导圆角”，都为上图 a 所示的方式。因为直线的曲率为 0，而圆弧的曲率为一固定值，所以从直线到圆弧有曲率的突变，虽然是切线连续（G1 连续），但是无法达到曲率连续（G2 连续），这种过渡的不顺畅我们可以通过视觉很明显地感觉到。&/p&&p&上图 b 为用一段曲线替代了 1/4 圆弧作过渡，绘制时要求连接直线的两端达到曲率连续，即这段曲线的曲率是从两端的 0 逐渐连续的增大的，我们能够从图形的四个角上看到过渡顺畅，但是，存在一个问题就是，看上去四个角不够圆了。虽然光滑但不够圆，我们也可以从曲率的示意图中观察到，这条曲线曲率的变化不具备圆的特征，因为圆的曲率处处相等，均质而统一的。&/p&&p&我们需要做的是将上面两种情况进行综合，曲线与直线连接端来保证过渡的顺畅，而尽可能提到曲线的圆度，即让曲线中间段的部分曲率的变化极为缓和，接近圆的均质统一的曲率特征。&/p&&p&上图 C 就是采用这种策略的一种示意，曲线两头连续过渡，中间部分过渡缓慢，接近均等。&/p&&p&但是上图 C 所示仅为一个粗略的示意，在实际的工作中，要求将会比这更高，比如说对圆度的要求到底是要多高，甚至包括曲率过渡是以怎样的速度或加速度来进行也可能需要在考虑之中，另外也将牵涉到数据的传递，比如从设计到生产，如何来保证形状在传递过程中的保真性。&/p&&p&但我们先否定几个通常对 iOS 圆角图标的猜测。&/p&&p&&b&iOS 圆角图标不是超椭圆&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic3.zhimg.com/v2-9b4e308e9cfcabe802ef_b.jpg& data-rawwidth=&670& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic3.zhimg.com/v2-9b4e308e9cfcabe802ef_r.jpg&&&/figure&&p&&br&&/p&&p&一个有趣的现象是，逆向如果是更多依赖于猜测，会发现结果就是指向自己的假设，而在讨论 iOS 圆角图标是怎样的图标和曲线，或者去拟合产品上的曲线，甲乙丙丁走向不同方向，而且谁都认为自己是正确的，而且一看拟合结果，严丝合缝。&/p&&p&比如 iOS 7 发布不久，&a href=&https://link.zhihu.com/?target=https%3A//twitter.com/marcedwards/status/213633& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&有人认为&/a&是超椭圆（&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Superellipse& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Superellipse&/a&），可能不少人看到超椭圆这个吓人的专业词就认为八九不离十了，而且一看两者&a href=&https://link.zhihu.com/?target=https%3A//imgur.com/RfAk1lv& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&相拟合的图&/a&，严丝合缝，而且还给出如何在&br& Photoshop 中使用的指南，但是殊不知平面软件使用的 3 阶贝塞尔曲线，而拟合用到的却是一个 5 次方程式。其实超椭圆从头到尾都是曲线，而没有一条直线段，iOS 7 的圆角图标明显有直线部分，如果连这都能匹配上，可想而知用视觉来判断是否高度拟合是多么不可信。&/p&&p&如 &a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Superellipse& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Wikipedia 所述&/a&，超椭圆是椭圆函数的一般化，即当曲线阶数为 2 的时候为椭圆，当阶数为 4 的时候，如上图左所示为方圆形（&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Squircle& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Squircle&/a&），介于圆和方之间图形（Nokia 的 MeeGo UI 图标被认为是类似 Squircle ），上图右为阶数为 5 的曲线。&/p&&p&从视觉上就能看出超椭圆是曲线，找不到具有圆度的地方，从曲率分布示意图就可以看出，曲率总是在连续过渡，而且阶数越高加速度就越大，即曲率过渡的光滑程度越高。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-6bd879ec77fc9d88f2429_b.jpg& data-rawwidth=&670& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic2.zhimg.com/v2-6bd879ec77fc9d88f2429_r.jpg&&&/figure&&p&&br&&/p&&p&与超椭圆有些类似的是 Rhino 里一个圆角工具（右键点击），圆锥曲线圆角四边形，是用一段圆锥曲线（二次曲线）绘制成 1/4 图形，圆锥曲线圆角四边形的一端极值为圆，而另外一端极值为直角四边形，所以圆锥曲线圆角四边形是不具有圆度的曲线。圆锥曲线因为阶数不高，所以曲线的数学结构较简单，适合绘制一些不圆不方的图形，可以与上面的超椭圆曲线来比较，就会发现圆锥曲线圆角四边形的线条的塑造能力不及高阶的曲线，即一个跨度内曲线的形态塑造能力非常有限，所以除了特殊要求，通常很少用到这一类曲线。另外由于它是二次曲线，所以数据输出的时候需留意。&/p&&p&&b&iOS 圆角图标不是羊角螺线&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-500d16a8f7d6c72f2a0de914e85d18d1_b.jpg& data-rawwidth=&670& data-rawheight=&360& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-500d16a8f7d6c72f2a0de914e85d18d1_r.jpg&&&/figure&&p&&br&&/p&&p&羊角螺线（&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Euler_spiral& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Euler spiral&/a& 或者 Cornu spirals）同上面类似，如果来拟合 iOS 的圆角图标，也可能会达到高度匹配的结果，但实际并不是。&/p&&p&以前羊角螺线常用于公路和铁路工程之上，“以缓和直路线与圆曲路线之间的曲率变化”（&a href=&https://link.zhihu.com/?target=https%3A//zh.wikipedia.org/wiki/%25E7%25BE%258A%25E8%25A7%%259E%25BA%25E7%25BA%25BF& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Wikipedia 介绍&/a&）。而羊角螺线的主要特征是，它的曲率从 0 开始，而且是随着曲线长度（弧长）增大而线性增大，所以当一条羊角螺线的尾部与一个圆形相连时，那么这条曲线肯定是曲率连续的。如上图右所示的两种图形，一条为与圆相连（圆角四边形内部），一条为一段羊角螺线的镜像连接（圆角四边形，左上角），它们都是曲率连续的（G2 连续）。&/p&&p&正因为羊角螺线的这个特性，随着曲线长度的增大曲线呈线性增大，让其具有不少应用之处。在上图右中，虽然我们看到了曲率的变化率曲线（红线）具有尖点和不连续性，但是曲线本身（低一阶次）是光滑连续的。上图右的圆角四边形左上角使用的是一段羊角螺线的镜像连接，它的曲率从 0 线性增大到某个值，然后又降回到 0，按我们上面的基本概念中介绍，这样的曲线是不具有圆度的。&/p&&p&那么羊角螺线既然有这样的特征，我们可以在中间加入一段圆弧，如上图右的圆角四边形的右上角所示，就得到了一个连续的圆角，而且圆度有保证，首尾与直线段也是曲线连续，而且三段曲线形成的圆角的曲率的变化率，虽然不是连续的，但也是非常简单的数学结构，从 0 增大到某一数值，停留，然后再降到 0。而羊角螺线可以用三次曲线来趋近，那么在实际的应用中就有相应的方便之处，比如在平面的矢量绘图软件中使用，来绘制类似 iOS 圆角图标的曲线连续圆角四边形。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-9e82dccada0a_b.jpg& data-rawwidth=&670& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-9e82dccada0a_r.jpg&&&/figure&&p&&br&&/p&&p&方法是，从 Wikipedia 可以下载到满足使用的&a href=&https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Euler_spiral& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&羊角螺线矢量图&/a&（SVG），然后就是定义圆角曲线中圆弧的大小是多少，然后确定这段圆弧占圆角曲线总长度，也就是画好如上图 1 所示的图形，然后按如图 2 所示画出圆弧一端的切线和法线，并画出直线的垂线，形成一个类三角形，接着将这个类三角形移到羊角螺线之上，定好位置，如图 3 所示，然后移动斜线，找到这条斜线与羊角螺线的相切位置，切断羊角螺线如图 4 所示，得到一段羊角螺线，作放大或缩小动作，装入圆角曲线的圆弧两头，完毕如图 5 所示。&/p&&p&这种绘制方法可以方便地在平面软件内完成，因为目前平面软件没有其他相应的工具来直接或辅助绘制这样的圆角四边形，即保证曲率连续又保证圆度。那么曲线推敲的关键在于确定圆弧段的大小以及占整体曲线长度的比率。&/p&&p&用羊角螺线以这种方式（两端羊角螺线中间圆弧）绘制的圆角四边形的缺点有两个，一个就是形成的整条曲线它的曲率连续但曲率的变化率不连续，第二个就是羊角螺线段的曲率增大是线性的，所以虽然曲率具有加速度但曲率的变化率是恒定的。当对曲线的品质有更高要求时，或者是在三维产品上实现时，不仅对产品的形态还对产品的高光等光学表现有要求时，就可能需要用到更加光滑和连续的曲线了，因为重要的是，这一切的区别都有可能被眼睛看到。&/p&&p&&b&iOS 圆角图标&/b&&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-dcb359c4e14ffdbd7822_b.jpg& data-rawwidth=&670& data-rawheight=&450& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-dcb359c4e14ffdbd7822_r.jpg&&&/figure&&p&&br&&/p&&p&Apple 的 &a href=&https://link.zhihu.com/?target=https%3A//developer.apple.com/design/resources/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&UI Design Resources&/a& 网页上，提供了 iOS 的 UI 素材下载，在素材里面提供了 iOS 圆角图标的矢量图，可以导入各种绘图软件中使用，而且提供的矢量的布点方式和 iOS 7 发布时对圆角图标描述的布点一样，所以这个矢量图的原真性就可以得到确认。&/p&&p&iOS 的圆角图标从宏观上看由 4 条直边和 4 条曲线形成的圆角组成，从圆角曲线的曲率变化示意图中可以看到它符合我们上面说的要求，即首先是曲率连续的曲线，然后能够保证曲线的圆度，让它看起来就像圆弧一样，另外我们也可以看到曲率变化具有加速度，曲率变化的状态大致可以分成五个阶段，第一阶段，也就是接近直线处，以缓慢的速度增加曲率，到达某一值进入第二阶段，也就是快速增长阶段，达到一定程度后，就连续光滑地过渡到第三阶段，以极其平缓的速度变化几乎匀速一般，也就是圆弧阶段，之后的变化过程就是反方向，第四阶段是快速降低，第五阶段是缓慢降低到&br& 0。&/p&&p&在圆角处“缓慢—加速—平缓—加速—缓慢”的变化轨迹是典型的，但具体到应用上亦要看具体情况，并不是做到同 iOS 圆角图标的曲率变化曲线就能符合各种要求的。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5f53ee661f81e7b6cfc2e38_b.jpg& data-rawwidth=&670& data-rawheight=&386& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-5f53ee661f81e7b6cfc2e38_r.jpg&&&/figure&&p&&br&&/p&&p&iOS 的圆角图标在圆角处的曲线有 11 个分割点分成了 10 段曲线，它们都为 3 阶贝塞尔曲线，如果仔细看这 10 段曲线，会发现它们前后相连并非是严格的曲率连续（G2 连续），看曲率示意图在相邻的两端曲线见，曲率的数值有略微的跳动。并不是形成了尖点，而是有台阶段差，如上图蓝色圆圈处所示，这些台阶段差在每两段前后相连的曲线交点处都能找到，只不过太小在上图无法看出。&/p&&p&虽然再严格的数学意义上来说，这样的曲线连接只能达到切线连续（G1 连续），但是我们谈论是否达到一种标准，还要看公差范围，如果在公差范围内，那么它就是曲率连续。而更为重要的是，我们要从宏观上从视觉上从实际应用中去判断，所以有这样的台阶段差在这对曲线的光滑没有影响。&/p&&p&那么这些线段和段差是如何生成的呢？我们先来分下一下圆角处的曲线。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-f4122baa574c302c12b5_b.jpg& data-rawwidth=&670& data-rawheight=&386& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-f4122baa574c302c12b5_r.jpg&&&/figure&&p&&br&&/p&&p&如上图所示，我们对分段的曲线进行测量，测量它的曲线长度（弧长），会发现上图所标的这些线段的长度都是完全一样的，除了靠近直线端的两条曲线段，它是作了再次的分割。&/p&&p&而这个再次的分割，将一段曲线长度为 a 的曲线分成两段曲线，曲线长度分别是 0.46*a 和 0.54*a，这个切割方式看上去很随机，推断有三种可能性：一种为作者留下的签名，可用来追踪（万一被他人侵权使用）或其他作用；第二种可能是留下的干扰因素，来干扰逆向；第三种可能是为了保证数据在传输过程中的安全和保真性。&/p&&p&&br&&/p&&figure&&img src=&https://pic2.zhimg.com/v2-53a5329acbe131e551bc7e0db6b1f7af_b.jpg& data-rawwidth=&670& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic2.zhimg.com/v2-53a5329acbe131e551bc7e0db6b1f7af_r.jpg&&&/figure&&p&&br&&/p&&p&上图是保证数据传递中的安全和保真性的一个例子，第一条曲线为 5 阶曲线与直线曲率连续，所以交点位置的曲率为 0，如果这条曲率连续的曲线不作处理，传递给最高只有 3 阶曲线的软件，那么曲线转化过程中很有可能变成中间这样，如蓝色所示位置曲线弯曲方向发生了变化，为了避免这种转化过程中不必要的错误发生，在一些极值处，比如从 0 开始的变化，将其设置到一个与 0 接近的数值，比如上图所示，可以给其一个非常微弱的曲率。（注：此为个人经验，并未经过理论上的验证）&/p&&p&我们可以不必去追究 0.46*a 和 0.54*a 的由来，因为我们能确定的是 iOS 的这写曲线段的曲线长度（弧长）是均等的，而且都是 3 阶曲线。那么，首先能否定的，这个图形肯定不是设计师一条接一条画出来的，也不是由程序自动生成的，因为这 10 段曲线是太多可能性里面的一种，所以合理的解释就是通过其他曲线，更高阶的曲线，转换为多段的 3 阶曲线，而这个转换过程是以均等曲线长度为依据的，也就达到上述的多段曲线长度为 a 的曲线组成的圆角。&/p&&p&那么为什么不用 3 阶多段的曲线来直接绘制呢？因为 3 阶曲线&a href=&https://link.zhihu.com/?target=http%3A//help.autodesk.com/view/ALIAS/2018/ENU/%3Fguid%3DGUID--8E7F--A& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&内部最多只满足 G2 连续&/a&，所以无法用它来有效的绘制顺畅的曲线，如果要使用多段的曲线就需要用到高阶曲线，比如 5 阶或 7 阶。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8a25af6ef4f3cbde57d96_b.jpg& data-rawwidth=&670& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-8a25af6ef4f3cbde57d96_r.jpg&&&/figure&&p&&br&&/p&&p&iOS 圆角图标是如何来保证圆度的呢，我们可以看一下圆角部分最中间的两段曲线，按照上面长度的关系，中间两段曲线占总曲线长度的 1/4。我们能看到一段曲线两侧的 R 值有微弱的差别，可以说明这两段设计师就是以圆弧来要求的，但是为什么会不一样，因为是用 3 次曲线来逼近圆弧，如果使用 2 次曲线就可以画出曲率完全均等的圆弧，但是 2 次曲线的引入，将为后续图形的追加以及数据传递带来不可预见的复杂性，在 3D 相关的设计中，绝大多数的场景中，都需用 3 次曲线来绘制圆弧，基本上的软件都提供 3 次曲线绘制圆形的工具。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-134e4a0f5d5a487ab7d7d52ee3961da2_b.jpg& data-rawwidth=&670& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-134e4a0f5d5a487ab7d7d52ee3961da2_r.jpg&&&/figure&&p&&br&&/p&&p&因此，绘制问题就如上图所示，需要事先确定的就是 X、R 和 L 的值，这些数值的确定就是这个圆角的设计工作。X 就是直线一端与圆弧圆心的距离，X 肯定为正值数字，用圆弧来形成的圆角，就是此前提到的 G1 连续圆角，X 值为 0。R 代表的圆角的大小，但因为我们要作的是曲率连续的圆角，使用到的一端圆弧小于 1/4，即上图的 L 值，所以在设计 R 的大小时并不能完全依赖于 G1 连续圆角的感觉。X、R 和 L 值的确定是需要反复推敲，不断画草稿来寻找的过程。&/p&&p&一旦 X、R 和 L 值确定，我们就是怎么来绘制图形的问题了。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-0e1d633ecc4f1021a9bcecb_b.jpg& data-rawwidth=&670& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-0e1d633ecc4f1021a9bcecb_r.jpg&&&/figure&&p&&br&&/p&&p&上图是达到 iOS 圆角图标最直接快速的方法。图 1 是在两个直线段之间作一条 7 阶 2 Span 的曲线，即总共控制点有 9 个控制点，7 阶曲线具有很高的塑造性，而且在此处为对称性图形，所以只需要操作 4 个控制点就能完成任务，第 2 和第 3 个控制点受制于曲率连续将与直线共线。图 2 是去拟合圆形，尤其是斜线区域内要做到高度拟合，来回操作控制点。图 3 是当曲线调整到满意后，从中间断开。图 4 是再向下断，将圆角曲线的一半断成均等的 4 等份，得到的 4 段曲线长度相同的 7 阶曲线。图 5 是将这 4 段 7 阶曲线转换为 3 阶曲线（4 个控制点），并且作微调，保证两两相接的曲线切线连续，并且将曲率的段差控制到尽可能小。图 6 就是镜像后的结果。&/p&&p&这个绘制方法的关键点在于拟合圆部分，需要靠操作控制点，亦可借助一些分析工具（比如分析最大最小曲率的差值），让曲线尽可能接近圆形。另外一个要点就是曲线要先分段再降阶，这样可以很好的控制好因降阶带来的形变，如果在第三步直接将完整的 7 阶曲线转为 3 阶 8 段曲线，不仅形状误差会超出允许公差，更糟糕的曲率变化曲线将很难达到光滑。&/p&&p&而这个方法有一个缺点就是圆的拟合部分，需要耗费操作的时间，而且圆角曲线的中点并不在事先给出的确切位置上，改进方法如下。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-d51bf8de9d5ccc_b.jpg& data-rawwidth=&670& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-d51bf8de9d5ccc_r.jpg&&&/figure&&p&&br&&/p&&p&让一段 5 阶 2 Span 的曲线一端与直线曲率连续，另外一头与中间的圆弧去作曲率连续，其余操作手法类似上一方法，均分曲线段，降至三阶曲线，微调曲率，镜像完成。&/p&&p&以上方法都是指来完成类似 iOS 图标圆角处 10 段曲线的绘制，而实际中有时候并不需要这么复杂，那么可考虑用以下方法。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-5a096dfdf0d5b72d00c2fba4dc9e069f_b.jpg& data-rawwidth=&670& data-rawheight=&550& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-5a096dfdf0d5b72d00c2fba4dc9e069f_r.jpg&&&/figure&&p&&br&&/p&&p&我们已知了三段曲线，那么直接用一条 5 阶的曲线完成直线和圆弧之间的连接，只要调整好曲线的曲率变化即可。&/p&&p&另外也可以用一条 3 阶曲线来完成，当使用 3 阶曲线时，只有一个控制点可供操作，因为另外一个控制点要满足与圆弧连续，又要与直线连续，就必然位于直线的延长线和圆弧端点处切线的交点上，所以可以拖动这个可供操作的控制点，来达到曲率连续，曲率连续的位置点存在并且只有一个，虽然用手拖动操作只能尽可能逼近，但正因为这样的特点，即如果用 3 阶曲线来完成直线和圆弧之间的曲率连续，这条 3 阶曲线是确定的，所以可以用算法来完成求解，前提是前面说到的 X、R 和 L 值确定。在但 X、R 和 L 值确定的情况下，用此方法来形成三段曲线的连接，有时效果未必很好，比如上图右下所示的 3 阶曲线段，曲率的最大值出现在内部而不是尾部，这将影响到曲线的质量，如果此情况下 X 值可以变动，即这条 3 阶曲线与直线连接位置可以微调，可能会带来较好的效果。&/p&&p&尽管用 3 阶曲线来完成圆角曲线的绘制相对简单，只需要动一个控制点，但在平面软件中来绘制，因为缺少曲率分析和呈现的模块，所以还是难以实现操作。&/p&&p&前 Apple 出色的交互设计师 Bas Ording（就像 iOS 时代的 Bill Atkinson 一样）在 2013 年申请了一项专利（2016 年获准）&a href=&https://link.zhihu.com/?target=https%3A//www.google.com/patents/US9396565& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&US9396565&/a&，专利名称是“用户图形界面元素中边界的渲染”，专利内容就是用 3 阶曲线来绘制圆角四边形，而基础正是基于这条 3 阶曲线的 4 个控制点具有约束性。&/p&&p&&br&&/p&&figure&&img src=&https://pic4.zhimg.com/v2-d511ff499ed3a1a144f3ace869d2cabd_b.jpg& data-rawwidth=&670& data-rawheight=&634& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic4.zhimg.com/v2-d511ff499ed3a1a144f3ace869d2cabd_r.jpg&&&/figure&&p&&br&&/p&&p&Bas Ording 采用算法来完成，基于 3 阶曲线与两段的直线和圆弧形成曲率连续后，这条 3 阶曲线的控制点位置的特征。他的圆角生成需要先输入圆弧段的半径，以及圆弧两边两条非圆弧曲线占圆角曲线整体弧长的比率，以这两项参数输入就可以生成圆角曲线，如果在输入四边形的长和宽，就可以生成圆角四边形。他的算法我并没全看明白，而他给出的结果是上图中的&br& Q2Q1 间的距离是 Q3Q2 的两倍，就可以看出这个算法并不能一般化，只是涵盖了某一个子集的曲线，可能他在计算过程中加入了其它限定因素。&/p&&p&&br&&/p&&figure&&img src=&https://pic1.zhimg.com/v2-f1feb88ddd00c58bca51_b.jpg& data-rawwidth=&670& data-rawheight=&480& class=&origin_image zh-lightbox-thumb& width=&670& data-original=&https://pic1.zhimg.com/v2-f1feb88ddd00c58bca51_r.jpg&&&/figure&&p&&br&&/p&&p&以上是关于 iOS 圆角图标及其实现的方法，只针对于平面的图形效果，如果来绘制一条手机的轮廓线，肯定不会使用 iOS 圆角图标那样分成 10 段 3 阶曲线，那将是另外一个更复杂的生成环境，数据的传递和实现就有更长的路径。&/p&&p&圆角是一个小细节，就跟设计本身一样，如果不在意，就没必要大费周章，但如果在意这些细节，在意曲线的质量，那追求是无止境的。&/p&&p&&br&&/p&&p&— 原文发表于 [ i D 公 社 ] 的&a href=&https://link.zhihu.com/?target=http%3A//www.hi-id.com/%3Fcat%3D1122& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&陈酿&/a&专栏 &/p&
从圆角到圆角iPhone 一直都是关于屏幕，Steve Jobs 在 2007 年发布会上就将第一代 iPhone 的 3.5 吋显示屏称为“巨大的屏幕”，而在 iPhone 也同“无边泳池”这个意象相关联，所有的设计元素遵从于屏幕而不能让用户分心，全屏幕设计的 iPhone X…
&p&苹果这样设置最主要有两个目的：&/p&&p&&b&一是保证利润&/b&&/p&&p&&b&二是话题营销&/b&&/p&&p&虽然从note7爆炸门开始，三星为首的内存厂商就开始涨价，但是实际上&b&不同容量的内存之间的物料成本和生产成本差距是在缩小的，即使内存涨价也是所有规格的内存一起在涨价，而不是只有某一规格的内存在涨价。&/b&所以，这里说的内存价格下降是内存规格之间的价差下降。在内存厂家提价的同时，为了保持足够的利润和不同内存版本之间的价差，苹果也在同步提价，从今天的消息来看（&a href=&//link.zhihu.com/?target=http%3A//iphone.myzaker.com/l.php%3Fl%3D59be0b& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&NAND 闪存大幅涨价：苹果上调 iPad Pro 价格，最高 400 元&/a&），iPad pro最多要提价50美元呐，反应到国行就是将近400元。羊毛都是出在羊身上啊。&/p&&p&&br&&/p&&p&之所以说是话题营销，是因为内存组合话题一直都时市场和消费者所关心的话题，在16G，32G，64G，128G以及如今的256G的内存组合游戏中，苹果从iPhone 6S取消32G，从16G起步的做法开始，到iPhone 7取消64G，16G，从32G起步，再到如今iPhone 8取消128G从64G起步，每一次的组合方式其实都是内存价差的缩小的结果，但是每一次都引发了市场和消费者的极大关注。甚至是从昨晚已经有媒体开始说64G内存不够用了~建议消费者去买256G的，难道这样的做法不正好符合苹果的心意吗，这也不正是苹果引发话题的高明手段吗？不过还好各大Android厂商没有学坏。。。&/p&&p&--------------------------------------------------------------------------------------------------------------------------&/p&&p&其实在去年iPhone7发布后就回答过这类似的问题了，即使放在今年来看，这个回答依旧可以作为参考。以下是去年的答案。&/p&&blockquote&首先说之前写什么会取消32G。 &br&第一，是因为内存价格下降，32G的价格和64G价格相同，所以取消了32G，直接上64G，不涉及到成本问题。 &br&第二，16G在6和6S的价格是5288，6P和6S P的价格是6088，然而64G版的价格呢，分别是，大家都知道，即使是64G比16G大了4倍，但是在今天内存价格大幅度下降的情况下，64G最多比16G贵几美元，但是反映在售价上则是高达800元，这种利润一对比就知道了，然而虽然16G起步价低，但是明显不够用，很多人会倾向于购买更大内存的版本，正是因为这种跳跃性的决策，不得不逼的购买64G版本的机器，于是苹果又可以闷声发大财了。&br&&br&最后话说回来，不知道你们最近有没有发现一些现象，即使16G被取消了，32G成为了乞丐版，但是越来越多的媒体开始造舆论说32G不够用了。&br&今年内存版本设置为32G，128G，256G的最大原因可能在于三个。 &br&一，内存价格下降，即使是128G，物料成本已经很接近于64G。所以即使是取消64G，128G降价至64G的价位销售，苹果的利润依旧能够保持。 &br&二，手机软件和系统以及照片占用空间大幅度提高，16G远远不能胜任日常使用。随着时代发展，如今32G版本甚至面临和前两年16G一样的问题。所以为了保险起见，消费者依旧会倾向于购买更大内存的版本。但是128G和64G成本又差不多，所以在保证利润的情况下，苹果采取取消64G版的销售策略。苹果也利用了消费者的消费心理。即使起步价有所提高，但是相对于以往的价格梯度来说，在iPhone 7时代同样800元的梯度能够获得比iPhone 6时代800元梯度多一倍的内存容量，这在消费者眼中无疑是划算的，毕竟128G和以往64G价格一样，但是多了整整一倍空间啊，当然买128G啦。 &br&三，应对市场压力。要知道，今年的7在外观上几乎没有改变，仅仅是相当于一个S级的升级，甚至毫不客气的可以将7称为6SS。再加上安卓阵营的步步紧逼，使苹果不得不采用看似优惠的销售策略。&br&&br&以上。&br&编辑于 &br&著作权归作者所有&/blockquote&
苹果这样设置最主要有两个目的：一是保证利润二是话题营销虽然从note7爆炸门开始，三星为首的内存厂商就开始涨价，但是实际上不同容量的内存之间的物料成本和生产成本差距是在缩小的，即使内存涨价也是所有规格的内存一起在涨价，而不是只有某一规格的内存…
&p&就是为了钱.jpg&/p&&blockquote&沉寂已久的回答突然又多了两千赞…原来有人专门开文说我瞎逼逼，大概突然多的赞全是被那边恶心过来的吧……&br&洗的天花乱坠，不辞劳苦图文并茂，仔细一看还是“加量不加价”的老调调，&b&数码产品性能逐年提升这不是废话吗，用得着你来证明？&/b&你咋不说前年买A9去年买A10今年买A11呢？&br&再仔细一看，为了洗地连售价都改了，到底是谁在瞎逼逼？ &a class=&member_mention& href=&//www.zhihu.com/people/443ed61e0& data-hash=&443ed61e0& data-hovercard=&p$b$443ed61e0&&@徐来清&/a& 说的就是你，狂删反对者的评论，YY的一本满足。&/blockquote&&p&&br&&/p&&p&苹果的策略简单粗暴：&b&哪个容量版本最受欢迎，就砍掉哪个版本&/b&，逼着你加钱买多一倍的大容量，或者买完小容量后悔不迭，下代一出马上滚去买大容量。&/p&&p&成本以前有人分析过了，（果6时代）售价增加RMB800元，成本只增加约100元，多赚你700，无论哪一代，大容量版本的利润都明显高于小容量版本。&/p&&p&只有乞丐版和富豪版，没有中产版，就像饭店只有馒头咸菜和松露鹅肝一样，你说爽不爽。&/p&&p&&br&&/p&&p&还记得当年的iPhone6吗？2014年下半年。&/p&&p&当时的情况是16G捉襟见肘，64G又有些浪费，最常见的容量就是32G，同时期安卓旗舰机几乎全都是32G。——这时苹果把32G这个规格砍掉，&b&16G直接跳到64G&/b&。还记得当年的16G开始被称作“乞丐版”，很多人用不到一年就抓狂了。&/p&&p&&br&&/p&&p&然后在iPhone6S发布大概半年多之后，2016年上半年。&/p&&p&当大家都适应了64G，按照64G的使用习惯去使用手机的时候，6S的产品线悄悄把64G砍掉了，&b&32直接跳到128&/b&，此时距离苹果砍掉32G版本恰好一年半，传说中的摩尔定律周期。&/p&&p&然后iPhone7发布，果然也没有64G版本，也是&b&32直接跳到128&/b&，逼着用户买128G，同年新产的6S也是如此。&/p&&p&（评论区手持64G6S的能看清楚再怼吗，6S卖了半年多之后，在次年6月左右才停产了64G，9月初才正式下架，你们买到64G有什么奇怪的，可以现在去官网验证一下还有64G吗。而且这个确切的时间跟问题一点关系都没有好吗）&/p&&p&&br&&/p&&p&现在轮到iPhone8了，2017年下半年。&/p&&p&128G版本已经驯养了大批消费者一年半之久，又该宰了，于是结果你们看到了，砍掉128，&b&64直接跳到256&/b&。距离上次砍掉64的时候又是一年半，又是一个摩尔定律的周期。&/p&&p&&br&&/p&&p&苹果以13%的市场占有率，拿下了90%的利润，果然是一骑绝尘。&/p&&hr&&p&评论区有人说相当于“用同样的价格买到更大容量的手机”，来回来去说。&/p&&p&我：居然还有这种洗法？&/p&&p&1.哪个品牌不是容量越来越大？&b&数码产品的性能逐年提升这难道不是废话吗？&/b&你怎么不说前年买A9、去年买A10、今年买A11呢？&/p&&p&问题的重点在于：苹果每次都“恰到好处”地砍掉大多数人的最适用版本，其他品牌没人这么做，这跟容量越来越大是两码事。&/p&&p&2.真的是同样价格吗？果6s-，果7-，果8-，你告诉我这叫同样的价格？&/p&&p&&br&&/p&&p&任何以“&b&大容量是趋势&/b&”为理由的说法，都不能解释为什么苹果砍掉了中间的128，&b&却不砍掉更小的64。&/b&&/p&&hr&&p&又有人问我拿出128G是最受欢迎版本的证据。&/p&&p&整个手机市场（旗舰机）的分布也非常明显，果6那个时候32G正是其他品牌的主流，果7时其他品牌的“中配版”渐渐从32变成了64，现在渐渐变成128了。&/p&&p&去年的华为Mate9、小米5/5S都是低配32/&b&中配64&/b&/高配128，三星Note7和一加3更是&b&只有64&/b&；&/p&&p&今年上半年的三星S8、华为P10、小米6、一加5，变成了&b&低配64/高配128&/b&；&/p&&p&刚刚发布的小米mix2、三星Note8，变成了低配64/&b&中配128&/b&/高配256，赌一毛钱即将发布的Mate10也是这个配置。&/p&&p&这证据还不明显吗？市场主流的“中配”从64渐渐过度到128的证据，&b&苹果每次砍掉的都是市场的中间配置。&/b&&/p&&p&还有，苹果选择了64和256，正说明了（苹果认为）最佳值在二者之间，苹果本身就是证据。另外从果6砍掉32G开始就有铺天盖地的抱怨，果7砍掉64G亦如此，难道你们看不到？&/p&&p&&br&&/p&&p&又有人说上面都是我瞎扯，让我&b&用数据说话&/b&，那么好，为了你们一句话，我专门去京东翻了半天记录，如果不信，请自己去查。&/p&&p&iPhone7没有64g版本，京东128g版本的出货量比256g版本高了近百倍，具体数据如下：&/p&&p&&b&128g&/b&版本：黑色7.6万台、金色3.1万台、玫瑰金5.8万台、银色1.8万台、亮黑5.3万台、红色3万台，共计&b&26.6万&/b&台。&/p&&p&&b&256g&/b&版本：黑色700台、金色1000台、玫瑰金800台、银色500台、亮黑0台、红色70台，共计&b&3070&/b&台。&/p&&p&同志们，近百倍是什么概念？&b&要砍也是砍256，怎么也轮不到128&/b&。&/p&&p&该不会又有人说京东不算数，那难道让我去苹果拿财务报表？去TMD你自己去拿吧。&/p&&p&&br&&/p&&p&又有人拿华为P10、一加5、小米Mix2、三星S8的销量来怼我了。&/p&&p&首先，三星S8能插存储卡，用户对机身存储本来就不敏感，它只卖64都没什么可说的，直接略过。&/p&&p&其次，华为P10和一加5，其64g版本销量占总销量的80%左右，证明64g是主流需求，很好，但麻烦问一下，当时苹果正在卖的是哪一款？&b&是iPhone7！它砍掉的不正是64g吗？&/b&&/p&&p&然后，小米Mix2在下半年发布，128g版本销量就已经增加到40%左右，这充分证明了市场需求正在从64向128转变。合理预测128g在未来一年里成为主流配置。&/p&&p&最后，苹果8/8P/X的销售周期和使用周期都比安卓机更长，销售周期大部分就在明年，使用周期在未来两年。综上所述，&b&苹果8/8P/X砍掉的128g，在其销售周期和使用周期内，就是主流配置。&/b&&/p&&p&证明完毕。&/p&&p&&br&&/p&&p&库克都已经钻到钱眼儿里去了，还有人忙着替它洗地，&b&精神股东吗？&/b&&/p&
就是为了钱.jpg沉寂已久的回答突然又多了两千赞…原来有人专门开文说我瞎逼逼，大概突然多的赞全是被那边恶心过来的吧…… 洗的天花乱坠，不辞劳苦图文并茂，仔细一看还是“加量不加价”的老调调，数码产品性能逐年提升这不是废话吗，用得着你来证明？你咋…
&p&这里光讨论技术，看看如何利用现有知识搭建一个人像光效的系统。&/p&&p&&br&&/p&&p&从本质上说，人像光效的输入是RGB+D图像（之后再讨论D怎么来）。通过AI把脸部的光照改成需要的效果。并且带有自然的全局光照效果（GI）。好了，下面就照着这样的输入输出来推测应该如何做这件事情。并不代表苹果会这么做，但你自己可以用这样的方法做个自己的。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8ed58bf219e138ecb7414_b.jpg& data-rawwidth=&2443& data-rawheight=&1265& class=&origin_image zh-lightbox-thumb& width=&2443& data-original=&https://pic1.zhimg.com/v2-8ed58bf219e138ecb7414_r.jpg&&&/figure&&p&&br&&/p&&p&曾经有个笑话，说把大象塞进冰箱，分为三步，&/p&&ol&&li&把冰箱门打开&/li&&li&把大象塞进去&/li&&li&把冰箱门关上&/li&&/ol&&p&这里其实也可以分为三步，&/p&&ol&&li&把人脸和背景分开&/li&&li&把人脸的光照去掉&/li&&li&给人脸加上新的光照，并且带GI&/li&&/ol&&p&&br&&/p&&p&其中，这第一步，把人脸和背景分开。有D的话，是一件非常简单的事情。在深度上做一次segmentation就行了。前景和背景的深度有着重大的区别。这个就不需要深入讨论了。&/p&&p&&br&&/p&&p&把光照去掉，有个术语叫做delighting，得到的结果叫做intrinsic image。输入是拍摄所得的图片或者视频，输出是把albedo和光照分离过的intrinsic image。&/p&&p&这里重点推荐两篇paper。第一篇是&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.cs.sfu.ca/%7Epingtan/Papers/eccv12_intrinsic.pdf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Estimation of Intrinsic Image Sequences from Image+Depth Video&/a&，Kyong Joon Lee, Qi Zhao, Xin Tong, Minmin Gong, Shahram Izadi, Sang Uk Lee, Ping Tan, Stephen Lin，发表在ECCV 2012。&/p&&p&这篇paper做的事情是，通过RGB+D的视频输入，加约束进行分解，得到albedo的序列和光照的序列。因为有了D，可以更好地估计出平面的关系和法线，能得到的信息多余只有RGB的情况。效果好于以前只用RGB输入的效果。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-eb63f527a894d3a83e82_b.jpg& data-rawwidth=&841& data-rawheight=&213& class=&origin_image zh-lightbox-thumb& width=&841& data-original=&https://pic3.zhimg.com/v2-eb63f527a894d3a83e82_r.jpg&&&/figure&&p&第二篇是&a href=&//link.zhihu.com/?target=http%3A//cg.postech.ac.kr/papers/convNetwork.pdf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Intrinsic Image Decomposition using Deep Convolutional Network&/a&，Hyeongseok Son, Seungyong Lee，发表在CVPR 2016。这是上一篇文章的进一步发展。输入也是RGB+D，通过DNN来做约束处理，让albedo和光照更好地分离。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-394aceebb38c0eda8025_b.jpg& data-rawwidth=&582& data-rawheight=&433& class=&origin_image zh-lightbox-thumb& width=&582& data-original=&https://pic2.zhimg.com/v2-394aceebb38c0eda8025_r.jpg&&&/figure&&p&&br&&/p&&p&至此，自然光照可以去掉了。得到了一个带有纹理的3D脸。&/p&&p&&br&&/p&&p&最后一步，加上光照这件事情，可以简单可以复杂。简单的话就用实时渲染常见的光照往上加。这么做能实现局部光照，但不能实现全局光照。对于人像光效这种应用情景来说，这是几乎不可接受的。人对人脸太敏感了，有点错误就看得真真的。&/p&&p&那么需要全局光照的话，最直接的是增加“虚拟”光源，表示反射后的结果。这个方法开销会很大，而且往往需要交互式加光源，不是个自动的过程。第二个就是实现一个真的全局光照算法。这样开销更大，运行时间也是分钟到小时级别的，没法实用。&/p&&p&当然，前面说的这两个方法，最大的缺点是，蹭不到热点！&/p&&p&这里同样要推荐两篇paper，既能做好GI，又能和当前的热点相匹配。&/p&&p&第一篇是&a href=&//link.zhihu.com/?target=http%3A//www.renpr.org/project/ShadeBot/shadebot_new.pdf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Global Illumination with Radiance Regression Functions&/a&，Peiran Ren, Jiaping Wang, Minmin Gong, Stephen Lin, Xin Tong, Baining Guo，发表在SIGGRAPH 2013。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-ef4f4c9d54e401b9f3dbf92e5a0593d9_b.jpg& data-rawwidth=&802& data-rawheight=&802& class=&origin_image zh-lightbox-thumb& width=&802& data-original=&https://pic2.zhimg.com/v2-ef4f4c9d54e401b9f3dbf92e5a0593d9_r.jpg&&&/figure&&p&这篇paper用NN来解渲染方程。给NN训练用的输入是一个场景的信息，比如位置、视角、光源位置等，输出是通过离线渲染器渲染出来的带GI的光照结果。训练后的NN就能用来预测在新的条件下所拥有的光照。换句话说，用AI产生GI。对于人脸这种情况，可以认为是个很有限定性的场景。用集中不同模式的光照效果去训练，得到的NN就能应用于另一张人脸。&/p&&p&&br&&/p&&p&第二篇是&a href=&//link.zhihu.com/?target=http%3A//www.renpr.org/project/CaptureBot/CaptureBot.pdf& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Image Based Relighting Using Neural Networks&/a&，Peiran Ren, Yue Dong, Stephen Lin, Xin Tong, Baining Guo，发表在SIGGRAPH 2015。也是上一篇paper的进一步发展。&/p&&figure&&img src=&https://pic3.zhimg.com/v2-c0e7de5a54aa_b.jpg& data-rawwidth=&802& data-rawheight=&590& class=&origin_image zh-lightbox-thumb& width=&802& data-original=&https://pic3.zhimg.com/v2-c0e7de5a54aa_r.jpg&&&/figure&&p&这paper就更接近现实生活了。通过在可控的光源、摄像机位置下拍摄的一些照片，通过NN建立起light transport matrix，也就是从任意点发射的光，被另一个任意点接收到的强度。有了这个之后，就可以改光源的位置、颜色、亮度等，生成对应条件下的新图像，并且自带GI。&/p&&p&&br&&/p&&p&通过这些技术的组合，要实现一个人像光效系统，就只是时间问题了。&/p&&p&&br&&/p&&p&最后提一下如何得到depth。对于有深度摄像头的设备来说，这是可以直接拿到的。否则，可以通过快速变焦拍摄得到多张图像，通过模糊的关系估计出一个深度来。&/p&
这里光讨论技术，看看如何利用现有知识搭建一个人像光效的系统。 从本质上说，人像光效的输入是RGB+D图像（之后再讨论D怎么来）。通过AI把脸部的光照改成需要的效果。并且带有自然的全局光照效果（GI）。好了，下面就照着这样的输入输出来推测应该如何做这…
&p&谢邀，去年这个时候说了iPhone的人像模式原理。今年我们来说说这个人像光效。&/p&&p&其实这个立体控光模式不是苹果首创的，在很早的时候就有一些photoshop插件能做到这一点。当年听说过的那个具体的名字我已经不记得了，现在搜了一下比如这个：&/p&&p&&a href=&//link.zhihu.com/?target=http%3A//www.portraitprofessional.com/photo_editing_software/lighting/%23& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&PortraitPro:Relighting&/a&&/p&&p&iPhone X做的事情不过是把识别面部特征的这个过程由摄影师手动变成了依靠双摄像头自动识别而已。&/p&&p&&br&&/p&&p&但问题来了，为什么这种插件12年左右就出来了，但完全没有什么存在感呢？原因当然是这种东西有无法避免的缺陷，那就是：&/p&&p&它只能改变&b&面 部&/b&的用光！&/p&&p&换句话说，这些插件对人物的身体，头发，配饰的受光都是无法改变的，更不要说背景了。想象一下你脸上的用光改成了一个标准的伦勃朗光。但头发和身体还是顶光或者逆光，这得多别扭？一看就穿帮了好么！&/p&&p&&br&&/p&&p&所以直到今天，说到PS插件磨皮，大家记起的还是protraiture等那几个。&/p&&p&所以苹果的这个功能，只能说看上去很美。等大家真的开始用的时候就会发现其实局限很大。比如说为了避免身体穿帮，这个功能基本上只能用于大头照。同时对背景的受光情况也有要求。如果不能匹配的话，就是各种尴尬的车祸现场。说到这里我已经不忍直视了……&/p&&p&因此我把这个功能称之为『补光』而不是『控光』，稍稍填充一点细节可以，太明显反而过犹不及。&/p&&p&&br&&/p&&p&当然，苹果自己也不是没有意识到这一点。因此他们推出了一个投机取巧的方法：你不是知道背景会穿帮么？那我就干脆不要背景！&/p&&p&于是他们把背景全部抠掉，只留下头，搞了一个单光束效果的stage light模式……&/p&&p&应该说这么干还是有点意思的，但使用的时候完全没有达到预期的效果。因为这么搞对抠图的要求更高了，我到现在为止的自拍，没有一张抠的完美的，都会露出几条几个像素的边缘，显得非常的可笑！（也许我这造型天生对这个抠图不太友好，如果是长发披肩的可能穿帮会少一些。）&/p&&p&&br&&/p&&p&总之一句话，摄影是用光的艺术，任何时候，任何器材，任何主题，用好光线都是一张好照片的重要前提。不要以为有了器材，就可以不讲究用光了。&/p&
谢邀，去年这个时候说了iPhone的人像模式原理。今年我们来说说这个人像光效。其实这个立体控光模式不是苹果首创的，在很早的时候就有一些photoshop插件能做到这一点。当年听说过的那个具体的名字我已经不记得了，现在搜了一下比如这个：
&blockquote&作者：&a href=&//link.zhihu.com/?target=https%3A//sspai.com/user/731139& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Minja&/a&&br&原文：&a href=&//link.zhihu.com/?target=https%3A//sspai.com/post/40899& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&新 iPhone 推出的人像光效功能让人惊叹，这都是机器学习的功劳&/a&&/blockquote&&p&&br&&/p&&p&公众的印象里，苹果好像在机器学习上动作很慢。AlphaGo 以「阿法狗」的聪明可爱形象迅速蹿红，而反观苹果，除了虚拟助手 Siri，似乎别无动静。&/p&&p&事实上，苹果一直在将机器学习研究成果投入实际应用，去年 iPhone 7 Plus 独占的人像模式就是一个经典运用。而在今年的发布会上，苹果又推出了一个新的摄像功能——「人像光效」，它可以在使用人像模式时生成各种影棚级的打光效果，为你拍出更漂亮的人像照片。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-839e6f3e03b895b44ceb99eabeb05f64_b.png& data-rawwidth=&753& data-rawheight=&438& class=&origin_image zh-lightbox-thumb& width=&753& data-original=&https://pic1.zhimg.com/v2-839e6f3e03b895b44ceb99eabeb05f64_r.png&&&/figure&&p&能够实现「人像光效」模式，除了 iPhone 8 Plus 和 iPhone X 搭载了更强大的双摄像头之外，还要归功于内置了支持神经网络引擎的 A11 仿生处理器，它为机器学习提供了更好的硬件基础。&/p&&h2&人像光效模式详解&/h2&&h2&使用&/h2&&p&如果你学过摄影，一定会对摄影棚内复杂的布光印象深刻；即使你是个门外汉，也应该见过路边婚纱摄影所用的反光板。这些工具可以人为改变光线，让照片呈现摄影师预期的效果。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-8e03fda2b11_b.png& data-rawwidth=&1120& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&1120& data-original=&https://pic2.zhimg.com/v2-8e03fda2b11_r.png&&&/figure&&p&但是手机只有一组闪光灯，硬件上必然和专业的布光设备不能相提并论。为了获得相近的人像摄影效果，苹果用机器学习来弥补硬件不足。&b&但是这一功能并非完全人工创作光线，而更像在原有基础上为脸部补光，获得更理想的效果。&/b&&/p&&p&目前仅有 iPhone 8 Plus 和 iPhone X 支持人像光效，并且处于测试阶段。使用这一功能的方法有两种，用户可以在相机模式下左滑进入 Portrait （人像模式），于取景框下半部分直接选择所需光效，效果会实时显示在取景界面；或者在以人像模式拍摄照片之后，在系统相册中进入编辑模式选择不同光效，即可像添加滤镜一样方便地为人物面部后期「打光」。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-cffcc2aaa0bc_b.png& data-rawwidth=&964& data-rawheight=&709& class=&origin_image zh-lightbox-thumb& width=&964& data-original=&https://pic1.zhimg.com/v2-cffcc2aaa0bc_r.png&&&/figure&&p&左为拍摄界面，右为编辑界面，皆可使用人像光效&/p&&p&人像光效支持自然光、摄影室灯光、轮廓光、舞台光以及单色舞台光等几种光效。&/p&&figure&&img src=&https://pic1.zhimg.com/v2-8dade4e5c2ed2f73d234_b.jpg& data-rawwidth=&1000& data-rawheight=&313& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&https://pic1.zhimg.com/v2-8dade4e5c2ed2f73d234_r.jpg&&&/figure&&p&图片来自 Apple 官网&/p&&p&就目前官方样张来看，模拟舞台光的效果最好，具有伦勃朗光的艺术效果。 其他模式效果不明显，只怪官方样张向来清晰生动得不可思议，没能看出对比来。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-89a5b70ed28f2a348019_b.png& data-rawwidth=&853& data-rawheight=&636& class=&origin_image zh-lightbox-thumb& width=&853& data-original=&https://pic2.zhimg.com/v2-89a5b70ed28f2a348019_r.png&&&/figure&&p&不过，看见舞台光效果，我首先想到的应用场景居然是……无需专门背景，轻松拍证件照。&/p&&figure&&img src=&https://pic2.zhimg.com/v2-75a847d014a682feba81d1_b.png& data-rawwidth=&595& data-rawheight=&519& class=&origin_image zh-lightbox-thumb& width=&595& data-original=&https://pic2.zhimg.com/v2-75a847d014a682feba81d1_r.png&&&/figure&&p&或许这种场面要变成历史了&/p&&h2&原理&/h2&&p&凭借 A11 仿生芯片和全新图像信号处理器，人像光效利用面部识别技术和面部深度图，可以为拍摄对象添加浓重阴影、聚光照明等光影效果，仿佛人工为其打光。&/p&&p&从发布会上的介绍看，人像光效通过「两步走」来实现软件打光：&/p&&ul&&li&为人物脸部进行 3D 建模&/li&&li&套用预设光影模板，模拟打光效果&/li&&/ul&&figure&&img src=&https://pic1.zhimg.com/v2-4ff52de5a204d24181a9bc_b.jpg& data-rawwidth=&403& data-rawheight=&289& class=&content_image& width=&403&&&/figure&&h2&局限&/h2&&p&正如其名，人像光效也仅仅用于人像摄影，你不能给在别的场景下自由「打光」。过于杂乱的背景、糟糕的光线，也会让人像光效打折扣。真正使用的时候，还是得细心采光，不可抱着一切交给机器学习的心态，幻想废片变大片。&/p&&h2&机器学习对摄影的影响&/h2&&p&其实早在人像光效之前，机器学习（或说人工智能）就运用在了摄影与后期上。也许我们觉得这些技术太「bug」了，违背了摄影的初衷，把艺术的「记录」变成了工业化的「生产」。别忘了 Photoshop 也曾给人「造假」的印象，时间则证明了适当后期是必要的。&/p&&h2&人像模式&/h2&&p&曾经被 iPhone 7 Plus 独占的人像模式，也是通过机器学习呈现背景虚化效果。两颗焦距与光圈均不相同的镜头，各司其职拍摄下远处背景与近处人像，再交由处理器，用机器学习算法合并为一张图像。&/p&&p&想在寸土寸金的智能手机实现背景虚化的人像模式，依靠光学组件不太现实，手机实在塞不下那么大的镜头。苹果&b&采用软件算法来解决硬件问题&/b&，虽然效果并不完