15 ms·
Curvature consistency in Apple hardware and software products (2017)
- progbits 4y agoIn-depth explanation of curve continuity without the fanboying: https://youtu.be/jvPPXbo87ds https://youtu.be/jvPPXbo87ds
- milosmns 4y agoEven though I knew this, the video is so good that I watched the whole thing in a single sitting. Thanks for sharing.
- muro 4y agoI wish they would put in at least some basic effort into smoothing that sharp edge where wrists often rest when using the MacBook, rather than just the curvature of the corner. Any cheap laptop is nicer to my wrists than a MacBook.
- xnx 4y agoThe front edge of the Dell XPS 17 is not just square, but distinctly sharp. It's terrible.
- muro 4y agoAlso: if they could create a gap between the screen and the keys, so the screen is not always smudged after closing the MacBook. Aka, if you use your MacBook as a laptop, the screen will be dirty even if you are careful to never mistakenly touch it.
- StringyBob 4y agoFor at least one gen of MacBooks (maybe the ill-fated 2016 MacBook Pros?), this was actually a design fault. In the battle for thinness there was not enough separation between screen and keys when closed, leading to damage to screen coating over time. Newer versions had a slightly larger rubber lip on the screen to increase the separation - as I noticed after getting a replacement for a damaged model
- GrayShade 4y agoThis can happen on other laptops, especially to cat owners.
- muro 4y agoI now have the M1 MacBook Pro and it still has that issue.
- CSSer 4y agoOn the brightside, if you ignore it until you can’t see your screen properly it’s like the heavens have opened once you finish cleaning it.
- solarkraft 4y agoI had an M1 pro and have an M1 air, both with screen protectors (that are matte but quick to show smudges) and haven't noticed this.
- kalleboo 4y agoI have the M1 MacBook Pro and I don't have this issue (I also didn't have it on my 2019, 2017, 2012, etc MacBooks Pro). Do you put your laptop in a bag where it gets squished between books and other stuff to cause the display to be pushed in?
- djaychela 4y agoI always put something between the screen and the keys when I close it - not only finger grease, but eventually you get damage on the screen from grit on the keys or the hard edge by the track pad. A sheet of A4 paper was the thing for a while, but then I got some of the material you get in new laptops and use that now (it's made from recycled PET, and black). Bad design, imo.
- tinus_hn 4y agoDo the keys also scratch the screen like on a Dell or HP?
- kitsunesoba 4y agoI haven't had a much trouble with this on my MacBooks, but based on observation (relatively small sample size, so take with grain of salt) this is exacerbated by tightly packing them in e.g. a bag with books/tablets/etc or stacking things on them. As long as I've avoided those situations I don't get key tracks.
- eternityforest 4y agoApple has beautiful squircle curves the rest of us can't have unless we want expensive CAD tools and extra JS files, but they also have plenty of sharp transitions. Look at their cables, that have no strain relief, being a bad influence on every other cable for a decade. It's basically just Bauhaus design but with a few nice soft features, it's gonna be a bit uncomfortable, it's gonna be expensive, it might compromise functionality, all to create a sense of precision, authenticity, and high-endness.
- crazygringo 4y agoWhat are you talking about, every Apple USB and Lightning cable I've ever had has had strain relief on both ends. There's the main plug in a plastic housing, and then there's an extra-thick rubber part about a centimeter long which is the strain relief wrapped around the cable, and then the rest of the cable itself. Clearly visible in any product photograph close-up.
- pja 4y agoYes & it doesn’t work very well. Or at least it didn‘t, Apple has been notorious for sacrificing good strain relief on their cables in pursuit of aesthetics for years. Possibly things have improved now that Ive has left, but there was a period a few years ago when everyone I knew with a Macbook had wrapped the power cable in electrical tape because the cable housing had failed just above the (useless) strain relief sleeve you describe.
- Gigachad 4y agoI think it was less the strain relief and more the rubber they used. It would go gummy and fall apart after a few years. I absolutely remember around 2013 everyones MacBook charger would fail like this. But they have changed the design a lot since then so I no longer think this is an issue. The brick is now usb c so you can swap the cable without needing an expensive brick, and the MagSafe cables they now include are braided instead of rubber.
- 4y ago
- joezydeco 4y agoBut then you would have a rounded surface matched up with a sharp one (the top of the display) when you close the lid and that wouldn't look sexy at all. Two rounded edges would be even worse.
- nomel 4y agoThe marks in my wrists look worse, to me.
- aflam 4y agoLast year I wanted to have a table custom built using those shapes. It's easy with CNC: https://shapescience.xyz/blog/creating-a-super-ellipsis-table/ https://shapescience.xyz/blog/creating-a-super-ellipsis-tabl...
- CSSer 4y agoVery cool article! Thanks for sharing. Is numpy just global in Python now? I see it everywhere, and I eventually sound it out. Yet I never fail to have a few moments where I go, “Wait, what is ‘np’? Oh, yeah… Numpy.” And I always feel like just listing it as an import in the snippet would’ve solved it.
- tonyarkles 4y agoJust a “standard” convention. I’ve been doing a bunch of analysis work lately and almost all of the scripts start with something like: import numpy as np import pandas as pd import seaborn as sns import sympy as sp
- dagmx 4y ago> It’s unlikely you can do it at home… I think you could if you had a small bench top cnc or laser cutter. You’d have to split up the DXF into pieces that fit on your bed, but you’d be able to make a template by joining the parts together. Then rough cut your workpiece to the template, followed by a flush bit router.
- atoav 4y agoThe curvature is not unique to apple though. This is widely used in car manufacturing for example. Turns out not having a hard transition between no curvature (straight surface) and some kind of radius (so a curvature of 1/r) looks like shit on very reflective surfaces, because a perfect flat mirror suddenly transitions into a stretched or squashed one. So you can go and make those transitions flawless by making sure the curvature combs transition into each other as well (basically a set of spaced out lines which you draw perpendicular to the line in question where the magnitude equals the curvature). If the curvature combs meet at the transition, the transition looks okay. If the curvature combs are tangential to each other it looks better. You can also add a second order curvature comb to the first one and make sure these connect as well etc.
- CharlesW 4y agoFor anyone interested, a history of the "squircle": https://www.johndcook.com/blog/2019/04/02/history-of-the-term-squircle/ https://www.johndcook.com/blog/2019/04/02/history-of-the-ter...
- fmajid 4y agoPierre Bézier, he of the eponymous curves, worked for French car maker Renault for decades.
- Terretta 4y ago> So you can go and make those transitions flawless by making sure the curvature combs transition into each other as well (basically a set of spaced out lines which you draw perpendicular to the line in question where the magnitude equals the curvature). Would this be like the illustrations in the article labled "curvature comb showing tangency" and "cuvature comb showing curvature continuity"?
- dang 4y agoOk, we've taken uniqueness out of the title above. (Submitted title was "Apple's Unique Device Curvature". I assume that rewrite was intended to replace the linkbaitiness of the article title, which is in keeping with the site guidelines: https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html)
- ginko 4y agoThe squircle was actually Nokia's design language they used for Meego[1]. Back then Apple just used basic squares with rounded edges, the "unique" curverture mentioned here happened later. [1] https://interuserface.net/2011/06/own-a-shape/ https://interuserface.net/2011/06/own-a-shape/
- scotty79 4y agoMore on smoothness of the curves https://www.youtube.com/watch?v=jvPPXbo87ds https://www.youtube.com/watch?v=jvPPXbo87ds As seen on HN this month.
- AceJohnny2 4y agoAnother upvote for Freya Holmér's amazing video "The Continuity of Splines". She covers the insightful "reflection test" around the 28:05 mark: https://youtu.be/jvPPXbo87ds?t=1685 https://youtu.be/jvPPXbo87ds?t=1685 and actual "curvature combs" at 32:26. Finally, she covers the continuity of curvature combs that B-Splines exhibit around the 54:00 mark: https://youtu.be/jvPPXbo87ds?t=3240 https://youtu.be/jvPPXbo87ds?t=3240
- SSchick 4y agoVery relevant https://www.youtube.com/watch?v=jvPPXbo87ds https://www.youtube.com/watch?v=jvPPXbo87ds Probably use BSplines
- tedd4u 4y agoAFAIK Alias (which the article say is in use at Apple) uses non-rational uniform B-splines (or NURBS). Covered at 1:02:35 in the awesome video you linked.
- superzamp 4y agoI can finally put some words on this. Tangentially (no pun intended) in CSS, the poor rendering you get out of an ambitiously border-radius'ed button has been driving me mad for years; time to get down the rabbit hole to see how to replicate that look on the web.
- CharlesW 4y agoThis looks like a good place to start… App: https://squircley.app/ https://squircley.app/ Code: https://dev.to/georgedoescode/codepen-soften-up-your-designs-with-a-squircle-3nd3 https://dev.to/georgedoescode/codepen-soften-up-your-designs...
- metadat 4y agoI had the exact same thought: How to do this in CSS? Please follow-up on this thread with any discoveries or learnings, would be interesting and cool to learn how to replicate the nice soft curve for web assets. Depending on how many different semi-reasonable approaches exist, this subject and analysis would also make for a compelling and blog article. Edit: Thank you Charles - wow you're so quick to have unearthed and replied with squircle resources in the time it took for me to compose the three sentences above. p.s. CharlesW: thanks for your helpful and informative comments in general, I consistently look forward to reading your comments whenever I see one. Cheers and happy holidays!
- CharlesW 4y agoI really appreciate the kind words. Happy holidays to you and yours!
- kitsunesoba 4y agoIt's not CSS, but for cases where it makes sense to export assets (e.g. SVGs or PNGs) Sketch has squircles as an option for corner curvature on roundrects, calling it "smooth corners" (v.s. "round corners"). As far as I can see Figma does not offer this, but I am not well versed in Figma so the option may just be hiding in some obscure panel.
- davidbarker 4y ago
- nequo 4y agoThe curvature combs are confusing to me. Is this equivalent to saying that Apple’s rounded corners have a continuous second derivative while naïve rounded corners only have a continuous first derivative but a discontinuous second derivative? Or am I misunderstanding this?
- amelius 4y agoIsn't this sort of thing common in the automotive industry?
- deleted 4y ago[deleted]
- toiletfuneral 4y ago[dead]
- nine_k 4y agoIt's very common on railways. You don't want a train to suddenly experience a sideways force as it enters a curve. So the 2nd derivative of the position, acceleration, should not instantly go from 0 to a constant, instead, it should grow smoothly, like pictured in TFA. So you want a non-zero 3rd derivative, and possibly even a non-zero 4th derivative. Cubic splines of course give you a nice 3rd derivative. In fact, you can't make a perfect circle using cubic splines, because of that. Draw your device's shape in Illustrator or Inkscape, and you likely make it Apple-like :)
- pmahoney 4y agoSee also "Why roller coaster loops aren’t circular anymore" https://news.ycombinator.com/item?id=32005421 https://news.ycombinator.com/item?id=32005421
- legosexmagic 4y agothats pretty much it yes. the reason they dont just say 2nd derivative is that the derivative isnt a geometry property. you can have two curves with the same shape but different derivatives. curvature only depends on the shape of the object.
- ryandrake 4y agoI guess I have really bad eyes but I can’t tell the difference at all. They both look like rounded corners to me. I don’t think the aesthetic effect is that pronounced. I’d like to see the author do a blind taste test and be able to identify this magical “curvature comb” without seeing the brands.
- CharlesW 4y agoOut of curiosity, are you really not able to tell which is which in this unlabeled image? https://imgur.com/a/xhCZgds https://imgur.com/a/xhCZgds
- noodlesUK 4y agoI think it’s definitely something that’s visible in 3d on a somewhat reflective surface, but it’s definitely harder to tell projected top down in 2d for me. edit: it’s definitely subtly noticeable in the image posted by sibling
- hbrn 4y ago> Apple doesn’t have the patent on this. But they do: D558,757 and D670,286. Don't people remember Apple v. Samsung case? https://patents.google.com/patent/USD558757S1/en https://patents.google.com/patent/USD558757S1/en https://patents.google.com/patent/USD670286S1/en https://patents.google.com/patent/USD670286S1/en
- robertoandred 4y agoYour links explicitly refer to the complete designs of entire devices, not a kind of curve.
- dagmx 4y agoAfaik those patents don’t describe continuous curvature, but just general curved bodies. Apple’s use of continuous curvature in iPhones came around iOS 7 iirc. I might be mistaken but I think they’re subtly but consequentially different subjects.
- baybal2 4y ago[dead]
- whywhywhywhy 4y agoThis is all very standard stuff in product design. It’s more just a surprise to UI designers because 2D design tools are very poor and don’t include superellipse as an option.
- zeroimpl 4y agoI recall this being annoying for me as an app developer trying to perfect the app icon. You upload the app icon as a square image, and Apple applies the round corners when they distribute it. I wanted to preview how it’d look on the App Store (back when every app submission would take weeks to get approved), but found the rounded corners from GIMP just didn’t match. At least they had stopped applying gloss effects by then which totally ruined the colors.
- c-smile 4y agoIsn't that because those corners are rendered as Bezier curves that are H/W accelerated? Usually, small radii are emulated by beziers: https://spencermortensen.com/articles/bezier-circle/ https://spencermortensen.com/articles/bezier-circle/
- nickpinkston 4y agoThe fun hardware aspects of this are how they choose to form curves for the aluminum MacBooks using cold forging to get create the broad curves of the device and then post-machining the keyboard, chamfered (angled) edges, and form tapping the screw boss threads - ie pressing not cutting the threads into the material. Variable radii curves take forever to machine and must be polished, so that's only done on the cold forging die (and takes forever to do), so the die can then impart the geometry on the aluminum blank in only seconds in the forging press. This is also how high-end aluminum car wheels are made with all their complex curvature. Funny enough, they don't cover the forging in this video that describes most of the rest of the process, so I think Apple must've not wanted to talk about it, as least back then. https://www.youtube.com/watch?v=sxbiIpXZfG8 https://www.youtube.com/watch?v=sxbiIpXZfG8
- bmitc 4y agoAnd yet the front part of MacBooks, where you lift the lid, is so sharp and pointy it can scratch you.
- virtualritz 4y agoThis is standard knowledge in product design. Most people doing font design also have a keen understanding of this. Even if often more intuitively that through maths. That said, in 2D you can get away with tangent continuity (C1) and stuff looks good. I.e. while people may be able to tell the difference between a square with corners that have been rounded using quadratic arcs and one that uses cubic arcs or is a superellipse of some sort, these are all still looking fine. In 3D, outlines will also look ok but a soon as you have shading anything that is not curvature continuous (C2) will stick out sorely. The term most often used for the visual artifact that ensures is 'broken highlights' (see the photos in the article). For example, if you write displacement or bump shaders and you transition between ('smooth') functions and want to maintain a smooth surface appearance, smoothstep()[0] is not enough. It is only C1 continuous. You need a higher order variant, e.g. Ken Perlin's own improved version that is C2 continuous[1]. CAD software usually has zebra strip analysis shading which makes these things stick out so they can be fixed by rebuilding/retopologizing surfaces. [0] https://en.m.wikipedia.org/wiki/Smoothstep https://en.m.wikipedia.org/wiki/Smoothstep [1] https://en.m.wikipedia.org/wiki/Smoothstep#Variants https://en.m.wikipedia.org/wiki/Smoothstep#Variants
- yummypaint 4y agoAll major roads do this too. If the transition from a straight line to moving on a circular path happened instantly, then drivers would have to instantly turn their steering wheels to the correct angle for the turn. Very very occasionally i'll encounter a turn with that discontinuity and it feels really unsafe and jarring. I wouldn't be surprised if some residential roads were intentionally designed this way to help limit speed.
- ajuc 4y agoIf I have to choose this or good thermals...
- deleted 4y ago[deleted]
- dang 4y agoRelated: Apple’s Icons Have That Shape for a Very Good Reason - https://news.ycombinator.com/item?id=16294455 https://news.ycombinator.com/item?id=16294455 - Feb 2018 (5 comments) Apple’s Icons Have That Shape for a Very Good Reason - https://news.ycombinator.com/item?id=13484728 https://news.ycombinator.com/item?id=13484728 - Jan 2017 (5 comments)
- rowanG077 4y agoI have never liked this roundness in any product. It somehow reminds of children toys. Apple has them. Most cars have them. It just give this supreme baby toy vibe to me. I never knew what it's called but this article finally explained it.
- teekert 4y agoSo who else is sometimes confused with the new strange curves on the notifications? For some time now I often think they are a stack when they ar not. It’s because of the shape, not sure how to put this in words but the lower part of the curves is way more stretched out than than the vertical. It’s made worse because of my dark mode and dark bg probably.
- deleted 4y ago[deleted]